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

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

11 ต.ค. 2021, 18:19
มาสร้าง Section หมวดหมู่สินค้า/บริการ บน Website ของคุณ ให้น่าสนใจมากขึ้น ด้วย Section Bootstrap แบบสัดส่วนเท่ากัน บนระบบ ketshopweb

มาสร้าง Section หมวดหมู่สินค้า/บริการ บน Website ของคุณ ให้น่าสนใจมากขึ้น ด้วย Section Bootstrap แบบสัดส่วนเท่ากัน บนระบบ Ketshopweb

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

ตกแต่งหน้าตาหมวดหมู่สินค้าแบบง่าย ๆ ด้วย 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 แบบสัดส่วนเท่ากัน แสดงอยู่ที่ 3 column ในทุกขนาดหน้าจอ


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

  • Desktop แสดง 6 Column

  • Tablet แสดง 3 Column

  • Mobile แสดง 2 Column


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

*หมายเหตุ  Desktop, Tablet สูงสุดไม่เกิน 12 Column  Mobile สูงสุดไม่เกิน 4 Column


  • สามารถกดเพิ่ม Box ได้ที่ตำแหน่งที่ 4 หรือตำแหน่งที่ 5 ก็สามารถเพิ่มได้เช่นกัน



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

สามารถทำการกำหนดขนาดไปเมื่อสักครู่นี้ ซึ่ง Element ที่สามารถใช้งานได้กับ Section  Bootstrap  นั้นมีดังนี้

  • Text Area
  • Map
  • THiNKNET Map
  • Side Image
  • Video
  • Contact Form
  • Image
  • HTML Code
  • Search Blogs
  • Search Product
  • Category
  • Facebook Fanpage
  • Product Highlight
  • Blog Highlight
  • Accordion
  • Youtube
  • Vimeo


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

  

กดที่ตำแหน่งที่ 9 จะเป็นการเพิ่ม Element  ลงใน Box นั้น ๆ สามารถเพิ่มได้เรื่อย ๆ ตามต้องการ


เลือก Text Area และกด เพิ่ม Element ในตำแหน่งที่ 10  และ 11 ตามลำดับ

 

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

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


คำแนะนำ เพื่อความสวยงาม ควรใช้ขนาดรูปที่มีสัดส่วนเท่ากันทุกรูป


และเปลี่ยนข้อความตามความต้องการได้เลย


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

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

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

  • Padding

  • สีพื้นหลัง

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

  • เส้นขอบ

  • ขอบโค้ง

  • เงา

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


กรณีที่มี Box ค่อนข้างเยอะ (กรอบสีม่วง) คุณสามารถตั้งชื่อให้กับ Box ได้เพื่อการจัดการที่ง่ายขึ้น สามารถทำได้โดยกดที่ตำแหน่งที่ 1 แล้วกดที่ Icon ดินสอ ของ Box ที่ต้องการตั้งชื่อ จากนั้นก็ตั้งชื่อในตำแหน่งที่ 2 ตามรูปด้านล่างได้เลย 

 

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


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


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



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