1-12: การจัดหน้าแรก ด้วย Page Builder


 

เราสามารถจัดหน้าแรกให้สวยงามได้ด้วย Page Builder

จัดรูปแบบหน้าจอได้ตามต้องการ

จัด Footer ให้เป็นสัดส่วนก็ดูดี

เริ่มด้วยไปที่ หน้า > หน้าแรก

ไปที่ Page Builder

ลองสร้าง Row ใหม่มีขนาด 3 คอลัมน์

เพิ่มเนื้อหาลงไป อาจจะใส่รูปและข้อความเล็กน้อยเพื่อความสวยงาม

คลิกที่ Duplicate แล้วลากไปเติมคอลัมน์ที่เหลือ

ทำการเปลี่ยนรูปเพื่อการแสดงผลที่แตกต่าง

จากนั้นคลิก อัพเดท

ไปที่หน้าแสดงผล จะเห็นว่าปรากฎเนื้อหาที่เพิ่มเข้าไปแล้ว

เพิ่มอีก Row หนึ่ง

ตั้งค่าให้ Row นี้มี 4 คอลัมน์

คราวนี้เราจะลองใช้ SiteOrigin image

เพิ่ม SiteOrigin image ในทุกคอลัมน์

ไปที่หน้าแสดงผล จะมีการเปลี่ยนแปลงดังรูป

เราสามารถแก้ไขรูปแบบของ Row ได้ ไปที่ Edit Row

ถ้าหากต้องการให้ระยะห่างระหว่าคอลัมน์ติดกัน ให้ตั้งค่า Gutter เป็น 0 px ลองใช้ padding ที่ 20 เพื่อให้เกิดพื้นที่ภายในรอบ Row นี้ขนาด 20 px

เราสามารถ เพิ่มสีให้พื้นหลังของ Row ได้ เมื่อปรับแต่งเสร็จแล้ว คลิกที่ Done แล้วกด อัพเดท

ไปที่หน้าบ้าน กด Refresh 1 ครั้ง จะมีการเปลี่ยนแปลงดังรูป

ลองแก้ไขอีกครั้ง คลิกที่ Edit Row

มองหาเมนูด้านซ้ายที่คำว่า Row Layout ลองเปลี่ยนเป็น Full Width

จะทำให้ Row นี้ชิดขอบด้านข้าง

ลองเปลี่ยนเป็น Full Width Stretched

จะทำให้เนื้อหาชิดขอบด้วย

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments