Divi เป็นหนึ่งในนั้นอย่างแน่นอน ธีม WordPress ที่นิยมมากที่สุดในปัจจุบัน องค์ประกอบหนึ่งที่เป็นจุดแข็งของชุดรูปแบบนี้คือตัวสร้าง (Divi Builder) ซึ่งเตือนเราหลายอย่างว่า แต่งภาพ.

Divi Builder มีสองรูปแบบ ได้แก่ "Back-end Builder" มาตรฐานและ "Visual Builder" อินเทอร์เฟซทั้งสองช่วยให้คุณสร้างเว็บไซต์ประเภทเดียวกันโดยมีเนื้อหาชิ้นเดียวกันและพารามิเตอร์การออกแบบเดียวกัน ข้อแตกต่างเพียงอย่างเดียวคืออินเทอร์เฟซ Back-end Builder อยู่ในแดชบอร์ดของ WordPress และสามารถเข้าถึงได้ด้วยการตั้งค่ามาตรฐานอื่น ๆ ของ WordPress

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

ดาวน์โหลด DIVI WordPress Theme

divi builder.jpeg

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

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

use-visual-builder.jpg

วิธีเปิดใช้ Visual Builder

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

วิธีเปิดใช้งาน visual builder.jpeg

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

ใช้ตัวสร้างภาพ Divi.jpeg

พื้นฐานของ Visual Builder

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

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

ส่วน

ส่วนประกอบพื้นฐานและใหญ่ที่สุดที่ใช้ในการออกแบบเลย์เอาต์ด้วย Divi คือส่วนต่างๆ ใช้เพื่อสร้างกลุ่มเนื้อหาขนาดใหญ่และนี่คือสิ่งแรกที่คุณเพิ่มลงในเพจของคุณ มีสามประเภทส่วน: ปกติพิเศษและเต็มความกว้าง

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

แถว

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

โมดูล

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

สร้างหน้าแรกของคุณ

สามสร้างพื้นฐาน (ส่วนเส้นและโมดูล) จะใช้ในการสร้างหน้าเว็บของคุณ

การสร้างหน้า Divi.jpg

เพิ่มส่วนแรกของคุณ

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

หากคุณเริ่มหน้าใหม่ส่วนแรกของคุณจะถูกเพิ่มโดยอัตโนมัติ

รายชื่อ divi.jpg ส่วน

เพิ่มบรรทัดแรกของคุณ

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

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

วิธีแทรกแถว Divi.jpeg

การเพิ่มโมดูลแรกของคุณ

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

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

ในการเพิ่มโมดูลให้คลิกปุ่มสีเทา (+) ที่มีอยู่ภายในคอลัมน์ว่างหรือคลิกปุ่มสีเทา (+) ที่มีอยู่เมื่อคุณวางเมาส์เหนือโมดูลบนหน้าเพื่อเพิ่มโมดูลใหม่ด้านล่าง . เมื่อคุณคลิกที่ปุ่มคุณจะได้รับรายชื่อโมดูล

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

แทรกโมดูล DIVI.jpeg

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

[vc_row center_row = "ใช่"] [vc_column width = "1/2″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 " style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] ดาวน์โหลดธีม DIVI [/ vcex_button] [/ width_column] [» vc_column] [ » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" Layout = "ขยาย" align = "กลาง" font_family = "Raleway" font_weight = "700″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] ดาวน์โหลดเทมเพลต DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

บทแนะนำ Divi อื่น ๆ