วิธีเพิ่มป๊อปอัปไปยังเว็บไซต์ WordPress อย่างอิสระและรวดเร็ว

เผยแพร่แล้ว: 2021-05-06

เมื่อเยี่ยมชมเว็บไซต์ คุณเคยเห็นรูปภาพหรือข้อความปรากฏขึ้นบนหน้าจอโดยกะทันหันหรือไม่? นั่นคือป๊อปอัปหรือหน้าต่างแจ้งเตือนของเว็บไซต์

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

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

เหตุใดคุณจึงควรใช้ป๊อปอัปบนเว็บไซต์ธุรกิจ

ภาพด้านล่างเป็นตัวอย่างสำหรับป๊อปอัปของเว็บไซต์ธุรกิจ มันดูดีมากใช่มั้ย?

ติดตั้งและเปิดใช้งานปลั๊กอินในแดชบอร์ด

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

  • ส่งเสริมข้อมูลสำคัญ แคมเปญการขายและการตลาด…
  • คำกระตุ้นการตัดสินใจ เพิ่มอัตราการแปลง
  • สร้างลูกค้าเป้าหมาย

เพิ่มป๊อปอัปไปยัง WordPress ด้วยปลั๊กอินตัวสร้างป๊อปอัป

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

เป็นปลั๊กอินฟรีและมีอยู่ใน wordpress.org ดังนั้นคุณเพียงแค่ต้องติดตั้งและเปิดใช้งานปลั๊กอินในแดชบอร์ด

ติดตั้งและเปิดใช้งานปลั๊กอินในแดชบอร์ด

เมื่อเสร็จสิ้น ให้ทำตามขั้นตอนเหล่านี้ด้านล่าง

ขั้นตอนที่ 1: เลือกประเภทของป๊อปอัป

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

คลิกเพิ่มข่าวในเมนูย่อยตัวสร้างป๊อปอัปและเลือกรูปแบบป๊อปอัป 1 จาก 4 แบบ

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

ป๊อปอัปมี 4 ประเภท

หลังจากเลือกประเภทที่ต้องการแล้ว ให้ไปยังขั้นตอนถัดไป

ขั้นตอนที่ 2: เพิ่มเนื้อหาลงในป๊อปอัป

ขั้นแรก ตั้งชื่อป๊อปอัปเพื่อจัดการได้ง่ายขึ้น

ตั้งชื่อป๊อปอัป

ป๊อปอัปประเภทต่างๆ ต้องการเนื้อหาที่แตกต่างกัน มาเจาะลึกแต่ละประเภทกัน

เพิ่มเนื้อหาไปยังป๊อปอัป Facebook

บนอินเทอร์เฟซเพื่อสร้างป๊อปอัปของ Facebook คุณต้องกรอกข้อมูลเหล่านี้:

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

กรอกข้อมูลของป๊อปอัป

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

ผลลัพธ์ของป๊อปอัป Facebook

เพิ่มเนื้อหาลงในป๊อปอัปรูปภาพ

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

คุณต้องอัปโหลดรูปภาพหรือแทรกลิงก์ของรูปภาพ

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

ตัวอย่างป๊อปอัปรูปภาพ Black Friday

เพิ่มเนื้อหาลงในป๊อปอัป HTML

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

การเพิ่มเนื้อหาลงในป๊อปอัป HTML นั้นง่ายมากเหมือนกับการเขียนโพสต์

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

นี่คือป๊อปอัป HTML ที่ส่วนหน้า

เพิ่มเนื้อหาในป๊อปอัปการสมัคร

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

คุณสามารถกรอกข้อมูลมากมายในป๊อปอัปสมัครสมาชิก

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

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

เลือกข้อความหรือข้อมูลที่เหมาะสมที่คุณต้องการแสดงต่อผู้ใช้ของคุณหลังจากที่พวกเขาสมัครรับข้อมูล

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

ตัวอย่างป๊อปอัปการสมัครสมาชิกเนื้อหาของฉัน

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

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

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

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

หลังจากเพิ่มเนื้อหาลงไปแล้ว ให้เลื่อนลง คุณจะเห็นตัวเลือกการตั้งค่าอื่นๆ อีกมากมาย มาขุดในแต่ละตัวเลือกกันในขั้นตอนที่ 4,5,6

ขั้นตอนที่ 3: ตั้งค่าตำแหน่งที่แสดงและเงื่อนไขของป๊อปอัป

ตั้งค่าตำแหน่งที่แสดง

ในส่วน กฎการแสดงป๊อปอัป เราจำเป็นต้องปรับตำแหน่งที่ป๊อปอัปจะ/จะไม่แสดงขึ้น

คุณสามารถเลือก ทุกที่ เพื่อแสดงบนทุกหน้า โพสต์ แท็ก หรือปรับแต่ง หรือแสดงในที่ที่คุณต้องการ คุณยังสามารถคลิกคำแนะนำเครื่องมือ (?) เพื่อดูรายละเอียดเพิ่มเติม

ตัวอย่างเช่น ฉันเลือกตำแหน่งเป็นหน้าที่ต้องการ เลือก "คือ" เพื่อแสดง และเลือกหน้าที่แสดงเป็น "หน้าแรก" นอกจากนี้ คุณสามารถเพิ่มสถานที่อื่นๆ โดยเลือก เพิ่ม

ในส่วนกฎการแสดงป๊อปอัป เราจำเป็นต้องปรับตำแหน่งที่ป๊อปอัปจะแสดง / จะไม่ปรากฏ

ตั้งค่าเงื่อนไขการแสดงผล

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

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

ป๊อปอัปจะปรากฏขึ้นโดยอัตโนมัติหลังจากผ่านไปไม่กี่วินาทีหลังจากที่เว็บไซต์โหลดเสร็จ

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

กำหนดโดยคลาส CC: อนุญาตให้ผู้ใช้คลิกส่วนประกอบบางอย่างเพื่อเปิดใช้งานป๊อปอัป

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

แต่ถ้าคุณเลือก ค่าเริ่มต้น ใน ส่วนตัวเลือก ปลั๊กอินจะสร้างคลาสเริ่มต้นสำหรับป๊อปอัปในส่วน คลาสเริ่มต้น ดังต่อไปนี้

หากคุณเลือกค่าเริ่มต้นในส่วนตัวเลือก ปลั๊กอินจะสร้างคลาสเริ่มต้นสำหรับป๊อปอัปในส่วนคลาสเริ่มต้น

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

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

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

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

ฉันเพิ่มปุ่มและคลาสของป๊อปอัปที่ต้องการในส่วนคลาส CSS เพิ่มเติม

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

นี่คือผลลัพธ์ของป๊อปอัป

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

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

ขั้นตอนที่ 4: ปรับแต่งการแสดงผลของป๊อปอัป

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

ในส่วนการออกแบบ คุณสามารถปรับแต่งส่วนประกอบบางอย่างได้ตามต้องการ

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

ในส่วนขนาด คุณสามารถกำหนดความกว้างและความยาวของป๊อปอัปได้

ขั้นตอนที่ 5: ปรับแต่งการตั้งค่าขั้นสูงอื่นๆ

การตั้งค่าขั้นสูงเหล่านี้ช่วยให้คุณกำหนดค่าการแสดงและโต้ตอบกับป๊อปอัป … ได้อย่างละเอียดยิ่งขึ้น

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

คุณสามารถเลือกวิธีปิดหน้าต่างป๊อปอัปได้ในส่วนปิดการตั้งค่า

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

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

มีคุณสมบัติพิเศษบางอย่างของตัวสร้างป๊อปอัป

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

บนแถบด้านข้าง คุณสามารถเพิ่มปุ่มคงที่บนเว็บไซต์เพื่อแสดงป๊อปอัปเมื่อคลิก

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

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

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

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

สุดท้าย คลิก เผยแพร่ เพื่อดำเนินการให้เสร็จสิ้น

ดังนั้นคุณจึงทำป๊อปอัปของคุณเสร็จสิ้นหลังจาก 6 ขั้นตอนจากการตั้งค่าพื้นฐานถึงขั้นสูง คุณทำได้ดีมาก!

คำสุดท้าย

อย่างที่คุณเห็น การเพิ่มป๊อปอัปใน WordPress นั้นไม่ซับซ้อนจริงๆ คุณเพียงแค่ต้องอดทนรอเล็กน้อยในการปรับแต่งจอแสดงผล นั่นคืองานหนักทั้งหมด!

นอกจากนี้ ยังมีอีกหลายสิ่งที่จะเพิ่มอัตราการแปลงของเว็บไซต์ หากคุณต้องการสร้างหน้า Landing Page ที่มีประสิทธิภาพ คุณควรอ่านบทความเพิ่มเติมเกี่ยวกับวิธีการสร้างหน้า Landing Page ที่มี Conversion สูง หรือวิธีสร้างหน้าผลิตภัณฑ์

ขอให้โชคดี!