การตั้งค่า การใช้งาน Column Element

วิธีเพิ่มและตั้งค่า Column Element บนเว็บไซต์

Column Element เป็นส่วนย่อยของ Section Layout ที่ใช้จัดวางเนื้อหาน่าสนใจในเว็บไซต์ ไม่ว่าจะเป็น Product Highlight, Blog Highlight, Image หรือ Map บทความนี้จะพาไปดูวิธีเพิ่มและตั้งค่า Column Element แบบทีละขั้นตอน

การเพิ่ม Column Element

เริ่มต้นด้วยการเข้าสู่ระบบจัดการเว็บไซต์ Ketshopweb จากนั้นทำตามขั้นตอนดังนี้

คลิก "ปรับแต่ง" → "Page Layouts" → "ปรับแต่งเนื้อหา"

4 คลิก "Add Section"

คลิก "Add Section" เพื่อเพิ่ม Section ใหม่

5 เลือก "Content" จากนั้นคลิก "Add Section"

เลือก "Content" แล้วคลิก "Add Section"

เมื่อเพิ่ม Section แล้วจะแสดงอยู่ฝั่งขวามือ  6 คลิกที่พื้นที่ว่างในกรอบ

คลิกที่พื้นที่ว่างในกรอบ Section

7 คลิกที่ "Add Element"

คลิก "Add Element" เพื่อเพิ่ม Element ใหม่

8 เลือก "Column Element" จากนั้นคลิก "Add Element"

เลือก "Column Element" แล้วคลิก "Add Element"

การตั้งค่า Column Element

คลิกที่ตั้งค่า Element โดยคลิกที่ปุ่ม

คลิกไอคอนตั้งค่าทางขวามือของ Element

เมื่อเข้ามายังหน้าการตั้งค่า "Column Element" สามารถตั้งค่าได้ดังนี้

• 1 กำหนดจำนวนคอลัมน์ที่แสดงผล (ต่อแถว) เมื่อเปิดในเดสก์ท็อป
• 2 กำหนดจำนวนคอลัมน์ที่แสดงผล (ต่อแถว) เมื่อเปิดในแท็บเล็ต
• 3 กำหนดจำนวนคอลัมน์ที่แสดงผล (ต่อแถว) เมื่อเปิดในมือถือ
• 4 กำหนดระยะห่างซ้าย-ขวา ในแต่ละคอลัมน์
• 5 กำหนดระยะห่างบน-ล่าง ในแต่ละคอลัมน์

หน้าตั้งค่าจำนวนคอลัมน์และระยะห่างของ Column Element

การเพิ่มคอลัมน์และ Element ในแต่ละคอลัมน์

สามารถคลิกเพิ่มคอลัมน์ให้ครบแถวได้ โดยคลิกที่เครื่องหมายบวก ดังภาพ

คลิกเครื่องหมายบวกเพื่อเพิ่มคอลัมน์ให้ครบแถว

เพิ่ม Element ที่ต้องการในแต่ละคอลัมน์ โดยกดที่ไอคอนเครื่องหมายบวกของคอลัมน์ที่ต้องการ

เลือก Element ที่ต้องการ จากนั้นคลิก "Add Element" และตกแต่งตามที่ต้องการได้เลย

เลือก Element ที่ต้องการแล้วคลิก "Add Element"

9 คลิก "Save" หลังจากตั้งค่าสำเร็จ

คลิก "Save" เพื่อบันทึกการตั้งค่า Column Element