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

ป๊อปอัปสมัคร/เข้าสู่ระบบ

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

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

สำหรับการใช้งานบนสมาร์ตโฟน หน้าต่างป๊อปอัปจะถูกจัดวางเป็นรูปแบบมาตรฐานขนาดกะทัดรัดสำหรับมือถือโดยอัตโนมัติ เพื่อให้ผู้เล่นกรอกเบอร์โทรศัพท์และรหัสผ่านได้อย่างสะดวกและรวดเร็ว

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

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

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

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

  1. ส่วนหัวของหน้า (Page Header): แสดงชื่อหน้า ป๊อปอัปสมัคร/เข้าสู่ระบบ, คำอธิบายสั้น ๆ และแถบนำทาง (การตั้งค่า / ธีม / ป๊อปอัป)
  2. แถบประวัติการแก้ไข (Page Audit): แสดงเวอร์ชันของข้อมูล, ชื่อผู้บันทึกล่าสุด, ประเภทผู้ใช้ และวันเวลาที่แก้ไขล่าสุด
  3. การ์ดตัวอย่างบนหน้าเว็บ (Preview Card): แสดงตัวอย่างหน้าต่างป๊อปอัปเสมือนจริงในแท็บเข้าสู่ระบบ พร้อมเครื่องมือ:
    • ปุ่มสลับภาษา: ภาษาไทย และ ภาษาอังกฤษ
    • ตัวอย่างบน คอมพิวเตอร์: แสดงหน้าต่างป๊อปอัปบนพื้นหลังสีมืดของหน้าล็อบบี้
    • ตัวอย่างบน มือถือ: แสดงหน้าต่างป๊อปอัปมาตรฐานในกรอบโทรศัพท์มือถือ
  4. ส่วนเลือกรูปแบบบนคอม (Select Computer Layout):
    • ปุ่มสลับ ฝั่งของรูป: เลือกวางรูปไว้ทาง ซ้าย หรือ ขวา ของฟอร์ม
    • การ์ดตัวเลือกเค้าโครง 4 รูปแบบ พร้อมป้าย ใช้อยู่
  5. ส่วนอัปโหลดรูปประกอบ (Picture): กล่องอัปโหลดรูปภาพพร้อมคำแนะนำขนาดและตัวอย่างภาพ
  6. แถบคำสั่งด้านล่าง (Action Bar): แถบลอยแสดงปุ่ม ยกเลิก และปุ่ม บันทึก

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

หน้านี้ไม่มีช่องค้นหาหรือตัวกรองตาราง แต่มีเครื่องมือปรับแต่งมุมมอง 2 ส่วน:

เครื่องมือปรับแต่งตัวเลือกที่มีให้กดผลลัพธ์บนการ์ดตัวอย่าง
สลับภาษาภาษาไทย / ภาษาอังกฤษสลับดูข้อความหัวข้อและปุ่มในหน้าต่างป๊อปอัป (เช่น "เข้าสู่ระบบ", "สมัครสมาชิก", "เบอร์โทรศัพท์", "รหัสผ่าน") ระหว่างภาษาไทยและภาษาอังกฤษ
ฝั่งของรูป (Image Position)ซ้าย / ขวาสลับตำแหน่งของรูปภาพประกอบให้อยู่ทางฝั่งซ้ายหรือฝั่งขวาของฟอร์มกรอกข้อมูล (ปุ่มนี้จะกดได้เฉพาะเค้าโครงแบบที่ 0, 2 และ 3 เท่านั้น ส่วนแบบที่ 1 ที่เป็นแบนเนอร์ด้านบนจะถูกปิดไว้)

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

4 รูปแบบเค้าโครงป๊อปอัปบนคอมพิวเตอร์​

รหัสชื่อรูปแบบลักษณะการจัดวางรูปและฟอร์มการใช้งานรูปประกอบ
0รูปด้านข้าง (Picture beside) (ค่าเริ่มต้น)แบ่งครึ่งหน้าต่างเป็นสองฝั่ง: ฝั่งหนึ่งเป็นรูปประกอบ อีกฝั่งหนึ่งเป็นฟอร์มกรอกข้อมูลใช้รูปภาพขนาด 600 × 700 px แสดงเต็มครึ่งหน้าต่าง
1แบนเนอร์ด้านบน (Banner on top)หน้าต่างทรงแคบกะทัดรัด รูปประกอบแสดงเป็นแถบแบนเนอร์แนวนอนด้านบนเหนือฟอร์ม พร้อมโลโก้ระบบจะครอบตัดรูปภาพให้อยู่ในสัดส่วนแบนเนอร์แนวนอน
2รูปเต็มฉาก (Picture behind)รูปประกอบขยายเต็มพื้นที่พื้นหลังของหน้าต่าง โดยฟอร์มกรอกข้อมูลจะลอยอยู่บนแผงกระจกฝ้าโปร่งแสงใช้รูปภาพเต็มหน้าต่าง ควรเลือกรูปที่พื้นหลังไม่ลายตาเกินไป
3สีของเว็บ (Site colours)ไม่ใช้รูปประกอบ หน้าต่างถูกจัดเป็นแผงสีตามสีธีมของเว็บ พร้อมโลโก้ ข้อความต้อนรับ และจุดเด่นของเว็บไม่ใช้รูปภาพ (รูปที่เคยอัปโหลดไว้จะยังคงเก็บอยู่ในระบบเพื่อใช้กับรูปแบบอื่น)

ปุ่มคำสั่งในส่วนอัปโหลดรูปประกอบ​

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

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

1. การเปลี่ยนรูปแบบเค้าโครงป๊อปอัป​

  1. ไปที่เมนู รูปลักษณ์เว็บ > ป๊อปอัปสมัคร/เข้าสู่ระบบ จากแถบเมนูด้านซ้าย
  2. ในส่วน รูปแบบบนคอม ให้กดเลือก 1 ใน 4 รูปแบบที่ต้องการ
  3. หากเลือกรูปแบบ รูปด้านข้าง หรือ รูปเต็มฉาก ให้กดปุ่ม ซ้าย หรือ ขวา ที่หัวข้อ ฝั่งของรูป เพื่อสลับด้านได้ตามต้องการ
  4. ตรวจดูความสวยงามในกรอบ ตัวอย่าง ด้านบน
  5. กดปุ่ม บันทึก ที่แถบลอยด้านล่าง
  6. ระบบจะแสดงข้อความแจ้งเตือนสีเขียวว่า "บันทึกป๊อปอัปแล้ว"

2. การอัปโหลดรูปประกอบใหม่​

  1. เลื่อนลงมาที่บล็อก รูปประกอบ
  2. กดที่กรอบรูปภาพ หรือลากไฟล์ภาพแนวตั้งขนาดไม่เกิน 5 MB มาวางในกรอบ
  3. รอระบบอัปโหลดไฟล์สักครู่ แล้วตรวจดูข้อความใต้รูป:
    • ตรงกับขนาดที่แนะนำ: ภาพมีสัดส่วน 600 × 700 px พอดี
    • ไม่ตรงขนาดที่แนะนำ ระบบจะตัดให้พอดี: ระบบจะครอบตัดภาพให้อัตโนมัติโดยไม่เสียสัดส่วน
  4. ตรวจดูภาพตัวอย่างป๊อปอัปด้านบนสุด
  5. กดปุ่ม บันทึก ที่แถบด้านล่าง

3. การลบรูปเพื่อกลับไปใช้แผงสีต้อนรับของระบบ​

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

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

ตารางแจกแจงการตั้งค่าในหน้านี้:

ช่อง / การตั้งค่าต้องกรอกไหมใส่อะไรตัวอย่างข้อจำกัด
รูปแบบบนคอมต้องเลือกกดเลือกหนึ่งใน 4 รูปแบบเค้าโครงป๊อปอัปรูปด้านข้าง (Picture beside)มีผลเฉพาะการเปิดดูบนหน้าจอคอมพิวเตอร์
ฝั่งของรูปต้องเลือกเลือกตำแหน่งฝั่งของรูปภาพ (ซ้าย หรือ ขวา)ขวาใช้ได้เฉพาะเค้าโครงที่รองรับ (ปิดใช้งานในแบบแบนเนอร์ด้านบน)
รูปประกอบไม่บังคับไฟล์ภาพแนวตั้งสำหรับแสดงประกอบหน้าต่างป๊อปอัปไฟล์ภาพ welcome-banner.png ขนาด 600 × 700 pxไฟล์ PNG, JPG หรือ WEBP ไม่เกิน 5 MB หากไม่ใส่จะใช้แผงสีและโลโก้ของระบบ

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

1. หน้าต่างแจ้งเตือนข้อมูลขัดแย้ง (Version Conflict)​

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

2. หน้าต่างเตือนก่อนออกจากหน้า (Dirty Form Guard)​

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

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

ป้ายสถานะ / ข้อความสีของป้ายความหมายสิ่งที่ต้องทำต่อ
ใช้อยู่เขียวรูปแบบเค้าโครงป๊อปอัปที่เปิดใช้งานอยู่บนเว็บไซต์จริงในปัจจุบันไม่ต้องทำอะไร หากต้องการใช้รูปแบบเดิม
ตรงกับขนาดที่แนะนำเขียวไฟล์รูปภาพมีสัดส่วน 600 × 700 px พอดีกับกรอบรูปภาพจะแสดงผลได้อย่างคมชัดสมบูรณ์
ไม่ตรงขนาดที่แนะนำ...เหลืองไฟล์รูปภาพไม่ได้สัดส่วน ระบบจะตัดขอบภาพให้อัตโนมัติตรวจสอบภาพตัวอย่างด้านบนว่ามีส่วนสำคัญของภาพถูกตัดหรือไม่
กำลังอัปโหลด…ฟ้าระบบกำลังส่งไฟล์รูปภาพขึ้นเซิร์ฟเวอร์รอจนกว่าจะอัปโหลดเสร็จก่อนกดบันทึก
หลังบันทึกจะแสดงสี...ส้มรูปภาพถูกตั้งค่าเตรียมลบออกเพื่อใช้สีของเว็บกดบันทึกเพื่อยืนยัน หรือกดใช้รูปเดิมหากเปลี่ยนใจ

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

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