ระบบ แบนเนอร์ (Bannner)



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

ตัวอย่างรูปแบนเนอร์หน้าเว็บไซต์



ตัวระบบรองรับทั้งรูปภาพ และวิดีโอ สามารถปรับเปลี่ยนข้อความ หรือซ่อนข้อความได้จากระบบ 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 " ลงไป : รูปจะแสดงผลเป็นสี่เหลี่ยมผืนผ้าแนวตั้ง


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: กดเลือกวีดิโอที่มีการใส่อัพโหลดไว้
​​​​​​​​​​​​​                  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 หลักได้
                  - การเปิด Banner Video ในมือถือไม่สามารถ crop โดยเลือกตำแหน่งของภาพใด้ ในมือถือควรเป็นภาพนิ่ง (เปิดฟังก์ชั่น mobile device)
​​​​​​​

​​​​​​​​​​​​​     3.1.3 Mobile: แถบเพิ่ม หรือแก้ไขแบนเนอร์ที่มีการใส่ไว้ (สำหรับเวอร์ชั่นมือถือ)
                           *การใช้งานเหมือนข้อ 3.1.2 Desktop แต่เลือกใส่รูปให้เหมาะกับขนาดหน้าจอมือถือแนวตั้ง ส่วนใหญ่จะใช้เป็นรูปสี่เหลี่ยมจตุรัส

  3.2 ลบ
​​​​​​​  กดเพื่อทำการลบแบนเนอร์ที่ไม่ต้องการใช้ออก เมื่อกดจะมีหน้าต่างขึ้นมา ถ้ายืนยันที่จะลบให้กดปุ่มตกลง​​​​​​​

*วิธีการตรวจสอบขนาดรูปที่หน้าเว็บไซต์


การตั้งค่าแบนเนอร์ สำหรับ กรณีที่มี 2 ปุ่ม และ 2 Link
ให้ใส่ link ที่ 1 ตามภาพ



หลักจากนั้นให้คลิ๊ก ที่ Tab Optional และ คลิ๊กปุ่มที่ 2 ตามภาพด้านล่าง


* หมายเหตุ Banner Script. บางตัวอาจจะยังไม่รองรับ กรณีแบนเนอร์ ปุ่มที่ 2