ต้องการแสดงเนื้อหาแบบไดนามิกเช่นโพสต์บล็อกผลิตภัณฑ์หรือประเภทโพสต์ที่กำหนดเองในเลย์เอาต์ที่กำหนดเองอย่างสมบูรณ์ - โดยไม่ต้องสัมผัสบรรทัดของรหัส? โมดูลลูปใน Beaver Builder ทำให้เป็นไปได้

แนะนำใน Beaver Themer 1.5 และ Beaver Builder 2.9 โมดูลลูปเป็นเครื่องมือที่ทรงพลังที่ช่วยให้คุณออกแบบเลย์เอาต์ที่ทำซ้ำได้โดยใช้โมดูลตัวสร้างบีเวอร์มาตรฐาน ไม่ว่าคุณจะกำลังสร้างบล็อกพอร์ตโฟลิโอรายการกิจกรรมหรือร้านค้า WooCommerce โมดูลนี้จะช่วยให้คุณควบคุมการออกแบบได้อย่างเต็มรูปแบบด้วยเนื้อหาแบบไดนามิกที่แกนกลาง

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

โมดูลลูปคืออะไร?

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

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

• หมวดหมู่หรือแท็ก WooCommerce - แสดงหมวดหมู่ผลิตภัณฑ์ที่เกี่ยวข้องหรือแท็กในหน้าผลิตภัณฑ์แต่ละรายการโดยใช้แหล่งคิวรีทว่องกี
• กริดเนื้อหาที่กำหนดเอง - แสดงเนื้อหาแบบไดนามิกเช่นสมาชิกในทีมหรือคำรับรองโดยใช้แหล่งข้อมูลการสืบค้น ACF Repeater ในหน้าเช่น“ Meet the Team” หรือรายชื่อบริการ
• โพสต์ที่เกี่ยวข้อง - เนื้อหาบล็อกที่เกี่ยวข้องในหน้าโพสต์เดียวพร้อมแหล่งข้อมูลการสืบค้นความสัมพันธ์ ACF ช่วยเพิ่มการมีส่วนร่วมและลดอัตราตีกลับ

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

คุณสมบัติที่สำคัญของโมดูลลูป

โมดูลลูปเต็มไปด้วยความสามารถที่ทำให้เหมาะสำหรับการสร้างหน้าเว็บที่มีความยืดหยุ่นและมีเนื้อหาที่อุดมไปด้วย:

• Query Dynamic Content จากประเภทโพสต์ใด ๆ (มาตรฐานหรือกำหนดเอง)
• ใช้โมดูล Beaver Builder ใด ๆ ภายในเค้าโครงลูป
• เชื่อมต่อฟิลด์แบบไดนามิก (เช่นชื่อเรื่องภาพเด่นโพสต์เมตา)
• เลือกจากเลย์เอาต์หลายประเภท เช่นกริดรายการหรือม้าหมุน
• เพิ่มตัวกรองและการแบ่งแยก เพื่อปรับปรุงประสบการณ์ผู้ใช้

การรวมกันของการปรับแต่งและระบบอัตโนมัตินี้ช่วยให้คุณสร้างเลย์เอาต์ขั้นสูงโดยไม่ต้องเขียน HTML, PHP หรือ CSS

วิธีการสร้างลูปแบบกำหนดเอง

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

ตัวเลือกเค้าโครงที่กำหนดไว้ล่วงหน้าของโมดูลลูป

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

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

สร้างตั้งแต่เริ่มต้นด้วยเค้าโครงว่างเปล่า

ชอบสร้างสิ่งที่กำหนดเองโดยสิ้นเชิงหรือไม่? เลือกตัวเลือกเค้าโครง เปล่า และทำตามขั้นตอนเหล่านี้:

1. เพิ่มโมดูลลูปลง ในหน้าหรือโพสต์ของคุณในตัวแก้ไข Beaver Builder
   
2. เลือกเค้าโครงเปล่า เพื่อเริ่มต้นด้วยคอนเทนเนอร์ลูปเปล่า
   
3. กำหนดค่าการตั้งค่าลูป เพื่อกำหนดเนื้อหาที่คุณต้องการแสดง - เช่นโพสต์บล็อก, ผลิตภัณฑ์ woocommerce, ฟิลด์ repeater ACF หรือประเภทโพสต์ที่กำหนดเอง
   
4. ลากโมดูลลงในคอนเทนเนอร์ลูป เพื่อสร้างเค้าโครงของคุณตั้งแต่เริ่มต้น เพิ่มโมดูล Beaver Builder ใด ๆ ที่คุณต้องการเช่นหัวเรื่อง, รูปภาพ, ไอคอน, ปุ่มและอื่น ๆ
   
5. ใช้การเชื่อมต่อฟิลด์ เพื่อดึงเนื้อหาแบบไดนามิกเช่นชื่อรูปภาพราคาหรือฟิลด์ที่กำหนดเองสำหรับแต่ละรายการลูป
   
6. จัดเรียงและจัดสไตล์ โมดูลของคุณโดยใช้เครื่องมือลากและวางของ Beaver Builder

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

ใช้โมดูลกล่องสำหรับการควบคุมเค้าโครง

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

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

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

การตั้งค่าแบบสอบถาม: เนื้อหาใดที่จะแสดง?

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

• เลือกประเภทโพสต์ (โพสต์, หน้า, CPTs, ผลิตภัณฑ์ ฯลฯ )
• กรองตามอนุกรมวิธานหมวดหมู่แท็กหรือผู้เขียน
• แสดงเนื้อหาตามสถานะโพสต์หรือวันที่
• ตั้งค่าออฟเซ็ตเรียงลำดับและโพสต์ขีด จำกัด

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

การปนเปื้อน

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

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

ตัวเลือกเหล่านี้ช่วยปรับแต่งการส่งเนื้อหาไปยังเค้าโครงและเป้าหมายการโต้ตอบของผู้ใช้

ข้อมูลแบบไดนามิกพร้อมการเชื่อมต่อฟิลด์

ภายในเค้าโครงลูปของคุณคุณสามารถใช้การเชื่อมต่อฟิลด์เพื่อดึงข้อมูลโพสต์แบบไดนามิกเช่น:

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

โมดูลใด ๆ ที่รองรับเนื้อหาแบบไดนามิก (เช่นหัวเรื่อง, ภาพถ่าย, ปุ่ม, HTML ฯลฯ ) สามารถเชื่อมต่อกับข้อมูลโพสต์

สไตล์การออกแบบขั้นสูงและตรรกะตามเงื่อนไข

ต้องการจัดสไตล์ประเภทโพสต์ที่แตกต่างกันหรือแสดง/ซ่อนองค์ประกอบตามเงื่อนไขหรือไม่? โมดูลลูปรองรับ ตรรกะตามเงื่อนไข และ คลาส CSS แบบกำหนดเอง

ตัวอย่างเช่นคุณสามารถ:

• ซ่อนปุ่มหากฟิลด์ที่กำหนดเองว่างเปล่า
• เพิ่มป้ายสำหรับโพสต์เด่น
• ใช้สีหรือสไตล์ที่แตกต่างกันตามหมวดหมู่โพสต์

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

กรณีการใช้โมดูลลูปในโลกแห่งความเป็นจริง

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

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

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

ความคิดสุดท้าย: ทำไมต้องใช้โมดูลลูป?

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

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