8-10: ธีม Seed ธีมเอนกประสงค์สำหรับผู้ใช้ทั่วไป Part I

SeedThemes เป็นธีมเอนกประสงค์ที่สามารถปรับแต่งแก้ไขให้เป็นธีมองกร, บล็อกส่วนตัว, ร้านค้าได้

ในตัวอย่าง เราจะมี Template สำหรับเป็น Guideline ให้ผู้ที่กำลังเริ่มศึกษาได้เลือกใช้และทดลองลงมือทำ

เริ่มกันที่ ไปที่หลังบ้าน > รูปแบบบล็อก > ธีม จากนั้นคลิกที่ ปรับแต่ง

จะมีหน้าสำหรับการปรับแต่งธีมปรากฎขึ้น ให้เลือก อัตลักษณ์เว็บไซต์ จะมีให้กด เลือกรูปโลโก้

ให้เลือกโลโก้ที่ต้องการ จากนั้นคลิก เลือก

จะเห็นว่าหน้า Live Preview จะแสดงผลลัพท์ให้เห็นทันทีเมื่อเราทำการเลือกโลโก้

ต่อไปเราลองสร้างไอคอนเว็บเป็นแบบของเราเอง ไปที่ รูปไอคอนเว็บ > เลือกรูปภาพ

เลือกภาพที่ต้องการ จากนั้นคลิก เลือก

ระบบ Live Preview จะแสดงตัวอย่างเมื่อเราใช้งานรูปแบบนี้

กลับไปที่หน้าการปรับแต่ง เลือกหัวข้อ รูปภาพส่วนตัว

เลือกรูปภาพที่ต้องการ แนะนำให้รูปภาพมีความละเอียด 1600 x 400

จากนั้นระบบจะให้เราครอบตัดรูปตามต้องการ หากไม่ต้องการครอบตัว ให้ทำการข้ามครอบตัด ดังรูป

Live Preview จะแสดงผลการเปลี่ยนแปลงที่เกิดขึ้น

ใน SeedThemes จะมี Page Buider ตัวหนึ่งที่ใช้ทำงานควบคู่ธีมได้เป็นอย่างดี ชื่อว่า Page Buider by SiteOrigin

เมื่อทำการแก้ไขหน้า จะมีแท็บสำหรับใช้งานการจัดการ Content ด้วย Page Buider

คลิกที่สร้าง Row เราสามารถปรับใช้ได้ตามใจทั้งรูปแบบ, สี, ระยะห่าง, etc.

เราสามารถดึง widget ต่างๆมาใช้งานได้ ลองใช้ SiteOrigin Editor จากนั้นคลิกที่ Edit

ลองใส่หัวข้อของ Editor และเนื้อหาจากนั้นคลิกที่ Done

เราสามารถสร้าง Widget ที่เหมือนกันได้ด้วยการ Duplicate ลองเติมให้ครบทุกคอลัมน์

ไปที่หน้าบ้าน จะเห็นว่ามีการแบ่งเป็นคอลัมน์อย่างสวยงาม

ลองสร้างอีก Row และกำหนดให้มีแค่ 1 คอลัมน์จากนั้นใช้ Widget SiteOrigin Editor

ลองเติมคำซักเล็กน้อย จัดตามที่ต้องการ จากนั้นคลิก Done

เราสามารถตั้งค่าของ Row ได้ด้วยการ Edit Row ที่ต้องการตั้งค่า

ในแท็บของ Design จะมีให้ตั้งค่าสีของพื้นหลัง สามารถตั้งค่าแบบเลือกสีเอง หรือใช้โค๊ดสีได้

ในแท็บของ Layout เราสามารถปรับแต่งรูปแบบของช่องของ Row นั้นๆได้ ลองใช้ค่า Row Layout เป็นแบบ Full Width

เมื่อตั้งค่าเสร็จให้ทำการอัพเเดท

ไปที่หน้าบ้าน จะเห็นว่ามี Row ที่เราสร้างใหม่เรียบร้อยแล้ว

นอกจากนี้ เรายังสามารถสร้างรูปภาพพื้นหลังให้ Row นั้นๆได้ ไปที่แท็บ Design คลิกที่ Select image

เลือกรูปที่เราต้องการ

เราสามารถกำหนดใช้รูปภาพพื้นหลังมีลักษณะเป็นแบบใดด้วยการกำหนดค่าใน Background Image Display ลองใช้เป็นแบบ Paralax ปรับตั้งค่าอีกนิดหน่อยเพื่อให้สารมาถมองเห็นตัวอักษรได้ง่ายขึ้น คลิกที่ edit

ให้ปรับเป็นสีขาว เพื่อให้ลักษณะข้อความชัดเจนยิ่งขึ้น

จากนั้นทำการกด อัพเดท

ตอนนี้จะเห็นว่าจะมีพื้นหลังเป็นรูปภาพและตัวอักษรเป็นสีขาวแล้ว

เราสามารถเพิ่มคุณสมบัติต่างๆได้ จากการเขียน CSS ปรับแต่ง ลงไใน CSS Styles ในที่นี้เราจะทำให้ขนาดตัวอักษรมีขนาดใหญ่ขึ้นมาเป็น 20px

ไปที่หน้าบ้าน จะเห็นว่าตัวอักษรมีขนาดใหญ่ขึ้น ทั้งสองแบบตัวอักษร

• Share
• Tweet
• Line