ข้ามไปยังเนื้อหาหลัก

แบนเนอร์

1. หน้านี้ใช้ทำอะไร​

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

2. ก่อนเริ่ม​

  • สิทธิ์การใช้งาน: ต้องได้สิทธิ์ 'แบนเนอร์' จากผู้ดูแลระบบก่อน จึงจะเข้าหน้านี้ได้
  • สิ่งที่ต้องเตรียม:
    • ไฟล์รูปภาพแบนเนอร์ ขนาดแนะนำ 1920 × 420 px (ควรวางเนื้อหาและข้อความสำคัญให้อยู่ตรงกลางกว้าง 1096 px)
    • นามสกุลไฟล์ที่รองรับ: PNG, JPG, WEBP หรือ GIF
    • ขนาดไฟล์: ไม่เกิน 5 MB ต่อรูป
    • จำนวนรูป: ใส่ได้สูงสุดไม่เกิน 10 รูป

3. หน้าตาของหน้านี้​

เมื่อเปิดเข้ามา จะเห็นส่วนประกอบสำคัญดังนี้:

  1. แถบตรวจสอบประวัติ (Page Audit): แสดงรุ่นข้อมูล (Version), ชื่อผู้แก้ไขล่าสุด และวันเวลาที่แก้ไขล่าสุด
  2. กล่องตัวอย่างบนหน้าเว็บ (Preview Card): จำลองการแสดงผลแบนเนอร์จริงตามที่ผู้เล่นเห็นบนหน้าเว็บ พร้อมปุ่มสลับมุมมอง คอมพิวเตอร์ / มือถือ, สวิตช์ แสดงกรอบส่วนที่ไม่ถูกตัด และปุ่มตัวเลขสลับดูแต่ละสไลด์
  3. กล่องเลือกแบบแบนเนอร์ (Shape Selection): มีให้เลือก 3 รูปแบบ ได้แก่ ขอบมน, ขอบเหลี่ยม และ สไลด์มีภาพข้าง พร้อมป้ายบอกรูปแบบที่กำลังใช้งานอยู่
  4. กล่องคำแนะนำขนาดรูป (Size Guide): กล่องสีเทาอธิบายขนาดรูป 1920 × 420 px และพื้นที่ปลอดภัยตรงกลาง
  5. ส่วนอัปโหลดรูปแบนเนอร์ (Banner Upload Section): พื้นที่สำหรับลากไฟล์รูปมาวางหรือกดเลือกไฟล์ และการ์ดแสดงรูปแบนเนอร์ที่อัปโหลดไว้ทั้งหมดพร้อมเครื่องมือลากจัดลำดับ
  6. แถบปุ่มบันทึกด้านล่าง (Form Action Bar): แสดงปุ่ม ยกเลิก และปุ่ม บันทึก

4. ค้นหาและตัวกรอง​

หน้านี้ไม่มีช่องค้นหาหรือตัวกรองตาราง แต่มีเครื่องมือสำหรับเลือกมุมมองตัวอย่างภาพ ดังนี้:

เครื่องมือช่วยดูประเภทวิธีใช้งานผลลัพธ์
สลับมุมมองอุปกรณ์ปุ่มแท็บกดเลือกระหว่าง คอมพิวเตอร์ หรือ มือถือกล่องตัวอย่างด้านล่างจะปรับขนาดความกว้างตามหน้าจอของอุปกรณ์ที่เลือก
แสดงกรอบส่วนที่ไม่ถูกตัดสวิตช์เปิด-ปิดกดเปิดหรือปิดสวิตช์แสดงกรอบเส้นประสีขาวครอบพื้นที่ตรงกลางขนาด 1096 px ซึ่งเป็นส่วนที่จะแสดงครบทุกหน้าจอโดยไม่ถูกตัดขอบ
ปุ่มเลือกหมายเลขสไลด์ปุ่มตัวเลข 1, 2, 3...กดที่หมายเลขสไลด์ที่ต้องการดูตัวอย่างแบนเนอร์จะเลื่อนไปยังรูปตามหมายเลขที่เลือก

5. ตารางข้อมูล​

หน้านี้แสดงรายการรูปแบนเนอร์เป็นการ์ดรูปภาพที่จัดเรียงลำดับได้:

รายละเอียดบนการ์ดรูปแบนเนอร์แต่ละรูป​

ข้อมูลที่แสดงสิ่งที่เห็นบนจอหมายความว่าอะไรป้ายสีหรือสัญลักษณ์ที่พบ
ป้ายลำดับรูปป้าย #1, #2, #3... ที่มุมขวาบนของการ์ดลำดับการเลื่อนแสดงสไลด์บนหน้าเว็บผู้เล่นป้ายสีดำโปร่งใส หรือป้ายสีฟ้าเมื่อกำลังลากย้าย
รูปตัวอย่างภาพแบนเนอร์ที่อัปโหลดแสดงภาพย่อของแบนเนอร์นั้น (กดที่รูปเพื่อขยายดูรูปขนาดเต็ม)มีไอคอนจุดจับหกจุดแสดงขึ้นมาเมื่อชี้เมาส์ที่รูป
ชื่อรูปภาพข้อความ "รูปที่ 1", "รูปที่ 2"...หมายเลขลำดับรูปในระบบตัวหนังสือสีเข้ม
ป้ายตรวจสอบขนาดรูปข้อความและขนาด px ใต้การ์ดรูประบบตรวจขนาดรูปจริงและบอกความเหมาะสมกับรูปแบบแบนเนอร์ข้อความสีเขียว = พอดีทุกแบบ, ข้อความสีส้ม = พอดีเฉพาะบางแบบ หรือความละเอียดต่ำ
ปุ่มลบรูปไอคอนกากบาทสีแดง ที่มุมขวาล่างของการ์ดกดเพื่อลบรูปนี้ออกจากรายการแบนเนอร์ไอคอนสีแดง

ปุ่มคำสั่งในหน้านี้​

ปุ่มตำแหน่ง / สีกดแล้วจะเกิดอะไรหมายเหตุ / เงื่อนไข
การ์ดเลือกแบบแบนเนอร์กล่องรูปแบบ 3 กล่องเลือกรูปแบบทรงแบนเนอร์ที่ต้องการมี 3 แบบ: ขอบมน, ขอบเหลี่ยม, สไลด์มีภาพข้าง
ช่องอัปโหลดรูปกรอบเส้นประสีฟ้าเปิดหน้าต่างเลือกไฟล์จากคอมพิวเตอร์ หรือลากไฟล์มาวางรองรับ PNG, JPG, WEBP, GIF ขนาดไม่เกิน 5 MB ต่อรูป
ลบรูปภาพไอคอนกากบาทสีแดงบนการ์ดรูปนำรูปนั้นออกจากรายการแบนเนอร์ทันทีต้องกดปุ่มบันทึกด้านล่าง ข้อมูลจึงจะเปลี่ยนบนระบบ
ขยายดูรูป (Lightbox)กดที่ตัวรูปภาพในการ์ดเปิดหน้าต่างดูรูปภาพขนาดเต็มปิดได้โดยกดปุ่มกากบาทหรือกดพื้นที่ว่างด้านนอก
ยกเลิกปุ่มสีเทา ด้านล่างขวายกเลิกการเปลี่ยนรูปแบบรูปภาพและลำดับทั้งหมด คืนค่าเดิมล่าสุดกดได้เมื่อมีการแก้ไขที่ยังไม่ได้บันทึก
บันทึกปุ่มสีเข้ม ด้านล่างขวาสุดอัปโหลดรูปภาพใหม่และบันทึกการตั้งค่าทั้งหมด มีผลบนหน้าเว็บทันทีกดได้เมื่อมีการเปลี่ยนแปลงรูปแบบหรือรูปภาพ

6. ทีละขั้นตอน​

1. การเลือกแบบแบนเนอร์​

  1. ไปที่เมนู หน้าล็อบบี้ > แบนเนอร์ จากแถบเมนูด้านซ้าย
  2. เลื่อนลงมาที่หัวข้อ แบบแบนเนอร์
  3. กดเลือกรูปแบบที่ต้องการจาก 3 แบบ:
    • ขอบมน: แบนเนอร์กว้างเต็มพื้นที่ ขอบมุมโค้งมน (อัตราส่วนบนคอมพิวเตอร์ประมาณ 4.4 : 1)
    • ขอบเหลี่ยม: แบนเนอร์กว้างเต็มพื้นที่ ขอบมุมฉากเหลี่ยม (อัตราส่วนบนคอมพิวเตอร์ประมาณ 4.4 : 1)
    • สไลด์มีภาพข้าง: รูปหลักอยู่ตรงกลางขนาดใหญ่ และมีรูปถัดไปโผล่ออกมาที่ขอบด้านข้างซ้าย-ขวา (อัตราส่วนประมาณ 2.5 : 1)
  4. สังเกตในกล่องตัวอย่างด้านบน หน้าจอจะเปลี่ยนเป็นรูปแบบที่เลือกทันที

2. การอัปโหลดรูปแบนเนอร์ใหม่​

  1. เลื่อนลงมาที่หัวข้อ รูปแบนเนอร์
  2. กดที่กรอบอัปโหลดสีฟ้า หรือลากไฟล์รูปภาพจากคอมพิวเตอร์มาวางในกรอบ
  3. เลือกหลายรูปพร้อมกันได้ (ระบบจะประมวลผลและลดขนาดไฟล์ภาพให้อัตโนมัติ)
  4. ตรวจดูข้อความแนะนำใต้รูปภาพ:
    • หากขึ้นตัวหนังสือสีเขียว "1920 × 420 px · พอดีทุกแบบ" แสดงว่าขนาดรูปสวยงามสมบูรณ์
    • หากขึ้นตัวหนังสือสีส้ม ระบบจะแนะนำว่ารูปนี้อาจโดนตัดขอบบน-ล่าง หรือตัดขอบข้าง
  5. จำนวนรูปทั้งหมดต้องไม่เกิน 10 รูป

3. การจัดเรียงลำดับสไลด์​

  1. มองหาการ์ดรูปที่ต้องการเปลี่ยนลำดับ
  2. กดค้างที่การ์ดรูปภาพ แล้วลากไปวางในตำแหน่งที่ต้องการ (ซ้าย-ขวา)
  3. ป้ายตัวเลข #1, #2, #3 จะเปลี่ยนตามตำแหน่งใหม่ทันที
  4. รูปที่อยู่หมายเลข #1 จะเป็นรูปแรกที่ผู้เล่นเห็นเมื่อเปิดเข้าสู่เว็บไซต์

4. การลบรูปแบนเนอร์​

  1. มองหาการ์ดรูปที่ต้องการลบ
  2. กดปุ่มไอคอนกากบาทสีแดงที่มุมขวาล่างของการ์ดรูปนั้น
  3. รูปจะถูกนำออกจากรายการทันที

5. การตรวจสอบความเรียบร้อยและบันทึก​

  1. เลื่อนขึ้นไปดูกล่อง ตัวอย่างบนหน้าเว็บ
  2. กดสลับปุ่ม คอมพิวเตอร์ และ มือถือ เพื่อดูความสวยงามทั้งสองขนาดหน้าจอ
  3. เปิดสวิตช์ แสดงกรอบส่วนที่ไม่ถูกตัด เพื่อให้แน่ใจว่าข้อความสำคัญ ตัวหนังสือโปรโมชั่น หรือโลโก้ ไม่หลุดออกนอกกรอบเส้นประสีขาว
  4. เมื่อพอใจแล้ว กดปุ่ม บันทึก ที่มุมล่างขวา ระบบจะอัปโหลดรูปภาพและแสดงข้อความแจ้งเตือนสีเขียว "บันทึกแบนเนอร์แล้ว"

7. หน้าแก้ไขหรือหน้าเพิ่ม​

หน้านี้รวมการเลือกรูปแบบและการอัปโหลดรูปไว้ในหน้าจอเดียวกัน โดยมีรายละเอียดช่องและข้อมูลดังนี้:

ช่อง / การตั้งค่าต้องกรอกไหมใส่อะไรตัวอย่างข้อจำกัด
แบบแบนเนอร์ต้องเลือกเลือก 1 ใน 3 รูปแบบ: ขอบมน, ขอบเหลี่ยม หรือ สไลด์มีภาพข้างขอบมนเลือกได้ 1 รูปแบบสำหรับทั้งเว็บไซต์
รูปแบนเนอร์ไม่บังคับไฟล์รูปภาพสไลด์แบนเนอร์ไฟล์รูปภาพโปรโมชั่นสูงสุด 10 รูป, ขนาดไม่เกิน 5 MB ต่อรูป, นามสกุล PNG, JPG, WEBP, GIF
ลำดับสไลด์ไม่บังคับลำดับการเลื่อนรูปภาพรูปที่ 1 เลื่อนก่อนรูปที่ 2ลากสลับตำแหน่งได้ตามต้องการ

8. หน้าต่างป็อปอัพ (Popup / Modal)​

1. หน้าต่างดูรูปภาพขนาดเต็ม (Image Lightbox)​

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

2. หน้าต่างแจ้งเตือนข้อมูลชนกัน (Version Conflict)​

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

9. สถานะและป้ายสี​

ป้ายสถานะสีของป้ายความหมายสิ่งที่ต้องทำต่อ
ใช้อยู่เขียวรูปแบบแบนเนอร์นี้กำลังเปิดใช้งานอยู่บนเว็บไซต์จริงในปัจจุบันรูปแบบปัจจุบัน ไม่ต้องทำอะไรเพิ่ม
พอดีทุกแบบเขียวขนาดรูปภาพตรงตามมาตรฐานแนะนำ (1920 × 420 px) จะแสดงผลได้สวยงามในทุกรูปแบบไม่ต้องแก้ไขรูปภาพ
พอดีแบบสไลด์ส้มขนาดรูปภาพเหมาะสำหรับแบบสไลด์มีภาพข้าง หากเปลี่ยนไปใช้แบบขอบมนหรือขอบเหลี่ยมอาจถูกตัดขอบบนและล่างออกเล็กน้อยตรวจดูตัวอย่างในแบบขอบมนว่ามีข้อความตกหล่นหรือไม่
สัดส่วนต่างจากที่แนะนำส้มรูปภาพไม่ได้ใช้อัตราส่วนมาตรฐาน ระบบจะตัดขอบภาพเพื่อให้พอดีกับกรอบเสมอหากภาพโดนตัดตัวหนังสือ ให้ปรับขนาดรูปภาพก่อนอัปโหลดใหม่
ความละเอียดต่ำส้มรูปภาพมีความกว้างน้อยกว่า 1440 px ภาพอาจไม่คมชัดเมื่อเปิดบนจอคอมพิวเตอร์ขนาดใหญ่แนะนำให้ใช้รูปที่มีความละเอียดสูงขึ้น
ยังไม่มีรูปเทายังไม่ได้อัปโหลดรูปภาพลงในระบบ ผู้เล่นจะเห็นรูปภาพจำลองสีเทาเริ่มต้นจำนวน 3 สไลด์อัปโหลดรูปภาพจริงอย่างน้อย 1 รูป

10. คำถามที่เจอบ่อย / แก้ปัญหาเบื้องต้น​

  • ถ้าไม่ได้อัปโหลดรูปแบนเนอร์ไว้เลย ผู้เล่นจะเห็นอะไร:
    • หากระบบไม่มีรูปแบนเนอร์เลย (0 รูป) หน้าเว็บผู้เล่นและกล่องตัวอย่างจะแสดงกรอบสไลด์สีเทาเริ่มต้นจำนวน 3 รูป เพื่อบอกขนาดแนะนำที่ต้องอัปโหลด ให้เพิ่มรูปภาพจริงอย่างน้อย 1 รูปแล้วกดบันทึก
  • ทำไมรูปแบนเนอร์ที่อัปโหลดถึงโดนตัดขอบข้อความออก:
    • รูปแบนเนอร์จะถูกขยายให้เต็มกรอบโดยไม่มีขอบดำเสมอ หากเป็นแบบสไลด์มีภาพข้าง ขอบด้านซ้ายและขวาจะถูกตัดออก แนะนำให้ออกแบบโดยวางข้อความ โลโก้ และจุดสำคัญไว้ตรงกลางรูปภาพในพื้นที่ความกว้าง 1096 px และเปิดสวิตช์ แสดงกรอบส่วนที่ไม่ถูกตัด เพื่อตรวจสอบก่อนบันทึก
  • อัปโหลดรูปภาพไม่ผ่าน:
    • ตรวจสอบขนาดไฟล์ว่าเกิน 5 MB หรือไม่ และไฟล์ต้องเป็นนามสกุล PNG, JPG, WEBP หรือ GIF เท่านั้น
  • ทำไมเพิ่มรูปมากกว่า 10 รูปไม่ได้:
    • ระบบจำกัดจำนวนรูปแบนเนอร์ไว้สูงสุดไม่เกิน 10 รูป เพื่อป้องกันไม่ให้หน้าเว็บผู้เล่นโหลดช้าจนเกินไป หากต้องการเพิ่มรูปใหม่ ให้ลบรูปเก่าที่ไม่ใช้ออกก่อน
  • ปุ่มบันทึกเป็นสีเทา กดไม่ได้:
    • ปุ่มบันทึกจะกดได้เฉพาะเมื่อมีการเปลี่ยนแปลง เช่น เปลี่ยนแบบแบนเนอร์ เพิ่มรูป ลบรูป หรือสลับลำดับรูป หากข้อมูลยังเหมือนเดิมทุกประการ ปุ่มจะถูกปิดไว้