วิธีเพิ่ม Section "Banner"


เป็น Section ที่ให้เว็บมาสเตอร์ได้อัพโหลดรูปภาพ Banner เพื่อแสดงข้อมูลโปรโมชั่น หรือข่าวประชาสัมพันธ์ ฯลฯ ได้อย่างโดดเด่น สะดุดตามากขึ้น มาพร้อมกับคุณสมบัติการใช้งาน และการแสดงผลในแบบที่คุณเลือกได้ ไม่ว่าจะเป็น 

• ใช้ในการแสดงผล Banner รูปภาพ พร้อมเป็นลิงก์ไปยังหน้าที่ต้องการได้

• แสดงเป็น Banner ภาพเดี่ยว หรือสร้างเป็นชุด Banner Slideshow ได้

สามารถเลือกการแสดผลรูปภาพ Banner ให้พอดีจอได้ โดยเลือกรูปแบบอัพโหลดรูปภาพเดียวแล้วให้ระบบย่อ-ขยายขนาดภาพอัตโนมัติ หรืออัพโหลดภาพ 3 ขนาด เพื่อให้ระบบเลือกไปแสดงผลให้พอดีกับหน้าจอบนคอมพิวเตอร์, Tablet และหน้าจอ Smart Phone

• สามารถใช้งานทั้งในเว็บไซต์ VelaEasy รูปแบบ Theme และ Smart Theme ทุกแพ็กเกจ

 

ขั้นตอนการเพิ่ม Banner Section 

1. คลิกปุ่มเพิ่มเมนู ประเภท "บทความ/สินค้า" เพื่อสร้างเป็นเมนูใหม่ หรือ คลิกเข้าไปที่เมนู ประเภท "บทความ/สินค้า" เดิมที่สร้างไว้แล้ว จากนั้น คลิกปุ่ม "เพิ่ม Section"

 

2. ปรากฎหน้าต่าง "เลือก Section" ให้คลิกเลือก "Banner Section"

 

 

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


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

โดยลักษณะของภาพที่เหมาะสมกับการใช้วิธีอัพโหลดแบบย่อขนาดภาพ คือ ภาพที่มีรายละเอียดขนาดใหญ่ ชัดเจน มีการแสดงตัวอักษรบนภาพขนาดใหญ่ หรือไม่มีตัวอักษรเลย 

     คุณสมบัติของรูปภาพที่ระบบรองรับ

     - นามสกุลของไฟล์รูปภาพที่รองรับ : .jpg, .jpeg, .png 

     - ขนาดของรูปที่เหมาะสม (Dimension) คือ : 1800x600 pixels ขึ้นไป

     - ขนาดของไฟล์รูป (File Size) : ไม่เกิน 5 MB


ตัวอย่างการแสดงผลรูป Banner แบบปกติ บนหน้าจอของอุปกรณ์ต่าง ๆ

     

 

3.2 เลือก แสดงผลรูป Banner แบบหลายขนาดหน้าจอ สามารถอัพโหลดภาพ 3 ขนาด เพื่อให้ระบบเลือกไปแสดงผลให้พอดีกับหน้าจอบนคอมพิวเตอร์, Tablet และหน้าจอ Smart Phone อัตโนมัติ

โดยลักษณะของภาพที่เหมาะสมกับการใช้วิธีอัพโหลดแบบหลายขนาดภาพ คือ ภาพที่มีรายละเอียดเล็ก ๆ ค่อนข้างมาก มีการแสดงข้อความบนภาพ Banner ที่มีรายละเอียดเยอะ ซึ่งเว็บมาสเตอร์สามารถออกแบบ Banner แต่ละขนาดให้แสดงข้อความอย่างชัดเจนได้ตามต้องการ

     คุณสมบัติของรูปภาพที่ระบบรองรับ

     - นามสกุลของไฟล์รูปภาพที่รองรับ : .jpg, .jpeg, .png 

     - ขนาดของรูปที่เหมาะสม (Dimension) คือ : 

► ขนาดที่ 1 : 1800x600 pixels ขึ้นไป เหมาะสำหรับนำไปแสดงผลบนหน้าจอคอมพิวเตอร์

► ขนาดที่ 2 : 1200x400 pixels ขึ้นไป เหมาะสำหรับนำไปแสดงผลบนหน้าจอ Tablets 

► ขนาดที่ 3 : 600x800 pixels ขึ้นไป เหมาะสำหรับนำไปแสดงผลบนหน้าจอ Smart Phone

     - ขนาดของไฟล์รูป (File Size) : ไม่เกิน 5 MB


ตัวอย่างการแสดงผลรูป Banner แบบหลายขนาดหน้าจอ บนหน้าจอของอุปกรณ์ต่าง ๆ

   

เมื่อรูปแบบการแสดงผล Banner ที่ต้องการแล้ว คลิก “บันทึก” 

 

วิธีอัพโหลดรูปภาพ ใน Banner Section

1. นำเมาส์ไปวางมุมบนขวาภายใน Section จะปรากฎสัญลักษณ์  ให้คลิก "ตั้งค่า Slideshow" เพื่ออัพโหลดรูปภาพ Banner ใหม่ ในตำแหน่งต่าง ๆ ตามรูปแบบที่เลือก โดยระบบจะแสดงหน้าต่างให้เลือก crop การแสดงผลภาพตามต้องการ (หรือคลิก แก้ไข เพื่อปรับตำแหน่งการแสดงผลภาพเดิมที่ได้อัพโหลดไปแล้วได้)

 

 

2. นอกจากนี้ ยังมีหัวข้ออื่น ๆ ให้เว็บมาสเตอร์กรอกข้อมูลเพิ่มเติมได้ ดังนี้ค่ะ

• ALT Text : เป็นส่วนสำหรับใส่ข้อความอธิบายรูปภาพที่จะช่วยให้ Search Engine รับรู้ความหมายของภาพนั้น ๆ เนื่องจาก Search Engine ไม่สามารถเก็บข้อมูลรูปภาพจากหน้าเว็บไซต์จากการดูว่าภาพ ที่แสดงคือภาพอะไร ดังนั้นจำเป็นจะต้องใช้ Tag พิเศษ เรียกว่า Alternative Text หรือ Alternate tag นี้ เพื่อใช้ในการอธิบายรูปภาพให้ Search Engine ทราบค่ะ

• URL : กรอก URL หน้าเว็บไซต์ ใช้กรณีที่ต้องการให้ผู้ชมคลิก Banner ไปยังหน้า Landing Page ปลายทางที่ต้องการได้

• ประเภทการเปิดลิงก์ : เลือกการเปิดหน้าเว็บไซต์เมื่อคลิก Banner ที่ผูกลิงก์ URL ไว้ ให้แสดงผลทับหน้าต่างเดิม (นิยมใช้ในกรณีที่สร้างลิงก์ภายในเว็บไซต์เดียวกัน) หรือจะแสดงผลในหน้าต่างใหม่ (นิยมใช้ในกรณีที่สร้างลิงก์เชื่อมโยงไปยังเว็บไซต์ภายนอก)

 

 

3. เมื่ออัพโหลดรูปภาพและตั้งค่าตามต้องการแล้ว คลิก "บันทึก

 

ตัวอย่างการแสดงผล Banner Section บนหน้าเว็บไซต์จริง

 

วิธีเพิ่มภาพ Banner เพื่อแสดงผลเป็น Slideshow

หลังจากที่เพิ่ม Banner Section แล้ว จะปรากฎสัญลักษณ์ใต้บริเวณ Section เพื่อเพิ่มและแก้ไขให้ Section นี้ แสดงผลในรูปแบบภาพเคลื่อนไหวแบบ Slideshow ได้ โดยมีวิธีการใช้งานดังนี้ค่ะ

สัญลักษณ์ + คลิกเพื่อเพิ่มรูปสไลด์ใหม่ใน Section นี้ 

สัญลักษณ์ - คลิกเพื่อลบภาพสไลด์ที่แสดงผลอยู่ 

สัญลักษณ์ < เลื่อนภาพสไลด์นี้ไปทางซ้าย

สัญลักษณ์ > เลื่อนภาพสไลด์นี้ไปทางขวา

 

หมายเหตุ :  ในส่วนแก้ไขเว็บไซต์ สไลด์โชว์จะไม่เคลื่อนไหวอัตโนมัติ เพื่อความสะดวกในการใส่ข้อมูลบนสไลด์โชว์แต่ละภาพ 

 

ตัวอย่างการแสดงผล Section Banner รูปแบบ Slideshow บนหน้าเว็บไซต์จริง

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

 

 วิธีลบ Banner Section

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

 

 

ข้อแนะนำเกี่ยวกับการใช้งาน Section Banner เพิ่มเติม

1. ใน 1 หน้าเว็บเพจ สามารถเพิ่ม Banner Section ได้หน้าละหลาย Section

2. ใน 1 Banner Section สามารถเปลี่ยนชุดรูปแบบ สลับระหว่าง Banner แบบปกติ กับ Banner แบบหลายขนาดหน้าจอได้ แต่ไม่สามารถกำหนดให้ภาพ Banner แต่ละภาพ แสดงผลสลับระหว่างชุดรูปแบบที่ต่างกัน ภายใน 1 ชุดสไลด์ได้

3. กรณีที่อัพโหลดภาพ Banner หลายภาพใน Banner Section (แสดงเป็น Slideshow) และมีการเปลี่ยนรูปแบบการแสดงผล 

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

3.2. ไม่ว่าเว็บมาสเตอร์จะเลือกใช้รูปแบบการแสดงผลแบบใด ข้อมูล ALT Text, Link และเลือกรูปแบบการเปิดหน้า ที่ใส่ไว้ในแต่ละภาพ Slideshow จะแสดงผลคงเดิมตามลำดับภาพใน Banner Section ที่เว็บมาสเตอร์จัดเรียง




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

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