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

"Bootstrap" ตัวช่วยในการจัดการ Custom Layout ให้รองรับการแสดงผลทุกหน้าจอ

05 ส.ค. 2021, 16:01
"Bootstrap" เป็นฟีเจอร์ใหม่ ที่ช่วยในการจัดการ Custom Layout ให้รองรับการแสดงผลได้อย่างสวยงามในทุกหน้าจอ ไม่ว่าจะเป็น Desktop Tablet และ Mobile หมดปัญหาการจัดหรือปรับแต่งหน้าต่างเว็บไซต์ไม่ตรงปก สามารถทำได้ง่ายๆ ไปดูกัน

การเข้าใช้งาน "Bootstrap" 

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

 


  • จากนั้น เลือก Bootstrap แล้ว กด ”OK” 

  • หากต้องการเปลี่ยนแปลงสามารถเลื่อนแถบขวามือได้เลย เมื่อคลิก ตั้งค่า Layout สามารถปรับแต่งและเพิ่มรูปแบบต่างๆ ได้


1. Layout

1.1. การแสดงผล Column 

-  แบบสัดส่วนเท่ากัน สามารถกำหนดจำนวน Column ได้มีด้วยกัน 3 รูปแบบ คือ Desktop, Tablet และ Mobile  ส่วนของโครงสร้างสามารถ เพิ่ม Column ได้โดยกดที่ "Column  Box" เพิ่มสี หรือเปลี่ยนชื่อได้ 

        

 

- แบบกำหนดเอง 

  •      กำหนดขนาดของ Box ได้เอง ทั้ง 3 ขนาดหน้าจอ Desktop, Teblet และ Mobile ซึ่งขนาดอ้างอิงจากระบบ Grid System ของ Bootstrap ที่แบ่งออกเป็น 12 Column 

ภาพตัวอย่างการกำหนดขนาด Column ด้วย Class ของ Bootstrap
อ่านเพิ่มเติมเกี่ยวกับ Grid System ของ Bootstrap คลิก


  •    ใช้ Template Bootstrap แบบสำเร็จรูปของทางเว็บไซต์ ซึ่งถือเป็นตัวช่วยที่ดีในการเลือกรูปแบบได้ด้วยตัวเอง อีกทั้งยังเป็นตัวช่วยให้การจัด Layout ของ Website ให้ดูง่ายขึ้น พร้อมตัวอย่างการแสดงผลในแต่ละหน้าจอทั้ง Desktop, Teblet และ Mobile และมีให้เลือกตั้งแต่ 2 column ขึ้นไป


 1.2.Break 

ในกรณีที่ไม่อยากให้ Box content เรียงติดกันหรือจัดรูปแบบให้สวยงามอ่านข้อมูลได้ง่ายขึ้น จึงจำเป็นต้องทำการ Break เพื่อดันให้ Column Box เริ่มต้นแถวใหม่ 

ตัวอย่าง 

ในหนึ่งแถวจะมี Column Box 1 , Column Box 2 และ Column Box 3 เรียงต่อกัน หากต้องการให้ Column Box3 เป็นแถวใหม่เพียงกด "Break"  ก่อนหน้า Column Box 3  ตัวของ Column Box 3 จะไปขึ้นอยู่แถวใหม่อัตโนมัติ 




  • โครงสร้าง

สามารถกำหนด Column Box ได้เองเลย ทั้ง Desktop, Tablet และ Mobile  

 


*** หมายเหตุจำมีทั้งหมด 12 Column เพราะเป็นขนาดมาตฐาน 

 

  • การเพิ่ม Element 

สามารถกดเพิ่มได้โดยคลิก "เพิ่ม Element" ตรงรูปภาพช่องสีฟ้า ซึ่งเพิ่มได้ทั้งรูปภาพ วิดีโอ แผนที่ เว็บบล็อก ฯลฯ 

ฟีเจอร์ "Box Column" 

- การย้าย Column  สามารถย้ายโดยการคลิกเลื่อนไปได้แล้วแต่ร้านค้าเลย


- การปรับแต่ง Column เมื่อคลิกกเข้าไปแล้วจะเกิดแถบขวามือขึ้นมาให้เจ้าของร้านค้าสามารถตั้งค่า รูปแบบ (Style) ได้เลย

-  ปรับขนาด Column สามารถปรับขนาดได้ทั้งแถบเครื่องมือขวามือและจากการคลิกตรงลูกภาพ



-  การโคลน Column หรือเรียกว่า "การคัดลอก" สามารถคัดลอก Column ได้ โดย Column ที่ได้ทำการคัดลอกจะไปอยู่ท้ายสุดของ Template หากเราอยากให้ Column ที่คัดลอกไปอยู่ในตำแหน่งอื่นก็สามารถทำการย้ายได้เองเลย



  • การจัดเรียง Column


  • ระยะห่างระหว่าง Column


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

    


2.พื้นหลัง 

สามารถกำหนดสีพื้นหลัง, ภาพพื้นหลัง, Parallax Effect, เส้นขอบและเงา ได้ด้วยตัวเอง ทำเสร็จแล้วอย่าลืมกด Save ทุกครั้ง

  • สีพื้นหลัง


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


 ตัวอย่างภาพพื้นหลัง สามารถกำหนดขนาดและสัดส่วนได้


  • Parallax Effect เป็นส่วนทำให้ภาพพื้นหลัง มี Effect ตามที่กำหนด เมื่อมีการ Scroll หน้า Website เช่น

    - Scroll (พื้นหลังมีการเลื่อนขึ้น-ลง)

    - Scale (ขนาดของพื้นหลังมีการย่อ-ขยาย)

    - Opacity (มีการเพิ่มลดความโปร่งใส่ของพื้นหลัง)


 ภาพตัวอย่าง Parallax Effect


  • เส้นขอบและเงา  สามารถกำหนดขนาดเส้นหรือรูปแบบของเงาได้ตามใจชอบเลย


ภาพตัวอย่างเส้นขอบ

 

ภาพตัวอย่างเงา

 

 


Ketshopweb | เครื่องมือร้านค้าออนไลน์ ขายคล่อง ส่งสะดวก ครบในที่เดียว

http://www.ketshopweb.com

เรายินดีให้คำปรึกษาการทำเว็บไซต์ฟรี ไม่มีค่าใช้จ่าย

ติดต่อมาที่ 02-038-5588 , email : sales@ketshopweb.com

 

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