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

การเข้าใช้งาน "Bootstrap" เครื่องมือจัด Custom Layout ให้สวยงามทุกหน้าจอ

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

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

เข้าระบบจัดการเว็บไซต์ Ketshopweb แล้วทำตามขั้นตอนดังนี้

• 1 คลิก "ปรับแต่ง"
• 2 เลือกเมนู "Page Layouts"
• 3 คลิก "ปรับแต่งเนื้อหา"

• 4 คลิก "Add Section"

• 5 เลือก "Bootstrap" จากนั้นคลิก "Add Section"

Section ที่เพิ่มใหม่จะอยู่ล่างสุดด้านขวามือ

• 6 คลิกไอคอนรูปน็อตเพื่อตั้งค่า

เครื่องมือการใช้งาน Bootstrap

1) Layout

1.1 การแสดงผล Column

แบบสัดส่วนเท่ากัน

• a สามารถกำหนดจำนวน Column ได้ 3 รูปแบบ คือ Desktop, Tablet และ Mobile
• b "Column Box" สามารถเพิ่ม Column ได้
• c เพิ่มสีหรือเปลี่ยนสี Box
• d เปลี่ยนชื่อ Box

แบบกำหนดเอง

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

ภาพตัวอย่างการกำหนดขนาด Column ด้วย Class ของ Bootstrap — อ่านเพิ่มเติมเกี่ยวกับ Grid System ของ Bootstrap ได้ที่ getbootstrap.com

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

1.2 Break

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

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

โครงสร้าง

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

** หมายเหตุ Column จะมีทั้งหมด 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 หน้าเว็บไซต์ เช่น

• ✓ Scroll: พื้นหลังมีการเลื่อนขึ้น-ลง
• ✓ Scale: ขนาดของพื้นหลังมีการย่อ-ขยาย
• ✓ Opacity: เพิ่มลดความโปร่งใสของพื้นหลัง

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

• 7 คลิก "Save" เมื่อปรับแต่งตามต้องการเสร็จเรียบร้อย