การใช้งาน Section Bootstrap แบบกำหนดเองเพื่อปรับแต่งการแนะนำสินค้าให้ไม่น่าเบื่ออีกต่อไป

Section Bootstrap แบบกำหนดเอง ปรับแต่งการแนะนำสินค้าให้ไม่น่าเบื่ออีกต่อไป

เนรมิตให้ Section แนะนำสินค้าหรือบริการมี Layout แบบสุดปัง สวยงามในทุกหน้าจอ ด้วย Section Bootstrap แบบกำหนดเอง ซึ่งยืดหยุ่นกว่าแบบสัดส่วนเท่ากันมาก

การใช้งานปรับแต่งการแนะนำสินค้า

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

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

• 5 คลิก "Add Section"

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

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

ทำความรู้จัก Grid System ของ Bootstrap

ก่อนเริ่มตั้งค่า มาเรียนรู้เกี่ยวกับระบบ Grid System ของ Bootstrap คร่าวๆ กันก่อน ระบบ Grid System ของ Bootstrap นั้นสามารถแสดงสูงสุด 12 Column ใน 1 แถว

และยังสามารถผสาน Column รวมกันได้ โดยจัดสรรให้อยู่ภายในขนาด 12 Column ดังตัวอย่างที่ 1

กรณีมีการจัดสรร Column ใน 1 แถวเกิน 12 Column นั้นจะปัดไปเริ่มที่แถวใหม่ทันที ดังตัวอย่างที่ 2

จากตัวอย่างนั้น มีการดีไซน์ให้แต่ละหน้าจอแสดงผลต่างกันออกไป เพื่อการใช้งานที่เหมาะสม โดยแบ่งเป็น 3 ขนาดหน้าจอ

• ✓ Desktop: แสดง 2 Column
• ✓ Tablet: แสดง 1 Column
• ✓ Mobile: แสดง 1 Column

การตั้งค่า Section Bootstrap แบบสัดส่วนเท่ากัน เป็นแบบกำหนดเอง

• 1 คลิก "กำหนดเอง"
• 2 ตั้งค่าขนาดของ Box ที่ 1

• • Desktop เลือก col-lg-8 แสดง Box ใช้ผสาน 8 Column
• • Tablet เลือก col-md-12 แสดง Box ใช้ผสาน 12 Column (เต็มพื้นที่ใน 1 แถว)
• • Mobile เลือก col-12 แสดง Box ใช้ผสาน 12 Column (เต็มพื้นที่ใน 1 แถว)

• 3 ตั้งค่าขนาดของ Box ที่ 2

• • Desktop เลือก col-lg-4 แสดง Box ใช้ผสาน 4 Column
• • Tablet เลือก col-md-12 แสดง Box ใช้ผสาน 12 Column (เต็มพื้นที่ใน 1 แถว)
• • Mobile เลือก col-12 แสดง Box ใช้ผสาน 12 Column (เต็มพื้นที่ใน 1 แถว)

• 4 คลิกไอคอนถังขยะ เพื่อลบ Box ในส่วนที่ไม่ใช้งานออกได้

การใส่สีพื้นหลังให้กับ Section

• a คลิกไอคอนน็อต
• b คลิกเมนู "พื้นหลัง"
• c เปิดใช้งานสีพื้นหลัง
• d เลือกสีปรับแต่งตามต้องการ

• 5 คลิก "เพิ่ม Element" ใน Box ฝั่งซ้าย

• 6 เลือก Image จากนั้นคลิก "เพิ่ม Element"

• 7 คลิกไอคอนน็อตเพื่อใส่รูปภาพ

• 8 คลิก "เพิ่ม Element" ใน Box ฝั่งขวา

• 9 เลือก Text Area จากนั้นคลิก "เพิ่ม Element"

• 10 แก้ข้อความตามความต้องการ

• 11 คลิก "Save" หลังจากปรับแต่งเสร็จเรียบร้อย

การใช้งาน Section Bootstrap แบบกำหนดเอง ค่อนข้างยืดหยุ่นในการจัด Layout มากกว่าแบบสัดส่วนเท่ากัน สามารถอ่านข้อแตกต่างระหว่าง Section Bootstrap แบบสัดส่วนเท่ากัน กับแบบกำหนดเองได้ที่ >> บทความเปรียบเทียบ Section Bootstrap ทั้งสองแบบ <<

ตัวอย่างด้านล่าง การใช้งาน Section Bootstrap แบบกำหนดเอง ในการจัด Layout ของเว็บไซต์ เผื่อเป็นไอเดียในการปรับแต่งเว็บไซต์ให้น่าสนใจมากยิ่งขึ้น