ป๊อปอัปแรกถูกสร้างขึ้นจากสถานการณ์ที่จินตนาการโดย Ethan Zukerman สำหรับที่พัก ของหน้าเว็บของเขาบนขาตั้งกล้องในต้นทศวรรษ 90 ผู้ใช้ของเขาบ่นเกี่ยวกับจำนวนโฆษณาที่เขาวางบนเว็บไซต์ ดังนั้น เขาจึงตัดสินใจวางแบนเนอร์บนหน้าแยกต่างหากที่เปิดขึ้นเมื่อผู้ใช้เข้าถึงหน้านั้น
โค้ดชิ้นเล็ก ๆ นี้ยังไม่ใช่ป๊อปอัปจริงอย่างที่คุณเห็นในทุกเว็บไซต์ในตอนนี้ แต่นั่นคือจุดเริ่มต้นทั้งหมด ในหน้าเว็บสมัยใหม่ป๊อปอัปถูกใช้เพื่อวัตถุประสงค์ที่แตกต่างกันไม่ใช่เพื่อการโฆษณาเท่านั้น แบบฟอร์มการติดต่อคำเตือนเกี่ยวกับนโยบายความเป็นส่วนตัวและคำแนะนำในการสมัครสมาชิกมักจะแสดงเป็นป๊อปอัป
มีสองสิ่งที่สร้างความรำคาญแก่ผู้ใช้เมื่อพูดถึงป๊อปอัป: เมื่อพวกเขากระโดดเข้าหาคุณเมื่อคุณไม่ต้องการพวกเขา และเมื่อลักษณะที่ปรากฏแตกต่างอย่างสิ้นเชิงจากรูปแบบของเว็บไซต์ ปัญหาสองข้อนี้จะปรากฏขึ้นเมื่อคุณใช้ปลั๊กอินที่ดูเหมือนจะไม่ได้คุณภาพสูงสุด
ปัญหาที่ใหญ่ที่สุดของปลั๊กอินส่วนใหญ่ที่นักพัฒนามือใหม่ใช้ สร้างป๊อปอัป คือขาดการควบคุมข้อความผลลัพธ์ อย่างไรก็ตาม คุณสามารถหลีกเลี่ยงปัญหาเหล่านี้ได้หากคุณใช้ Elementor สร้างเว็บไซต์.
ปลั๊กอินที่ยอดเยี่ยมสองตัวที่สร้างขึ้นโดยเฉพาะสำหรับ Elementor สร้างหน้าช่วยคุณสร้างป๊อปอัปในประเภท รูปร่าง และสไตล์ที่คุณต้องการ – ตัวสร้างป๊อปอัพของ Elementor et JetPopup. เนื่องจากทั้งคู่ทำจากเนื้อเดียวกันกับ Elementor คำถามเดียวที่ต้องถามคือปลั๊กอินใดที่จะเลือก เพื่อช่วยคุณในการตัดสินใจฉันจะทำการตรวจสอบทั้งสองอย่างอย่างละเอียดและคุณสามารถเปรียบเทียบข้อดีข้อเสียของพวกเขาได้ งั้นไปกัน !
ดาวน์โหลดและติดตั้ง
นี่ไม่ใช่เกณฑ์ที่สำคัญที่สุดในการเลือกปลั๊กอินที่จะใช้ แต่ในการทดลองใช้คุณต้องเริ่มใช้งานก่อน นั่นเป็นเหตุผลที่ฉันจะเริ่มตั้งแต่ต้นและร่างขั้นตอนเพื่อให้ได้มา - การกำหนดราคาความพยายามที่เกี่ยวข้องและขั้นตอนการตั้งค่าที่ง่ายดาย
ตัวสร้างป๊อปอัพ
ปลั๊กอินนี้สร้างขึ้นโดยทีม Elementor เราจึงเรียกเขาว่า "ลูก" ที่แท้จริงของเขาได้ นี่เป็นการอัปเดตล่าสุดสำหรับ Elementor ซึ่งเผยแพร่ในเดือนมกราคม 2019 เพื่อตอบสนองความต้องการของลูกค้า อย่างไรก็ตามไม่สามารถใช้ได้สำหรับผู้ใช้ Elementor เวอร์ชันฟรี
ตัวสร้างป๊อปอัปรวมอยู่ในแผนการสมัครสมาชิกแบบมืออาชีพ ดังนั้นเพื่อให้สามารถสร้างป๊อปอัปได้คุณต้องมี Elementor Pro ก่อน แผนการกำหนดราคาที่ง่ายที่สุดที่ให้คุณใช้คุณสมบัติที่หลากหลายของ Elementor สำหรับเว็บไซต์เดียวมีค่าใช้จ่าย $ 49 ต่อปี ดังนั้นจากขั้นตอนแรก (การซื้อ Elementor Pro) นี่คืออัลกอริทึมในการรับตัวสร้างป๊อปอัป:
- ซื้อ Pro Elementor สร้างหน้า.
- ไปที่บัญชีส่วนตัวของคุณและดาวน์โหลดปลั๊กอิน
- ไปที่หน้าแดชบอร์ดเว็บไซต์ของคุณปลั๊กอิน> เพิ่มใหม่คลิกปุ่ม "อัปโหลดปลั๊กอิน" และเลือกไฟล์. zip ที่เหมาะสม
- เมื่อการติดตั้งเสร็จสมบูรณ์ให้เปิดใช้งานปลั๊กอินด้วยรหัสใบอนุญาตของคุณ
- นี่คือตัวสร้างป๊อปอัปที่อยู่ในแท็บเทมเพลต> ป๊อปอัป
เป็นถนนที่ค่อนข้างยาว แต่ด้วยตัวสร้างป๊อปอัปคุณจะได้รับคอลเล็กชันองค์ประกอบต่างๆมากมายจาก Elementor เช่นวิดเจ็ตเทมเพลตและเครื่องมือเพิ่มเติมอื่น ๆ
ตัวสร้างป๊อปอัพ
JetPopup
"ตระกูล" ของปลั๊กอิน Jet มีบทความมากกว่า 10 อยู่แล้วและ JetPopup เป็นหนึ่งในนั้น มันถูกสร้างขึ้นอย่างพิถีพิถันโดยเฉพาะสำหรับ Elementor และเพิ่มจำนวนของเครื่องมือที่มี ปลั๊กอินนี้คือเข้ากันได้อย่างสมบูรณ์กับรุ่นฟรีและจ่ายเงิน คุณจึงไม่จำเป็นต้องทำการซื้อเพิ่มเติมใด ๆ JetPopup มีราคา 15 เหรียญและเมื่อคุณได้รับแล้วคุณสามารถใช้งานได้กับเว็บไซต์เดียว หากคุณต้องการมากกว่าหนึ่งโครงการคุณสามารถซื้อปลั๊กอินภายใต้ใบอนุญาตของผู้พัฒนา (มีค่าใช้จ่าย 45 เหรียญ) และใช้กับเว็บไซต์ห้าแห่ง อัลกอริทึมในการรับปลั๊กอินนั้นง่ายกว่าเล็กน้อย:
- ซื้อปลั๊กอินใน TemplateMonster Marketplace มันจะถูกดาวน์โหลดมายังคอมพิวเตอร์ของคุณ
- ไปที่หน้าแดชบอร์ดเว็บไซต์ของคุณปลั๊กอิน> เพิ่มใหม่คลิกปุ่ม "อัปโหลดปลั๊กอิน" และเลือกไฟล์. zip ที่เหมาะสม
- เมื่อการติดตั้งเสร็จสมบูรณ์ให้เปิดใช้งานปลั๊กอิน
- Voila! เมื่อคุณเปิดเมนูการปรับแต่งองค์ประกอบ (โดยการคลิกที่ปุ่ม "แก้ไขด้วยองค์ประกอบ") คุณจะพบส่วน JetPopup ในเมนูด้านซ้ายของวิดเจ็ต
การสร้างป๊อปอัพ
ตอนนี้เมื่อเครื่องมือพร้อมใช้งานแล้วฉันสามารถลองสร้างป๊อปอัปด้วยปลั๊กอินทั้งสองและดูว่าคุณลักษณะนั้นง่ายและเข้าใจได้อย่างไร ต่อไปฉันจะสร้างป๊อปอัปพื้นฐานและดูที่ตัวเลือกการปรับแต่งสำหรับ Popup Builder และ JetPopup
ตัวสร้างป๊อปอัพ
ในป๊อปอัป Pro Elementor จะแยกจากหน้าไซต์ หากต้องการเปลี่ยนรูปลักษณ์ของเว็บไซต์ให้เปิดหน้าที่คุณต้องการปรับแต่งคลิกปุ่ม "แก้ไขด้วย Elementor" และทำการเปลี่ยนแปลง แต่ในการสร้าง (แล้วแก้ไข) ป๊อปอัปคุณต้องไปที่เทมเพลต> ป๊อปอัปและกดปุ่ม "เพิ่มป๊อปอัปใหม่"
ในหน้าต่างที่เปิดคุณต้องเลือกเทมเพลตที่คุณจะสร้าง (ใช่คุณสามารถสร้างเทมเพลตไม่เพียง แต่สำหรับป๊อปอัป แต่สำหรับหน้าและรายการอื่น ๆ ) และตั้งชื่อ
หลังจากกดปุ่ม "สร้างเทมเพลต" คุณจะถูกนำไปยังเมนูการทำให้เป็นส่วนตัวของ Elementor การกำหนดรายการที่มีอยู่ได้ง่ายขึ้น คุณจะถูกขอให้เลือกรูปแบบที่เหมาะสมก่อน
ฉันเลือกหนึ่งในโมเดลที่แสดงที่ด้านบนของรายการไลบรารี หลังจากเลือกแล้วคุณจะเข้าสู่พื้นที่ทำงาน Elementor ที่คุณอาจคุ้นเคย ตัวเลือกการตั้งค่าส่วนบุคคลจะอยู่ในแถบด้านข้างทางด้านซ้ายของหน้าจอ คุณมีสามแท็บที่นี่
แท็บ "การตั้งค่า" ช่วยให้คุณเปลี่ยนเค้าโครงของป๊อปอัพเปลี่ยนชื่อของรุ่นและตัวอย่าง บนแท็บ "สไตล์" คุณสามารถปรับแต่งการออกแบบ - เปลี่ยนสีแบบอักษรรูปภาพและเส้นขอบ แท็บ "ขั้นสูง" ยังมีชุดตัวเลื่อนเพิ่มเติม ตัวอย่างเช่นป้องกันป๊อปอัปไม่ให้ปิดด้วยปุ่ม ESC
อย่างที่คุณเห็นไม่มีอะไรคาดไม่ถึงหากคุณเคยใช้ Elementor มาก่อนคุณจะไม่พบปัญหาใด ๆ กับปลั๊กอินนี้ นี่คือวิดีโอโดยละเอียดที่อธิบายวิธีสร้างหน้าต่างป๊อปอัปโดยใช้ Popup Builder:
JetPopup
ปลั๊กอินนี้ยังเพิ่มแท็บใหม่ไปยังแดชบอร์ดของคุณ ธีม WordPress และด้วยความช่วยเหลือของมัน ป๊อปอัปก็ถูกสร้างขึ้นแยกจากหน้าเพจเช่นกัน ป๊อปอัปแบบสำเร็จรูปยังจัดเก็บไว้ในแท็บชื่อ "ไลบรารีป๊อปอัป" ในการสร้างป๊อปอัปใหม่ คุณสามารถกดปุ่ม "เพิ่ม" บนเทมเพลตที่สร้างไว้ล่วงหน้าหรือไปที่ JetPopup > เพิ่มป๊อปอัปใหม่ ตั้งชื่อเทมเพลตแล้วกด "แก้ไขด้วย Elementor"
สาขาการทำงานแตกต่างจากบรรทัดฐานเล็กน้อยเนื่องจากคุณกำลังสร้างหน้าต่างที่เล็กกว่า ในเมนูด้านซ้ายคุณสามารถเพิ่มรายการประเภทใดก็ได้ในป๊อปอัพของคุณ
ปลั๊กอิน JetPopup จะเพิ่มรายการเดียวในเมนูวิดเจ็ต - ปุ่มการดำเนินการตามบริบท สิ่งนี้ช่วยให้สามารถกำหนดประเภทของการกระทำที่จะเกิดขึ้นเมื่อผู้ใช้กดปุ่ม
ไม่ชัดเจนจริงๆที่จะเปิดการตั้งค่าจากหน้าต่างป๊อปอัป คุณต้องคลิกที่ปุ่มการบำรุงรักษาที่ด้านล่างของเมนู เมนูการตั้งค่าค่อนข้างคล้ายกับในตัวสร้างป๊อปอัพ แต่มีเพียงสองแท็บการปรับแต่ง “ การตั้งค่าทั่วไป” ช่วยให้คุณกำหนดเอฟเฟกต์ภาพเคลื่อนไหวเปลี่ยนชื่อโมเดลหรือกำหนดเงื่อนไข บนแท็บ "สไตล์" คุณสามารถเปลี่ยนเค้าโครงสีรูปภาพแบบอักษรและเส้นขอบได้
JetPopup มีฟังก์ชั่นที่เห็นได้ชัดน้อยกว่าเล็กน้อย แต่ชดเชยด้วยวิดีโอสอนที่มีประโยชน์
ทริกเกอร์
เพื่อให้มีประโยชน์และไม่รบกวนผู้เยี่ยมชมป๊อปอัปจะต้องปรากฏขึ้นในเวลาที่เหมาะสม เงื่อนไขที่ป๊อปอัปแสดงขึ้นเรียกว่า "ทริกเกอร์" ยิ่งมีเงื่อนไขให้รายละเอียดมากเท่าใดปลั๊กอินป๊อปอัปก็จะมีความยืดหยุ่นมากขึ้นเท่านั้น ความแม่นยำเป็นสิ่งสำคัญมากหากคุณไม่ต้องการให้ผู้ใช้ออกจากเว็บไซต์หลังจากหน้าต่างป๊อปอัปแบบฟอร์มสมัครสมาชิกปรากฏขึ้น
ตัวสร้างป๊อปอัพ
ปลั๊กอินนี้ช่วยให้คุณกำหนดเงื่อนไขที่จำเป็นหลังจากกำหนดหน้าต่างป๊อปอัพเอง เมื่อคุณกดปุ่ม "เผยแพร่" คุณจะเห็นหน้าต่างที่คุณสามารถกำหนดเงื่อนไข (หน้าใดที่ป๊อปอัปนี้จะปรากฏ) ทริกเกอร์ (เมื่อหน้าต่างป๊อปอัปจะปรากฏขึ้น) และกฎขั้นสูง
ตัวสร้างป๊อปอัปมีทริกเกอร์หกตัวเช่นการแสดงบนการเลื่อนหนึ่งครั้งและการคลิกและกฎขั้นสูงเจ็ดข้อเช่นการแสดงผลหลังจากจำนวนเซสชันที่กำหนดหรือแสดงบนอุปกรณ์บางอย่าง ทริกเกอร์และกฎขั้นสูงมีสวิตช์ตัวเลื่อนที่เรียบง่ายและจะรวดเร็วมากในการตั้งค่าพารามิเตอร์ที่คุณต้องการ
JetPopup
ทริกเกอร์เงื่อนไขและเหตุการณ์เปิดทั้งหมดจะถูกจัดกลุ่มเข้าด้วยกันในพารามิเตอร์ หลังจากคลิกปุ่มการบำรุงรักษาคุณจะเปิดแท็บการตั้งค่าและตั้งค่าทริกเกอร์ได้ทันที คุณสามารถกำหนดเปอร์เซ็นต์ของหน้าหลังจากการเลื่อนเมนูบริบทที่จะแสดงหรือจำนวนวินาทีหลังจากนั้นผู้ใช้จะเห็นข้อความ
หน้าต่างสามารถแสดงได้เพียงครั้งเดียวหรือทุกครั้งที่ผู้ใช้ดำเนินการบางอย่าง (ฉันไม่แนะนำเป็นอย่างยิ่ง - มันจะไม่ทำให้ผู้ใช้พอใจ) คุณยังสามารถเลือกได้อย่างแม่นยำว่าจะให้โพสต์หรือหน้าใดที่จะแสดงป๊อปอัปที่เป็นรูปธรรมนี้ โดยทั่วไปปลั๊กอินนี้ค่อนข้างยืดหยุ่นและช่วยให้คุณแสดงป๊อปอัปได้อย่างแม่นยำ
การวางตำแหน่ง
ผู้ใช้จะไม่สามารถหลีกเลี่ยงหน้าต่างที่พุ่งออกมาจากตรงกลางหน้าจอได้อย่างแน่นอน แต่จะทำให้ผู้เยี่ยมชมเสียสมาธิจากเว็บไซต์และอาจสร้างความรำคาญได้ ไม่ควรวางป๊อปอัปทั้งหมดไว้ตรงกลางริบบิ้นแคบ ๆ ที่ด้านบนจะสังเกตเห็นได้น้อยกว่า แต่มีประสิทธิภาพมากกว่ามาก ซึ่งหมายความว่าคุณต้องควบคุมตำแหน่งของหน้าต่างและสามารถเลื่อนไปรอบ ๆ หน้าจอได้
ตัวสร้างป๊อปอัพ et JetPopup แบ่งหน้าจอออกเป็นเก้าส่วนและอนุญาตให้คุณวางป๊อปอัปในส่วนใดก็ได้ ตำแหน่งถูกกำหนดตามสเกลซ้าย - ขวาและขึ้น - ลง มันไม่ยืดหยุ่นมากนัก แต่ก็เพียงพอสำหรับป๊อปอัป
เอฟเฟกต์ภาพเคลื่อนไหว
วิธีที่หน้าต่างเลื่อน (หรือม้วนหรือกระโดด) บนหน้านั้นสำคัญมาก หากหน้าต่างเคลื่อนที่เร็วเกินไปหรือช้าเกินไปจะไม่มีผล ควรใช้การตีกลับจั๊กจี้และการสั่นด้วยความแม่นยำสูง เอฟเฟกต์ภาพเคลื่อนไหวทำให้ไซต์มีไดนามิกมากขึ้น แต่ก็สามารถทำลายความประทับใจทั้งหมดได้เช่นกัน
ตัวสร้างป๊อปอัพ มีแอนิเมชั่นอินพุต 36 ประเภทรวมถึงการเลื่อนการกางออกการซูมการตีกลับและการหมุนในทิศทางต่างๆ ทั้งหมดนี้พร้อมกับระยะเวลาของภาพเคลื่อนไหวสามารถพบได้ในส่วน "เค้าโครง" ของแท็บการตั้งค่า
มีภาพเคลื่อนไหว 13 ประเภทในปลั๊กอิน JetPopupรวมถึงการจางหายการพลิกแนวตั้งสไลด์ที่แตกต่างการกระดอนและการซูม คุณจะพบพวกเขาในส่วน "การตั้งค่า" ของแท็บการตั้งค่า
รุ่น
ในบางกรณี คุณต้องการสร้างป๊อปอัปที่มีโครงสร้างเฉพาะและรู้ว่าควรมีลักษณะอย่างไร แต่นี่เป็นโอกาสที่ค่อนข้างหายาก บ่อยครั้งที่คุณไม่รู้ว่าป๊อปอัปของคุณควรมีองค์ประกอบใดบ้าง นี่คือที่ที่เทมเพลตมีประโยชน์ แม้ว่าคุณจะไม่ได้ใช้ตัวอย่างที่กำหนดค่าไว้ล่วงหน้าใดๆ ก็ตาม การประมวลผลตัวอย่างเหล่านี้สามารถให้ภาพรวมที่ดีแก่คุณได้ และแน่นอน การปรับแต่งองค์ประกอบสำเร็จรูปนั้นทำได้เร็วและง่ายกว่าการสร้างตั้งแต่เริ่มต้นมาก
ตัวสร้างป๊อปอัพ เพิ่มหมวดหมู่ให้กับไลบรารีแบบจำลองของ Elementor อย่างที่ฉันบอกคุณไปก่อนหน้านี้คุณจะเห็นได้ทันทีเมื่อเริ่มกระบวนการใหม่ในการสร้างป๊อปอัป การแบ่งประเภทของเทมเพลตป๊อปอัปมีขนาดใหญ่พอ มีมากกว่า 100 รายการ ที่มุมบนซ้ายเครื่องมือจัดเรียงตามหมวดหมู่แบบเลื่อนลงช่วยให้คุณค้นหาได้เร็วขึ้น หมวดหมู่ต่างๆสามารถเข้าใจได้และใช้เวลาไม่นานในการค้นหาป๊อปอัปที่คุณต้องการ
JetPopup นอกจากนี้ยังมีไลบรารีเทมเพลตขนาดใหญ่ ทั้งหมดนี้ถูกเก็บไว้ในแท็บ Contextual Library และมีคุณสมบัติที่ใช้งานง่ายเช่นปุ่มแสดงตัวอย่างและตัวนับการใช้งาน มีตัวเลือกการจัดเรียงมากขึ้นรายการสามารถกำหนดค่าให้แสดงประเภทเฉพาะของแบบจำลองจากนั้นวางในลำดับใดก็ได้ ตัวอย่างเช่นขึ้นอยู่กับวันที่สร้าง ฉันไม่สามารถบอกจำนวนรุ่นที่แน่นอนได้ แต่มีมากกว่า 100 รุ่น
ตารางเปรียบเทียบ
ตัวสร้างป๊อปอัพของ Elementor | JetPopup | |
กรังปรีซ์ | $ 45 | $ 15 |
รุ่น | 100 + | 100 + |
ทริกเกอร์ | ทริกเกอร์ 6 กฎขั้นสูง 7 | 5 เปิดกิจกรรมพร้อมพารามิเตอร์เพิ่มเติม |
แอนิเม | ชนิดฮิต | ชนิดฮิต |
สอน | เอกสาร | เอกสารประกอบ, บทช่วยสอนวิดีโอ 9 |
สรุป
ฉันไม่สามารถบอกได้ว่าปลั๊กอินสองตัวใดดีกว่ากัน มันซับซ้อนเกินไปที่จะตัดสินพวกเขา แต่ละกรณีและแต่ละคนมีข้อกำหนดของตัวเองสำหรับการเลือกปลั๊กอิน ฉันเดาว่าคุณควรกำหนดมันด้วยตัวคุณเอง - ทั้งสองแบบนี้จะเหมาะกับคุณที่สุด? ฉันขอให้คุณโชคดีในการเพิ่มป๊อปอัปที่ยอดเยี่ยมในเว็บไซต์ของคุณ!