10 รูปแบบกริดที่ทำด้วยแถวซ้อนของ Divi 5 (ดาวน์โหลดฟรี)

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

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่ แต่เราไม่แนะนำให้แปลงเว็บไซต์ที่มีอยู่เป็น Divi 5

คีย์ Divi 5 คุณสมบัติสำหรับเลย์เอาต์กริด

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

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

แถวซ้อนกัน

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

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

จุดพักที่ปรับแต่งได้

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

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

กลุ่มโมดูล

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

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

ตัวแปรออกแบบ

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

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

หน่วยขั้นสูง

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

การจัดการคุณลักษณะ

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

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

10 ตัวอย่างเค้าโครงกริดสร้างสรรค์ใน Divi 5

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

1. ตารางคุณสมบัติสมมาตร

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

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

2. กริดก่ออิฐ

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

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

3. กริดพอร์ตโฟลิโอแบบโต้ตอบ

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

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

4. กริดการแสดงผลิตภัณฑ์

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

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

5. ตารางสมาชิกในทีม

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

ในตัวอย่างด้านล่างเราใช้ตารางสามคอลัมน์ที่มีแถวซ้อนกันและใช้ตัวแปรการออกแบบเพื่อควบคุมขนาดตัวอักษรอย่างต่อเนื่อง

6. กริดบริการ

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

ในตัวอย่างด้านล่างเราใช้แถวสี่คอลัมน์กำหนดสูตร calc () สำหรับการเว้นวรรคแถวและกลุ่มโมดูลที่รวมและแถวซ้อนกันเพื่อเร่งกระบวนการออกแบบ

7. ตารางกำหนดการจัดกิจกรรม

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

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

8. ตารางราคาตารางราคา

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

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

9. FAQ Accordion Grid

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

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

10. ตารางแกลเลอรี่ภาพ

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

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

เคล็ดลับในการสร้างเค้าโครงกริดที่มีประสิทธิภาพใน Divi 5

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

1. ใช้ประโยชน์จากแถวซ้อนกัน

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

2. ปรับให้เหมาะสมสำหรับการตอบสนอง

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

3. ใช้กลุ่มโมดูลเพื่อประสิทธิภาพ

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

4. รักษาความสอดคล้องกับตัวแปรการออกแบบ

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

5. ทดลองกับหน่วยขั้นสูง

เพิ่มความยืดหยุ่นของกริดของคุณโดยใช้หน่วยขั้นสูงเช่น VH, VW, REM, CALC () หรือ CLAMP () สำหรับระยะห่างและการปรับขนาดแบบไดนามิก หน่วยเหล่านี้ช่วยให้องค์ประกอบกริดของคุณปรับขนาดได้อย่างคล่องแคล่วขึ้นอยู่กับขนาดของวิวพอร์ตหรือการตั้งค่าตัวอักษรเพื่อให้มั่นใจว่าการตอบสนองและความสมดุลของภาพ

ดาวน์โหลดเค้าโครงส่วนกริดฟรี

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

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

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

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

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

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

ปลดปล่อยความคิดสร้างสรรค์ด้วย Divi 5

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

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

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