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

Template จาก Section Bootstrap ที่จะทำให้การจัด Layout Website ของคุณเป็นเรื่องง่าย สวยงามทุกหน้าจอ แค่ใช้งานปรับแต่ง Website บนระบบ 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) คลิกไอคอนรูปน็อต เพื่อตั้งค่า

ดูการตั้งค่า "Image" เพิ่มเติม >> คลิกที่นี่ <<

ทำเหมือนกันใน 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"

สามารถตั้งค่า Product Highlight โดยคลิกที่ ไอคอนรูปน็อต ดูการตั้งค่าเพิ่มเติม >> คลิกที่นี่ <<

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

Ketshopweb | เครื่องมือร้านค้าออนไลน์ ขายคล่อง ส่งสะดวก ครบในที่เดียว

http://www.ketshopweb.com

เรายินดีให้คำปรึกษาการทำเว็บไซต์ฟรี ไม่มีค่าใช้จ่าย

ติดต่อมาที่ 02-038-5588 , email : sales@ketshopweb.com