วิธีเพิ่มป๊อปอัปไปยังเว็บไซต์ WordPress อย่างอิสระและรวดเร็ว
เผยแพร่แล้ว: 2021-05-06เมื่อเยี่ยมชมเว็บไซต์ คุณเคยเห็นรูปภาพหรือข้อความปรากฏขึ้นบนหน้าจอโดยกะทันหันหรือไม่? นั่นคือป๊อปอัปหรือหน้าต่างแจ้งเตือนของเว็บไซต์
- 1. เหตุใดคุณจึงควรใช้ป๊อปอัปบนเว็บไซต์ธุรกิจ
- 2. เพิ่มป๊อปอัปไปยัง WordPress ด้วยปลั๊กอินตัวสร้างป๊อปอัป
- 2.1. ขั้นตอนที่ 1: เลือกประเภทของป๊อปอัป
- 2.2. ขั้นตอนที่ 2: เพิ่มเนื้อหาลงในป๊อปอัป
- 2.3. ขั้นตอนที่ 3: ตั้งค่าตำแหน่งที่แสดงและเงื่อนไขของป๊อปอัป
- 2.4. ขั้นตอนที่ 4: ปรับแต่งการแสดงผลของป๊อปอัป
- 2.5. ขั้นตอนที่ 5: ปรับแต่งการตั้งค่าขั้นสูงอื่นๆ
- 3. คำพูดสุดท้าย
ป๊อปอัปเป็นกลยุทธ์ทางการตลาดที่ได้รับความนิยมและมีประสิทธิภาพ ซึ่งใช้โดยนักธุรกิจและเจ้าของเว็บไซต์จำนวนมาก หากต้องการเพิ่มป๊อปอัปดังกล่าวใน WordPress คุณสามารถใช้ปลั๊กอินฟรีเพื่อทำให้ง่ายและรวดเร็ว แม้ว่าคุณจะไม่ใช่ผู้เชี่ยวชาญ แต่ก็ใช้เวลาเพียง 10 นาทีในการปฏิบัติตามคำแนะนำของเรา
เหตุใดคุณจึงควรใช้ป๊อปอัปบนเว็บไซต์ธุรกิจ
ภาพด้านล่างเป็นตัวอย่างสำหรับป๊อปอัปของเว็บไซต์ธุรกิจ มันดูดีมากใช่มั้ย?

ป๊อปอัปไม่เพียงแต่สวยงามเท่านั้น (หากคุณสามารถออกแบบป๊อปอัปที่เข้าคู่กันและน่าดึงดูดใจได้) แต่ยังมีประโยชน์อื่นๆ อีกมากมาย เช่น:
- ส่งเสริมข้อมูลสำคัญ แคมเปญการขายและการตลาด…
- คำกระตุ้นการตัดสินใจ เพิ่มอัตราการแปลง
- สร้างลูกค้าเป้าหมาย
เพิ่มป๊อปอัปไปยัง WordPress ด้วยปลั๊กอินตัวสร้างป๊อปอัป
หากต้องการเพิ่มป๊อปอัปลงในเว็บไซต์ WordPress ของคุณ คุณสามารถจ้างบริษัทออกแบบเว็บไซต์หรือนักเขียนโค้ดที่น่าเชื่อถือได้ อย่างไรก็ตาม เพื่อประหยัดเวลาและค่าใช้จ่าย ปลั๊กอินเป็นตัวเลือกที่ดีที่สุด ในบรรดาปลั๊กอินป๊อปอัปที่มีอยู่มากมาย Popup Builder อาจใช้งานง่ายและมีประสิทธิภาพมากที่สุด
เป็นปลั๊กอินฟรีและมีอยู่ใน wordpress.org ดังนั้นคุณเพียงแค่ต้องติดตั้งและเปิดใช้งานปลั๊กอินในแดชบอร์ด

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

เพื่อภาพประกอบที่ดียิ่งขึ้น รูปภาพด้านล่างคือการแสดงป๊อปอัป 4 ประเภทที่ปลั๊กอินนี้ให้มาที่ส่วนหน้า

หลังจากเลือกประเภทที่ต้องการแล้ว ให้ไปยังขั้นตอนถัดไป
ขั้นตอนที่ 2: เพิ่มเนื้อหาลงในป๊อปอัป
ขั้นแรก ตั้งชื่อป๊อปอัปเพื่อจัดการได้ง่ายขึ้น

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

และนี่คือสิ่งที่ฉันมี:

เพิ่มเนื้อหาลงในป๊อปอัปรูปภาพ
ที่นี่คุณเพียงแค่ต้องอัปโหลดรูปภาพหรือแทรกลิงก์ของรูปภาพ ปลั๊กอินนี้รองรับ JPG, PNG และ GIF

นี่เป็นแบนเนอร์ที่สวยงามที่ฉันทำด้วยตัวเองสำหรับแคมเปญ Black Friday บนเว็บไซต์ของฉัน:

เพิ่มเนื้อหาลงในป๊อปอัป HTML
การเพิ่มเนื้อหาลงในป๊อปอัป HTML ก็เหมือนกับการเขียนโพสต์ในโปรแกรมแก้ไข WordPress Gutenberg คุณสามารถแทรกรูปภาพ วิดีโอ ตาราง ปุ่ม คำพูด … หรือเนื้อหาอื่นใดที่โปรแกรมแก้ไข WordPress รองรับ อินเทอร์เฟซคล้ายกับโปรแกรมแก้ไข Gutenberg ดังนั้นจึงค่อนข้างเป็นมิตรและเป็นภาษาพื้นเมือง

และนี่คือป๊อปอัป HTML ของฉันที่ส่วนหน้า:

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

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

ตัวอย่างเช่น นี่คือป๊อปอัปอีเมลสมัครรับข้อมูลของฉัน เมื่อพวกเขาส่งแล้ว ฉันจะแสดงการแจ้งเตือนเกี่ยวกับแคมเปญลดราคา Black Friday กระตุ้นให้ลูกค้าไปช็อปปิ้ง


ไปที่ตัว สร้างป๊อปอัป > สมาชิกทั้งหมด เพื่อจัดการสมาชิก

คุณยังสามารถส่งอีเมลถึงสมาชิกได้ในแท็บ จดหมายข่าว

หลังจากเพิ่มเนื้อหาลงไปแล้ว ให้เลื่อนลง คุณจะเห็นตัวเลือกการตั้งค่าอื่นๆ อีกมากมาย มาขุดในแต่ละตัวเลือกกันในขั้นตอนที่ 4,5,6
ขั้นตอนที่ 3: ตั้งค่าตำแหน่งที่แสดงและเงื่อนไขของป๊อปอัป
ตั้งค่าตำแหน่งที่แสดง
ในส่วน กฎการแสดงป๊อปอัป เราจำเป็นต้องปรับตำแหน่งที่ป๊อปอัปจะ/จะไม่แสดงขึ้น
คุณสามารถเลือก ทุกที่ เพื่อแสดงบนทุกหน้า โพสต์ แท็ก หรือปรับแต่ง หรือแสดงในที่ที่คุณต้องการ คุณยังสามารถคลิกคำแนะนำเครื่องมือ (?) เพื่อดูรายละเอียดเพิ่มเติม
ตัวอย่างเช่น ฉันเลือกตำแหน่งเป็นหน้าที่ต้องการ เลือก "คือ" เพื่อแสดง และเลือกหน้าที่แสดงเป็น "หน้าแรก" นอกจากนี้ คุณสามารถเพิ่มสถานที่อื่นๆ โดยเลือก เพิ่ม

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

- กำหนดโดยคลาส CC : อนุญาตให้ผู้ใช้คลิกส่วนประกอบบางอย่างเพื่อเปิดใช้งานป๊อปอัป องค์ประกอบนี้จะขึ้นอยู่กับรหัสของมัน ส่วนนี้ค่อนข้างซับซ้อน ดังนั้นคุณควรอ่านเอกสารอย่างละเอียด

- เมื่อคลิก : คล้ายกับส่วน Set by CSS class แต่คุณไม่จำเป็นต้องใช้ ID ของป๊อปอัปเพื่อติดตั้ง "ปุ่ม" เพื่อเปิดใช้งาน
แต่ถ้าคุณเลือก ค่าเริ่มต้น ใน ส่วนตัวเลือก ปลั๊กอินจะสร้างคลาสเริ่มต้นสำหรับป๊อปอัปในส่วน คลาสเริ่มต้น ดังต่อไปนี้

หากคุณเลือก Custom CSS ให้กรอกคลาสที่คุณสร้างขึ้นเองในส่วน Custom Class

หลังจากนั้น เพิ่มคลาสของป๊อปอัปลงใน CSS ของส่วนประกอบที่คุณต้องการ
ตัวอย่างเช่น ในโพสต์นี้ ฉันเพิ่มปุ่มและคลาสที่ฉันต้องการในส่วน คลาส CSS เพิ่มเติม

นี่คือผลลัพธ์ในส่วนหน้า:

- Hover Click : เมื่อวางเมาส์บนส่วนประกอบ ป๊อปอัปจะปรากฏขึ้น คุณสามารถทำเช่นเดียวกันกับในส่วน เมื่อคลิก

ขั้นตอนที่ 4: ปรับแต่งการแสดงผลของป๊อปอัป
หลังจากขั้นตอนที่ 3 คุณมีป๊อปอัปพื้นฐาน แต่ถ้าคุณต้องการให้สวยงามยิ่งขึ้น ให้เลื่อนลงไปที่ส่วน การออกแบบ ที่นี่ คุณสามารถปรับแต่งองค์ประกอบบางอย่าง เช่น อินเทอร์เฟซ โอเวอร์เลย์ พื้นหลัง เพื่อให้สมบูรณ์แบบเป็นรายการโปรดของคุณ

ยิ่งไปกว่านั้น ในส่วน ขนาด ให้ปรับความกว้างและความยาวโดยเลือก โหมดกำหนดเอง หรือเลือก โหมดที่ปรับเปลี่ยนตามอุปกรณ์ เพื่อให้ขนาดตรงกับเนื้อหาโดยอัตโนมัติ

ขั้นตอนที่ 5: ปรับแต่งการตั้งค่าขั้นสูงอื่นๆ
การตั้งค่าขั้นสูงเหล่านี้ช่วยให้คุณกำหนดค่าการแสดงและโต้ตอบกับป๊อปอัป … ได้อย่างละเอียดยิ่งขึ้น
ตัวอย่างเช่น คุณสามารถเลือกวิธีปิดหน้าต่างป๊อปอัปได้ในส่วน ปิดการตั้งค่า มีหลายวิธีในการปิด เช่น กด Esc หรือเพิ่มปุ่มปิด ... เลือกอย่างน้อยหนึ่งรายการขึ้นอยู่กับคุณ

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

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

นี่คือปุ่มลอยบนเว็บไซต์:

หรือคุณสามารถปิดการใช้งานได้โดยคลิก ปิดการใช้งาน

สุดท้าย คลิก เผยแพร่ เพื่อดำเนินการให้เสร็จสิ้น
ดังนั้นคุณจึงทำป๊อปอัปของคุณเสร็จสิ้นหลังจาก 6 ขั้นตอนจากการตั้งค่าพื้นฐานถึงขั้นสูง คุณทำได้ดีมาก!
คำสุดท้าย
อย่างที่คุณเห็น การเพิ่มป๊อปอัปใน WordPress นั้นไม่ซับซ้อนจริงๆ คุณเพียงแค่ต้องอดทนรอเล็กน้อยในการปรับแต่งจอแสดงผล นั่นคืองานหนักทั้งหมด!
นอกจากนี้ ยังมีอีกหลายสิ่งที่จะเพิ่มอัตราการแปลงของเว็บไซต์ หากคุณต้องการสร้างหน้า Landing Page ที่มีประสิทธิภาพ คุณควรอ่านบทความเพิ่มเติมเกี่ยวกับวิธีการสร้างหน้า Landing Page ที่มี Conversion สูง หรือวิธีสร้างหน้าผลิตภัณฑ์
ขอให้โชคดี!
