ฟีเจอร์คู่มือการใช้งานversion 8ตกแต่งเว็บไซต์

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

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

K
KetShopWeb Team
2022-12-14 16:04:01
การใช้งานและปรับแต่ง Layout Template จาก Section Bootstrap

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

การใช้งาน Section Bootstrap

เข้าสู่ระบบจัดการเว็บไซต์ Ketshopweb

(ตำแหน่งที่ 1) คลิก "ปรับแต่ง" 

(ตำแหน่งที่ 2) เลือกเมนู  "Page Layouts" 

(ตำแหน่งที่ 3) และเลือกหน้าที่ต้องการปรับแต่ง

(ตำแหน่งที่ 4) คลิก  "ปรับแต่งเนื้อหา"


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


(ตำแหน่งที่ 5) คลิก "Add Section" 


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


(ตำแหน่งที่ 6) เลือก "Bootstrap" จากนั้น คลิก "Add Section"


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

 

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


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

 


การตั้งค่า Bootstrap


(ตำแหน่งที่ 1) คลิก ไอคอนรูปน็อต เพื่อตั้งค่า


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


(ตำแหน่งที่ 2) เลือกสัดส่วนแบบ  "กำหนดเอง" 

(ตำแหน่งที่ 3) คลิก "Template" 


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


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

ตัวอย่างจะเลือกใช้ 4 Column โดย

(ตำแหน่งที่ 4) เลือก  "4 Column"

(ตำแหน่งที่ 5) เลือก "4 : 2 : 2 : 4" จากนั้นคลิก  "เพิ่ม Template" 


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

 

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


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

 

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

(ตำแหน่ง a) คลิกไอคอนรูปน็อต


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


(ตำแหน่ง b) คลิก "พื้นหลัง"

(ตำแหน่ง c) เลือกเปิดเมนูที่ต้องการปรับแต่ง จากนั้นปรับแต่งตามต้องการ


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


(ตำแหน่งที่ 7) คลิก "เพิ่ม Element" 


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


(ตำแหน่งที่ 8) เลือก Image จากนั้น คลิก "Add Element"


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


(ตำแหน่งที่ 9) คลิกไอคอนรูปน็อต เพื่อตั้งค่า

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


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


ทำเหมือนกันใน Box ที่ 2

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

(ตำแหน่งที่ 10) คลิก "เพิ่ม Element"  และเลือก "Image" จากนั้น คลิก "Add Element"


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


ในกรณีนี้หากต้องการให้ Element ใน Box นี้มีระยะห่างกัน 

(ตำแหน่งที่ 11) คลิก "ปรับแต่ง"


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


(ตำแหน่งที่ 12) เปิดการใช้งาน "ระยะห่างบน-ล่าง"

(ตำแหน่งที่ 13) คลิก และปรับระยะห่างบน-ล่าง ตามต้องการ

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


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


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

(ตำแหน่งที่ 14) เลือก "Product Highlight" จากนั้น คลิก "เพิ่ม Element"

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


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


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

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



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

http://www.ketshopweb.com

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

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

ฟีเจอร์คู่มือการใช้งานversion 8ตกแต่งเว็บไซต์KetShopWebE-commerce
แชร์: