คู่มือผู้เริ่มต้น Divi 5: How to Master the Basics

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

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

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

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

Divi 5 คืออะไร?

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

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

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

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

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

การเปลี่ยนจาก Divi 4 เป็น Divi 5 เป็นเรื่องง่ายหรือไม่?

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

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

Divi 5 Builder ให้ประสิทธิภาพที่เร็วขึ้นและเหมาะสมยิ่งขึ้น

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

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

สังเกตว่ามิลลิวินาที Divi 4 (ทางซ้าย) ใช้เวลาในการโหลดตัวสร้างภาพ Divi 5 โหลดเกือบจะในทันที

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

Divi 5 มอบประสบการณ์การแก้ไขที่ง่ายขึ้นและง่ายขึ้น

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

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

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

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

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

Divi 5 ทำให้องค์กรจัดการและออกแบบการตั้งค่าง่ายขึ้น

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

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

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

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

คุณสมบัติ Divi 5 ใหม่ที่คุณควรรู้

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

1. จุดพักที่ปรับแต่งได้ให้ความยืดหยุ่นที่ตอบสนองได้มากขึ้น

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

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

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

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

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

2. ตัวแปรการออกแบบช่วยให้คุณกำหนดระบบการสร้างแบรนด์ที่สอดคล้องกัน

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

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

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

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

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

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

3. กลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้าทำให้ระบบการออกแบบที่ตั้งไว้ล่วงหน้าง่ายขึ้น

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

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

ในการทำเช่นนั้นคุณจะปรับแต่งการตั้งค่าที่คุณต้องการก่อนจากนั้นบันทึกไว้เป็นที่ตั้งไว้ล่วงหน้า ด้านล่างฉันบันทึก Shadow ปุ่มเป็น Box Shadow 2 และนำไปใช้กับปุ่มอื่น ๆ

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

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

4. แถวซ้อนกันสำหรับการออกแบบเค้าโครงที่ซับซ้อน

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

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

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

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

5. กลุ่มโมดูลเพื่อจัดระเบียบโมดูลของคุณ

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

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

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

6. หน่วยขั้นสูงช่วยให้คุณปรับให้เหมาะสมสำหรับการออกแบบที่ตอบสนองอย่างชาญฉลาด

ใน Divi 4 อินพุตสไตล์ส่วนใหญ่ จำกัด เฉพาะหน่วยพื้นฐานเช่นพิกเซลและเปอร์เซ็นต์ ด้วยหน่วยขั้นสูงตอนนี้คุณสามารถใช้หน่วย CSS ที่กว้างขึ้นได้มากขึ้นรวมถึง REM, EM, VW, VH, % และแม้แต่ฟังก์ชั่น CSS ที่ทรงพลังเช่น CLAMP () เป็นการตั้งค่าภาพใน Divi 5 คุณสมบัตินี้มีประโยชน์สำหรับนักออกแบบที่ใส่ใจเกี่ยวกับการออกแบบที่ตอบสนองและปรับขนาดได้

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

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

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

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

ดูภายใน Divi 5

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

1. ดาวน์โหลดติดตั้งและเปิดใช้งาน Divi 5

นี่คือวิดีโอการสอนที่จะซื้อติดตั้งและเปิดใช้งาน Divi:

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

กลับไปที่แผงควบคุม WordPress ของคุณ ทำตามคำถามนี้: ลักษณะที่ปรากฏ> ธีม> เพิ่มธีม> การอัปโหลดธีม จากนั้นอัปโหลดไฟล์ ZIP Divi 5 จากคอมพิวเตอร์ของคุณแล้วคลิก ติดตั้งทันที

เมื่อติดตั้งแล้ว ให้เปิดใช้ งานธีม

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

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

เริ่มต้นด้วย Divi

2. สร้างเว็บไซต์ของคุณโดยใช้ Divi 5

วิธีที่เร็วที่สุดในการสร้างเว็บไซต์ทั้งหมดด้วย Divi 5 คือการใช้ เว็บไซต์ Divi Quick

คุณเลือกระหว่างสองตัวเลือก:

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

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

และนี่คือวิธีการทำงานกับ AI คุณบอก Divi AI เกี่ยวกับเว็บไซต์ของคุณและรอให้ทำอาหาร:

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

หากคุณต้องการสร้างหน้าใหม่ตั้งแต่เริ่มต้นหรือเข้าถึง Divi Visual Builder ให้ไปที่ หน้า> เพิ่มหน้า

ตอนนี้ตั้งชื่อหน้าของคุณแล้วคลิก ใช้ Divi Builder

คุณจะเข้าสู่ Divi Visual Builder

3. เรียนรู้เกี่ยวกับพื้นฐานของ Divi 5 Visual Builder

หากคุณกำลังเข้าถึง Divi 5 Visual Builder เป็นครั้งแรกคุณจะเห็นไอคอนมากมายดังนั้นนี่คือคำแนะนำอย่างรวดเร็ว:

• (1. ) แผงด้านข้างด้านซ้าย: แผงนี้มีเครื่องมือสร้าง คุณสามารถเพิ่มเลย์เอาต์ที่ทำไว้ล่วงหน้าเข้าถึงไลบรารีเค้าโครงของคุณดูโครงสร้างโดยใช้เลเยอร์สลับไปที่มุมมอง wireframe บันทึกตัวแปรการออกแบบปรับการตั้งค่าตัวสร้างและขอความช่วยเหลือ
• (2. ) แถบด้านบน: คุณสามารถสลับระหว่างโหมดตอบสนองได้ การควบคุมความกว้างและการซูมช่วยให้คุณปรับระยะห่างของเค้าโครงข้ามจุดพัก นอกจากนี้คุณยังจะพบการเลิกทำ/ทำซ้ำเค้าโครงที่ชัดเจนประวัติและบันทึกตัวเลือกที่นี่ บวกกับการออก, ดูตัวอย่าง, บันทึกร่างและเผยแพร่ปุ่มเพื่อจัดการความคืบหน้าของคุณ
• (3. ) แถบด้านขวา: เมื่อคุณคลิกเข้าไปในโมดูลใด ๆ การตั้งค่าของมันจะเปิดอยู่ทางด้านขวา คุณสามารถเพิ่มเนื้อหาสไตล์และเพิ่ม CS ที่กำหนดเองได้ที่นี่ breadcrumbs ที่ด้านบน (หน้า> ส่วน> คอลัมน์> แถว> คอลัมน์) แสดงว่าโมดูลอยู่ภายในรูปแบบของคุณอย่างไร

ถัดไปคุณมีองค์ประกอบคอนเทนเนอร์สององค์ประกอบ: ส่วน (แสดงเป็นสีน้ำเงิน) และ แถว (สีเขียวเสมอ) ภายในแถวคุณมีคอลัมน์ที่คุณสามารถเพิ่ม โมดูล (เป็นสีดำ)

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

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

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

4. สร้างหน้าไซต์ของคุณด้วย Divi 5

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

(1. ) ให้คุณเลือกจาก 2500+ เลย์เอาต์ที่ทำไว้ล่วงหน้าและ (2. ) ให้คุณสั่งให้ Divi AI สร้างหน้าของคุณ นี่คือวิธีการนำเข้าเค้าโครงพรีเมด:

หากคุณเลือกที่จะสร้างด้วย Divi AI คุณจะต้องบอกเกี่ยวกับหน้าเว็บที่คุณต้องการสร้าง

ปรับแต่งการออกแบบหน้าของคุณ

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

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

ในการแก้ไขโมดูลใด ๆ ให้คลิกที่มันและการตั้งค่าจะปรากฏขึ้นในแผงด้านขวา

ทุกแผงการตั้งค่าโมดูลมีสามแท็บ:

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

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

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

เริ่มต้นด้วย Divi

5 เคล็ดลับในการใช้ประโยชน์สูงสุดจาก Divi 5

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

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

1. อัปเดตอยู่กับรุ่นใหม่

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

หากต้องการอยู่ในลูปสมัครสมาชิก The Elegant Themes YouTube Channel ซึ่ง Nick แบ่งปันคำแนะนำและการประกาศอย่างสม่ำเสมอ

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

2. ทดลองกับ Divi 5 Builder ใหม่

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

ทำให้เป็นนิสัยใน การเยี่ยมชมบล็อก The Elegant Themes เป็นประจำเพื่อหาวิธีที่สร้างสรรค์ในการใช้ Divi 5

3. แบ่งปันและค้นหา Divi 5 เคล็ดลับและเคล็ดลับในชุมชน Divi

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

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

4. สร้างเว็บไซต์ใหม่ด้วย Divi 5

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

แต่ถ้าคุณทำงานกับไซต์ Divi 4 ที่มีอยู่ให้รอนานกว่านี้ก่อนที่จะย้ายไปยัง Divi 5

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

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

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

5. สร้างระบบการออกแบบ divi

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

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

6. รายงานข้อบกพร่องเมื่อคุณพบพวกเขา

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

เลือก Divi 5 เพื่อเริ่มต้นการออกแบบเว็บของคุณ

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

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

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

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