การใช้งานตกแต่งหมวดหมู่สินค้าด้วย Section Bootstrap แบบสัดส่วนเท่ากัน

ตกแต่งหมวดหมู่สินค้าด้วย Section Bootstrap แบบสัดส่วนเท่ากัน

หากธุรกิจร้านค้าของคุณมีสินค้าที่หลากหลายประเภท หรือมีการจัดสินค้าเป็นหมวดหมู่ ส่วนที่บ่งบอกหมวดหมู่สินค้าบนเว็บไซต์ก็สำคัญไม่แพ้กัน ตกแต่งหน้าตาหมวดหมู่สินค้าให้ดูดีและเหมาะสมกับทุกขนาดหน้าจอ ได้ง่ายๆ ด้วย Section Bootstrap แบบสัดส่วนเท่ากัน

การใช้งาน การตกแต่งหมวดหมู่สินค้า

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

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

• 5 คลิก "Add Section"

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

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

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

การตั้งค่าตามตัวอย่าง

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

• 2 กดใช้งาน กำหนดแยกตามขนาดหน้าจอ
• 3 กรอกจำนวน Column ที่ต้องการให้แสดง

• 4-5 สามารถกดเพิ่ม Box ได้

การเพิ่ม Element ลงใน Box

เมื่อกำหนดขนาดและจำนวนคอลัมน์แล้ว สามารถเพิ่ม Element ลงใน Column Box ได้ โดย Element ที่สามารถใช้งานได้กับ Section Bootstrap มีดังนี้

จากตัวอย่างจะใช้ 2 Element คือ Image และ Text Area ใส่ลงใน Box โดย

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

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

• 8 คลิก "เพิ่ม Element" ลงใน Box (สามารถเพิ่มได้เรื่อยๆ ตามต้องการ)

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

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

• 11 เปลี่ยนข้อความตามความต้องการ

สามารถปรับแต่ง Style ของ Element ได้

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

จากนั้นปรับแต่งตามต้องการ

กรณีมี Box ค่อนข้างเยอะ สามารถตั้งชื่อ Box ได้

เพื่อการจัดการที่ง่ายขึ้น สามารถตั้งชื่อ Box ได้ ทำได้โดย

• 1 คลิกไอคอนรูปน็อต
• 2 คลิกไอคอนดินสอของ Box ที่ต้องการตั้งชื่อ เมื่อตั้งชื่อตามต้องการแล้วจากนั้นคลิก "บันทึก"

• 3 คลิกไอคอนรูปกระดาษ สามารถกดโคลน Box ไปใช้ได้โดยไม่ต้องตั้งค่าใหม่ในทุกๆ Box เหมาะกับการจัดรูปแบบที่มีลักษณะเหมือนกัน

หลังจากโคลน Box ตามจำนวนที่ต้องการแล้ว ให้เปลี่ยนรูป Icon และเปลี่ยนข้อความ

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

การใช้งาน Section Bootstrap แบบสัดส่วนเท่ากันนั้น ค่อนข้างเหมาะกับ Content ที่มีรูปแบบการตกแต่งที่เหมือนกัน ไม่ว่าจะทำตามตัวอย่างที่ทำไปข้างต้น หรือทำในลักษณะอื่นๆ ก็ได้เช่นกัน ไม่จำเป็นต้องทำแค่หมวดหมู่สินค้าเท่านั้น

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