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

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

12 ต.ค. 2021, 09:44
มาสร้าง Section แนะนำสินค้า/บริการบน Website ของคุณ เพื่อให้ Website ของคุณน่าสนใจมากขึ้น ด้วย Section Bootstrap แบบสัดส่วนเท่ากัน บนระบบ ketshopweb

มาสร้าง Section แนะนำสินค้า/บริการบน Website ของคุณ เพื่อให้ 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 แสดง 2 Column

  • Tablet แสดง 2 Column

  • Mobile แสดง 1 Column


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

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


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

 

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

 

 

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

 

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

  • Padding

  • สีพื้นหลัง

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

 

ฝั่งซ้ายเสร็จไปเรียบร้อย จากนี้เราจะมาเพิ่ม Product Highlight ใส่ลงใน Box ทางขวา โดยกดที่ตำแหน่งที่ 1 เพิ่ม Element เลือก Product Highlight และกด เพิ่ม Element ในตำแหน่งที่ 2  และ 3 ตามลำดับ

 

สามารถตั้งค่า Product Highlight โดยกดที่สัญลักษณ์ฟันเฟือง  ของ Element 

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


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

 

กดที่ตำแหน่งที่ 4 และ 5 เปิดใช้งาน ความสูงเท่ากัน

 

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


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

 

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



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