วิธีสร้างตารางพอร์ตโฟลิโอด้วยตัวสร้างลูปของ Divi 5

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

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

ทำความเข้าใจกับผู้สร้างลูปของ Divi 5

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

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

ประโยชน์สำคัญของผู้สร้างลูป

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

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

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

การสร้างผลงานที่มีตัวสร้างลูป

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

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

เราจะเพิ่มโมดูล ส่วนหัวลง ใน คอลัมน์แรก

ป้อน ชื่อ หรือใช้ Divi AI เพื่อสร้างให้คุณ

นำทางไปยังแท็บ การออกแบบ เลือก อินเตอร์ สำหรับ ตัวอักษรหัวเรื่อง แสง สำหรับ น้ำหนักตัวอักษรหัวเรื่อง ตั้งค่า ขนาดข้อความหัว เป็น 2EM และกำหนด ความสูงของเส้นหัว 1.3em

ตอนนี้เรามาสร้างวงของเรากันเถอะ นำทางไปยัง คอลัมน์ที่ 2 ของแถวของเรา

ค้นหาแท็บ ลูป ขยายและเปิดใช้งานการสลับ องค์ประกอบลูป

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

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

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

ขยายแท็บการตั้งค่าเลย์ เอาต์ ค้นหาการตั้งค่า การห่อเลย์เอาต์ และเลือก Wrap สิ่งนี้จะห่อห่วงของเรากลับเป็น 3 คอลัมน์

จัดแต่งทรงผมคอลัมน์ลูป

ตอนนี้การตั้งค่าลูปอยู่ในสถานที่แล้วก็ถึงเวลาที่จะจัดสไตล์คอลัมน์ของเราแล้ว การตั้งค่าสไตล์ที่เราเลือกที่นี่จะส่งผลกระทบต่อคอลัมน์ที่เหลือในลูป ในแถว 3 คอลัมน์ คลิกที่คอลัมน์ที่ 2 และคลิกแท็บ การออกแบบ นำทางไปยัง Dropdown ชายแดน และกำหนด รัศมีเส้นขอบ 15px ให้กับคอลัมน์ ภายใต้ รูปแบบเส้นขอบ ให้เพิ่ม ความกว้างของเส้นขอบ 1px และใช้ #000000 เป็น สีขอบ

เพิ่มเนื้อหาลงในลูป

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

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

เลือก Loop ภาพเด่น เมื่อตัวเลือกปรากฏขึ้น

ลูปของเราจะวาง ภาพที่โดดเด่น ของแต่ละ โครงการ ลงในพอร์ตโฟลิโอลูปของเราโดยตรง

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

ในแท็บ การออกแบบ ให้เลือก H3 สำหรับ ระดับหัวเรื่อง , inter สำหรับ ตัวอักษรหัวเรื่อง , ศูนย์ สำหรับ การจัดตำแหน่งข้อความหัวเรื่อง และ 20px สำหรับ ขนาดข้อความ

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

สลับไปที่แท็บ การออกแบบ และตั้งค่า การจัดตำแหน่ง เป็น ศูนย์

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

• ปุ่มพื้นหลัง: #000000
• รัศมีเส้นขอบปุ่ม: 15px
• ปุ่มความกว้างของเส้นขอบ: 0px
• แบบอักษรปุ่ม: อินเตอร์
• ปุ่มข้อความสี: #ffffff
• ปุ่มขนาดข้อความ: 16px
• มาร์จิ้น: 15px ด้านล่าง
• Padding: 15px ด้านบนและล่าง, 35px ซ้ายและขวา

แค่ไหน! อย่างที่คุณเห็นการสร้างลูปด้วย Divi 5 เป็นกระบวนการที่ตรงไปตรงมา

เปลี่ยนสไตล์ด้วยตัวสร้างลูป

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

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

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

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

การทดสอบและการปรับแต่งพอร์ตโฟลิโอลูป

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

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

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

นำทางผ่านแต่ละ ช่วงพัก ตรวจสอบเค้าโครงและทำการปรับเปลี่ยนตามความจำเป็น

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

แนวทางปฏิบัติและเคล็ดลับที่ดีที่สุด

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

1. ตรวจสอบความสอดคล้องของการออกแบบกับตัวแปรการออกแบบ

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

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

2. พิจารณาการเข้าถึง

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

นอกจากนี้ยังเป็นการดีที่จะเลือกสีที่มีอัตราส่วนความคมชัดที่เพียงพอเพื่อให้แน่ใจว่าผู้ใช้ที่มีความบกพร่องทางสายตา

3. บันทึกและนำเทมเพลตกลับมาใช้ซ้ำ

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

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

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

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

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

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

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

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

ลองใช้ตัวสร้างลูปใน Divi 5 วันนี้

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

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