ฟีเจอร์พิเศษ Divi 5 (จนถึงตอนนี้)

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่

8 คุณสมบัติพิเศษสำหรับ Divi 5 (และวิธีการทำงาน)

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

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

ฟีเจอร์เปิดตัวเมื่อวันที่ 6 กุมภาพันธ์ 2568

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

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

นอกเหนือจากสามมาตรฐาน

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

ด้วย Divi 5 คุณสามารถกำหนดจุดพักสำหรับ:

• โทรศัพท์ (<767px)
• โทรศัพท์กว้าง (<860px) - เหมาะสำหรับการรับชมบนมือถือ
• แท็บเล็ต (<980px)
• แท็บเล็ตกว้าง (<1024px) - จับแท็บเล็ตขนาดใหญ่และอุปกรณ์ที่คล้ายกัน
• เดสก์ท็อป (> 981px)
• Widescreen (> 1280px)
• กว้างพิเศษ (> 1440px)

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

การจัดการจุดพัก

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

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

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

เรียนรู้เพิ่มเติม

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

ฟีเจอร์ที่วางจำหน่ายเมื่อวันที่ 11 มีนาคม 2568

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

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

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

เหตุใดจึงมีความสำคัญสำหรับเวิร์กโฟลว์ของคุณ

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

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

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

เรียนรู้เพิ่มเติม

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

ฟีเจอร์เปิดตัวเมื่อวันที่ 19 มีนาคม 2568

Divi 5 ได้ปรับปรุง การจัดการหน่วย CSS ทำให้วิธีการออกแบบตอบสนองง่ายขึ้น

ตอนนี้คุณสามารถเข้าถึงหน่วย CSS เต็มรูปแบบที่จำเป็นสำหรับการออกแบบเว็บของวันนี้ภายในผู้สร้างโดยตรง นั่นหมายความว่าคุณสามารถใช้พิกเซล (PX), เปอร์เซ็นต์ (%), EMS (EM), รูท EMS (REM), Viewport Units (VW, VH, VMIN, VMAX) และตัวเลือกขั้นสูงเช่นความกว้างอักขระ (CH) หรือหน่วยเศษส่วน (FR) สำหรับกริด

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

ทำไมหน่วยต่างกันจึงมีความสำคัญ

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

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

ตอนนี้รวมหน่วยกับฟังก์ชัน CSS เช่น calc (), min (), max () และ clamp () และดูเวทมนตร์ที่แท้จริงเกิดขึ้น Divi 5 รองรับสิ่งเหล่านี้ทั้งหมดให้คุณสร้างเลย์เอาต์ของเหลวที่ปรับให้เข้ากับขนาดหน้าจอได้ทุกขนาด

ตัวอย่างเช่นคุณอาจตั้งค่าความสูงส่วนเป็น Calc (80VH - 60px) เพื่อให้ใช้เวลาส่วนใหญ่ของหน้าจอในขณะที่ออกจากห้องพักสำหรับส่วนหัว หรือใช้แคลมป์ (16px, 4vw, 22px) สำหรับข้อความที่เติบโตขึ้นด้วยหน้าจอ แต่อยู่ในขีด จำกัด ที่อ่านได้

ความยืดหยุ่นของแคลมป์ ()

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

คุณอาจต้องการหัวเรื่องที่เติบโตด้วยขนาดหน้าจอ แต่อ่านได้ ในโมดูลหัวเรื่องคุณสามารถตั้งค่าขนาดข้อความเป็นแคลมป์ (36px, 5VW, 72px) ส่วนหัวจะไม่เล็กกว่า 36px หรือมากกว่า 72px แต่ระหว่างขนาดเหล่านั้นมันจะปรับขนาดที่ 5% ของความกว้างของวิวพอร์ต

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

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

• สำหรับข้อความหน่วย REM เก็บทุกอย่างตามสัดส่วน หากคุณตั้งค่าข้อความร่างกายเป็น 1REM และหัวเรื่องเป็น 2.5REM การเปลี่ยนขนาดตัวอักษรพื้นฐานอัพเดททุกอย่างตามสัดส่วน
• สำหรับเลย์เอาต์คุณสามารถลองผสมหน่วยคงที่และของเหลว แถบด้านข้างอาจทำงานได้ดีที่สุดที่ 300px ในขณะที่เนื้อหาหลักสามารถใช้ Calc (100% - 350px) เพื่อเติมเต็มพื้นที่ที่เหลือ
• สำหรับระยะห่างหน่วย EM จะสร้างช่องว่างภายในที่ปรับขนาดด้วยขนาดข้อความ สิ่งนี้ทำให้สัดส่วนการออกแบบของคุณสอดคล้องกันแม้ว่าขนาดข้อความจะเปลี่ยนไป

เล่นได้ดีกับคุณสมบัติอื่น ๆ ที่กล่าวถึง

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

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

• สร้างตัวแปรตัวเลขเช่นหัวเรื่องขนาด: แคลมป์ (26px, 5VW, 82px); สำหรับหัวข้อ H1 ของคุณ ใช้ตัวแปรนี้กับข้อความส่วนหัวของคุณที่ตั้งไว้ล่วงหน้า ส่วนหัวของคุณจะขยายได้อย่างราบรื่นระหว่าง 26px บนมือถือและ 82px บนเดสก์ท็อปด้วยการคำนวณ 5VW ของเหลวระหว่างขนาดเหล่านั้น
• การตั้งค่าตัวแปรตัวเลขเป็นแคลมป์ (20px, 5VW, 80px) จากนั้นใช้เป็นระยะขอบคุณมีระยะห่างที่แน่นหนาในห้องหายใจมือถือและห้องหายใจที่ใจกว้างบนเดสก์ท็อปพร้อมการเปลี่ยนแปลงที่ราบรื่นระหว่าง
• ตั้งค่าระยะห่างพื้นฐานโดยใช้หน่วยอวกาศตัวแปรตัวเลข: 20px และใช้กับ calc () ในการตั้งค่าที่ตั้งไว้ล่วงหน้าของคุณ ตัวอย่างเช่นใช้ calc (var (–Space-unit) * 2) สำหรับช่องว่างที่ใหญ่กว่าและ calc (var (-enit-unit) / 2) สำหรับช่องว่างที่เข้มงวดมากขึ้น เมื่อคุณอัปเดตค่าพื้นฐานระยะห่างที่ได้รับทั้งหมดจะปรับสัดส่วน

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

เรียนรู้เพิ่มเติม

4. ตัวแปรการออกแบบ

เปิดตัวฟีเจอร์เมื่อวันที่ 3 เมษายน 2568

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

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

ตัวแปรทั้งหมดของคุณอาศัยอยู่ในแผงง่าย ๆ ในแถบด้านข้างของ Visual Builder มันสะอาดหาง่ายและวางทุกอย่างไว้ในจุดเดียว

การจับคู่ที่สมบูรณ์แบบกับการตั้งค่าล่วงหน้า

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

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

วิธีการสองชั้นนี้ช่วยให้คุณควบคุมได้มากกว่าผู้สร้างรายอื่น คุณแยกสิ่งที่ดูเหมือน (ตัวแปร) ออกจากจุดที่ปรากฏ (ที่ตั้งไว้ล่วงหน้า)

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

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

วิธีนี้ช่วยในการสร้างการออกแบบที่บำรุงรักษาได้อย่างไร

ลองดูตัวอย่างที่ใช้งานได้จริงของตัวแปรการออกแบบที่ใช้งานได้:

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

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

เรียนรู้เพิ่มเติม

5. แถวซ้อนกัน

เปิดตัวฟีเจอร์เมื่อวันที่ 17 เมษายน 2568

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

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

อาคารที่มีความลึก

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

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

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

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

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

เพียงขั้นตอนแรก

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

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

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

เรียนรู้เพิ่มเติม

6. กลุ่มโมดูล

ฟีเจอร์ที่เปิดตัวเมื่อวันที่ 1 พฤษภาคม 2568

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

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

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

การสร้างชุดค่าผสมโมดูลที่กำหนดเอง

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

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

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

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

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

การสร้างห้องสมุดส่วนประกอบที่นำกลับมาใช้ใหม่ได้

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

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

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

ทำงานได้อย่างราบรื่นกับระบบการออกแบบของ Divi 5

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

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

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

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

เรียนรู้เพิ่มเติม

7. Attribute Manager

ฟีเจอร์ที่วางจำหน่ายเมื่อวันที่ 16 พฤษภาคม 2568

คุณได้จัดรูปแบบปุ่มในโมดูล Call to Action สีทำงานและเอฟเฟกต์โฮเวอร์ดูดี ตอนนี้คุณต้องการรูปแบบปุ่มเดียวกันเหล่านั้นในแบบฟอร์มการติดต่อ แต่ไม่ต้องการพาดหัวหรือพื้นหลังของ CTA

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

จากนั้นวางเฉพาะรูปแบบปุ่มเหล่านั้นลงในแบบฟอร์มการติดต่อ

เลือกและเลือกสิ่งที่เดินทาง

Divi 5 แยกองค์ประกอบทุกองค์ประกอบออกเป็นคุณลักษณะที่แตกต่างกัน คุณเลือกคนที่จะคัดลอก:

• คุณลักษณะทั้งหมด - ทุกอย่างได้รับการคัดลอก
• คุณลักษณะการออกแบบ - สีระยะห่างที่ตั้งไว้ล่วงหน้า แต่ไม่มีข้อความหรือรูปภาพ
• คุณลักษณะสไตล์ - เพียงแค่การเปลี่ยนแปลงที่กำหนดเองของคุณ
• คุณลักษณะเนื้อหา - ข้อความและรูปภาพเท่านั้น
• ที่ตั้งไว้ล่วงหน้า - การกำหนดที่ตั้งไว้ล่วงหน้าเท่านั้น

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

ทำงานระหว่างโมดูลที่แตกต่างกัน

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

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

ทางลัดระดับกลุ่ม

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

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

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

ความเร็วผ่านทางลัด

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

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

เล่นได้ดีกับระบบการออกแบบของคุณ

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

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

เรียนรู้เพิ่มเติม

8. การตั้งค่าการค้นหาและการกรอง

ฟีเจอร์ที่วางจำหน่ายเมื่อวันที่ 29 พฤษภาคม 2568

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

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

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

กรองโดยสิ่งที่คุณเปลี่ยนแปลง

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

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

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

ตัวเลือกการกรองอัจฉริยะ

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

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

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

เรียนรู้เพิ่มเติม

Divi 5 ซ้อนกับตัวเลือกยอดนิยมอย่างไร

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

สิ่งนี้มีความหมายอย่างไรสำหรับโครงการของคุณ

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

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

จะเกิดอะไรขึ้นต่อไป?

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

เลย์เอาต์ FlexBox

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

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

Loop Builder และการอัปเดต WooCommerce

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

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

สีขั้นสูง

สีสัมพัทธ์ที่มีสีความอิ่มตัวและความสว่าง (HSL) ช่วยให้คุณสร้างความสัมพันธ์ทางสีทางคณิตศาสตร์ ตั้งค่าสีหลักของคุณหนึ่งครั้งจากนั้นสร้างรูปแบบโดยอัตโนมัติ:“ สีน้ำเงินหลัก แต่เบากว่า 20%” หรือเฉดสีเสริมที่อัปเดตเมื่อคุณเปลี่ยนฐาน

การวางแผนเบต้าและการย้ายถิ่นฐาน

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

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

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

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

พร้อมที่จะลอง Divi 5 แล้วหรือยัง? นี่คือวิธีเริ่มต้น

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

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

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

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