การใช้งาน DIVI BUILDER โดยทั่วไป

inCart Blog, knowledge, tutorial

[et_pb_section bb_built=”1″ fullwidth=”off” specialty=”off”][et_pb_row][et_pb_column type=”4_4″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]

  1. หลังจาก login เข้ามาจากหน้า Word Press หลักเป็นที่เรียบร้อยแล้วให้ผู้ใช้งานทำการเลือกแถบเมนูด้านข้างอย่าง PAGE/ POST เพื่อทำการเข้าถึงในส่วนของการเพิ่มหน้าการใข้งาน (PAGE) และบทความ (POST)
  2. กด USE THE DIVI BUILDER เพื่อเริ่มต้นใช้ตัวสร้างรูปแบบคอนเท้นท์ของ DIVI

3. จากนั้นระบบจะทำการรันโครงสร้างภายในขึ้นมา ให้ผู้ใช้งานทำการเลือกว่าต้องการเซคชั่นแบบไหนจาก Standard Section – มาตรฐาน / Full Width Section – เซคชั่นเน้นความกว้างแบบเต็มพื้นที่ / Specialty Section – เซคชั่นพิเศษที่ผสมรูปแบบระหว่าง Full Width กับ Standard เข้าด้วยกัน

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

[/et_pb_text][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]

STANDARD SECTION

  • ขั้นตอนต่อไปจะเป็นการเพิ่ม Modules คือการกำหนดลงไปว่าเราอยากให้พื้นที่ส่วนนั้นประกอบไปด้วยอะไรซึ่ง DIVI มีตัวเลือกให้เราเลือกค่อนข้างมากในส่วนนี้แต่ที่จำเป็นและใช้กันเป็นประจำนั่นคือ TEXT (ตัวอักษร) / IMAGE (ใส่รูปภาพ)  [เมื่อเข้าสู่ TEXT จะเห็นพื้นที่ว่างเปล่าซึ่งอยู่ภายใต้ CONTENT พื้นที่ตรงนี้นี่เองที่ผู้ใช้งานสามารถใส่ข้อความที่ต้องการลงไปได้ หากผู้ใช้งานต้องการเปลี่ยนสีหรือขนาดตัวอักษรของตัวเนื้อความนี้ก็สามารถทำได้ด้วยการเลือกแถบ DESIGN จากสามเมนูด้านบน (CONTENT / DESIGN / ADVANCED) จากนั้นสังเกตที่หัวข้อใหญ่ที่มีคำว่า TEXT และเลือกปรับสีที่ TEXT TEXT COLOR และปรับขนาดตัวอักษรที่ TEXT TEXT SIZE ในส่วนอื่นๆนั้นยังไม่แนะนำให้ปรับเพราะตัวตั้งต้นที่ให้มามีความลงตัวอยู่พอสมควรแล้ว]

[/et_pb_text][et_pb_text _builder_version=”3.0.85″ background_layout=”light”] [อีกหนึ่งโมดุลที่ใช้กันประจำคือ IMAGE ให้ผู้ใช้งานเพิ่มภาพที่ต้องการลงไปโดยกดที่ UPLOAD AN IMAGE ที่โซน IMAGE URL ได้ทันทีหรือถ้าต้องการใช้ภาพจากที่อื่นก็ทำได้ด้วยการเลือก LINK URL // อีกจุดหนึ่งที่ผู้ใช้งานอาจจะต้องปรับเพิมคือในส่วนของ DESIGN ที่แถบกลางด้านบน (CONTENT / DESIGN / ADVANCED) โดย IMAGE ALIGNMENT มีไว้สำหรับปรับตำแหน่งการวางของรูปภาพว่าจะให้ชิดซ้าย อยู่ตรงกลางหรือชิดขวา/ US BORDER – เพื่อเพิ่มกรอบที่บริเวณรูปภาพ / FORCE FULL WIDTH – บังคับขยายภาพให้กว้างที่สุด / SHOW SPACE BELOW THE IMAGE – เลือก YES เมื่อต้องการให้มีที่ว่างด้านล่างรูปภาพ | เลือก NO เมื่อไม่ต้องการที่ว่างด้านล่างภาพ ]

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section bb_built=”1″ fullwidth=”off” specialty=”off”][et_pb_row][et_pb_column type=”4_4″][et_pb_text _builder_version=”3.0.85″ background_layout=”light”]

FULL WIDTH SECTION

  • ในส่วนของเซคชั่น Full Width หรือเซคชั่นมุ่งเน้นใช้พื้นที่แบบเต็มที่ก็ไม่ได้มีความแตกต่างอะไรกับแบบ STANDARD SECTION แต่โมดุลจะมีให้เลือกน้อยกว่าตตามรูปภาพด้านล่างและที่ใช้กันบ่อยๆจะประกอบไปด้วย FULL WIDTH HEADER // FULL WIDTH IMAGE // FULLL WIDTH SLIDER

FULL WIDTH HEADER (การทำเฮดเดอร์แบบ FULL WIDTH)

FULL WIDTH HEADER จะแบ่งแท็บย่อยลงไปได้อีก 3 อย่างคือ CONTENT / DESIGN / ADVANCED

รายละเอียดฟิลด์ในแท็บ CONTENT

  • ฟิลด์ที่จำเป็นต้องกรอกเบื้องต้นจะประกอบไปด้วย TITLE – หัวเรื่อง // SUBHEADING TEXT – ข้อความใต้หัวเรื่อง (จะใส่หรือไม่ก็ได้)  ///  CONTENTS – พื้นที่ใส่ข้อความที่ผู้ใช้งานต้องการใส่  ///  BACKGORUND COLOR  — สีพื้นหลัง  / BACKGROUND IMAGE – ภาพพื้นหลัง

รายละเอียดฟิลด์ในแถบ DESIGN

  • TEXT & LOGO ORIENTATION – การจัดวางโลโก้และตัวอักษร – สำหรับการวางตำแหน่งตัวอักษรและโลโก้
  • MAKE FULLSCREEN – ขยายโมดุลแบบเต็มหน้าจอ – YES – เพื่อเปิดใช้และ NO – ในกรณีที่ไม่ใข้งาน  // การเปิดใช้ MAKE FULLSCREEN จะทำให้ภาพพื้นหลังที่เซ็ทไว้ขยายมากกว่าเดิมจนทำให้ความใหญ่ของรูปภาพและตัวอักษรไม่สัมพันธ์กันซี่งอาจทำให้ผู้ใช้จำเป็นที่จะต้องปรับขนาดตัวอักษรให้ใหญ่ขึ้นด้วยตามความเหมาะสม

Title Text

  • Title Heading Level – ระดับตัวอักษรของ Title
  • Title Text Alignment – ตำแหน่งการจัดวางหัวเรื่องว่าจะให้อยู่ซ้าย ตรงกลางหรือฝั่งขวา
  • Title Text Size – ขนาดตัวอักษรของ Title
  • Title Text Color – สีของตัวอักษร

Content Text

  • Content Text Alignment – ตำแหน่งการจัดวางคอนเท้นท์ในส่วนของบอดี้ว่าจะให้อยู่ซ้าย กลางหรือขวา
  • Content Text Size – ขนาดตัวอักษรในคอนเท้นท์
  • Content Text Color – สีตัวอักษรในส่วนของเนื้อความ

FULL WIDTH SLIDER MODULE

รายละเอียดแท็บ CONTENT

  • ADD NEW SLIDE กดเพื่ออเพิ่มสไลด์ที่ต้องการ
  • รายละเอียดฟิลด์ใน ADD NEW SLIDE
  • HEADING – กำหนดหัวเรื่องใน SLIDE นั้นๆ
  • BUTTON TEXT – ตัวอักษรภายในปุ่ม – กรณีที่ต้องการเพิ่มปุ่มบริเวณสไลด์
  • CONTENT – พื้นที่ว่างไว้สำหรับใส่เนื้อความ
  • LINK >> BUTTON URL – ลิ้งค์ URL ของปุ่ม
  • BACKGROUND || BACKGROUND COLOR – สีพื้นหลัง / BACKGROUND IMAGE – ภาพพื้นหลัง

  • รายละเอียดฟิลด์ในแถบ DESIGNTitle Text
    Title Heading Level – ระดับตัวอักษรของ Title
    Title Text Alignment – ตำแหน่งการจัดวางหัวเรื่องว่าจะให้อยู่ซ้าย ตรงกลางหรือฝั่งขวา
    Title Text Size – ขนาดตัวอักษรของ Title
    Title Text Color – สีของตัวอักษร

  • Content TextBODY Text Alignment – ตำแหน่งการจัดวางคอนเท้นท์ในส่วนของบอดี้ว่าจะให้อยู่ซ้าย กลางหรือขวา
    Body Text Size – ขนาดตัวอักษรในคอนเท้นท์
    Body Text Color – สีตัวอักษรในส่วนของเนื้อความ

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Tags: