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

สอนทำ POP UP ให้เด้งดึ๋ง ใน Wordpress ตอนที่ 1
https://www.youtube.com/embed/lwOo1ns8KOI?feature=oembed&autoplay=1

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

===

ทำแบบสอบถาม เพื่อเนื้อหาที่ตรงใจคุณ เรื่อง คุณสนใจเรื่องใดในการทำเว็บไซต์ ได้ที่นี่ครับ

https://palamike.com/web-questionare

===

ขั้นตอนแรกของการสร้าง Pop Up ใน wordpress

เราต้องเตรียมเนื้อหา ที่เราจะใส่ใน Pop Up อย่างเช่น รูปภาพ หรือว่าข้อความ หรือแบบฟอร์มที่เราต้องการ จะทำ Pop Up ใน wordpress เอาไว้ก่อน เพราะถ้าไม่มีเนื้อหา เราก็ไม่รู้จะเอาอะไรไปใส่ Pop Up ที่เราสร้างไว้ใน wordpress

ขั้นตอนที่ 2 ของการสร้าง popup ใน wordpress

เราต้องติดตั้งปลั๊กอินที่จำเป็น ในการสร้าง popup ใน wordpress ในตัวอย่างนี้ ผมจะใช้ปลั๊กอินที่ชื่อว่า popup Maker แต่จริงๆแล้ว plugin ที่ใช้สำหรับการสร้าง pop up ใน wordpress มีอีกมากมายหลายตัวอย่างเช่น OptIn Monster plugin ตัวนี้ เป็นปลั๊กอินยอดฮิต สำหรับการเก็บ Lead หรือเก็บรายชื่อ ของผู้ที่เข้ามาเยี่ยมชมเว็บไซต์ ของเรา ได้เป็นอย่างดี มีคนใช้ค่อนข้างเยอะเลยทีเดียว ส่วน popup maker ที่เราใช้ จะเป็น plugin สำหรับทำ Pop Up อเนกประสงค์ เช่น ป้ายโฆษณาที่เป็นรูปภาพ ลืมป้ายโฆษณาที่เป็นข้อความ ก็สามารถทำได้ไม่ยาก โดยใช้ plugin popup Maker

ให้เราไปที่ ระบบหลังบ้านของ wordpress ครับ แล้วจากนั้นไปที่ plugin แล้วก็ Add New จากนั้นค้นหาคำว่า popup maker ได้เลยครับ แล้วก็จะเจอ plugin ตัวนี้อยู่ครับ ให้เรากด install และกด Activate เพื่อเปิดใช้งานปลั๊กอินได้เลยครับ เมื่อเปิดใช้งานปลั๊กอินแล้ว เรามาดูกันต่อครับ

ขั้นตอนที่ 3 เริ่มสร้าง POP UP

ให้เราไปที่เมนู Popup Maker แล้วไปที่ All Popups เราจะเห็นว่าเราสามารถสร้างป๊อบอัพจากเมนูนี้ได้เลย ให้เราคลิก New Pop Up ขึ้นมาได้เลยครับ จากนั้นเริ่มจากการตั้งชื่อ Pop Up ก่อนส่วน Pop Up Title เราจะใส่หรือไม่ใส่ก็ได้ครับซึ่งป๊อปอัพ Title นี้มันจะไปปรากฏอยู่ในป๊อบอัพเวลาที่เราโชว์ขึ้นมาครับ

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

ในส่วนต่อไปครับเราต้องมากำหนดว่า Pop Up ของเราจะมี Trigger อะไรเพื่อที่จะไปเปิด Pop Up นั้นครับในตัวอย่างนี้ผมจะใช้ปุ่มในการเปิด Pop Up ครับให้เราเลือก Trigger ไทยนะครับเป็น Click Open แล้วหลังจากนั้นก็กด Add ไป 1 ทีครับ

ตรง extra css selector ให้เราใส่จุดแล้วตามด้วยชื่อที่เราต้องการเช่น example-popup จากนั้นให้เรา Copy ตั้งแต่หลังจุดลงไปในตัวอย่างผมจะ Copy คำว่า example-popup เอาไว้ครับ

เมื่อเราเลือก Trigger เสร็จเรียบร้อยแล้วให้เราไปที่แท็บ Display ครับเราจะเห็นว่ามันสามารถที่จะเลือก Pop Up Theme ได้ให้เราเลือกสิ่งที่เราต้องการ Theme นี้จะโชว์ขึ้นมาบน Pop Up ครับถ้าเราเลือกทีมไหนมันก็จะโชว์ popup ตามลักษณะการปรับแต่งของทีมนั้นอย่างเช่นถ้าเราเลือก Enterprise Blue ก็จะเป็นสีฟ้านั่นเองครับ

เมื่อเราสร้าง popup เสร็จเรียบร้อยแล้วก็อย่าลืมอัพเดทให้เรียบร้อยนะครับ

ขั้นตอนที่ 4 การติดตั้ง Pop Up ในหน้าที่ต้องการ

ให้เราไปที่หน้าที่เราต้องการครับโดยไปที่เมนู pages แล้วไปที่ All Pages ครับ หลังจากนั้นให้คลิกเลือก Edit หน้าที่เราต้องการครับ

ในตัวอย่างนี้ผม Edit หน้า Home ครับ ผมจะใช้ Block Editor ของ wordpress ในการใส่ปุ่มแบบง่ายๆเข้าไปครับให้เราเริ่มจากไปคลิกใต้ ย่อหน้า ที่เราต้องการใส่ปุ่มนะครับ จากนั้นไปที่เครื่องหมายบวกด้านบนครับ แล้วไปที่ Layout Elements จากนั้นเลือก Button ครับ

ให้เราเลือกสีที่เราต้องการครับแล้วจากนั้นให้เราไปที่กล่อง Advanced แล้วเราก็ว่างสิ่งที่เรา Copy เอาไว้นะครับก็คือ Css Class ลงไป แล้วจากนั้นกดอัพเดทครับ

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

ที่นี้เราลองไปเปลี่ยน Theme ของ Pop Up กันบ้างครับแล้วก็กลับไปที่เดิมครับไปที่ popup maker แล้วก็ไปที่ All Pop Ups ครับ จากนั้นเลือกแก้ไข Pop Up ที่เราต้องการแล้วเราก็ไปที่แท็บ Display ของ Pop Up เหมือนเดิมที่นี้ลองเลือกแบบอื่นดูบ้างครับจะลองเลือกแบบ default ดูก็ได้นะครับมันก็จะเป็นอีกทีมนึงก็ดูสวยงามไปอีกแบบครับ

ทำเสร็จแล้วก็อย่าลืมทดลองไปดูหน้าเว็บไซต์ของเรานะครับจะได้เห็นว่า Pop Up มันหน้าตาเป็นอย่างไรครับ

สรุป

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

ข่าวประชาสัมพันธ์

ถ้ากำลังมองหาคอร์สเรียน แบบสอนกันสดๆ ไม่ต้องเสียเวลาเรียนรู้ และ ทดลองเอง พิจารณาคอร์สเรียนสด ตรงนี้ได้เลยครับ

ใส่ความเห็น

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