วิธีสร้างหน้าของคุณด้วย Divi 5 ได้อย่างมีประสิทธิภาพ

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

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

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

ด้วยที่กล่าวว่ามาดำน้ำกันเถอะ

ทำความเข้าใจ UI สมัยใหม่ของ Divi 5

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

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

วิวัฒนาการของผู้สร้างภาพ

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

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

การนำทาง

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

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

การควบคุมการออกแบบที่ตอบสนอง

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

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

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

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

ด้านล่างเราให้รายละเอียดวิธีการใช้เครื่องมือเหล่านี้เพื่อสร้างหน้าเว็บ

1. ตัวแปรออกแบบสำหรับสไตล์ที่มีประสิทธิภาพ

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

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

วิธีใช้ตัวแปรการออกแบบ

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

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

ตัวแปรตัวเลขยังสามารถใช้สำหรับการเว้นระยะ ตัวอย่างเช่นคุณสามารถสร้างระยะห่างมาตรฐานสำหรับคอลัมน์และแถวทั้งหมดในเว็บไซต์ของคุณ การใช้สูตร CALL () เช่น CALC (80% - 60px) สร้างความกว้างขององค์ประกอบการออกแบบเป็น 80% ของภาชนะในขณะที่เพิ่ม 30px ของช่องว่างภายในทั้งสองข้าง เลือก CALL จากเมนูแบบเลื่อนลงเพื่อใช้สูตร

ป้อนสูตร calc () ลงใน ฟิลด์ค่า คลิกปุ่ม บันทึกตัวแปร เพื่อเพิ่มลงในตัวจัดการตัวแปร

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

สุดท้ายคลิกไอคอน เนื้อหาแบบไดนามิก เพื่อเลือกตัวแปรระยะห่างส่วนกลาง

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

เคล็ดลับในการใช้ตัวแปรการออกแบบ

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

2. การออกแบบตามที่ตั้งไว้ล่วงหน้าพร้อมตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้า

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

Divi 5 องค์ประกอบที่ตั้งไว้ล่วงหน้า

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

Divi 5 ตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้า

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

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

วิธีใช้ที่ตั้งไว้ล่วงหน้าอย่างมีประสิทธิภาพ

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

การสร้างองค์ประกอบที่ตั้งไว้ล่วงหน้า

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

คลิก ใหม่ที่ตั้งไว้ล่วงหน้าจากสไตล์ปัจจุบัน เพื่อสร้างที่ตั้งไว้ล่วงหน้าใหม่

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

สร้างกลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้า

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

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

ถัดไปคลิก เพิ่มที่ตั้งไว้ใหม่

จัดรูปแบบเส้นขอบตั้งชื่อและบันทึกที่ตั้งไว้ล่วงหน้า

เคล็ดลับในการใช้ค่าที่ตั้งไว้ล่วงหน้าจากการออกแบบของ Divi 5

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

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

3. แถวซ้อนกันสำหรับเลย์เอาต์ที่ยืดหยุ่น

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

ในการสร้างแถวที่ซ้อนกันเพียงเพิ่มหนึ่งในคอลัมน์ - หรือภายใต้โมดูลภายในคอลัมน์ - ผ่านตัวสร้างภาพและเติมด้วยโมดูลหรือแถวซ้อนเพิ่มเติมเพิ่มเติม

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

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

วิธีใช้แถวซ้อนกัน

เพื่อควบคุมพลังของแถวซ้อนให้ทำตามขั้นตอนเหล่านี้ใน Visual Builder:

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

ถัดไปเลือกโมดูลสำหรับคอลัมน์แรก สำหรับตัวอย่างนี้ภาพ

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

คุณสามารถเพิ่มแถวซ้อนกันในคอลัมน์อื่นหรือใต้แถวแรก ความเป็นไปได้ไม่มีที่สิ้นสุด

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

เคล็ดลับในการใช้แถวซ้อนกัน

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

4. กลุ่มโมดูลสำหรับเนื้อหาที่จัดระเบียบ

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

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

วิธีใช้กลุ่มโมดูล

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

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

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

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

เคล็ดลับในการใช้กลุ่มโมดูล

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

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

5. หน่วยขั้นสูงสำหรับการออกแบบแบบไดนามิก

คุณลักษณะหน่วยขั้นสูงของ Divi 5 รองรับหน่วย CSS ที่กว้างขึ้น (PX, VW, REM, %, ฯลฯ ) และฟังก์ชั่นเช่น calc (), แคลมป์ (), min () และสูงสุด () ภายในฟิลด์อินพุตเดียวทำให้การออกแบบแบบไดนามิกและตอบสนอง ตัวอย่างเช่นคุณสามารถตั้งค่าความกว้างของส่วนเป็น Calc (100% - 40px) หรือแคลมป์ (20px, 3VW, 40px) สำหรับการพิมพ์ของเหลวที่ปรับขนาดตามขนาดของวิวพอร์ต

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

วิธีใช้หน่วยขั้นสูง

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

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

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

ถัดจากฟิลด์ความกว้างคลิกที่ ไอคอน - เพื่อเปิดเผยตัวเลือกหน่วยขั้นสูง

จากเมนูดรอปดาวน์ให้เลือก VW (Viewport Width) และป้อน 50 สิ่งนี้จะบอกถึงการครอบครองความกว้าง 50% ของความกว้างของวิวพอร์ต วิวพอร์ตเป็นพื้นที่ที่มองเห็นได้ของหน้าต่างเว็บเบราว์เซอร์ ดังนั้นไม่ว่าหน้าต่างเบราว์เซอร์จะกว้างแค่ไหนมันจะมีความกว้างครึ่งหนึ่งของหน้าต่างเบราว์เซอร์

เมื่อคุณดูตัวอย่างว่าพาดหัวจะดูขนาดหน้าจออื่น ๆ ได้อย่างไรคุณจะสังเกตเห็นว่าส่วนหัวจะมีความกว้างเท่ากันโดยไม่คำนึงถึง

เคล็ดลับในการใช้หน่วยขั้นสูง

• เริ่มต้นง่าย ๆ : เริ่มต้นด้วยหน่วยพื้นฐานเช่น PX หรือ % สำหรับการออกแบบที่ตรงไปตรงมาจากนั้นทำการทดลองด้วยแคลมป์ (), calc (), VH หรือ VW สำหรับเอฟเฟกต์การตอบสนอง
• ใช้แคลมป์สำหรับตัวอักษร: ใช้แคลมป์ () เพื่อตัวอักษรขนาดหรือระยะห่างเพื่อสร้างการออกแบบที่เข้าถึงได้ง่ายซึ่งปรับให้เข้ากับขนาดหน้าจอใด ๆ โดยไม่ต้องพักด้วยตนเอง
• รวมเข้ากับตัวแปรการออกแบบ: จัดเก็บหน่วยที่ใช้บ่อยสำหรับส่วนหัวและข้อความร่างกายเป็นตัวแปรการออกแบบเพื่อรักษาความสอดคล้องและการปรับปรุงให้ง่ายขึ้น

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

6. การรวม Divi AI

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

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

ด้วย Divi AI คุณสามารถเร่งกระบวนการออกแบบเอาชนะบล็อกของนักเขียนหรือรับแรงผลักดันที่สร้างสรรค์เล็กน้อยเมื่อจำเป็น

วิธีใช้ divi ai

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

หากต้องการใช้ Divi AI บนโมดูลข้อความที่มีอยู่ให้วางเมาส์เหนือพื้นที่ข้อความแล้วคลิกไอคอน Divi AI ในแท็บเนื้อหา

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

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

เคล็ดลับในการใช้ divi ai

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างหน้าเว็บด้วย Divi 5

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

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

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

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

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

สร้างหน้าเว็บที่ฉลาดขึ้นด้วย Divi 5

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

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

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