07 – สร้าง Popup

วิธีการใช้งาน : ตั้งค่า Banner , Popup สำหรับโชว์บนเว็บไซต์

1. เริ่มจากการกด Add News เพื่อสร้างป๊อปอัพใหม่ขึ้น
2. หลังจากกดสร้างแล้ว จะปรากฎรูปแบบของป๊อบอัพ ให้เราสามารถเลือกได้ว่าต้องการจะใช้ฟังก์ชั่นไหน อย่างไร โดยจำแบ่งออกเป็น 4 รูปแบบ

1. แบบ Image รูปภาพ
2. HTML ไว้สำหรับใส่ Code HTML5 หรือ เวอร์ชั่นที่ต่ำกว่า
3. Facebook สร้าง Popup เพื่อลิงค์ไปยัง Facebook ของเราเอง
4. สร้าง Subscription ให้เป็นรูปแบบป๊อปอัพ

โดยในตัวอย่างนี้เราจะเลือกเป็น Image

• Title Popup สามารถตั้งชื่ออะไรก็ได้ เพื่อให้ง่ายต่อการจดจำ เช่น ( แนะนำว่า ตั้งชื่อให้สอดคล้องกับเรื่องที่จะทำ เช่น จะทำป๊อปอัพเพื่อโปรโมท โดยให้ส่วนลด 30% ของการสั่งซื้อ 1 ครั้ง ก็อาจจะใช้ชื่อว่า : Name of Product discount 30 )

• Image Settings : ใส่รูปตรงช่องสีแดง โดยคลิ๊ก 1 ครั้ง จากนั้นจะให้เลือกรูปจาก Media หรือ Upload จากคอมก็ได้

• Display Rules : กำหนดการสร้างของ Popup ว่าจะให้โชว์ที่ตรงไหนบ้าง หน้าไหน หรือ Post ไหน อย่างไร ซึ่งสามารถกำหนดได้เลย

• Events : เสมือนการเจาะจงว่าจะให้โชว์อย่างไร ก่อน หรือ หลัง หรือ ให้มีการโชว์หลังจากเปิดหน้าเว็บแล้วกี่วินาที

• Conditions : กำหนด Geo Targeting คือ การกำหนดให้ป๊อปอัพขึ้นโชว์หรือไม่นั้น โดยดูจากตำแหน่งของคนที่เข้าว่ามาจากประเทศไหน เมืองอะไร หากไม่ตรงตามที่กำหนด Popup ก็จะไม่แสดงขึ้นมาให้เห็นนั่นเอง

• Behavior After Special Events : เป็นฟังก์ชั่นไว้ใช้กรณีที่ มีการใช้งานปลั๊กอินอื่นๆ ก่อนหน้า ในรูปจะเป็นการใช้งานป๊อปอัพหลังจากใช้งาน Contact Form หรือกรณีที่มีการส่งข้อความผ่านปลั๊กอิน Contact Form แล้วนั่นเอง ก็จะสามารถกำหนดได้ว่าจะให้ป๊อปอัพขึ้นยังไง

Design

• Themes: รูปแบบ Popup มีตั้งแต่ พื้นหลังสีดำ สีขาว คลุมทึบ สีเทา โดยสามารถเลือกได้ตาม
• Change Color: เป็นการเปลี่ยนสีพื้นหลัง
• Opacity: ปริมาณความทึบของแสง ว่าจะให้ทึบมากหรือน้อย
• Show background โชว์พื้นหลัง

Closing เมนูในการปิดป๊อปอัพ

• Dismiss on “esc” Key: = ปิด Popup ที่แสดง โดยสามารถกดปุ่ม ESC บนคอมพิวเตอร์ได้
• Show “Close” botton = ให้มีการโชว์ปุ่ม Close บน Popup
• Botton delay ความเร็วในการแสดงผลของปุ่ม Close
• Botton position: ตำแหน่งของปุ่ม Close บนป๊อปอัพ

Dimensions : ขนาดในการแสดงผลของป๊อปอัพ คำนวณจากขนาดรูปจริง

• Responsive mode รองรับการแสดงผลบนอุปกรณ์ทุกชนิดแบบอัตโนมัติ
• Size ขนาดของรูป
• Custom mode: ปรับแต่งด้วยตัวเอง
• Max width: ความกว้างของป๊อปอัพสูงสุด ( ใส่เป็นตัวเลข หรือ % หรือ ตัวเลขpx )
• Max height: ความยาวของ Popup สูงสุด
• Min width = ความกว้างป๊อปอัพต่ำสุด
• Min height = ความยาวขง Popup ต่ำสุด

การใช้งานฟังก์ชั่นขั้นสูง

Advanced เมนูปรับแต่งขั้นสูง

• Action on popup content click ให้มีการตอบสนองเมื่อมีการคลิ๊กตรง Popup
• Popup showing limition ตั้งค่าว่าจะโชว์ Popup กี่ครั้ง
• Popup opening animation / closing เปิด / ปิด Animation ป๊อปอัพ
• Location ตำหน่งที่ต้องการให้แสดง Popup มีทั้งหมด 9 ตำแหน่ง
• Disable Page scrolling ปิดการ Scrolling Page
• Enable content scrolling เปิดใช้งานเวลา Scroll แล้ว Content ก็จะเลื่อนตามไป

Floating Button ฟังก์ชั่นโชว์ปุ่มในส่วนด้านล่างของจอ ( ดูตัวอย่างได้ที่รูปด้านบน )

• Enable เปิดใช้งานฟังก์ชั่นนี้ หรือ จะปิดก็ได้
• Style มี 2 รูปแบบ ขึ้นอยู่กับความชอบ
• Position ตำแหน่งของปุ่ม ว่าต้องการให้อยู่ตรงไหนของจอ เวลาที่เปิดหน้าเว็บไซต์
• Font Size ขนาดของตัวอักษรบนปุ่ม
• Background color สีพื้นหลังของปุ่ม
• Text color: สีตัวอักษร
• Text: ข้อความ

Statistics ตัวนับสถิติ มีการโชว์ Popup ไปแล้วทั้งหมดกี่ครั้ง หรือการมองเห็นป๊อปอัพ

• Disable popup counting ถ้ากดเปิด On จะเป็นการปิดฟังก์ชั่นนี้ คือไม่ให้มีการนับจำนวนวิว นั่นเอง

---

3. เมื่อกรอกข้อมูลครบถ้วนทุกแถบแล้ว ให้สังเกตที่ Publish

• Save Draft : เก็บบันทึกอันที่ทำเอาไว้ (ปรับแก้ทีหลังได้)
• Visibility : ใครเห็นบ้าง
• Publish : ตั้งเวลาการแสดงผลได้

4. เรียบร้อยแล้วให้กด Publish & Clear Cache อีกครั้ง

Noted : เช็ค Popup และ Status การทำงาน ที่เคยทำทั้งหมดได้ที่ All Popup