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

มาทำให้การแนะนำสินค้าของคุณไม่น่าเบื่อ ด้วย Section Bootstrap แบบกำหนดเอง

13 ต.ค. 2021, 10:05
เนรมิตรให้ Section แนะนำสินค้า/บริการ ของคุณมี Layout แบบสุดปัง สวยงามในทุกหน้าจอ ด้วย Section Bootstrap แบบกำหนดเอง บนระบบ ketshopweb

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

 

จากรูปด้านล่าง จะเป็นตัวอย่างที่เราจะพาคุณทดลองทำในบทความนี้ จะสามารถทำได้อย่างไร? 

มาเริ่มกันเลย...

 


ใช้งาน Section Bootstrap

เข้าระบบจัดการหลังบ้านเว็บไซต์ Ketshopweb จากนั้นคลิกคำว่า "ปรับแต่ง" ในตำแหน่งที่ 1 แล้วเลื่อนลงมาคลิกที่ "Page Layouts" ในตำแหน่งที่ 2 และเลือก Page ที่ต้องการปรับแต่งในตำแหน่งที่ 3 


 

เมื่ออยู่ในหน้าที่ต้องการ กด Add Section ในตำแหน่งที่ 4 จากนั้นเลือก Section "Bootstrap" และกด OK ในตำแหน่งที่ 5 และ 6 ตามลำดับ

 

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

 

ซึ่ง Default จะเป็น Section Bootstrap แบบสัดส่วนเท่ากัน ให้ทำการเปลี่ยนจากการตั้งค่า แบบสัดส่วนเท่ากัน เป็น แบบกำหนดเอง โดยกดที่ตำแหน่งที่ 1 และกดเลือกสัดส่วน แบบกำหนดเอง ในตำแหน่งที่ 2

 

แต่ก่อนที่เราจะไปเริ่มทำกันต่อนั้น เรามาเรียนรู้เกี่ยวกับระบบ Grid System ของ Bootstrap คร่าว ๆ กันก่อน 


Grid System Bootstrap

ระบบ Grid System ของ Bootstrap นั้นจะสามารถแสดงสูงสุด 12 Column ใน 1 แถว 

 

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

 

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


 

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

  • Desktop แสดง 2 Column

  • Tablet แสดง 1 Column

  • Mobile แสดง 1 Column

 

และหากสังเกตการ Design ในหน้าจอ Desktop นั้น ขนาดของเนื้อหานั้นมีการจัด Layout ด้วยการให้พื้นที่กับขนาดของรูปสินค้าที่แสดงมากกว่ารายละเอียดข้อความ และเพื่อให้เห็นภาพชัดขึ้น ถ้าเรานำ Design มาวาง Grid System จะเห็นว่ามีการใช้ผสาน Box โดย Box ที่ 1 ใช้ผสาน 8 Column และ Box ที่ 2 ใช้ผสาน 4 Column 

 

ที่นี้เรากลับมาทำกันต่อได้เลย หลังจากตั้งค่าสัดส่วนให้เป็น แบบกำหนดเอง แล้ว 

ตั้งค่าขนาดของ Box ที่ 1 ในตำแหน่งที่ 1

  • Desktop เลือก col-lg-8 : แสดง Box ใช้ผสาน 8 Column

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

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

 

ตั้งค่าขนาดของ Box ที่ 2 ในตำแหน่งที่ 2

  • Desktop เลือก col-lg-4 : แสดง Box ใช้ผสาน 4 Column

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

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

 

*หมายเหตุ  Section Bootstrap แบบกำหนดเอง ในหน้าจอ Mobile จะไม่สามารถใช้ col-1, col-2 เพราะมีขนาดเล็กเกินไป ไม่เหมาะในการแสดงผล


 

สามารถลบ Box ในส่วนที่ไม่ใช้งานออกไปได้ โดยกดตำแหน่งที่ 3

 

เราก็จะได้ Layout ตาม Design ดังรูปข้างล่าง 

 

การใส่สีพื้นหลังให้กับ Section สามารถทำได้โดยกดตั้งค่าที่ตำแหน่งที่ 1 หลังจากนั้นกดตำแหน่งที่ 2 เพื่อไปที่การตั้งค่าพื้นหลัง และเปิดใช้งานสีพื้นหลังที่ตำแหน่งที่ 3 แล้วเลือกสีตาม

 

จาก Design ตัวอย่างเราจะใช้ 2 Element คือ Image ใส่ลงใน Box ทางซ้าย และ Text Area ใส่ลงใน Box ทางขวา โดยกดที่ตำแหน่งที่ 4 เพิ่ม Element เลือก Image และกด เพิ่ม Element ในตำแหน่งที่ 5  และ 6 ตามลำดับ

 

จากนั้นให้เปลี่ยนรูปตามต้องการ โดยกดที่สัญลักษณ์ฟันเฟือง  ของ Element 

ดูการตั้งค่า Element Image คลิกที่นี่


ทั้งนี้เราสามารถปรับแต่ง Style ให้กับ Element (กรอบสีฟ้า) ของเราได้เช่นกัน 

ปรับแต่ง ตั้งค่า Style

  • ระยะห่างบน-ล่าง

  • Padding

  • สีพื้นหลัง

  • ภาพพื้นหลัง

  • เส้นขอบ

  • ขอบโค้ง

  • เงา

จากรูปตัวอย่างจะทำการใส่ภาพพื้นหลังให้กับ Element รูปภาพของเรา กดที่ ปรับแต่ง ในตำแหน่งที่ 7 แล้วเปิดการใช้งานการตั้งค่าภาพพื้นหลังในตำแหน่งที่ 8 

 

ฝั่งซ้ายเสร็จไปเรียบร้อย จากนี้เราจะมาเพิ่ม Text Area ใส่ลงใน Box ทางขวา โดยกดในตำแหน่งที่ 9 เพิ่ม Element เลือก Text Area และกด เพิ่ม Element ในตำแหน่งที่ 10  และ 11 ตามลำดับ

 

จากนั้นแก้ข้อความตามความต้องการได้เลย

 

และกดบันทึกในตำแหน่งที่ 12 เพียงเท่านี้เราก็ได้ Section แนะนำสินค้า แสดงบน Website  ของคุณแล้ว

 

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

 

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



เปิดร้านค้าออนไลน์ง่าย ๆ ด้วยตัวคุณเอง
logo ketshopweb svg
ทดลองใช้งานฟรี ไม่มีค่าใช้จ่าย
สนใจปรึกษา สำหรับคำแนะนำแพ็คเกจที่เหมาะสมกับธุรกิจของคุณ
เพื่อต่อยอดการขาย และขยายฐานลูกค้า ฟรี! ไม่มีค่าใช้จ่าย
โทร. 02-038-5588
เฉพาะวันทำการ ตั้งแต่เวลา 9:30 - 18:30 น.