9 เค้าโครงการ์ดที่สร้างขึ้นด้วยกลุ่มและโมดูลที่ซ้อนกันของ Divi 5

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

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

มาดำน้ำกันเถอะ!

ทำความเข้าใจกับแถวและกลุ่มโมดูลที่ซ้อนกันใน Divi 5

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

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

แถวซ้อนกัน

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

กลุ่มโมดูล

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

ทำไมพวกเขาถึงทำงานร่วมกันได้ดี

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

9 เค้าโครงการ์ดสำหรับ Divi 5

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

1. แผนการกำหนดราคา

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

2. บริการ

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

3. รายการเมนูร้านอาหาร

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

4. สมาชิกในทีม BIOS

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

5. คำรับรองจากลูกค้า

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

6. รายชื่อเหตุการณ์

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

7. รายชื่ออสังหาริมทรัพย์

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

8. การแสดงสินค้า

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

9. แกลเลอรี่วิดีโอ

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

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

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

สไตล์สม่ำเสมอ

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

บันทึกกลุ่มโมดูลเพื่อนำกลับมาใช้ซ้ำ

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

การออกแบบที่ตอบสนอง

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

ใช้ประโยชน์จากที่ตั้งล่วงหน้าสำหรับการอัปเดตอย่างรวดเร็ว

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

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

ดาวน์โหลดเลย์เอาต์การ์ดฟรี

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

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

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

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

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

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

การสร้างเค้าโครงการ์ดด้วย Divi 5 เป็นเรื่องง่าย

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

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