วิธีเปลี่ยนสีพื้นหลัง สำหรับการเริ่มต้นใช้งานระบบธีมเพื่อปรับแต่งเว็บไซต์

ปรกติแล้วระบบธีมภายเว็บไซต์ จะแบ่งออกเป็น 2 ส่วนหลักๆดังนี้

  • ธีมภายนอก คือธีมที่มีการสร้างและนำมาเผยแพร่ให้ผู้อื่นสามารถนำไปใช้ได้
  • ธีมภายในเว็บไซต์ คือธีมที่ทำการติดตั้งลงบนเว็บไซต์ของเรา ที่นำมาจากธีมภายนอก

ซึ่งเราสามารถติดตั้งธีมได้หลายธีมพร้อมกัน โดยธีมที่ติดตั้งใหม่ จะไม่ทำทับซ้อนกับธีมที่เราเคยติดตั้งแล้ว แม้จะเป็นธีมเดียวกัน


การแก้ไขธีมในเว็บไซต์ของเรา 

1. เมื่อเปิดเว็บไซต์ที่ต้องการแก้ไขแล้ว ให้คลิกเข้าไปที่เมนู "ออกแบบเว็บ" (กรอบสีเขียว)

2. เมื่อเข้ามาหน้าแสดงธีมแล้ว เราสามารถเลือกแก้ไขหน้าต่างๆของธีมที่กำลังใช้งานอยู่ได้จากเมนูด้านซ้าย (กรอบสีแดง)

3. คลิกที่ "หน้าแรกเว็บไซต์" เพื่อทดสอบการแก้ไขพื้นหลัง (ตัวอย่าง)


4. เมื่อคลิกเข้ามาแล้ว จะเจอกับหน้าต่างยืนยันการแก้ไข โดยข้อมูลภายจะถูกแยกออกเป็นกล่องข้อมูลย่อยๆ ซึ่งแบ่งเป็น 3 ประเภท

  • กล่องแดง - กล่องข้อมูลที่มีผลกับทุกหน้าเว็บ ซึ่งจะเป็นใน่สวนของ Header และ Footer ของเว็บ และสามารถเพิ่ม/ลบกล่องข้อมูลได้
  • กล่องฟ้า - กล่องข้อมูลที่จะมีผลกับหน้าที่กำลังแก้ไขอยู่เท่านั้น สามารถเพิ่ม/ลบกล่องประเภทนี้ได้
  • กล่องเขียว - กล่องข้อมูลที่ทำงานร่วมกับข้อมูลจากระบบจัดการ ซึ่งไม่สามารถเพิ่มหรือลบกล่องได้อีก

จากตัวอย่าง ในหน้าแรกของเว็บไไซต์ จะมีกล่องข้อมูลเพียงแค่ 2 ประเภท คือ กล่องแดง และกล่องฟ้า


5. เมื่อคลิกเริ่มการแก้ไข ระบบจะแสดงกล่องข้อมูลทั้งหมดที่เราสามารถเพิ่มได้ทางด้านซ้ายมือ เราสามารถคลิกลากกล่องข้อมูลที่ต้องการมาวางบนตำแหน่งที่ต้องการได้ทันที หรือถ้าหากต้องการแก้ไขกล่องข้อมูลก็สามารถคลิกที่กล่องข้อมูลนั้นๆได้ทันทีเช่นกัน

6. เริ่มทดลองการเปลี่ยนสีพื้นหลังกล่องข้อมูล (ตัวอย่าง คลิกที่กล่องสีส้ม)


7. เมื่อคลิกที่กล่องแล้ว ทางด้านซ้ายจะแสดงข้อมูลของกล่องนั้น (กรอกสีเขียว) โดยกล่องแต่ละชนิดจะถูกแบ่งการทำงานเป็น 3 ส่วนดังนี้

  • ข้อมูล คือรายละเอียดของกล่องข้อมูลนั้นๆ แต่ละกล่องก็จะมีรายละเอียดแตกต่างกันไป ขึ้นอยู่กับการใช้งาน
  • รูปแบบกล่อง คือการกำหนดรูปแบบโดยรวมให้กล่องข้อมูลนั้น ซึ่งทุกกล่องข้อมูลจะมีรายละเอียดส่วนนี้เหมือนกัน
  • ขั้นสูง คือการกำหนดรายละเอียดเพิ่มเติมให้กับกล่อง เช่นการเขียน CSS, ในส่วนนี้จะเหมาะสำหรับท่านที่มีความรู้ในการเขียนเว็บอยู่แล้ว

จากตัวอย่าง เราจะเริ่มเปลี่ยนสีพื้นหลังของกล่อง ดังนั้นเราจะต้องคลิกไปที่ "รูปแบบกล่อง" (กรอบสีแดง)


8.  เมื่อคลิกเข้ามาที่รูปแบบกล่องแล้ว จะเจอรายละเอียดของกล่องทั้งหมด (กล่องทุกประเภทจะมีรายละเอียดส่วนนี้เหมือนกัน)

9. ให้เราคลิกที่เมนู "พื้นหลัง" เพื่อขยายรายละเอียดที่ซ่อนอยู่ (กรอบสีแดง)


10. รายละเอียดของพื้นหลัง จะแบ่งเป็น 2 ส่วนคือ สี และ รูปภาพ (รายละเอียดขงรูปภาพขอข้ามไป เนื่องจากรายละเอียดไม่ซับซ้อน)


11. สำหรับ สีพื้นหลัง จะแบ่งเป็น 4 รูปแบบ คือ 1 สี, 2 สี, เส้น และ จุด

12. "1 สี" คือการเทสีพื้นทั่วๆไป เราสามารถเลือกสีพื้นหลังได้ทันที


13. "2 สี" คือการไล่เฉด 2 สี จากจุดนึงไปยังจุดนึง ซึ่งเราสามารถกำหนดมุมองศาในการไล่สีได้


14.  "เส้น" คือการสลับสี โดยเราสามารถกำหนด สี มุม(ความเอียง) และความกว้างของแต่ละสีได้ 


15. จุด คือการแสดงจุดบนพื้นสี โดยสามารถกำหนด สี ขนาดจุด และความห่างของจุดได้


เมื่อแก้ไขข้อมูลกล่องเสร็จทุกครั้ง อย่าลืมกด "บันทึก" เนื่องจากระบบไม่มีการบันทึกการแก้ไขให้อัตโนมัติ