เราสามารถปรับ Design ของหน้าเว็บได้ จากการแก้ไข CSS โดยที่ไม่จำเป็นต้องเขียนเอง
ไปที่ ปลั๊กอิน > ปลั๊กอินใหม่ ค้นหาคำว่า SiteOrigin CSS จากนั้นกด ติดตั้งตอนนี้
คลิกที่ ใช้งานปลั๊กอิน
ไปที่ ปลั๊กอิน > Custom CSS
นี่จะเป็นหน้าสำหรับเพิ่มโค๊ด CSS เพื่อแก้ไข Design หน้าเว็บ แต่ไม่ต้องเขียนโค๊ดก็ได้ คลิกที่ไอคอนดังรูป
ตัวปลักอินจะพาเรามาแก้ไขหน้าแรก พร้อม Tools สำหรับแก้ไข Design คลิกที่รูปแว่นขยายดังรูป
ลองเลื่อนเมาส์ไปชี้ที่โลโก้ จะเห็นว่ามี Area เกิดขึ้น คลิก 1 ครั้ง
ลองเปลี่ยนพื้นหลังแถบเมนู เลือก Area ที่ต้องการ
ไปที่แถบ Decoration
ในช่อง Background Color เลือกสีที่ต้องการ เสร็จแล้ว กดปุ่มเช็คถูก
จะเห็นว่ามีโค๊ด CSS ปรากฎขึ้น นี่คือโค๊ดที่จะเปลี่ยนสี Background ตรงส่วนของแถบเมนูนั่นเอง
ไปที่หน้าบ้าน กด Refresh 1 ครั้ง
ต่อไปจะเปลี่ยนแถบเมนูเป็นสีดำ ตัวหนังสือสีขาว ไปที่ไอคอนดังรูป
เปลี่ยน Background Color เป็นสีดำ แต่จะเห็นว่าเมนูย่อยยังเป็นสีขาว ต้องเลือก Area ที่ถูกต้องจึงจะเปลี่ยนได้
สามารถเลือก Elements ที่ต้องการเปลี่ยนตั้งค่าได้ เลือกที่ลูกศรเม้าส์ชี้
ไปที่แถบ Text
ที่ Text Color เปลี่ยนสีข้อความ
ต้องเลือกในส่วนของ Sub-menu ด้วย
จากนั้นไปที่แถบ Decoration
ที่ Background Color เปลี่ยนเป็นสีดำ จะเห็นว่าทั้งแถบเมนูและ Sub Menu เปลี่ยนเป็นสีดำ ลิงก์สีขาวแล้ว
เมื่อตั้งค่าเสร็จแล้ว คลิกที่ Save CSS ไปที่หน้าบ้าน กด Refresh 1 ครั้ง
ปรับแต่งโลโก้จากสีดำ เป็นสีขาว ไปที่ รูปแบบเว็บ > ปรับแต่ง > อัตลักษณ์เว็บไซต์
เปลี่ยน Logo
จะเห็นว่ามีการเปลี่ยนแปลงเกิดขึ้นแล้ว
ครั้งนี้จะเปลี่ยนสีของ Footer
เลือก Area ของ Footer
ไปที่แถบ Decoration
เปลี่ยน Background Color เป็นสีดำ
เลือก Area ที่เป็นข้อความ
จากนั้นไปที่แถบ Text
สามารถปรับขนาดตัวอักษรที่ต้องการได้จากช่อง Font size
ปรับตำแหน่งของข้อความได้จาก Text Align
จะได้ Footer สีดำแล้ว
ลองเปลี่ยนลักษณะหัวเรื่องดูบ้าง
เลือก Area ที่เป็นหัวเรื่อง
ไปที่แถบ Decoration
เปลี่ยนสี background เป็นสีเทา
จากนั้นไปที่แถบ Layout
เราสามารถปรับความกว้างและความสูงของ Layout ได้จากตรงนี้ แนะนำให้ใช้ Padding เพราะจะเป็นการเพิ่มขนาดจากภายใน
เลือกเป็น Padding Top ขนาด 45 px
ลองใส่รูปให้ background ดังรูป
เลือกรูปที่ต้องการ จากนั้นกด Select
ลองเปลี่ยนหัวเรื่องให้มีขนาดใหญ่ขึ้นอีก เลือก Area หัวเรื่อง ไปที่แถบ Text เลือก Font Size เป็น 34 px
เมื่อตั้งค่าเสร็จแล้ว คลิกที่ Save CSS
ไปที่หน้าบ้าน กด Refresh 1 ครั้ง