วิธีการปรับแต่งหน้า Homepage ด้วย SiteOrigin Page Builder

วิธีการปรับแต่งหน้า Homepage ด้วย SiteOrigin Page Builder

เตรียมความพร้อมก่อนเริ่มด้วยการ Download และติดตั้ง Plugin
1. Page Builder by SiteOrigin
2. SiteOrigin Widgets Bundle

Page Builder by SiteOrigin มีอะไรดี

SiteOrigin Page Builder เป็น Plugin สำหรับจัดการ Layout ในรูปแบบ Object ทำให้ง่ายต่อผู้ใช้งานใหม่ยิ่งขึ้น มีฟังชั่นที่ช่วยให้เราแก้ไขข้อมูลได้เหมือนกับว่าอยู่ที่หน้าเว็บจริงๆ โดยไม่จำเป็นต้องมีความรู้เกี่ยวกับ Codeing

เปิดใช้งาน Page Builder by SiteOrigin

หลังจากติดตั้งปลั๊กอินเสร็จแล้วจะปุ่ม Page Builder ขึ้น ข้างๆ กับปุ่ม Visual กับ Text ของหน้า Editor ให้เราคลิกที่ปุ่มนี้เพื่อใช้งานการจัดการด้วย Page Builder

Toolbar ของ Plugin มีอะไรบ้าง

1. Widget : สำหรับเพื่ม Widget ทั้งของ WordPress  เองและในส่วนอื่นๆ
2. Row : สำหรับเพิ่ม Row และจัด Column
3. Page Builder Layouts : สำหรับ Import หรือ Export layout ในหน้าปัจจุบัน
4. Live Editing : แก้ไขคอนเท้นในแบบเสมือนจริง
5. History สำหรับย้อนกลับการแก้ไขได้
6. Prebuilt Layout หรือเทมเพลตสำเร็จรูปให้เลือกใช้งานได้ทันที

การใช้งาน Row

สำหรับผู้เริ่มใหม่แนะนำให้ใช้ Live Editing ในหมายเลข 5  เพื่อความสะดวกสบาย ในการใช้งานหากมีการแก้ไขแล้วจะสามรถ เห็นได้แบบ Realtime

ขั้นแรกเริ่มจากการเพิ่ม Row หรือการเพิ่มแถวแนวนอนสามารถทำได้โดยการ Click ที่ปุ่ม Add Row  จะแสดงการตั้งค่า Row ดังภาพด้านล้าง

1. Set Row Layout : สำหรับจัดการ Column ว่า แถวนี้จะให้มีกี่ Column
2.Column with a ratio of : สำหรับจัดการความกว้างของ Column
3. Going Form : สำหรับจัดเรียง จากซ้ายไปขวาหรือขวามาซ้าย

การใช้งาน Widget ต่างๆของ Page Builder by SiteOrigin สามารถดูได้จาก Video ด้านล่าง

จากภาพจะเห็นได้ว่ามี Widget ต่างๆนอกเหนือจาก SiteOrigin Page Builder ให้สามารถเรียกใช้งานได้ด้วย  สำหรับครั้งนี้จะลองใช้แค่ 2 อย่าง คือเพิ่มรูปภาพและะ Text Editor  ของตัว SiteOrigin 

1. Widget : สำหรับเพื่ม Widget ทั้งของ WordPress  เองและในส่วนอื่นๆ
2. Row : สำหรับเพิ่ม Row และจัด Column

SiteOrigin Page Builder เป็น Plugin สำหรับจัดการ Layout ในรูปแบบ Object ทำให้ง่ายต่อผู้ใช้งานใหม่ยิ่งขึ้น มีฟังชั่นที่ช่วยให้เราแก้ไขข้อมูลได้เหมือนกับว่าอยู่ที่หน้าเว็บจริงๆ โดยไม่จำเป็นต้องมีความรู้เกี่ยวกับ Codeing

จัดการกับ ID, Class, Custom CSS ได้ในหน้าเดียวกัน

สำหรับบางคนที่มีความรู้ความเข้าใจเรื่อง Css อยู่แล้ว สามารถใช้ ID , Class , จัดการ Css ได้ Pluginตัวนี้ก็สามารถทำให้ท่านจัดการได้โดนง่าย ด้วยเมนูด้านขวาในการจัดการใน Object นั้นๆ  

1. Widget : สำหรับเพื่ม Widget ทั้งของ WordPress  เองและในส่วนอื่นๆ
2. Row : สำหรับเพิ่ม Row และจัด Column
3. Page Builder Layouts : สำหรับ Import หรือ Export layout ในหน้าปัจจุบัน