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

จัด Layout ให้สวยงามในทุกหน้าจอได้ง่าย ๆ ด้วย Template จาก Section Bootstrap

13 ต.ค. 2021, 11:09
Template จาก Section Bootstrap ที่จะทำให้การจัด Layout Website ของคุณเป็นเรื่องง่าย สวยงามทุกหน้าจอ แค่ใช้งานปรับแต่ง Website บนระบบ Ketshopweb

Template จาก Section Bootstrap ที่จะทำให้การจัด Layout Website ของคุณเป็นเรื่องง่าย สวยงามทุกหน้าจอ แค่ใช้งานปรับแต่ง Website บนระบบ 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 และกด Template ที่ตำแหน่งที่ 3

 

หลังจากนั้นจะแสดง Popup Template ของ Bootstrap ที่ทางเรา Ketshopweb ได้ทำการวาง Layout ไว้ให้ใช้งาน โดยมีตั้งแต่ 2 Column จนถึง 4 Column จากตัวอย่างในบทความนี้เราจะเลือกใช้ 4 Column โดยกดที่ตำแหน่งที่ 4 และกดเลือก Template ในตำแหน่งที่ 5 จากนั้นกดเพิ่ม Template ที่ตำแหน่งที่ 6 เป็นลำดับต่อมา

 

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

 

จากรูปตัวอย่างด้านล่าง จะให้มองเห็นภาพรวมของการจัดวาง Layout ที่ได้ทำการเลือกมาใช้งาน เมื่อยังไม่ใส่ Content 

 

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

 

ต่อจากนี้เราจะมาทำการ เพิ่ม Element ลงใน Template ที่เราได้ทำการเพิ่มไว้เรียบร้อยแล้วก่อนหน้านี้ โดยหลัก ๆ จากตัวอย่าง เราจะใช้ 2 Element ด้วยกัน คือ Image และ Product Highlight 


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

 

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

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


ต่อมาเพิ่ม Image Element เช่นเดียวกันใน Box ต่อมา ในตำแหน่งที่ 7 8 และ 9 ตามลำดับ

 

จากตัวอย่างใน Box นี้จะใส่ Image จำนวน 2 Element ด้วยกัน เมื่อเพิ่ม Image แรกไปแล้วให้กด เพิ่ม Element ในตำแหน่งที่ 10 และเลือก Image Element ในตำแหน่งที่ 11 และ 12 ตามลำดับ 

 

แล้วเปลี่ยนรูปตามต้องการ ในกรณีนี้หากต้องการให้ Element ใน Box นี้มีระยะห่างกัน ให้กดปรับแต่งได้ในตำแหน่งที่ 13 และปรับระยะห่างบน-ล่าง ตามต้องการในตำแหน่งที่ 14 

 

ซึ่งใน Box ถัดมา (Box ที่ 3 จากทางซ้าย) ตำแหน่งที่ 15 ให้ทำการเพิ่ม Image Element เช่นเดียวกันแล้วเปลี่ยนรูปตามต้องการได้เลย

 

และใน Box สุดท้าย ให้ทำการเพิ่ม Element ชื่อ Product Highlight กดตำแหน่งที่ 1, 2 และ 3 ตามลำดับ

 

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

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


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

 

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

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