ระบบการจัดการแบนเนอร์ ช่วยให้คุณสามารถปรับเปลี่ยนรูปภาพต่าง ๆ ที่หน้าเว็บไซต์ ได้ง่ายและสะดวก
ตัวอย่างรูปแบนเนอร์หน้าเว็บไซต์
ตัวระบบรองรับทั้งรูปภาพ และวิดีโอ สามารถปรับเปลี่ยนข้อความ หรือซ่อนข้อความได้จากระบบ CMS
ยังมีรูปแบบแบนเนอร์ตามแม่แบบ ที่จะช่วยเพิ่มความยืดหยุ่นในการเพิ่มแบนเนอร์ และยังคุมความสวยงามได้ง่าย
1. ปุ่มลบที่ไม่ได้ใช้: ใช้สำหรับลบแบนเนอร์ที่ไม่ได้ใช้งาน และไม่ได้ผูกไว้กับแม่แบบแบนเนอร์ไว้
2. ปุ่มเพิ่มแบนเนอร์: ใช้สำหรับเพิ่มแบนเนอร์นอกเหนือจากแม่แบบแบนเนอร์ที่มีการตั้งค่าไว้ให้
3. ปุ่มดำเนินการ: เป็นปุ่มสำหรับจัดการตัวแบนเนอร์ที่มีการสร้างไว้แล้ว
1. ปุ่มลบที่ไม่ได้ใช้
ใช้สำหรับลบแบนเนอร์ที่ไม่ได้ใช้งาน และไม่ได้ผูกไว้กับแม่แบบแบนเนอร์ไว้
วิธีใช้งาน: ทำการกดปุ่มลบที่ไม่ได้ใช้ เมื่อกดจะมีหน้าต่างขึ้นมา ถ้ายืนยันที่จะลบให้กดปุ่มตกลง
2. ปุ่มเพิ่มแบนเนอร์
ใช้สำหรับเพิ่มแบนเนอร์นอกเหนือจากแม่แบบแบนเนอร์ที่มีการตั้งค่าไว้ให้
วิธีใช้งาน: ทำการกดปุ่มเพิ่มแบนเนอร์ จะมีหน้าต่างเพิ่มแบนเนอร์แสดงขึ้นมา โดยแบ่งเป็น 2 แถบ
2.1 แถบบทนำ
1) Title: ตั้งชื่อแบนเนอร์
2) Slug: ตั้งชื่อ Slug ให้ตั้งเป็นภาษาอังกฤษตัวพิมพ์เล็กทั้งหมด ห้ามเว้นวรรค แต่ใช้ขีดกลางหรือขีดล่างได้ (ห้ามซ้ำกับที่เคยตั้งแล้ว)
3) Status: เลือก Show เพื่อให้แสดงแบนเนอร์ หรือเลือก Draft เพื่อทำการซ่อนแบนเนอร์
4) Tag: เลือก Tag ที่เกี่ยวข้องกับแบนเนอร์ เช่น Master เป็นแบนเนอร์แรกสุดที่หน้าหลัก
2.2 แถบขั้นสูง
1) Device Mode: เฉพาะผู้ลูกค้าที่ซื้อแพคเกธีมมือถือเพิ่มเติม รองรับการใช้งานแบนเนอร์ได้ 2 แบบ ทั้งแบบ Desktop และ Mobile
- เลือก Yes: ถ้าต้องการเปิดการใช้งาน การใส่รูปสำหรับแสดงในโหมดมือถือ
- เลือก No: ถ้าไม่ต้องการเปิดการใช้งาน การใส่รูปสำหรับแสดงในโหมดมือถือ
2) Language Mode:
- เลือก Yes ถ้าต้องการให้ผูกกับโหมดภาษา
- เลือก No ถ้าไม่ต้องการให้ผูกกับโหมดภาษา
3) Effect:
- Slide: เป็นรูปแบบการสไลด์รูปแบนเนอร์
- Fade: เป็นรูปแบบการทำให้รูปค่อย ๆ เลือนหาย
4) Auto Slide: กรณีที่ใส่รูปมากกว่า 1 รูป
- เลือก Yes ถ้าต้องการให้สไลด์อัตโนมัติ
- เลือก No ถ้าไม่ต้องการให้สไลด์อัตโนมัติ
5) Auto Slide MIN : เลือกเวลาที่ต้องการให้สไลด์อัตโนมัติ ทุก ๆ กี่นาที
6) Image Ration : ช่องกรอกอัตราส่วนเพื่อปรับขนาดรูป (*ใช้งานได้เฉพาะรูปแบนเนอร์หลัก บนสุดของเว็บไซต์)
*ตัวอย่างการกรอกสัดส่วน Ration
- กรอกค่า " 1:1 " ลงไป : รูปจะแสดงผลเป็นสี่เหลี่ยมจตุรัส
- กรอกค่า " 2:1 " ลงไป : รูปจะแสดงผลเป็นสี่เหลี่ยมผืนผ้าแนวนอน
- กรอกค่า " 1:2 " ลงไป : รูปจะแสดงผลเป็นสี่เหลี่ยมผืนผ้าแนวตั้ง
สามารถกรอกเป็นทศนิยมได้ เช่น 2.5:1 หลังจากนั้นเซฟ และเคลียร์แคชเพื่อดูความเหมาะสมกับหน้าเว็บ
ควรจำค่าเดิมไว้ก่อนปรับ
3. ปุ่มดำเนินการ
เป็นปุ่มสำหรับจัดการตัวแบนเนอร์ที่มีการสร้างไว้แล้ว
3.1 แก้ไข
3.2 ลบ
3.1 แก้ไข
เมื่อทำการกดแก้ไข จะแสดงหน้าต่างขึ้นมา โดยแบ่งเป็น 3 แถบ
3.1.1 บทนำ: แถบเดียวกับตอนทำการเพิ่มแบนเนอร์ใหม่ สามารถแก้ไขของเดิมที่เคยกรอกไว้
3.1.2 Desktop: แถบเพิ่ม หรือแก้ไขแบนเนอร์ที่มีการใส่ไว้ (สำหรับเวอร์ชั่น Desktop)
1) การเพิ่มรูป: ลากรูปจากในคอมพิวเตอร์มาวางที่ วางไฟล์ที่นี่ หรือกดคลิกในช่องวางไฟล์ที่นี่ แล้วเลือกรูปที่อยู่ในคอมพิวเตอร์
(หากต้องการให้แบนเนอร์มีการสไลด์เปลี่ยนรูป ต้องใส่รูปมากกว่า 1 รูปขึ้นไป)
2) ดำเนินการ: เป็นตัวจัดการตัวแบนเนอร์ที่มีการใส่ไว้ แบ่งเป็น แก้ไข กับลบ
2.1) แก้ไข
แถบ Intro
1) File Replace: ไว้สำหรับเปลี่ยนรูปใหม่ โดยลากรูปจากในคอมพิวเตอร์มาวาง หรือกดคลิกที่ปุ่ม Browse แล้วเลือกรูปที่อยู่ในคอมพิวเตอร์
2) ชื่อ/ Title: ใส่ชื่อหัวข้อรูป แบ่งตามภาษา เช่น Title (th) เป็นที่ใส่ชื่อหัวข้อรูปหน้าภาษาไทย
3) สถานะ/ Status:
- Active: เลือกเพื่อแสดงรูปนี้
- Disable: เลือกเพื่อปิดการแสดงรูปนี้
4) คำอธิบาย/ Description: ใส่ข้อความรูปในส่วนรายละเอียด แบ่งตามภาษา เช่น Description (th) เป็นที่ใส่ข้อความหน้าภาษาไทย
5) URL : ช่องกรอก uri เพื่อให้แบนเนอร์ลิงก์ไปหน้าที่ระบุ เช่น /collections ทำให้แบนเนอร์ตัวนี้กดแล้วไปหน้า Collection เป็นต้น
แถบ Optional
1) Intro: ใส่ข้อความรูปในส่วนบทนำ แบ่งตามภาษา เช่น intro (th) เป็นที่ใส่ข้อความหน้าภาษาไทย
2) Text Link: ใส่ข้อความสำหรับปุ่มลิงก์ แบ่งตามภาษา เช่น Text Link (th) เป็นที่ใส่ข้อความหน้าภาษาไทย
3) Text Position: เลือกตำแหน่งของข้อความ (*ใช้งานได้เฉพาะรูปแบนเนอร์หลัก บนสุดของเว็บไซต์)
- Center: เลือกให้ตำแหน่งของข้อความอยู่ตรงกลาง
- Left: เลือกให้ตำแหน่งของข้อความอยู่ทางซ้าย
- Right: เลือกให้ตำแหน่งของข้อความอยู่ทางขวา
- None: เลือกให้ปิดข้อความทั้งหมดของแบนเนอร์
4) URL 2 (optional): ช่องกรอก uri เพื่อให้แบนเนอร์ลิงก์ไปหน้าที่ระบุ (สำหรับบางธีมที่มีปุ่มลิงก์ 2 ในแบนเนอร์ 2 ที่)
5) Text Link 2 (optional): ใส่ข้อความสำหรับปุ่มลิงก์ แบ่งตามภาษา เช่น Text Link (th) เป็นที่ใส่ข้อความหน้าภาษาไทย (สำหรับบางธีมที่มีให้ใส่ข้อความสำหรับปุ่มลิงก์ ในแบนเนอร์ 2 ที่)
6) Text Color: ช่องกรอกโค้ดสีของข้อความ
7) Filter BG: ตัวเลือกให้มีพื้นหลังหรือไม่
- เลือก Yes: มีพื้นหลัง
- เลือก No: ไม่มีพื้นหลัง
8) Video Stream:
- เลือก No: กรณีที่ไม่ต้องการให้รูปมีการเล่นวีดิโอ
- เลือก Yes: กรณีต้องการให้รูปมีการเล่นวีดิโอ ถ้าเลือก
*กรณีที่เลือก Yes ให้ทำการกดบันทึกก่อน 1 ครั้ง แล้วค่อยกดแก้ไขใหม่ จะแสดงแถบ Video Stream เพิ่มมา
แถบ Video Stream: แถบจัดการวิดีโอ
1) Video: กดเลือกวีดิโอที่มีการใส่อัพโหลดไว้
(วิธีการอัพโหลดVideo เลือกที่เมนูหลัก --จัดการเนื้อหา -- ไฟล์วิดิโอสตรีม และ กด ปุ่มอัพโหลดเลือกวิดีโอที่ต้องการ รองรับ mp4 ขนาดไฟล์ ไม่เกิน 20MB )
2) Preload: ปรับเลือกว่าต้องการให้โหลดล่วงหน้าหรือไม่
3) Loop: ปรับเลือกว่าต้องการให้วีดิโอแสดงวนซ้ำหรือไม่
4) Control: ปรับเลือกว่าต้องการให้มีการเมนูควบคุมวีดิโอหรือไม่
5) Auto Play: ปรับเลือกว่าต้องการให้วีดิโอเล่นอัตโนมัติหรือไม่
6) Muted: ปรับเลือกว่าต้องการให้ปิดเสียงวีดิโอหรือไม่
ข้อแนะนำการใช้ Banner video
- Banner Video มีผลต่อ Speedpage score ลดลง 10-15%
- Banner Video ควรเป็น Video Loop ไม่เกิน 7 วินาที
- ไม่ควร Video Company profile หนังโฆษณา หรือมี text อยู่ใน Video
- การเปิด Banner Video ในมือถือสามารถ เปิดฟังก์ชั่น mobile device และ upload
ไฟล์วิดิโอที่ปรับไฟล์มาสำหรับมือถือ แยกอีกอัน เป็นสี่เหลี่ยมจัตุรัสหรือแนวตั้ง
3.1.3 Mobile: แถบเพิ่ม หรือแก้ไขแบนเนอร์ที่มีการใส่ไว้ (สำหรับเวอร์ชั่นมือถือ)
*การใช้งานเหมือนข้อ 3.1.2 Desktop แต่เลือกใส่รูปให้เหมาะกับขนาดหน้าจอมือถือแนวตั้ง ส่วนใหญ่จะใช้เป็นรูปสี่เหลี่ยมจตุรัส
3.2 ลบ
กดเพื่อทำการลบแบนเนอร์ที่ไม่ต้องการใช้ออก เมื่อกดจะมีหน้าต่างขึ้นมา ถ้ายืนยันที่จะลบให้กดปุ่มตกลง
*วิธีการตรวจสอบขนาดรูปที่หน้าเว็บไซต์
การตั้งค่าแบนเนอร์ สำหรับ กรณีที่มี 2 ปุ่ม และ 2 Link
ให้ใส่ link ที่ 1 ตามภาพ
หลักจากนั้นให้คลิ๊ก ที่ Tab Optional และ คลิ๊กปุ่มที่ 2 ตามภาพด้านล่าง
* หมายเหตุ Banner Script. บางตัวอาจจะยังไม่รองรับ กรณีแบนเนอร์ ปุ่มที่ 2