การออกแบบเซลเพล ขั้นสูง

1. เริ่มใช้งาน Page Builder

บริเวณที่เอาไว้จัดการเนื้อหน้าของหน้า จะมีแท็ปแสดง 3 แท็ป คลิกที่ Page Builder (กรณีแอดมินออกแบบเลย์เอาท์ให้ หน้าเว็บจะแสดงอยู่ที่แท็บ Page Builder)

* คลิก ok เพื่อเป็นการยืนยันครั้งแรก

2. หน้าตาของส่วนจัดการจะเปลี่ยนไป

• เลือก Row คือการสร้างแถวลงในหน้าเว็บ
• 1 Row สามารถสร้างคอลัมได้ตามต้องการ

• การกำหนดคอลั่ม กำหนดที่ช่อง Set row layout
• การกำหนดคอลั่มใน 1 Row จะทำงานได้เฉพาะบน Desktop เมือเปิดบนมือถือ คอลั่มจะถูกเปลี่ยนเป็น Row
• เมื่อกำหนดเสร็จ กดปุ่ม Insert
• เลือกที่คอลั่มที่ต้องการเพิ่มข้อความหรือรูปภาพ
• เลือกที่ Add Widget
• Widget ที่ใช้ในการสร้างเซลเพจมี 3 ตัวหลัก

• SiteOrigin Editor ใช้ในการเพิ่มข้อความ , รูปภาพ , คลิป

• SiteOrigin Image ใช้ในการเพิ่มรูปภาพ

• SiteOrigin Slider ใช้สร้างภาพสไลด์
• Widget สามารถลากย้ายคอลั่มได้

3. การใช้งาน SiteOrigin Editor

• เลือกที่ Widget แล้วเลือก Edit

• widget เตรียมเครื่องมือในการเขียนข้อความ กำหนด ฟอนต์สไตล์ กำหนดสีฟอนต์ได้ ใส่ลิงค์ได้
• ใส่รูปภาพและคลิป เลือกที่ เพิ่มสื่อ
• ใส่คลิปจาก youtube กด Copy URL ของ ลิงค์ Youtube วางลงบน Editor รอสักครู่เว็บจะแสดงคลิป

4. การใช้งาน SiteOrigin Image

• เลือกที่ Widget แล้วเลือก Edit
• เลือกรูปโดยเลือก Choose Media

• Image alignment เลือกตำแหน่งจัดวางภาพในคอลั่ม (ทำงานเมื่อไม่ได้ติ๊กเลือกที่ Full Width)
• Destination URL กำหนดลิงค์ของรูป
• ติ๊กเลือกที่ Full Width หากต้องการให้ภาพใหญ่เต็มคอลั่ม

5. การใช้งาน SiteOrigin Slider

• กด Add เพื่อเพิ่ม รูปสไลด์

• เลือก Choose Media ที่ Background image
• กำหนดลิงค์ที่ Destination URL
• ติ๊กเลือก Open new window กรณีต้องการให้ลิงค์แล้วเปิดหน้าใหม่
• เพิ่มสไลด์ กดที่ปุ่ม Add ด้านล่าง
• การกำหนดค่าเมนูสไลด์

• เลือก Autoplay ให้สไลด์หมุนเองอัตโนมัติ
• เลือก Auto pause on hover กรณีต้องการให้สไลด์หยุดเมื่อ on mouse
• กำหนดสีของเมนูที่ Navigation Color
• กำหนดขนาดเมนูที่ Navigation style
• ติ๊กเลือก Always show navigation on mobile กรณีให้เมนูแสดงบนมือถือตลอดเวลา

บันทึกเซลเพจ กดที่ปุ่มบันทึกหรืออัปเดต