การเลือก Theme และตกแต่งเว็บไซต์


Theme สำเร็จรูป ในระบบเว็บไซต์ VelaEasy
จะเป็นค่าเริ่มต้นที่กำหนดรูปแบบและหน้าตาของเว็บไซต์ และเว็บมาสเตอร์สามารถปรับเปลี่ยน แก้ไขการแสดงผลได้ตามต้องการ โดยแบ่งเป็น 2 ระบบ คือ ระบบ Smart Theme และระบบ Theme


VelaEasy Smart Theme

อีกขั้นของการแสดงผลบนหน้าเว็บไซต์ในระบบ VelaEasy ที่ทันสมัย และสวยงาม แบบมืออาชีพในคลิกเดียว! กับระบบ "Smart Theme" ที่มาพร้อมกับ 

• การแสดงผล Section ใหม่ (ส่วนสำหรับแสดงข้อมูล) ให้เลือกใช้หลายรูปแบบ

• Section การแสดงผลรูปภาพที่ใหญ่ขึ้น เน้นให้ภาพที่คุณอัพโหลดโดดเด่น สะดุดตา 

• พื้นที่เนื้อหาในแต่ละ Section รองรับการพิมพ์ข้อความและใส่รูปภาพได้โดยตรง ตาม Concept "What you see is what you get."

• สามารถเปลี่ยนการแสดงผลชุดสีตามต้องการได้

โดยยังคง Concept ความง่ายในการใช้งาน ด้วยระบบ Drag and Drop และสามารถใช้งานร่วมกัน Section และฟังก์ชันเดิมที่ครบครันได้อีกด้วยค่ะ

ดูรายละเอียดวิธีการใช้งานระบบ VelaEasy Smart Theme เพิ่มเติม คลิกที่นี่

 

ระบบ VelaEasy Theme

- สามารถกำหนด สีพื้นหลัง สีตัวอักษร และรูปแบบตัวอักษร ของทุกส่วนในหน้าเว็บไซต์

- สามารถเลือกรูปแบบ Theme สำเร็จรูป มาปรับแต่งเพิ่มเติม แล้วบันทึกรูปแบบที่ปรับแต่งเองไว้ได้ถึง 3 ชุดรูปแบบ
 

 วิธีเลือก Theme

1. คลิกเมนู "ตกแต่ง" โดยระบบจะเลือกการแสดงผลชุด Theme เริ่มต้นอยู่ที่รูปแบบที่ 1 ให้คลิกที่รูป Theme ที่ปรากฎอยู่ภายใต้หัวข้อ "เลือก Theme" 

 

2. จะปรากฎหน้าต่าง Theme สำเร็จรูป ให้คลิกเลือกใช้ที่รูปแบบตามที่ต้องการ



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

สุดท้ายเมื่อเจอ Theme ที่ต้องการใช้งานแล้ว ให้คลิกปุ่ม "บันทึกและใช้กับเว็บไซต์" เพื่อยืนยันค่ะ


หมายเหตุ : การเลือกรูปแบบ Theme สำเร็จรูปนี้จะเปลี่ยนภาพพื้นหลัง ภาพส่วนหัวที่คุณได้อัพโหลดไว้ก่อนหน้า และรวมถึงรูปแบบและสีของตัวอักษรให้แสดงตามรูปแบบ theme ใหม่ที่เลือกใช้งาน

 

 วิธีแก้ไขตกแต่ง Theme ใหม่ ให้เป็นสไตล์คุณ

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

โดยหลังจากที่คุณคลิกเลือก Theme หลักเรียบร้อยแล้ว ระบบจะแสดงพื้นที่ให้กำหนดค่าการแสดงผลในส่วนต่าง ๆ ของเว็บไซต์ โดยในแต่ละเมนูจะแยกเป็น 2 แท็บหลัก คือ ส่วนปรับแต่ง "พื้นหลัง" และ "ข้อความ" ตามรายละเอียดดังต่อไปนี้ค่ะ
 

การตั้งค่าการตกแต่ง Theme เว็บไซต์ในแท็บ "พื้นหลัง"



 

หมายเลข 1. ส่วนสำหรับเลือกเมนูที่ต้องการตั้งค่าการแสดงผล : จะปรากฎเครื่องมือสำหรับแก้ไขการตั้งค่า ตามตำแหน่งหมายเลข 2-5 ค่ะ (ในที่นี้ยกตัวอย่างการตั้งค่า แถบเมนูด้านบน ระดับ 1 ค่ะ)
 

หมายเลข 2. สีพื้นหลัง : สีพื้นหลังของเมนูหรือพื้นที่ส่วนต่าง ๆ ซึ่งจะปรากฎให้เห็นก็ต่อเมื่อไม่มีการใช้ภาพพื้นหลังหรือภาพพื้นหลังแสดงไม่เต็มพื้นที่ค่ะ นอกจากนี้ยังสามารถกำหนดค่าทึบแสง (Opacity) ซึ่งเป็นการกำหนดให้ตำแหน่งที่ต้องการนั้นโปร่งใสขึ้นได้

ดูรายละเอียด วิธีการกำหนดค่าทึบแสงของพื้นหลัง เพิ่มเติม คลิกที่นี่ ค่ะ
 

หมายเลข 3. สีพื้นหลังเมื่อถูกเมาส์ : สามารถตั้งค่าให้สีพื้นหลังของเมนูเปลี่ยนไปเมื่อนำเมาส์ไปชี้ที่เมนูนั้น ๆ ได้ โดยเลือกสีในส่วนนี้ให้แตกต่างกับสีพื้นหลังค่ะ รวมถึงสามารถ กำหนดค่าทึบแสง (Opacity) ได้เช่นเดียวกับสีพื้นหลังปกติ
 

ตัวอย่างการแสดงผลสีพื้นหลังของเมนูด้านบนแบบปกติ และสีพื้นหลังเมนูเมื่อถูกเมาส์

 

หมายเลข 4. ภาพพื้นหลัง :  สามารถใส่รูปภาพเพื่อแสดงผลเป็นภาพพื้นหลังในส่วนต่างๆ ของเว็บไซต์ ได้แก่

  • ภาพพื้นหลังเว็บไซต์
  • ภาพพื้นที่ส่วนหัว (แบนเนอร์ส่วนหัวของเว็บไซต์)
  • ภาพพื้นหลังแถบเมนูด้านบน
  • ภาพพื้นหลังแถบเมนูด้านบน ระดับ 1
  • ภาพพื้นหลังแถบเมนูด้านบน ระดับ 2
  • ภาพื้นหลังพื้นที่ด้านข้าง
  • ภาพพื้นหลังเมนูด้านข้าง ระดับ 1
  • ภาพพื้นหลังเมนูด้านข้าง ระดับ 2
  • ภาพพื้นหลังหัวข้อ Show Boxes
  • ภาพพื้นหลังปุ่มสั่งซื้อ


ข้อแนะนำเกี่ยวกับภาพพื้นหลัง

  • รองรับการใส่ภาพพื้นหลัง ที่มีขนาดไฟล์ภาพไม่เกิน 5 MB
     
  • ประเภทของไฟล์รูปภาพที่สามารถอัพโหลดได้คือ .jpg , .jpeg , .png และ .gif
     
  • รูปภาพพื้นหลังควรเป็นภาพกราฟฟิคที่มีการแสดงผลต่อเนื่องได้ เพื่อรองรับกับการแสดงผลกับหน้าจอคอมพิวเตอร์ทุกขนาดอย่างสวยงาม ดูตัวอย่างภาพกราฟฟิค คลิกที่นี่ ค่ะ (สามารถเซฟภาพมาใช้กับเว็บไซต์ของคุณได้ฟรีค่ะ)


วิธีใส่ภาพพื้นหลัง ให้คลิกเลือกที่เมนูที่ต้องการ จากนั้น

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

  - "เลือกภาพสำเร็จรูป" คือ ใช้ภาพที่ทาง ReadyPlanet ออกแบบมาให้เลือกใช้งานได้ทันที หรือ

  - "อัพโหลดภาพใหม่" เพื่อเลือกรูปภาพที่คุณออกแบบเองจากเครื่องคอมพิวเตอร์ของคุณ


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


 

กรณีเลือก Upload ภาพใหม่ : จะปรากฎหน้าต่างให้คุณคลิกอัพโหลดรูปภาพพื้นหลังเมนูที่ต้องการจากเครื่องคอมพิวเตอร์

และหลังจากที่อัพโหลดรูปไปแล้ว คุณสามารถกลับมาเลือก แก้ไขภาพเดิม เพื่อปรับการแสดงของภาพพื้นหลังว่า จะแสดงผลครั้งเดียว , แสดงต่อเนื่องจนเต็มพื้นที่, หรือแสดงแบบขยายภาพเต็มพื้นที่ (หากรูปภาพที่อัพโหลดมีขนาดใหญ่ อาจจะทำให้ไม่เห็นความแตกต่างระหว่างแสดงครั้งเดียว กับ แสดงต่อเนื่อง)

 

ตัวอย่างการแสดงผลเมนูด้านบนระดับ 1 แบบใช้สีพื้นหลังปกติ และแบบใส่ภาพพื้นหลังเมนู

 

 

การลบภาพพื้นหลังเมนู สามารถลบภาพพื้นหลังเมนูเพื่อแสดงผลสีพื้นหลังปกติได้ โดยภายใต้หัวข้อ "ภาพพื้นหลัง" คลิกสัญลักษณ์  (ลบภาพพื้นหลัง) จากนั้นคลิกปุ่ม "บันทึกและใช้กับเว็บไซต์" เพื่อยืนยันการเปลี่ยนแปลง


 

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

 

หมายเลข 6. ตำแหน่งการแสดงผล : แสดงตัวอย่างการเปลี่ยนแปลงในเมนูที่คุณกำลังทำการปรับแต่งอยู่ในขณะนั้น
 

 

การตั้งค่าการตกแต่ง Theme เว็บไซต์ในแท็บ "ข้อความ"

 

หมายเลข 7. ตัวอักษรปกติ : สามารถเลือกสีตัวอักษร และการแสดงผลตัวอักษรแบบตัวหนา ตัวเอียง หรือขีดเส้นใต้ตัวอักษรได้ในหัวข้อนี้

 

หมายเลข 8. ตัวอักษรเมื่อถูกเมาส์ : สามารถตั้งค่าให้สีและการแสดงผลตัวอักษรเปลี่ยนไปเมื่อนำเมาส์ไปชี้ที่เมนูนั้น ๆ ได้ โดยต้องกำหนดค่าให้ต่างกับตัวอักษรปกติค่ะ


ตัวอย่างการแสดงผลตัวอักษรปกติ และตัวอักษรเมื่อถูกเมาส์ ของเมนูด้านบน

 

หมายเลข 9. แบบอักษรและขนาด คุณสามารถเลือกใช้ Font ตัวอักษรรูปแบบต่าง ๆ มากมาย ทั้ง Fonts พิเศษสวยงามนับร้อยแบบ ทั้งสำหรับตัวอักษรภาษาไทย, ตัวอักษรภาษาอังกฤษ หรือ Fonts มาตรฐานสุดคลาสสิค รวมกว่า 160 รูปแบบ 

เพียงคลิกที่หัวข้อแบบอักษร ก็จะปรากฎหน้าต่าง Pop Up ขึ้นมาแสดงผลรูปแบบตัวอักษรต่าง ๆ เป็นตัวอย่างในขณะที่กำลังเลือกรูปแบบตัวอักษรทันที และสามารถคลิกเลือกใช้ได้ตามต้องการค่ะ

 

หมายเลข 10 การจัดตำแหน่ง : สามารถเลือกจัดตำแหน่งการแสดงผลของ "ชื่อเว็บไซต์" และ "Tag line" (คำอธิบายหรือสโลแกนเว็บไซต์) ให้แสดงผลแบบ ชิดซ้าย, กึ่งกล่าง, หรือ ชิดขวา บนพื้นที่ส่วนหัวของเว็บไซต์ได้



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

ระบบจะแสดงผลเมนู "ตกแต่ง" พร้อมเข้าสู่ตำแหน่งเมนูที่คุณได้เลือกปรับแต่งให้ทันทีค่ะ (ในตัวอย่างนี้คือเมนู พื้นที่ด้านบน ค่ะ) และคุณสามารถปรับแต่งแก้ไขเว็บไซต์ได้ตามขั้นตอนหมายเลข 1 - 10 ข้างต้นค่ะ

 

ตัวอย่างการแสดงผลเมนู "ตกแต่ง" ที่ตำแหน่งเมนูด้านบนระดับ 1

 

ตัวอย่างการแสดงผลเมนู ตกแต่ง ที่ตำแหน่งรายละเอียดเนื้อหา


 




คู่มือการใช้งาน

VelaEasy Smart Theme
วิธีเพิ่มเมนู บทความ / สินค้า article
จัดการรูปภาพประกอบเนื้อหา article
วิธี Drag & Drop สลับตำแหน่งเมนูด้านบนและด้านข้าง พร้อมเพิ่มเมนูระดับ 2
วิธีเพิ่มเมนูระดับที่ 3,4,5
วิธีจัดเก็บข้อมูลเข้าคลังเนื้อหา (ไม่แสดงในเมนู)
วิธีแก้ไขและลบเมนู
วิธีตั้งค่า SEO สำหรับแต่ละหน้า
วิธีเพิ่ม เมนูลิงก์
วิธีเพิ่มและใช้งานระบบเว็บบอร์ด
วิธีเพิ่มหน้ารวมเว็บบอร์ด
วิธีเพิ่มอัลบั้มรูป
เพิ่มเมนู Landing Page
วิธีเพิ่ม เมนูข้อความ
วิธีเพิ่มเมนู Tag
วิธีการใช้งานฟังก์ชัน "Tags" ในหน้าแก้ไขเมนู
วิธีเพิ่มเมนู สมาชิก (สำหรับสมัครและให้สมาชิกล็อกอิน)
วิธีการใช้งาน "ระบบสมาชิก"
วิธีเพิ่ม Section "Slideshow"
วิธีเพิ่ม Section "Banner"
วิธีเพิ่ม Section "พื้นที่เนื้อหาเสริม"
วิธีเพิ่ม Section "Text"
วิธีเพิ่ม Section "HTML"
วิธีเพิ่ม Section Attachment (อัพโหลดไฟล์เอกสารแนบในเนื้อหา)
วิธีแสดง Section "ราคาสินค้าและปุ่มสั่งซื้อ"
วิธีเพิ่ม Section "Social Buttons"
วิธีเพิ่ม Section "แบบฟอร์มติดต่อกลับ"
วิธีเพิ่ม Section "Comment" : แบบฟอร์มความคิดเห็น
วิธีเพิ่ม Section "Show Boxes" : เพิ่มกล่องแสดงรายการสินค้าและบริการบนหน้าเว็บไซต์
วิธีเพิ่ม Section "รายการที่เกี่ยวข้อง"
วิธีเพิ่ม Section "รายการย่อยภายใต้หัวข้อนี้"
วิธีเพิ่ม Section "รายการอื่นภายใต้หัวข้อเดียวกัน"
กำหนดรูปแบบโดยรวม
วิธีใส่โลโก้หลักของเว็บไซต์
วิธีใส่โลโก้ที่เมนูด้านบน
วิธีการใส่รูปภาพพื้นหลังส่วนหัว (แบนเนอร์ของเว็บไซต์)
วิธีการใส่รูปภาพประกอบส่วนหัว (ภาพเล็กบนภาพส่วนหัว 7-9 ภาพ)
วิธีการใส่รูปภาพพื้นหลังเว็บไซต์
วิธีการใส่ภาพพื้นหลังให้กับพื้นที่ "เมนูด้านบน" และ "เมนูด้านข้าง"
วิธีการกำหนดค่าทึบแสงของพื้นหลัง
วิธีจัดตำแหน่งเมนูด้านบนและสลับกับพื้นที่ส่วนหัว
วิธีซ่อนพื้นที่ด้านข้าง
วิธีเพิ่ม Widget "Link Banner"
วิธีเพิ่ม Widget "แบบฟอร์ม"
วิธีเพิ่ม Widget "HTML"
วิธีเพิ่ม Widget "Search Box" ช่องค้นหาข้อมูลบทความ/สินค้า
วิธีเพิ่ม Widget "Member Box"
วิธีสลับตำแหน่ง Sidebar Widget กับเมนูด้านข้าง
วิธีการตั้งค่า "พื้นที่ด้านล่าง" ของเว็บไซต์
วิธีเพิ่มลิงก์เมนูลัด ในพื้นที่ด้านล่างของเว็บไซต์ (Footer Link)
วิธีแก้ไขเว็บไซต์ใน Safe Mode
ระบบ Chat
วิธีเข้าดูรายการสั่งซื้อ
วิธีการเข้าดูรายการติดต่อกลับ
วิธีเข้าดู "รายงานการขาย"
เมนูตั้งค่า ทั่วไป article
เมนูตั้งค่า "ร้านค้า" และระบบตะกร้าสินค้า
วิธีใช้งานระบบ Stock สินค้า
วิธีตั้งราคาค่าขนส่งสินค้า
เมนูตั้งค่า เครื่องมือของ Google
เมนูตั้งค่า Social Networks
เมนูตั้งค่า โค้ดและสคริปต์
เมนู อีเมล POP3
เมนู อีเมล Forwarding
บริหารเว็บไซต์ผ่าน Smart Phone ด้วย VelaHandy
วิธีเลือกภาษาบนหน้าเว็บไซต์
วิธีเปลี่ยนรหัสผ่าน article
ดาวน์โหลดเอกสารประกอบคอร์สอบรม Introduction to ReadyPlanet VelaEasy Website System
คู่มือการใช้งานฟังก์ชันพิเศษในแพ็กเกจ XL และ แพ็กเกจ Easy
ขั้นตอนสำคัญสำหรับยืนยันการจดโดเมนเนมใหม่และแก้ไขข้อมูลผู้ดูแลโดเมน