จะประหยัดเวลาเมื่อใช้ Divi 5 ในการสร้างเว็บไซต์ได้อย่างไร?

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

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

10 วิธีที่ดีที่สุดในการสร้างเว็บไซต์ที่เร็วขึ้นด้วย Divi 5

นับตั้งแต่ Divi 5 Public Alpha เปิดตัว มีการปรับเปลี่ยนและเพิ่มประสิทธิภาพหลายอย่าง

1. ใช้การแก้ไขด้วยการคลิกเพียงครั้งเดียว

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

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

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

2. หากต้องการดำเนินการด่วน ให้คลิกขวา

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

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

3. เชื่อมต่อแผงแท็บหลายแผงสำหรับงานต่างๆ

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

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

4. ใช้ Canvas Scaling เพื่อประโยชน์ของคุณในการออกแบบแบบตอบสนอง

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

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

5. ใช้เอฟเฟกต์ Hover & Sticky ทันที

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

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

6. เพื่อการนำทางที่มีประสิทธิภาพยิ่งขึ้น ให้ใช้ Breadcrumbs

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

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

7. คัดลอกและวางสไตล์ข้ามโมดูลเพื่อประหยัดเวลา

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

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

8. เมื่อสร้างเค้าโครงที่ซับซ้อน ให้ใช้ Wireframe View

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

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

9. ใช้เนื้อหาแบบยาวในมุมมองเลเยอร์

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

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

10. เปิดรับการเรียนรู้สิ่งใหม่ๆ

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

การห่อหุ้ม

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

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