1-17: เปลี่ยนดีไซน์ธีม “Seed” ด้วย SiteOrigin CSS


 

เราสามารถปรับ 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 ครั้ง

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments