มาสร้าง Section แนะนำสินค้า/บริการบน Website ของคุณ เพื่อให้ Website ของคุณน่าสนใจมากขึ้น ด้วย Section Bootstrap แบบสัดส่วนเท่ากัน
มีวิธีการใช้งาน Section Bootstrap ดังนี้
เข้าระบบจัดการเว็บไซต์ Ketshopweb
(ตำแหน่งที่ 1) คลิกคำว่า "ปรับแต่ง"
(ตำแหน่งที่ 2) เลือกเมนู "Page Layouts"
(ตำแหน่งที่ 3) เลือก Page ที่ต้องการปรับแต่ง
(ตำแหน่งที่ 4) คลิก "ปรับแต่งเนื้อหา"
(ตำแหน่งที่ 5) คลิก "Add Section"
(ตำแหน่งที่ 6) เลือก "Bootstrap" จากนั้น คลิก "Add Section"
เมื่อเพิ่ม Section Bootstrap แล้วจะแสดงส่วนจัดการตามรูปด้านล่าง โดย Default จะเป็น Section Bootstrap แบบสัดส่วนเท่ากัน แสดงอยู่ที่ 3 column ในทุกขนาดหน้าจอ
จากตัวอย่างเราจะเห็นว่ามีการ Design ให้แต่ละหน้าจอมีการแสดงผลที่ต่างกันออกไป เพื่อการใช้งานที่เหมาะ โดยแบ่งเป็น 3 ขนาดหน้าจอ
Desktop แสดง 2 Column
Tablet แสดง 2 Column
Mobile แสดง 1 Column
หากต้องการจัดวางตามตัวอย่าง มีการตั้งค่าดังนี้
(ตำแหน่งที่ 1) คลิกไอคอนรูปน็อต
(ตำแหน่งที่ 2) กดใช้งาน กำหนดแยกตามขนาดหน้าจอ
(ตำแหน่งที่ 3) กรอกจำนวน Column ที่ต้องการ
*หมายเหตุ Desktop, Tablet สูงสุดไม่เกิน 12 Column Mobile สูงสุดไม่เกิน 4 Column*
(ตำแหน่งที่ 4) สามารถ ลบ Box ในส่วนที่ไม่ใช้งานออกได้
จากตัวอย่างจะใช้ 2 Element คือ Text Area ใส่ลงใน Box ทางซ้าย และ Product Highlight ใส่ลงใน Box ทางขวา
ตั้งค่า Box ด้านซ้าย ด้วย Text Area
(ตำแหน่งที่ 1) คลิก เพิ่ม "Element"
(ตำแหน่งที่ 2) เลือก Text Area จากนั้นคลิก "เพิ่ม Element"
** เลือก Text Area ที่ต้องการ จากนั้น คลิก "ตกลง" **
- Element ว่าง คือ กรอบข้อความที่สามารถปรับแต่งได้เองโดยไม่มีองค์ประกอบ
- Element พร้อม Mock-Up คือ กรอบข้อความที่มีองค์ประกอบตัวอย่างให้เพื่อสะดวกต่อการใช้งานมากขึ้น
(ตำแหน่งที่ 3) แก้ข้อความตามความต้องการได้เลย
หลังจากกรอกข้อความเรียบร้อย คุณสามารถตกแต่ง Style ของ Box ได้ตามความต้องการ โดยกดปรับแต่ง
จากตัวอย่าง จะเปิดตั้งค่า Style 3 รูปแบบด้วยกัน
Padding
สีพื้นหลัง
ภาพพื้นหลัง
หลังจากตั้งค่า Box ฝั่งซ้ายเสร็จเรียบร้อยจากนั้นเพิ่ม Product Highlight ใส่ลงใน Box ทางขวา
(ตำแหน่งที่ 1) คลิก "เพิ่ม Element"
(ตำแหน่งที่ 2) เลือก Product Highlight จากนั้นคลิก "เพิ่ม Element"
สามารถตั้งค่า Product Highlight โดย
(ตำแหน่งที่ 3) คลิกไอคอนรูปน็อต
หลังเพิ่ม Element จะเห็นว่าระยะความสูงของทั้ง 2 ฝั่งยังไม่เท่ากัน สามารถตั้งค่าให้ความสูงของ Box ทั้ง 2 เท่ากันได้
(ตำแหน่งที่ 4) คลิก "ปรับแต่ง"
(ตำแหน่งที่ 5) คลิก "ไอคอนรูปน็อต"
(ตำแหน่งที่ 6) เปิดใช้งาน ความสูงเท่ากัน
หลังจากตั้งค่าความสูงเสร็จ มาตกแต่งพื้นหลัง Section Bootstrap คลิกที่ "พื้นหลัง" และปรับแต่งตามต้องการ
** ตัวอย่างจะใช้งาน สีพื้นหลัง กับ ภาพพื้นหลัง **
(ตำแหน่งที่ 1) คลิก "Save" หลังจากตั้งค่าเรียบร้อยแล้ว
เพียงเท่านี้เราก็ได้ Section แนะนำสินค้า แสดงบน Website ของคุณแล้ว
การใช้งาน Section Bootstrap แบบสัดส่วนเท่ากันนั้น สามารถทำในลักษณะอื่น ๆ ก็ได้เช่นกัน เช่น การตกแต่งหมวดหมู่สินค้า ทั้งนี้ก็แล้วแต่จะสังสรรค์ Websiteให้มีความน่าสนใจ และเหมาะสมกับผลิตภัณฑ์ของมากที่สุด
ตัวอย่างรูปด้านล่าง ที่มีการใช้งาน Section Bootstrap แบบสัดส่วนเท่ากัน ในการจัด Layout ของ Website ปรับแต่ง Website ให้น่าสนใจมากยิ่งขึ้น
Ketshopweb | เครื่องมือร้านค้าออนไลน์ ขายคล่อง ส่งสะดวก ครบในที่เดียว
เรายินดีให้คำปรึกษาการทำเว็บไซต์ฟรี ไม่มีค่าใช้จ่าย
ติดต่อมาที่ 02-038-5588 , email : sales@ketshopweb.com
