การใช้งานและปรับแต่ง Layout Template จาก Section Bootstrap

Section Bootstrap Template วิธีจัด Layout เว็บไซต์ให้สวยงามทุกหน้าจอ

Template จาก Section Bootstrap จะทำให้การจัด Layout เว็บไซต์ของคุณเป็นเรื่องง่าย สวยงามทุกหน้าจอ เพียงใช้งานปรับแต่งเว็บไซต์บนระบบ Ketshopweb

การใช้งาน Section Bootstrap

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

• 1 คลิก "ปรับแต่ง"
• 2 เลือกเมนู "Page Layouts"
• 3 เลือกหน้าที่ต้องการปรับแต่ง
• 4 คลิก "ปรับแต่งเนื้อหา"

• 5 คลิก "Add Section"

• 6 เลือก "Bootstrap" จากนั้นคลิก "Add Section"

เมื่อเพิ่ม Section Bootstrap แล้วจะแสดงส่วนจัดการตามรูปด้านล่าง

การตั้งค่า Bootstrap

• 1 คลิกไอคอนรูปน็อตเพื่อตั้งค่า

• 2 เลือกสัดส่วนแบบ "กำหนดเอง"
• 3 คลิก "Template"

จากนั้นจะแสดง Popup Template ของ Bootstrap ที่ทาง Ketshopweb ได้จัดวาง Layout ไว้ให้ใช้งาน โดยมีตั้งแต่ 2 Column จนถึง 4 Column ตัวอย่างนี้จะเลือกใช้ 4 Column

• 4 เลือก "4 Column"
• 5 เลือก "4 : 2 : 2 : 4" จากนั้นคลิก "เพิ่ม Template"

• 6 สามารถลบ Box ในส่วนที่ไม่ใช้งานออกได้ โดยคลิกไอคอนรูปถังขยะ

การใส่ Style ให้กับ Section

• a คลิกไอคอนรูปน็อต

• b คลิก "พื้นหลัง"
• c เลือกเปิดเมนูที่ต้องการปรับแต่ง จากนั้นปรับแต่งตามต้องการ

• 7 คลิก "เพิ่ม Element"

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

• 9 คลิกไอคอนรูปน็อตเพื่อตั้งค่า

ทำเหมือนกันใน Box ที่ 2 ตัวอย่างใน Box นี้จะใส่ Image จำนวน 2 Element ด้วยกัน เมื่อเพิ่ม Image แรกไปแล้วให้ดำเนินการต่อดังนี้

• 10 คลิก "เพิ่ม Element" และเลือก "Image" จากนั้นคลิก "Add Element"

ในกรณีที่ต้องการให้ Element ใน Box นี้มีระยะห่างกัน ให้ดำเนินการดังนี้

• 11 คลิก "ปรับแต่ง"

• 12 เปิดการใช้งาน "ระยะห่างบน-ล่าง"
• 13 คลิกและปรับระยะห่างบน-ล่างตามต้องการ

Box ต่อมาให้ทำการเพิ่ม Image เช่นเดียวกัน

ใน Box สุดท้าย ให้ทำการเพิ่ม Element Product Highlight โดยคลิก "เพิ่ม Element"

• 14 เลือก "Product Highlight" จากนั้นคลิก "เพิ่ม Element"

• 15 คลิก "Save" หลังตั้งค่าตามที่ต้องการเสร็จเรียบร้อย