แนะนำสินค้าให้น่าสนใจด้วย Section Bootstrap แบบสัดส่วนเท่ากัน

สร้าง Section แนะนำสินค้า/บริการ ด้วย Section Bootstrap แบบสัดส่วนเท่ากัน

มาสร้าง Section แนะนำสินค้า/บริการบนเว็บไซต์ของคุณ เพื่อให้เว็บไซต์น่าสนใจมากขึ้น ด้วย Section Bootstrap แบบสัดส่วนเท่ากัน

มีวิธีการใช้งาน Section Bootstrap ดังนี้

• 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 ที่ต้องการ

• 4 สามารถ ลบ Box ในส่วนที่ไม่ใช้งานออกได้

ใส่ Element ลงใน Box

จากตัวอย่างจะใช้ 2 Element คือ Text Area ใส่ลงใน Box ทางซ้าย และ Product Highlight ใส่ลงใน Box ทางขวา

ตั้งค่า Box ด้านซ้าย ด้วย Text Area

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

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

• Element ว่าง คือ กรอบข้อความที่สามารถปรับแต่งได้เองโดยไม่มีองค์ประกอบ
• Element พร้อม Mock-Up คือ กรอบข้อความที่มีองค์ประกอบตัวอย่างให้เพื่อสะดวกต่อการใช้งานมากขึ้น

• 3 แก้ข้อความตามความต้องการได้เลย

หลังจากกรอกข้อความเรียบร้อย คุณสามารถตกแต่ง Style ของ Box ได้ตามความต้องการ โดยกดปรับแต่ง จากตัวอย่างจะเปิดตั้งค่า Style 3 รูปแบบด้วยกัน

• Padding
• สีพื้นหลัง
• ภาพพื้นหลัง

ตั้งค่า Box ด้านขวา ด้วย Product Highlight

หลังจากตั้งค่า Box ฝั่งซ้ายเสร็จเรียบร้อย จากนั้นเพิ่ม Product Highlight ใส่ลงใน Box ทางขวา

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

• 2 เลือก Product Highlight จากนั้นคลิก "เพิ่ม Element"

สามารถตั้งค่า Product Highlight โดย

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

ปรับความสูงของ Box ให้เท่ากัน

หลังเพิ่ม Element จะเห็นว่าระยะความสูงของทั้ง 2 ฝั่งยังไม่เท่ากัน สามารถตั้งค่าให้ความสูงของ Box ทั้ง 2 เท่ากันได้

• 4 คลิก "ปรับแต่ง"

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

• 6 เปิดใช้งาน ความสูงเท่ากัน

ตกแต่งพื้นหลัง Section Bootstrap

หลังจากตั้งค่าความสูงเสร็จ มาตกแต่งพื้นหลัง Section Bootstrap คลิกที่ "พื้นหลัง" และปรับแต่งตามต้องการ
** ตัวอย่างจะใช้งาน สีพื้นหลัง กับ ภาพพื้นหลัง **

• 1 คลิก "Save" หลังจากตั้งค่าเรียบร้อยแล้ว

เพียงเท่านี้เราก็ได้ Section แนะนำสินค้า แสดงบนเว็บไซต์ของคุณแล้ว

ตัวอย่างการนำไปประยุกต์ใช้

การใช้งาน Section Bootstrap แบบสัดส่วนเท่ากันนั้น สามารถทำในลักษณะอื่น ๆ ก็ได้เช่นกัน เช่น การตกแต่งหมวดหมู่สินค้า ทั้งนี้ก็แล้วแต่จะออกแบบเว็บไซต์ให้มีความน่าสนใจ และเหมาะสมกับผลิตภัณฑ์มากที่สุด

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