วิธีสร้างเว็บไซต์ด้วย Divi 5 (เข้าร่วมก่อนและก้าวไปข้างหน้า)

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

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

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

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

อะไรทำให้ Divi 5 แตกต่างกัน?

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

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

เมื่อเปิด Divi 5 คุณอาจคิดว่า“ นี่ดูสด” จากนั้นคุณก็เริ่มสร้างและนั่นคือเมื่อคุณสังเกตเห็น

“ เดี๋ยวก่อนส่วนนั้นก็โหลดได้ทันทีหรือไม่”

ใช่มันทำ และนั่นเป็นเพียงการเริ่มต้น

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

มาสำรวจจุดเด่นที่สำคัญของสิ่งที่อัลฟ่าปัจจุบันของ Divi 5 จัดส่งด้วย:

จากรหัสย่อไปจนถึงโครงสร้างที่ใช้บล็อก

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

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

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

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

อินเทอร์เฟซ Divi 5 ใหม่

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

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

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

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

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

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

พื้นที่ทำงานหลายแผง

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

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

การตั้งค่าหลายแผงใหม่ช่วยให้คุณสามารถขยายเครื่องมือของคุณออกได้

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

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

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

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

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

การเปลี่ยนจากแถวคงที่เป็นแถวซ้อนกัน

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

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

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

คุณสมบัติที่โดดเด่นอื่น ๆ

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

• การออกแบบตัวแปร รวมศูนย์ตัวเลือกสไตล์ของคุณและทำให้การเปลี่ยนแปลงทั่วทั้งไซต์เป็นเรื่องง่าย กำหนดสีฟอนต์ขนาดรูปภาพและองค์ประกอบอื่น ๆ หนึ่งครั้งจากนั้นนำไปใช้ทั่วทั้งไซต์ของคุณ ต้องการอัปเดตสีแบรนด์ของคุณหรือไม่? เปลี่ยนตัวแปรและทุกอินสแตนซ์จะอัปเดตโดยอัตโนมัติ
• การแก้ไขครั้งเดียว ทำให้การโต้ตอบกับเนื้อหาของคุณง่ายดาย เพียงคลิกที่โมดูลใด ๆ เพื่อแก้ไข ไม่มีการล่าสัตว์สำหรับไอคอนหรือปุ่มการตั้งค่าขนาดเล็กอีกต่อไป การเปลี่ยนแปลงเล็ก ๆ นี้ช่วยประหยัดการคลิกนับไม่ถ้วนตลอดวันทำงานของคุณ
• การปรับขนาดผ้าใบ ช่วยให้คุณเห็นว่าการออกแบบของคุณมีขนาดหน้าจอที่แตกต่างกันอย่างไรโดยไม่ต้องเปลี่ยนมุมมอง ลากขอบผ้าใบเพื่อปรับขนาดและดูเค้าโครงของคุณปรับตัวแบบเรียลไทม์ - เหมาะสำหรับการตรวจสอบพฤติกรรมการตอบสนองโดยไม่ต้องสลับแท็บคงที่
• การสนับสนุนหน่วยขั้นสูง เปิดโอกาสใหม่สำหรับการออกแบบที่แม่นยำและตอบสนองได้ ใช้ฟังก์ชั่น CSS เช่น calc (), clamp () และ min ()/max () โดยตรงในฟิลด์การตั้งค่าของ Divi เพื่อสร้างเลย์เอาต์ของเหลวที่ปรับให้เข้ากับขนาดหน้าจอใดก็ได้
• การปรับปรุงประสิทธิภาพ โดยการหลีกเลี่ยงการโหลดสคริปต์และโมดูลที่ไม่จำเป็น
• เบรกพอยต์ที่ปรับแต่งได้ ขยายจากเพียงสาม (เดสก์ท็อป, แท็บเล็ต, มือถือ) เป็นตัวเลือกที่ปรับได้เจ็ดตัว การควบคุมที่ปรับแต่งอย่างละเอียดนี้ช่วยให้คุณสร้างเลย์เอาต์ที่สมบูรณ์แบบสำหรับทุกสิ่งตั้งแต่โทรศัพท์ขนาดเล็กไปจนถึงจอภาพ ultrawide

การสร้างเว็บไซต์ที่มี Divi 5: คู่มือทีละขั้นตอน

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

1. การติดตั้ง Divi 5

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

2. ปรับแต่งพื้นที่ทำงานของคุณ

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

คุณสามารถสลับระหว่างโหมดแสงและมืดตามการตั้งค่าหรือเวลาทำงานของคุณ

การสร้างพื้นที่ทำงานที่เหมาะกับคุณ

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

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

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

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

เร่งเวิร์กโฟลว์ของคุณ

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

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

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

2. การตั้งค่าตัวแปรแบบไดนามิก

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

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

การตั้งค่าสีทั่วโลก

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

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

การสร้างตัวอักษรและตัวแปรตัวเลข

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

สำหรับตัวแปรตัวเลขลองคิดเกี่ยวกับการวัดทั่วไปเช่น:

• ช่องว่างภายใน (อาจจะ 30px สำหรับส่วนต่างๆ)
• รัศมีเส้นขอบ (ถ้าคุณต้องการมุมโค้งมน)
• ความกว้างสูงสุดสำหรับคอนเทนเนอร์เนื้อหา
• ขนาดตัวอักษร

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

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

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

ในทำนองเดียวกันเพิ่มตัวแปรรูปภาพสำหรับรูปภาพที่ใช้กันทั่วไปเช่นโลโก้

การใช้ตัวแปรกับหน่วยขั้นสูง

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

ตัวอย่างเช่นสร้างตัวแปรขนาดหัวเรื่องด้วย: แคลมป์ (36px, 5VW, 72px)

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

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

3. หน้าอาคารและเทมเพลตด้วย Divi

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

ตัวเลือกที่ 1: สร้างเว็บไซต์ของคุณด้วย Divi AI

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

เมื่อสร้างเว็บไซต์ที่มี Divi AI ให้ไปที่แผงควบคุม WordPress ของคุณแล้วคลิกไอคอน Divi ในเมนู มองหากล่อง Divi Quick Sites และกดปุ่ม“ สร้างเว็บไซต์ใหม่”

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

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

สำหรับรูปภาพคุณสามารถเลือกตัวเลือก Divi Quick Sites เพื่อเข้าถึงคอลเลกชันของ Unsplash ให้ Divi สร้างภาพที่กำหนดเองตามคำอธิบายทางธุรกิจของคุณหรือเลือก "ใช้สถานที่" หากคุณวางแผนที่จะเพิ่มรูปภาพของคุณเองในภายหลัง

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

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

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

เมื่อคุณพอใจกับการเลือกของคุณให้กดปุ่ม“ Generate & Publish” และรอสักครู่ในขณะที่ Divi ใช้เวทย์มนตร์ หน้าแรกของคุณจะปรากฏขึ้นพร้อมที่จะต้อนรับผู้เข้าชมเว็บไซต์ของคุณ

การเพิ่มส่วนใหม่ในหน้าของคุณโดยใช้ AI

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

การปรับแต่งส่วน Ai-Generated

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

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

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

ตัวเลือกที่ 2: สร้างเว็บไซต์ของคุณโดยใช้เค้าโครง premade

หากต้องการเพิ่มหนึ่งใน 2000+ การออกแบบสำเร็จรูปลงในหน้าของคุณให้กดปุ่ม Blue Plus ที่มุมซ้ายบนของหน้าจอและเลือก“ พรีเมดเค้าโครง” หน้าต่างจะปรากฏขึ้นแสดงตัวเลือกทั้งหมดของคุณ

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

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

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

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

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

หลังจากใช้เลย์เอาต์ ...

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

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

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

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

ตัวเลือก 3: สร้างเว็บไซต์ของคุณตั้งแต่เริ่มต้น

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

เช่นเดียวกับ Divi 4 มีคอลเลกชันของโมดูลพร้อมใช้งานกับ Divi 5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Divi 5 ยังช่วยให้คุณรวมหน่วยขั้นสูงในสาขาขนาดใดก็ได้ ต้องการส่วนที่ไม่กว้างกว่า 1200px แต่หดบนมือถือหรือไม่? พิมพ์“ ขั้นต่ำ (1200px, 90%)” ในกล่องความกว้าง เสร็จแล้ว. ภาชนะบรรจุจะอยู่ที่ความกว้าง 90% จนกว่าจะเกิน 1200px จากนั้นหยุดการเติบโต ไม่จำเป็นต้องใช้ CSS ที่กำหนดเอง หน่วยขั้นสูงเหล่านี้สามารถนำไปใช้กับตัวแปรไดนามิก

อาคารที่ตั้งไว้ล่วงหน้า

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

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

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

สร้างหน้าอื่น ๆ ตามระบบการออกแบบของคุณ (ตัวแปรและที่ตั้งล่วงหน้า)

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

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

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

สร้างเทมเพลตของคุณ

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

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

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

สร้างเทมเพลตประเภทเนื้อหาที่กำหนดเอง

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

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

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

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

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

การใช้ Divi AI สำหรับการออกแบบเทมเพลต

Divi AI ตัดเวลาสร้างเทมเพลตจากชั่วโมงเป็นนาที ใน Theme Builder เลือกสิ่งที่คุณต้องการ - ส่วนหัวส่วนท้ายรูปแบบบล็อกหรือหน้าผลิตภัณฑ์

กดปุ่ม Blue + ใน Visual Builder และเลือก“ สร้างส่วนด้วย AI”

คำอธิบายของคุณสำคัญที่สุด เจาะจงเกี่ยวกับสิ่งที่คุณต้องการ:

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

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

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

ประหยัดเวลาด้วยคุณสมบัติเทมเพลตขั้นสูง

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

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

4. การออกแบบที่ตอบสนองต่อการเรียนรู้

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

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

• โทรศัพท์: <767px ครอบคลุมขนาดหน้าจอสมาร์ทโฟนส่วนใหญ่
• โทรศัพท์กว้าง: <860px ครอบคลุมหน้าจอโทรศัพท์ส่วนใหญ่ในโหมดแนวนอน
• แท็บเล็ต: <980px เหมาะสำหรับหน้าจอแท็บเล็ตส่วนใหญ่ในโหมดแนวตั้ง
• แท็บเล็ตกว้าง: <1024px เป็นมาตรฐานสำหรับมุมมองภูมิทัศน์ใน iPads และแท็บเล็ตซัมซุงส่วนใหญ่
• Widescreen: > 1280px เป็นความกว้างที่ดีสำหรับแล็ปท็อปที่เล็กที่สุด
• Ultrawide: > 1440px ครอบคลุมหน้าจอเดสก์ท็อปขนาดใหญ่

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

นอกจากนี้เมื่อคุณต้องการคุณสามารถปรับจุดพักตามความต้องการของคุณ

5. รับ, ตั้ง, เปิดตัว!

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

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

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

สัมผัสขัดสุดท้าย

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

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

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

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

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

สร้างเว็บไซต์ที่เร็วขึ้นและดีขึ้นด้วย Divi 5

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

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

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

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