จุดเด่นของผลิตภัณฑ์ Divi: Divi Block

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

Divi Block คืออะไร

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

Divi Block ประกอบด้วย:

• ตัวสร้างส่วนหัว
• ตัวสร้างเค้าโครง
• ตัวสร้างส่วนท้าย
• ส่วนหัวของส่วน
• การออกแบบโมดูลพิเศษ
• รุ่นสว่างและมืด
• โครงร่างสี

คุณสามารถดูเลย์เอาต์ของคุณบนเว็บไซต์ Divi จริงได้

Divi Block เครื่องมือออนไลน์

เค้าโครง Divi Block ประกอบด้วยพื้นที่ 4 ส่วน ฉันตั้งชื่อตามหน้าที่:

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

เมนูหน้า

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

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

เมนูบล็อก

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

พื้นที่แก้ไข

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

สำหรับตัวอย่างนี้ ฉันได้เพิ่มสามช่วงตึก: วงล้อของการ์ด ส่วนหัวของหน้า และ CTA พวกเขาวางอยู่บนหน้าตามลำดับที่ฉันเลือกไว้

ตัวอย่างตัวสร้างส่วนหัว

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

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

ตัวอย่างเค้าโครง

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

ตัวอย่างนี้แสดงส่วนเกี่ยวกับเราและบริการ

ตัวอย่างนี้แสดง CTA คำถามที่พบบ่อย และตารางราคา

นี่คือตัวอย่างข้อความรับรองและโครงร่างทีม

อันนี้แสดงเค้าโครงบล็อกและโลโก้ลูกค้า

ตัวอย่างนี้แสดงแกลเลอรี ส่วนตัวเลข และส่วนกระบวนการ ซึ่งแสดงขั้นตอนของกระบวนการ

ต่อไปนี้คือตัวอย่างพอร์ตโฟลิโอและแบบฟอร์มการเลือกรับอีเมล

ตัวอย่างนี้แสดงแบบฟอร์มการติดต่อ

ตัวอย่างนี้แสดงส่วนท้าย

ตัวอย่างการออกแบบโมดูลพิเศษ

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

นี่คือแกลเลอรีการก่ออิฐ

ตัวอย่างนี้แสดงแถบโปรโมชัน พื้นหลังแบบไดนามิก และการสลับเนื้อหา

สำหรับตัวอย่างนี้ ฉันได้เลือกปุ่มลอยและแถบเลื่อนเข้า

ตัวอย่างนี้แสดงไทม์ไลน์แนวนอนและข้อความไล่ระดับสี

โครงร่างสี

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

นี่คือเลย์เอาต์ที่แสดงสีดั้งเดิม ฉันเปลี่ยนเป็นสีน้ำเงินในเครื่องมือโครงร่างสีแล้ว

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

การออกแบบเค้าโครงด้วย Divi Block

ฉันจะใช้ Divi Block เพื่อสร้างส่วนหัว หน้าแรก และส่วนท้าย จากนั้นฉันจะอัปโหลดเป็นเทมเพลตใน Divi Theme Builder

หัวข้อ

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

ต่อไป ฉันจะสร้างส่วนหัวส่วนกลางตั้งแต่เริ่มต้นใน Divi Theme Builder

ต่อไป ฉันจะนำเข้าเค้าโครง

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

CSS ทั้งหมดถูกเพิ่มไปยังบล็อคโค้ด เมนูมือถือเป็นสีเทาตามปกติ

นี่คือส่วนหัวที่ส่วนหน้า เมนูเป็นแบบติดหนึบ จึงยังคงอยู่ที่ด้านบนของหน้าเมื่อผู้ใช้เลื่อน

หน้าแรก

สำหรับเค้าโครงหน้าแรก ฉันได้เพิ่มส่วนฮีโร่และ CTA ฉันใช้สีส้มอ่อนสำหรับโครงร่างสี ฉันกำลังส่งออกไฟล์ JSON ซึ่งฉันจะเปิดเครื่องรูดบนคอมพิวเตอร์

ต่อไป ฉันจะสร้างเทมเพลตหน้าแรกตั้งแต่เริ่มต้นใน Divi Theme Builder และเพิ่มเนื้อหาที่กำหนดเอง

ต่อไป ฉันจะนำเข้าเค้าโครง

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

นี่คือส่วนหนึ่งของ CTA

นี่คือส่วนฮีโร่ที่ส่วนหน้า ฉันเลื่อนลงมาเพื่อแสดงเมนูที่ติดอยู่ด้านบนของหน้าจอ

ส่วนท้าย

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

ต่อไป ฉันจะสร้างส่วนท้ายส่วนกลางตั้งแต่เริ่มต้นใน Divi Theme Builder

ต่อไป ฉันจะนำเข้าเค้าโครง

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

นี่คือส่วนท้ายของส่วนหน้า

จะหา Divi Block ได้ที่ไหน

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

สิ้นสุดความคิด

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

เราต้องการได้ยินจากคุณ คุณเคยลอง Divi Block แล้วหรือยัง? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น