วิธีใช้โมดูล Loop Builder & Pagination ของ Divi 5 ร่วมกัน

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

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

พบกับผู้สร้างลูปของ Divi 5

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

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

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

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

มันยืดหยุ่นเพราะคุณกำลังสร้างการออกแบบและโครงสร้างเนื้อหาด้วยตัวคุณเอง Divi จัดการการทำซ้ำ

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

พบกับโมดูลการแบ่งหน้า

การปนเปื้อนเป็นวิธีแฟนซีที่จะพูดว่า "แบ่งผลลัพธ์ออกเป็นหน้า" แทนที่จะทิ้งรายการทั้งหมดในหน้าเดียวคุณจะแบ่งเป็นชุดเล็ก ๆ ที่ช่วยด้วย:

• เวลาโหลดหน้าเว็บ
• การอ่านได้
• ความสามารถในการสแกนได้

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

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

การสร้างเค้าโครงวนรอบ +

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

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

ขั้นตอนที่ 1: สร้างคอนเทนเนอร์ลูป

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

เมื่อเลือกคอนเทนเนอร์ของคุณเปิดการตั้งค่าและเปิดใช้งานตัวเลือก ลูป

เลือกแหล่งข้อมูลของคุณ นี่คือ "การสืบค้น" ลูปจะทำงาน

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

• ประเภทโพสต์ (เช่นโพสต์บล็อกของคุณหรือประเภทโพสต์ที่กำหนดเองเช่น 'โครงการ')
• ข้อกำหนด (หมวดหมู่และอนุกรมวิธาน)
• ผู้ใช้ (ส่งคืนรายชื่อผู้ใช้ไซต์เช่นผู้เขียน)
• ฟิลด์ Repeater (ฟิลด์ที่กำหนดเองที่สร้างโดยปลั๊กอินเพื่อสร้างลูปภายในลูป)

ถัดไปขึ้นอยู่กับประเภทของการสืบค้นที่คุณเลือกข้างต้นคุณจะได้รับโอกาสที่จะเจาะจงมากขึ้น การเลือก“ ประเภทโพสต์” อาจอนุญาตให้คุณใช้ประเภทโพสต์เช่น:

• โพสต์บล็อก
• โครงการ
• สินค้า
• ไม่ว่าคุณจะทำอะไรก็ตามที่คุณสร้างขึ้นเอง

จากตรงนั้นคุณสามารถเจาะจงมากขึ้นด้วยสิ่งที่ควรปรากฏในลูปของคุณ คุณสามารถ:

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

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

ตอนนี้เราต้องกำหนดฟิลด์ข้อความและรายการต่าง ๆ ที่เราต้องการเชื่อมโยงหลายมิติด้วยเนื้อหาลูปแบบไดนามิก

ขั้นตอนที่ 2: เพิ่มเนื้อหาแบบไดนามิกภายในลูป

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

• ในโมดูลข้อความเลือก“ โพสต์ชื่อ” จากตัวเลือกเนื้อหาแบบไดนามิก
• ในโมดูลรูปภาพคุณสามารถเลือก“ ภาพเด่น”
• ในโมดูลปุ่มตั้งค่าลิงค์เป็น“ โพสต์ URL”
• ในคอนเทนเนอร์ที่วนรอบทั้งหมดให้ตั้งค่าลิงก์เป็น "โพสต์ URL"

สิ่งนี้บอกให้ Divi ดึงเนื้อหาที่เหมาะสมสำหรับแต่ละรายการที่วนรอบ

โปรดจำไว้ว่า - ทุกสิ่งภายในลูปซ้ำสำหรับแต่ละผลลัพธ์ เก็บเนื้อหาที่ไม่ใช่ลูป (เช่นหัวเรื่องโฆษณาหรือ CTAs) ด้านนอก หากคุณมีชิ้นส่วนของเนื้อหาในลูปที่ไม่ได้เชื่อมต่อกับข้อมูลแบบไดนามิกทุกรายการในลูปจะแสดงให้เห็นว่า AS-IS (เช่นข้อความ“ อ่าน→” ที่ด้านล่างขวาของการ์ดตัวอย่าง)

ขั้นตอนที่ 3: เพิ่มโมดูลการแบ่งหน้า

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

ปรับแต่งฉลากสำหรับ“ ก่อนหน้า” และ“ ต่อไป” คุณสามารถใช้“ โพสต์ที่เก่ากว่า / โพสต์ใหม่”“ ย้อนกลับ / ส่งต่อ” หรือแม้แต่“ ← / →” สำหรับสไตล์ที่น้อยที่สุด

กุญแจสำคัญคือโมดูลการปนเปื้อนจะต้องนั่งอยู่นอกลูปที่ควบคุม นั่นและตรวจสอบให้แน่ใจว่าได้รับมอบหมายให้กับเป้าหมายที่ถูกต้อง (หากคุณมีลูปหลายลูปในหน้า/เทมเพลตเดียวกัน)

ขั้นตอนที่ 4: ทดสอบการโต้ตอบ

บันทึกหน้าของคุณและดูตัวอย่าง คลิก“ เก่ากว่า” เพื่อไปที่รายการลูปถัดไป

โปรดทราบว่า URL เปลี่ยนไปอย่างไรกับพารามิเตอร์การสืบค้นที่ระบุหน้าของลูป นอกจากนี้โปรดทราบว่ามีเพียงเนื้อหาลูปที่สลับ/การเปลี่ยนแปลง - หัว, ส่วนท้ายและแถบด้านข้างเท่านั้นที่ควรจะเหมือนเดิม

รับเค้าโครงลูปนี้

ต้องการตัดเลย์เอาต์นี้และดูว่าสิ่งต่าง ๆ ถูกสร้างขึ้นเพื่อตัวคุณเองอย่างไร? ดาวน์โหลดได้ที่นี่!

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

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

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

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

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

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

เพลิดเพลินไปกับ Divi ที่มีชีวิตชีวามากขึ้น

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

ตัวสร้างลูปและโมดูลการแบ่งหน้าจับคู่กับคุณสมบัติ Divi 5 ใหม่อื่น ๆ (Flexbox, การโต้ตอบ, การควบคุมสี HSL) นั้นมีประสิทธิภาพเช่นเคย คุณสามารถออกแบบหน้าเว็บได้อย่างไม่น่าเชื่อทั้งหมดนี้

เมื่อคุณสร้างลูป paginated ครั้งแรกของคุณคุณจะเห็นว่าการใช้วิธีการใหม่ในบล็อก, กริดผลิตภัณฑ์, พอร์ตการลงทุนหรือประเภทเนื้อหาใด ๆ ที่คุณต้องการจัดระเบียบ