สอนทำ POP UP ให้เด้งดึ๋ง ในเว็บไซต์ ตอนที่ 2 (Auto POP UP)

สอนทำ POP Up เด้งดึ๋ง ในเว็บไซต์ Wordpress ตอนที่ 2
https://www.youtube.com/embed/VJkcrk4yG4g?feature=oembed&autoplay=1
ช่วยแชร์ให้เพื่อน... สนับสนุนผู้เขียนครับ :)

สวัสดีครับ มาถึงตอนที่ 2 ของการสร้าง pop up ใน wordpress นะครับ ในตอนที่ 2 นี้เราจะสร้าง popup อย่างไร ให้เว็บไซต์ของเราแสดง Pop Up แบบอัตโนมัติด้วยการตั้งเวลา การแสดง Pop Up แบบตั้งเวลามีประโยชน์ตรงที่ว่า ถ้าผู้ใช้งานของเราไม่ได้มีการกดปุ่มเปิด Pop Up Pop Up ก็จะแสดงขึ้นมาแบบอัตโนมัติทำให้ข่าวสารที่เราต้องการจะสื่อสารให้กับคนดูของเรา สามารถสื่อสารได้โดยตรง ให้กระแทกตาคนดู

===
ช่วยกัน ทำแบบสอบถาม เนื้อหาแบบไหน ตรงใจคุณ ได้ที่นี่ครับ
https://palamike.com/web-questionare
===

ขั้นตอนแรกของ การสร้าง Auto popup ในเว็บไซต์ wordpress

ให้เราไปสร้าง popup ใหม่ครับโดยเราไปที่เมนู popup maker แล้วไปที่ All Popups ครับ

จากนั้นให้เรา Add New Pop Up ครับ เราก็สร้างป๊อบอัพใหม่ขึ้นมาตามปกติเลยโดยการตั้งชื่อไตเติ้ลของ Pop Up ครับหรือใครจะใส่ Option เอาไตเติ้ลของ Pop Up ก็ได้นะครับเพื่อให้แสดงในหน้าต่างป๊อปอัพของเรานั่นเองจากนั้นก็อย่าลืมใส่เนื้อหาของเราโดยเราสามารถที่จะใส่รูปภาพหรือข้อความลงไปใน Pop Up ก็ได้ครับ

หลังจากนั้นเราจะไปตั้งค่าในเรื่องของสติ๊กเกอร์กันครับว่า Pop Up ของเราจะทำการ Trigger แบบไหน เมื่อเราทำการ Add Trigger เข้าไปก็จะมีให้เลือก Auto/Delay งั้นเราก็ตั้งค่า ดีเลย์ให้เป็นไปตามที่เราต้องการตัวอย่าง 3000 milliseconds คือ 1 วินาที ตัวอย่าง ถ้าเราต้องการให้ป๊อบอัพแสดงแบบออโต้ภายในเวลา 3 วินาทีเราก็ต้องตั้งค่าเป็น 3000 นั่นเองครับ

ตั้งค่าเสร็จแล้วเราไปลองทดสอบกันดูครับให้เราไปที่หน้าเว็บไซต์ของเราครับจากนั้นให้เรากดรีเฟรชหนึ่งที แล้วนับ 1.. 2.. 3.. ดูว่าป๊อบอัพขึ้นไหมถ้าขึ้นก็แปลว่าเราทำเรียบร้อยสำเร็จแล้วครับ

กำหนดให้ POP UP เด้งเฉพาะ หน้า ทำอย่างไร

ขณะที่เรากำลังแก้ไข pop up ของเรา ให้เราไปที่ Targeting ครับ ตรงนี้จะเลือกได้ว่า เราจะให้แสดง POP UP หน้าไหนครับ ตัวอย่าง ถ้าเราเลือกเฉพาะ Home Page เอาไว้ POP UP ของเราก็จะขึ้นมาเฉพาะ หน้า Home Page ครับ แต่ถ้าเราไม่เลือก มันจะขึ้นมาทุกหน้าเลยครับ

หรือ ถ้าเราต้องการ เลือกเป็นหน้าใดหน้าหนึ่ง เราสามารถที่จะ เลือกเป็น Page Selected ได้ แล้วก็เลือก หน้าที่เราต้องการได้เลย

AND ปะทะ OR มันคืออะไร ถ้าเราเลือก AND แปลว่า Target หรือ เป้าหมายทั้งหมด จะต้องเป็นจริงครับ แต่ถ้าเราเลือก OR แปลว่า Target หรือ เป้าหมาย หนึ่งของเราจะต้องเป็นจริง ถ้าเราต้องการให้ Target หลายๆหน้า หรือ มี POP UP หลายๆ หน้า เราจะใช้วิธีเลือก OR ครับ

การปรับแต่งธีมของ POP UP

ให้เราไปที่ All Pop Up แล้วก็ไปเลือก Add New Theme ได้เลยครับ จากนั้นให้เราตั้งชื่อธีมของเราก่อนครับ โดยชื่อนี้ จะไปอยู่ในส่วนของการเลือกธีม เวลาที่เราสร้าง POP UP ครับ ส่วนการปรับแต่ง จะแบ่งเป็นส่วนๆ ต่อไปนี้ครับ

Overlay

ส่วนของพื้นหลังเราสามารถ ที่จะเลือกได้ว่า พื้นหลังของเรา จะให้เป็นสีอะไร โปร่งแสงขนาดไหนครับ แต่ถ้าเราต้องการใช้รูปภาพแทน อันนี้ต้องใช้ Premium Version ครับ

Container

ส่วนของกล่อง POP UP ที่ใส่เนื้อหาของเรา สามารถกำหนดได้ตั้งแต่ ระยะขอบ ระยะห่าง เช่น Padding หรือ Margin หรือเราจะปรับพื้นหลัง กรอบพื้นหลัง และ เงาของพื้นหลังก็สามารถที่จะปรับได้ตรงนี้ครับ

Title

เราสามารถที่จะเลือก ขนาดตัวอักษร หรือ เงาของตัวอักษรได้เลยครับว่า จะเอาแบบไหน

Content

ในส่วนของเนื้อหา เราก็สามารถที่จะเลือกได้ว่า จะใช้ตัวหนังสือ แบบใด Style ไหนครับ

Close

ในส่วนของ ปุ่ม ปิด POP UP เราสามารถที่จะเลือกได้ครับ ว่า จะให้ขนาด หรือว่า Background เป็นลักษณะอย่างไร มีเส้นขอบ ไหม มีเงา หรือ ไม่ เป็นต้นครับ

สรุป

ในการสร้าง POP UP ตอนที่ 2 นี้ เราสามารถที่จะ สร้าง POP UP แบบ Auto ได้ไม่ยากเลยครับ นอกจากนั้น เรายังสามารถ เพิ่มเติมว่า เราจะให้ POP UP ของเรา ขึ้นมาแสดงในหน้าไหน ได้ไม่ยากอีกด้วยครับ 🙂

ช่วยกัน ทำแบบสอบถาม เนื้อหาแบบไหน ตรงใจคุณ ได้ที่นี่ครับ
https://palamike.com/web-questionare

ขอบคุณครับ


ช่วยแชร์ให้เพื่อน... สนับสนุนผู้เขียนครับ :)
ประชาสัมพันธ์
คอร์สเรียนออนไลน์
ทำ Blog ง่ายๆ ใครก็ทำได้

Blog คือ เครื่องมือที่ใช้สร้างโอกาส 

และ สร้างตัวตนได้ ทุกยุคทุกสมัย 

ราคาปกติ 3,990 บาท
Early Bird 1,990 บาท
(สำหรับ 50 ท่านแรก)

พลากร สอนสร้างเว็บ

รับเทคนิค ความรู้ ข่าวสาร การทำเว็บไซต์

จาก พลากร สอนสร้างเว็บ

เฉพาะ สมาชิกเท่านั้น

2 thoughts on “สอนทำ POP UP ให้เด้งดึ๋ง ในเว็บไซต์ ตอนที่ 2 (Auto POP UP)

    • พลากร สอนสร้างเว็บ says:

      ถ้าแบบบังคับให้ดูเลย อันนี้ยังไม่มีตัวไหนทำได้ครับ นอกจากเขียนเองครับผม

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *