– คลิกที่ ตำแหน่งที่1, 2และ 3 เพื่อเข้าไปที่ส่วนของ Section
![](https://blog.ketshopweb.com/wp-content/uploads/2019/06/sec2-1-1024x482.jpg)
– คลิกที่ปุ่ม “Add Section” ใน ตำแหน่งที่1 เพื่อทำการเพื่ม Section
![](https://blog.ketshopweb.com/wp-content/uploads/2019/06/sec2-2-1024x482.jpg)
– คลิกที่ Section ที่ต้องการเพิ่ม จากนั้นคลิกที่ปุ่ม “OK”
![](https://blog.ketshopweb.com/wp-content/uploads/2019/07/el1-1-1-1024x482.jpg)
– คลิกที่ Section เพื่อทำการเพิ่ม Element ด้านใน
![](https://blog.ketshopweb.com/wp-content/uploads/2019/07/el1-3-1024x482.jpg)
– คลิกที่ปุ่ม “Add Element” เพื่อทำการเพิ่ม Element
![](https://blog.ketshopweb.com/wp-content/uploads/2019/07/el1-4-1024x482.jpg)
– คลิกเลือก “Column Element” แล้วคลิกที่ปุ่ม “OK”
![](https://blog.ketshopweb.com/wp-content/uploads/2020/01/ele-column-01-1024x496.jpg)
– คลิกที่ตำแหน่งที่ 1 เพื่อเข้าสู่การตั้งค่า Column Element
![](https://blog.ketshopweb.com/wp-content/uploads/2020/01/ele-column-03-1024x257.jpg)
– ตั้งค่าตามที่ต้องการ โดยมีรายละเอียดดังนี้
![](https://blog.ketshopweb.com/wp-content/uploads/2020/01/ele-column-04-1024x443.jpg)
- ตำแหน่งที่ 1 กำหนดจำนวนคอลัมน์ที่แสดงผล(ต่อแถว) เมื่อเปิดในในเดสก์ท็อป
- ตำแหน่งที่ 2 กำหนดจำนวนคอลัมน์ที่แสดงผล(ต่อแถว) เมื่อเปิดในแท็บเล็ต
- ตำแหน่งที่ 3 กำหนดจำนวนคอลัมน์ที่แสดงผล (ต่อแถว) เมื่อเปิดในมือถือ
- ตำแหน่งที่ 4 กำหนดระยะห่างซ้าย-ขวา ในแต่ละคอลัมน์
- ตำแหน่งที่ 5 กำหนดระยะห่างบน-ล่าง ในแต่ละคอลัมน์
– คลิกที่ตำแหน่งที่1 เพื่อเพิ่มคอลัมน์ให้ครบแถว
![](https://blog.ketshopweb.com/wp-content/uploads/2020/01/ele-column-05-1024x215.jpg)
– เพิ่ม Element ที่ต้องการ ในแต่ละคอลัมน์ โดยกดที่เครื่องหมาย “+” ของคอลัมน์ที่ต้องการ
![](https://blog.ketshopweb.com/wp-content/uploads/2020/01/ele-column-06-1024x215.jpg)
ตัวอย่างการตั้งค่าการแสดงผลบนเดสก์ท็อป 6 คอลัมน์ บนแท็บเล็ต 3 คอลัมน์ และบนมือถือ 2 คอลัมน์
![](https://blog.ketshopweb.com/wp-content/uploads/2020/01/ele-column-preview-1024x701.png)