ป๊อปอัปแรกถูกสร้างขึ้นจากสถานการณ์ที่จินตนาการโดย Ethan Zukerman สำหรับที่พัก ของหน้าเว็บของเขาบนขาตั้งกล้องในต้นทศวรรษ 90 ผู้ใช้ของเขาบ่นเกี่ยวกับจำนวนโฆษณาที่เขาวางบนเว็บไซต์ ดังนั้น เขาจึงตัดสินใจวางแบนเนอร์บนหน้าแยกต่างหากที่เปิดขึ้นเมื่อผู้ใช้เข้าถึงหน้านั้น

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

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

ปัญหาที่ใหญ่ที่สุดของปลั๊กอินส่วนใหญ่ที่นักพัฒนามือใหม่ใช้ สร้างป๊อปอัป คือขาดการควบคุมข้อความผลลัพธ์ อย่างไรก็ตาม คุณสามารถหลีกเลี่ยงปัญหาเหล่านี้ได้หากคุณใช้ Elementor สร้างเว็บไซต์.

ปลั๊กอินที่ยอดเยี่ยมสองตัวที่สร้างขึ้นโดยเฉพาะสำหรับ Elementor สร้างหน้าช่วยคุณสร้างป๊อปอัปในประเภท รูปร่าง และสไตล์ที่คุณต้องการ – ตัวสร้างป๊อปอัพของ Elementor et JetPopup. เนื่องจากทั้งคู่ทำจากเนื้อเดียวกันกับ Elementor คำถามเดียวที่ต้องถามคือปลั๊กอินใดที่จะเลือก เพื่อช่วยคุณในการตัดสินใจฉันจะทำการตรวจสอบทั้งสองอย่างอย่างละเอียดและคุณสามารถเปรียบเทียบข้อดีข้อเสียของพวกเขาได้ งั้นไปกัน !

ดาวน์โหลดและติดตั้ง

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

ตัวสร้างป๊อปอัพ

Elementor

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

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

  • ซื้อ Pro Elementor สร้างหน้า.
  • ไปที่บัญชีส่วนตัวของคุณและดาวน์โหลดปลั๊กอิน
  • ไปที่หน้าแดชบอร์ดเว็บไซต์ของคุณปลั๊กอิน> เพิ่มใหม่คลิกปุ่ม "อัปโหลดปลั๊กอิน" และเลือกไฟล์. zip ที่เหมาะสม
  • เมื่อการติดตั้งเสร็จสมบูรณ์ให้เปิดใช้งานปลั๊กอินด้วยรหัสใบอนุญาตของคุณ
  • นี่คือตัวสร้างป๊อปอัปที่อยู่ในแท็บเทมเพลต> ป๊อปอัป

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

ตัวสร้างป๊อปอัพ

JetPopup

"ตระกูล" ของปลั๊กอิน Jet มีบทความมากกว่า 10 อยู่แล้วและ JetPopup เป็นหนึ่งในนั้น มันถูกสร้างขึ้นอย่างพิถีพิถันโดยเฉพาะสำหรับ Elementor และเพิ่มจำนวนของเครื่องมือที่มี ปลั๊กอินนี้คือJetPopupsเข้ากันได้อย่างสมบูรณ์กับรุ่นฟรีและจ่ายเงิน คุณจึงไม่จำเป็นต้องทำการซื้อเพิ่มเติมใด ๆ JetPopup มีราคา 15 เหรียญและเมื่อคุณได้รับแล้วคุณสามารถใช้งานได้กับเว็บไซต์เดียว หากคุณต้องการมากกว่าหนึ่งโครงการคุณสามารถซื้อปลั๊กอินภายใต้ใบอนุญาตของผู้พัฒนา (มีค่าใช้จ่าย 45 เหรียญ) และใช้กับเว็บไซต์ห้าแห่ง อัลกอริทึมในการรับปลั๊กอินนั้นง่ายกว่าเล็กน้อย:

  • ซื้อปลั๊กอินใน TemplateMonster Marketplace มันจะถูกดาวน์โหลดมายังคอมพิวเตอร์ของคุณ
  • ไปที่หน้าแดชบอร์ดเว็บไซต์ของคุณปลั๊กอิน> เพิ่มใหม่คลิกปุ่ม "อัปโหลดปลั๊กอิน" และเลือกไฟล์. zip ที่เหมาะสม
  • เมื่อการติดตั้งเสร็จสมบูรณ์ให้เปิดใช้งานปลั๊กอิน
  • Voila! เมื่อคุณเปิดเมนูการปรับแต่งองค์ประกอบ (โดยการคลิกที่ปุ่ม "แก้ไขด้วยองค์ประกอบ") คุณจะพบส่วน JetPopup ในเมนูด้านซ้ายของวิดเจ็ต

JetPopup

การสร้างป๊อปอัพ

ตอนนี้เมื่อเครื่องมือพร้อมใช้งานแล้วฉันสามารถลองสร้างป๊อปอัปด้วยปลั๊กอินทั้งสองและดูว่าคุณลักษณะนั้นง่ายและเข้าใจได้อย่างไร ต่อไปฉันจะสร้างป๊อปอัปพื้นฐานและดูที่ตัวเลือกการปรับแต่งสำหรับ Popup Builder และ JetPopup

ตัวสร้างป๊อปอัพ

ในป๊อปอัป Pro Elementor จะแยกจากหน้าไซต์ หากต้องการเปลี่ยนรูปลักษณ์ของเว็บไซต์ให้เปิดหน้าที่คุณต้องการปรับแต่งคลิกปุ่ม "แก้ไขด้วย Elementor" และทำการเปลี่ยนแปลง แต่ในการสร้าง (แล้วแก้ไข) ป๊อปอัปคุณต้องไปที่เทมเพลต> ป๊อปอัปและกดปุ่ม "เพิ่มป๊อปอัปใหม่"

ตัวสร้างป๊อปอัพ
ลองตัวสร้างป๊อปอัพทันที

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

การสร้างป๊อปอัพ

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

ห้องสมุดป๊อปอัป

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

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

การตั้งค่าป๊อปอัพ

อย่างที่คุณเห็นไม่มีอะไรคาดไม่ถึงหากคุณเคยใช้ Elementor มาก่อนคุณจะไม่พบปัญหาใด ๆ กับปลั๊กอินนี้ นี่คือวิดีโอโดยละเอียดที่อธิบายวิธีสร้างหน้าต่างป๊อปอัปโดยใช้ Popup Builder:

JetPopup

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

เพิ่มป๊อปอัพใหม่

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

องค์ประกอบป๊อปอัพ

ปลั๊กอิน JetPopup จะเพิ่มรายการเดียวในเมนูวิดเจ็ต - ปุ่มการดำเนินการตามบริบท สิ่งนี้ช่วยให้สามารถกำหนดประเภทของการกระทำที่จะเกิดขึ้นเมื่อผู้ใช้กดปุ่ม

ปุ่มการกระทำป๊อปอัพ

แก้ไขปุ่มการกระทำป๊อปอัพ

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

การตั้งค่าทั่วไปของป๊อปอัพ

JetPopup มีฟังก์ชั่นที่เห็นได้ชัดน้อยกว่าเล็กน้อย แต่ชดเชยด้วยวิดีโอสอนที่มีประโยชน์

ทริกเกอร์

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

ตัวสร้างป๊อปอัพ

การแก้ไขตัวสร้างป๊อปอัพ

เผยแพร่ป๊อปอัพ

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

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

JetPopup

การตั้งค่าป๊อปอัพ

หน้าแรกของป๊อปอัพ

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

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

การวางตำแหน่ง

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

การวางตำแหน่ง

ตัวสร้างป๊อปอัพ et JetPopup แบ่งหน้าจอออกเป็นเก้าส่วนและอนุญาตให้คุณวางป๊อปอัปในส่วนใดก็ได้ ตำแหน่งถูกกำหนดตามสเกลซ้าย - ขวาและขึ้น - ลง มันไม่ยืดหยุ่นมากนัก แต่ก็เพียงพอสำหรับป๊อปอัป

เอฟเฟกต์ภาพเคลื่อนไหว

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

เอฟเฟ็กต์ภาพเคลื่อนไหว

ตัวสร้างป๊อปอัพ มีแอนิเมชั่นอินพุต 36 ประเภทรวมถึงการเลื่อนการกางออกการซูมการตีกลับและการหมุนในทิศทางต่างๆ ทั้งหมดนี้พร้อมกับระยะเวลาของภาพเคลื่อนไหวสามารถพบได้ในส่วน "เค้าโครง" ของแท็บการตั้งค่า

การตั้งค่า jet popup

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

รุ่น

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

ไลบรารีโมเดล Elementor

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

jet popups ตั้งค่าไลบรารี

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

ตารางเปรียบเทียบ

ตัวสร้างป๊อปอัพของ Elementor JetPopup
กรังปรีซ์ $ 45 $ 15
รุ่น 100 + 100 +
ทริกเกอร์ ทริกเกอร์ 6 กฎขั้นสูง 7 5 เปิดกิจกรรมพร้อมพารามิเตอร์เพิ่มเติม
แอนิเม ชนิดฮิต ชนิดฮิต
สอน เอกสาร เอกสารประกอบ, บทช่วยสอนวิดีโอ 9

JetPopup vs ตัวสร้างป๊อปอัพ

สรุป

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