วิธีสร้างโพสต์บล็อกที่กำหนดเองด้วยตัวสร้างลูปของ Divi 5

แบรนด์ของคุณไม่ควรถูก จำกัด ด้วยรูปแบบคงที่ดังนั้นเราจึงมุ่งมั่นที่จะให้ความยืดหยุ่นอย่างเต็มที่เนื่องจาก Divi 5 ยังคงพัฒนาต่อไป ผู้สร้างลูปใหม่ของ Divi 5 เป็นขั้นตอนที่ยอดเยี่ยมในทิศทางนั้น มันช่วยให้คุณออกแบบรายการหนึ่งครั้งและวนเข้าเป็นกริดหรือรายการแบบไดนามิก

ในบทช่วยสอนนี้เราจะแสดงวิธีการตั้งค่าโพสต์บล็อกที่กำหนดเอง เราจะออกแบบรายชื่อเชื่อมต่อฟิลด์ไดนามิกตั้งค่าแบบสอบถามและปรับแต่งเค้าโครงสำหรับกริดหรือรายการที่สะอาด ไปกันเถอะ!

ผู้สร้างลูปของ Divi 5 คืออะไร

ด้วยตัวสร้างลูปของ Divi 5 คุณออกแบบเค้าโครง“ การ์ด” เดียวในตัวสร้างภาพโดยใช้โมดูล Divi ให้มากที่สุดเท่าที่คุณต้องการจากนั้น Divi ลูปสำหรับแต่ละรายการที่คุณเลือกที่จะแสดง

สมัครสมาชิกช่อง YouTube ของเรา

เปิดใช้งานองค์ประกอบลูปในคอลัมน์ตั้งค่าการสืบค้น (โพสต์, ประเภทโพสต์ที่กำหนดเองเช่นโครงการคำศัพท์หรือผู้ใช้) และแผนที่ฟิลด์ไดนามิกเช่นชื่อรูปภาพที่โดดเด่นหมวดหมู่ฟิลด์ที่กำหนดเองและปุ่ม คุณสามารถจัดลำดับองค์ประกอบใหม่การควบคุมระยะห่างและปล่อยให้ทุกอย่างสืบทอดสไตล์โลกของคุณ

ผลลัพธ์คือรายการที่ตอบสนองและนำกลับมาใช้ใหม่ได้ซึ่งตรงกับระบบของคุณโดยไม่จำเป็นต้องใช้ปลั๊กอินพิเศษหรือรหัสที่กำหนดเอง

วิธีการสร้างลูปทำงานอย่างไร

คุณสามารถเปิดโหมดลูปได้ในทุกส่วนแถวแถวคอลัมน์หรือโมดูลโดยการเปิดแท็บ เนื้อหา และเปิดใช้ งานลูป

จากจุดนั้น Divi จะทำซ้ำองค์ประกอบซ้ำสำหรับแต่ละโพสต์ที่ตรงกับการตั้งค่าของคุณ

นี่คือที่ที่การควบคุมที่แท้จริงเข้ามาในการตั้งค่าลูปคุณสามารถ:

• ประเภทการสืบค้น: เลือกระหว่างการสืบค้นโพสต์พื้นฐานหรือการสืบค้นเมตา, การกรองตามหมวดหมู่, แท็ก, ฟิลด์ที่กำหนดเองหรือข้อมูลเมตาอื่น ๆ
• ประเภทโพสต์: เลือกประเภทของเนื้อหาที่จะแสดงตั้งแต่โพสต์บล็อกไปยังผลิตภัณฑ์ไปจนถึงประเภทโพสต์ที่กำหนดเอง
• รวมโพสต์ที่มีคำศัพท์เฉพาะ: แสดงเฉพาะโพสต์ที่ตรงกับหมวดหมู่บางประเภทแท็กหรือเงื่อนไขอนุกรมวิธานอื่น ๆ
• ไม่รวมโพสต์ที่มีข้อกำหนดเฉพาะ: ลบโพสต์ที่ตรงกับหมวดหมู่ที่เลือกแท็กหรือข้อกำหนด
• รวมถึงโพสต์เฉพาะ: เลือกโพสต์แต่ละโพสต์เพื่อรวม
• ไม่รวมโพสต์เฉพาะ: ซ่อนโพสต์แต่ละโพสต์ที่คุณไม่ต้องการในลูป
• Meta Query: เพิ่มเงื่อนไขฟิลด์ที่กำหนดเองเพื่อควบคุมสิ่งที่ปรากฏ
• สั่งซื้อโดย: เลือกว่าผลลัพธ์จะถูกจัดเรียงตามวันที่ชื่อเรื่องลำดับเมนูหรือค่าฟิลด์ที่กำหนดเอง
• คำสั่งซื้อ: แสดงผลลัพธ์ในคำสั่งซื้อจากน้อยไปมากหรือมากไปน้อย
• โพสต์ต่อหน้า: ตัดสินใจว่าโพสต์แสดงกี่ครั้งก่อนการปนเปื้อน
• โพสต์ออฟเซ็ต: ข้ามจำนวนโพสต์ที่แน่นอนตั้งแต่เริ่มต้นมีประโยชน์สำหรับการหลีกเลี่ยงการทำซ้ำกับส่วนที่โดดเด่น
• ละเว้นโพสต์เหนียว: เลือกว่าโพสต์เหนียวได้รับความสำคัญหรือได้รับการปฏิบัติเหมือนโพสต์ปกติ

เมื่อคุณกำหนดคิวรีของคุณแล้ว Divi จะเติมเนื้อหาโพสต์แต่ละรายการโดยอัตโนมัติด้วยเนื้อหาที่เหมาะสมในขณะที่รักษาเค้าโครงและการจัดแต่งทรงผมเหมือนกัน คุณมุ่งเน้นไปที่รูปลักษณ์ของการ์ดและ Divi จัดการกับประชากรและการทำซ้ำ ด้วยทุกสิ่งที่ควบคุมจากแผงเดียวการตั้งค่าบางอย่างล้วนเป็นสิ่งที่ต้องทำเพื่อให้รายการบล็อกของคุณอัปเดตโดยไม่ต้องแก้ไขด้วยตนเอง

เรียนรู้ทุกอย่างเกี่ยวกับผู้สร้างลูปของ Divi 5

การสร้างลูปโพสต์บล็อกที่กำหนดเองด้วย Divi 5

การสร้างลูปโพสต์บล็อกที่กำหนดเองพร้อมตัวสร้างลูปมีสองส่วน ก่อนอื่นคุณออกแบบเค้าโครงการ์ดโพสต์โดยเลือกว่าเนื้อหาใดจะปรากฏขึ้นและดูอย่างไร จากนั้นคุณวางการออกแบบภายในลูปดังนั้น Divi จะทำซ้ำโดยอัตโนมัติสำหรับทุกโพสต์ที่คุณต้องการแสดง

เราจะผ่านไปทีละขั้นตอนเริ่มต้นด้วยเค้าโครงการ์ดแล้วตั้งค่าลูป

ก่อนเริ่ม

หากคุณกำลังย้ายจากโมดูลบล็อกไปยัง Loop Builder และมีหน้ารายชื่อบล็อกอยู่แล้วคุณสามารถข้ามเพื่อสร้างเค้าโครงลูปของคุณ ถ้าไม่นี่คือการตั้งค่าอย่างรวดเร็ว:

1. เพิ่มหน้าบล็อก

จาก Dashboard WordPress ของคุณไปที่ หน้า> เพิ่มใหม่ ชื่อมัน“ บล็อก” และเผยแพร่

หน้านี้จะเป็นศูนย์กลางหลักสำหรับโพสต์ของคุณ

2. ตั้งค่าหน้าบล็อกของคุณในการตั้งค่า WordPress

ใน การตั้งค่า> การอ่าน ให้เลือก หน้าคงที่ กำหนดหน้าแรกของคุณให้กับ หน้าแรก และหน้า บล็อก ใหม่ของคุณไปที่หน้าโพสต์

สิ่งนี้จำเป็นก็ต่อเมื่อคุณใช้หน้าโฮมเพจและหน้าบล็อกแยกต่างหาก

3. สร้างเทมเพลตตัวสร้างธีม

ถัดไปคุณจะสร้างเทมเพลตใหม่สำหรับหน้ารายชื่อบล็อกของคุณ หากคุณมีอยู่แล้วคุณสามารถปรับแต่งได้ ตรวจสอบให้แน่ใจว่าคุณใช้เวอร์ชัน Divi 5 ล่าสุดเพื่อเข้าถึงตัวสร้างลูป

ใน Divi> Theme Builder คลิก เพิ่มเทมเพลตใหม่> สร้างเทมเพลตใหม่

กำหนดให้กับหน้า บล็อก ของคุณและคลิก สร้างเทมเพลต

ในการออกแบบหน้ารายชื่อโพสต์บล็อกของคุณคลิก เพิ่มตัวเอง> สร้างร่างกายที่กำหนดเอง

ตอนนี้คุณจะเข้าสู่ Divi Builder ซึ่งเราจะเริ่มสร้างเค้าโครงลูป

1. นำเข้าเค้าโครง

การเริ่มต้นด้วยเลย์เอาต์สามารถประหยัดเวลาได้มากและช่วยให้คุณออกแบบการออกแบบที่สอดคล้องกันตั้งแต่ต้น สำหรับบทช่วยสอนนี้ฉันใช้เค้าโครงหน้าบล็อกเอเจนซี่การตลาดสำหรับการสร้างแบรนด์

คุณสามารถเลือกแบบเดียวกันหรือนำเข้าเค้าโครงใด ๆ ที่ให้ฐานที่ดีในการทำงานจาก เมื่ออยู่ในเทมเพลตของคุณคุณจะมีโครงสร้างสำเร็จรูปที่คุณสามารถปรับให้เข้ากับความต้องการของคุณแทนที่จะสร้างทุกอย่างตั้งแต่เริ่มต้น

2. การออกแบบบัตรโพสต์บล็อกหนึ่งใบ

นี่คือที่ความยืดหยุ่นของ Loop Builder ผ่านมาอย่างแท้จริง แทนที่จะถูกล็อคเข้าไปในเค้าโครงคงที่ของโมดูลบล็อกคุณตัดสินใจว่าอะไรจะเกิดขึ้นกับการ์ดโพสต์ของคุณและวิธีการจัดเรียง

เพิ่มส่วนใหม่ลงในเทมเพลตของคุณ คุณสามารถเลือกจากโครงสร้างที่ออกแบบไว้ล่วงหน้าหรือสร้างของคุณเองโดยใช้ตัวเลือกคอลัมน์เดียว

สำหรับตัวอย่างนี้ลองเลือกส่วนโครงสร้าง แถวสามคอลัมน์

ในคอลัมน์แรกเราจะสร้างการ์ดโพสต์ของเรา เราจะใช้ กลุ่มโมดูล เพื่อเก็บองค์ประกอบทั้งหมด

จากนั้นเพิ่มโมดูลรูปภาพสำหรับภาพที่โดดเด่นโมดูลหัวเรื่องสำหรับชื่อโพสต์และโมดูลข้อความสำหรับข้อความที่ตัดตอนมา นอกจากนี้เราจะเพิ่มข้อมูลเมตาและปุ่ม อ่านเพิ่มเติม เพื่อให้ผู้เยี่ยมชมสามารถคลิกผ่านไปยังโพสต์แบบเต็ม

เมื่อโครงสร้างพื้นฐานอยู่ที่นั่นปรับแต่งการออกแบบของการ์ดเพื่อให้เหมาะกับแบรนด์ของคุณ ปรับแต่งสีแบบอักษรระยะห่างและรายละเอียดภาพที่เป็นเอกลักษณ์ที่ทำให้เป็นของคุณ

3. เปิดใช้งานการห่อแถว

เพื่อให้แน่ใจว่าการ์ดของคุณจะแสดงแถวอย่างเรียบร้อยในขนาดหน้าจอที่แตกต่างกันคุณจะต้องเปิดใช้งาน การห่อแบบยืดหยุ่น เลือกแถวหลักและเปิดแท็บ การออกแบบ

ไปที่ เค้าโครง ตรวจสอบให้แน่ใจว่า รูปแบบเลย์เอาต์ ถูกตั้งค่าเป็น Flex

เปิดใช้ งานการห่อเลย์เอาต์ เพื่อให้การ์ดสามารถย้ายไปยังบรรทัดใหม่เมื่อจำเป็นจากนั้นเลือก การจัดตำแหน่งการห่อหุ้ม ที่เหมาะสมกับการออกแบบของคุณมากที่สุด

4. เปิดลูป

ตอนนี้มาถึงขั้นตอนที่ทำให้ทั้งหมดเป็นไปโดยอัตโนมัติ เลือก คอลัมน์ ของการ์ด

จากนั้นเปิดตัวเลือก ลูป ภายใต้แท็บ เนื้อหา เมื่อเปิดใช้งานลูปแล้ว Divi จะทำซ้ำการออกแบบการ์ดของคุณสำหรับแต่ละโพสต์ที่ตรงกับการตั้งค่าแบบสอบถามของคุณ

สำหรับเค้าโครงนี้ฉันตั้งค่าแล้ว:

• ประเภทโพสต์: โพสต์
• โพสต์ต่อหน้า: 10
• สั่งซื้อโดย: วันที่
• คำสั่งซื้อ: ลดลง (ใหม่ล่าสุดก่อน)
• โพสต์ออฟเซ็ต: 0 (แสดงทั้งหมดเริ่มต้นจากล่าสุด)
• ไม่สนใจโพสต์เหนียว: ใช่

การปรับขนาดเล็กเหล่านี้ตรวจสอบให้แน่ใจว่ากริดแสดงโพสต์ที่คุณต้องการตามลำดับที่คุณต้องการ คุณสามารถเปลี่ยนค่าเหล่านี้ได้ตลอดเวลาเพื่อปรับเค้าโครงให้เข้ากับความต้องการที่แตกต่างกัน

5. เพิ่มเนื้อหาแบบไดนามิก

ขั้นตอนสุดท้ายที่จะนำลูปมาใช้ชีวิตคือการเชื่อมต่อแต่ละโมดูลในการ์ดของคุณเพื่อถ่ายทอดข้อมูลโพสต์ นี่คือสิ่งที่เปลี่ยนการ์ดคงที่ให้กลายเป็นรายชื่ออัตโนมัติ ตัวอย่างเช่น:

• เชื่อมโยงโมดูลรูปภาพกับ ภาพที่โดดเด่น ของโพสต์
• เชื่อมโยงโมดูลหัวเรื่องกับ ชื่อโพสต์
• เชื่อมโยงโมดูลข้อความกับ โพสต์ที่ตัดตอนมา
• เชื่อมต่อปุ่มอ่านเพิ่มเติมกับ โพสต์ URL

เมื่อวนลูป Divi จะแทนที่เนื้อหาตัวยึดตำแหน่งด้วยข้อมูลที่ถูกต้องสำหรับแต่ละโพสต์ในลูป

ในการตั้งค่าภาพที่โดดเด่นให้เปิดโมดูลรูปภาพวางเมาส์เหนือตัวเลือกรูปภาพและคลิกไอคอน เนื้อหาแบบไดนามิก เลือก Loop Image ที่โดดเด่น และรูปภาพที่เกี่ยวข้องทั้งหมดจะเติมได้ทันที

ทำซ้ำสิ่งนี้สำหรับชื่อโพสต์วันที่เผยแพร่ข้อความที่ตัดตอนมาและฟิลด์อื่น ๆ ที่คุณต้องการแสดง

เมื่อคุณคลิกไอคอนเนื้อหาแบบไดนามิกสำหรับโมดูลคุณจะเห็นตัวเลือกเฉพาะลูปเฉพาะ คุณไม่ได้ จำกัด เฉพาะชื่อและรูปภาพ นอกจากนี้คุณยังสามารถแสดงวันที่เผยแพร่วันที่แก้ไขชื่อผู้แต่งจำนวนความคิดเห็นหมวดหมู่แท็กและแม้แต่ฟิลด์ที่กำหนดเอง

ซึ่งหมายความว่าบัตรโพสต์ของคุณอาจน้อยที่สุดหรือมีรายละเอียดตามที่คุณต้องการ สร้างกริดที่สะอาดและมุ่งเน้นภาพเค้าโครงที่มีเนื้อหาหรือแม้แต่เน้นฟิลด์ประเภทโพสต์แบบกำหนดเอง ออกแบบมันครั้งเดียวและ Divi ทำให้มันแม่นยำและสอดคล้องกันตลอดทั้งวง

6. บันทึกเทมเพลตของคุณและดูตัวอย่าง

เมื่อทุกอย่างดูถูกต้องให้ทำการปรับแต่งขั้นสุดท้ายและ บันทึกการเปลี่ยนแปลง ทั้งใน Divi Builder และ Theme Builder

ดูตัวอย่างหน้าของคุณเพื่อดูการดำเนินการลูป นี่คือหน้ารายการบล็อกที่เสร็จแล้ว:

โมดูลบล็อกมีข้อ จำกัด

โมดูลบล็อกทำงานได้ดีดังนั้นทำไมเราถึงผลักดันให้ผู้สร้างลูป? เพราะ“ ดี” หมายถึงการแก้ไข โมดูลบล็อกล็อคคุณไว้ในเทมเพลต แต่ตัวสร้างลูปให้ผืนผ้าใบว่างเปล่า คุณเลือกเลย์เอาต์คำสั่งซื้อสไตล์และ divi ลูปโดยอัตโนมัติ

นั่นคือการเปลี่ยนแปลงที่แท้จริง: คุณไม่ได้ปรับเทมเพลตของคนอื่นคุณกำลังออกแบบของคุณเอง ลองนำไปสู่การปฏิบัติอีกครั้งและออกแบบเลย์เอาต์ที่แตกต่างจากโครงสร้างโมดูลบล็อกทั่วไป

ก่อนอื่นให้เพิ่มแถวและส่วนหนึ่งคอลัมน์ ปรับ ขนาด และตรวจสอบให้แน่ใจว่าเปิดใช้งาน การห่อ แบบยืดหยุ่น และยืดหยุ่นสำหรับแถว

แถวนี้จะมีการ์ดบล็อกของคุณ ตอนนี้เพิ่มแถวที่ซ้อนกันอีกแถวภายในคอลัมน์เพื่อสร้างโครงสร้างการ์ดของคุณด้วยภาพทางด้านซ้ายและข้อมูลเมตาของโพสต์ทางด้านขวา

ออกแบบโครงสร้างของคุณตรงตามที่คุณต้องการไม่จำเป็นต้องทำตามลำดับโมดูลบล็อก ปล่อยให้คอลัมน์ด้านซ้ายว่างเปล่าตอนนี้ เราจะเพิ่มภาพที่โดดเด่นเป็นภาพพื้นหลังของคอลัมน์

ปรับแต่งบัตรรายการบล็อกของคุณ

นอกจากนี้คุณยังสามารถแก้ไขช่องว่างแนวตั้งของกลุ่มโมดูลของคุณในคอลัมน์ด้านขวาใน การออกแบบ> เลย์เอาต์> ตัวเลือกช่องว่าง แนวตั้ง

ต่อไปเราเปิดใช้งานตัวเลือก ลูป เลือกคอลัมน์แรกจากแถวหลัก

อีกครั้งเราวนเนื้อหาแบบไดนามิก เริ่มต้นด้วยภาพไปที่ตัวเลือก พื้นหลัง ของคอลัมน์ด้านซ้ายและส่วนที่เหลือจะเหมือนกัน

นี่คือลูปบล็อกสไตล์ของคุณ ตอนนี้ถ้าคุณต้องการแปลงสิ่งนี้เป็นกริดเพียงเปลี่ยนความกว้างของคอลัมน์ เนื่องจากเราเปิดใช้งาน การห่อแบบยืดหยุ่น ในแถวการ์ดจะห่อด้วยตัวเองเมื่อเราเปลี่ยนขนาดของพวกเขา

หากสิ่งนี้ทำให้ภาพของคุณมีขนาดใหญ่เกินไปคุณสามารถลบข้อความที่ตัดตอนมาเปลี่ยนโครงสร้างคอลัมน์ของแถวและแม้แต่ปรับช่องว่างแนวนอนเป็นศูนย์

และเช่นเดียวกับที่กริดของคุณก็พร้อมเช่นกัน

ตัวอย่างนี้เป็นเพียงแวบเดียวของสิ่งที่ผู้สร้างลูปทำให้เป็นไปได้ สิ่งที่แท้จริงคือคุณไม่ได้ จำกัด เฉพาะเลย์เอาต์ที่กำหนดไว้ล่วงหน้าอีกต่อไป ทุกส่วนของการ์ดโพสต์เป็นของคุณในการจัดเรียงสไตล์และ reimagine และ Divi ดูแลการทำซ้ำโดยอัตโนมัติ ความยืดหยุ่นนั้นเป็นสิ่งที่เปลี่ยนบล็อกอย่างง่าย ๆ ให้กลายเป็นสิ่งที่รู้สึกว่าได้รับการออกแบบมาสำหรับเว็บไซต์ของคุณ

ใช้โมดูลการแบ่งหน้า

หากคุณ จำกัด โพสต์ต่อหน้าในแบบสอบถามลูปของคุณคุณอาจต้องการวิธีการให้ผู้อ่านเห็นส่วนที่เหลือ เพิ่มโมดูล pagination ใต้กริดของคุณและตั้งค่าลูปเป้าหมายเป็นองค์ประกอบที่คุณเปิดใช้งานลูป สำหรับคำแนะนำอย่างเต็มรูปแบบดูวิธีการใช้โมดูล Loop Builder & Pagination ของ Divi 5 ร่วมกัน: อ่านบทช่วยสอน

ดาวน์โหลดเทมเพลตบล็อก

หากคุณต้องการทดสอบกับกริดภายในเทมเพลตบล็อกให้ดาวน์โหลดเทมเพลตที่ใช้ในบทช่วยสอนนี้ด้านล่าง หากต้องการนำเข้าสิ่งเหล่านี้นำทางไปยังตัวสร้างธีม Divi ของคุณ คุณจะสามารถนำเข้าสิ่งเหล่านี้โดยใช้ไอคอนนำเข้า/ส่งออกที่มุมขวา

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi และเราจะส่งสำเนาแพ็คเค้าโครงหน้า Landing Page ของ Divi Landing ให้คุณรวมถึงแหล่งข้อมูล Divi Tips และกลอุบายอื่น ๆ อีกมากมาย ติดตามและคุณจะเป็นอาจารย์ Divi ในเวลาไม่นาน หากคุณสมัครเป็นสมาชิกเพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างและคลิกดาวน์โหลดเพื่อเข้าถึง Layout Pack

การดาวน์โหลด

คุณสมัครสมาชิกสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครสมาชิกของคุณและเข้าถึงแพ็คเค้าโครง Divi รายสัปดาห์ฟรี!

สร้างลูปโพสต์บล็อกที่กำหนดเองของคุณใน Divi 5 วันนี้

ก่อนที่ผู้สร้างลูปของ Divi 5 การสร้างโพสต์บล็อกโพสต์ที่กำหนดเองอย่างแท้จริงมักหมายถึงการต่อสู้กับเทมเพลตที่เข้มงวดหรือเขียนรหัสที่กำหนดเองสำหรับการเปลี่ยนแปลงเล็ก ๆ น้อย ๆ ทุกครั้ง ตอนนี้มันเป็นกระบวนการที่มองเห็นตั้งแต่ต้นจนจบ คุณออกแบบการ์ดหนึ่งครั้งเชื่อมโยงโมดูลกับข้อมูลโพสต์สดและให้ Divi จัดการส่วนที่เหลือ

หากคุณกำลังดำเนินการตามขีด จำกัด ของโมดูลบล็อก Loop Builder คือการอัพเกรดที่คุณรอคอย ลองใช้ในโครงการต่อไปของคุณและดูว่าการสร้างบล็อก (หรือผลิตภัณฑ์กิจกรรมหรือรายชื่อ) ง่ายเพียงใดที่คุณต้องการ!