วิธีสร้างและแสดงป๊อปอัปด้วยแท็กโพสต์ใน WordPress

คุณต้องการสร้างและแสดงหนึ่งป๊อปอัปต่อแท็กโพสต์ใน WordPress หรือไม่? ดังนั้นให้อ่านบทความนี้

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

ใน WordPress มีปลั๊กอินมากมายสำหรับสร้างป๊อปอัป เช่น Elementor Pro, JetPopup, Brizy Pro และอื่นๆ

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

สารบัญ

ปลั๊กอิน WordPress บางตัวเพื่อสร้างป๊อปอัป

Elementor Pro

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

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

JetPopup ของ Crocoblock เป็นส่วนเสริมสำหรับ Elementor. คุณสามารถซื้อเป็นปลั๊กอินแบบสแตนด์อโลนหรือซื้อเป็นชุดพร้อมกับปลั๊กอิน Crocoblock อื่นๆ ข้อดีของการใช้ JetPopup เพื่อสร้างหน้าต่างป๊อปอัปคือมันมาพร้อมกับคุณสมบัติเจ๋ง ๆ มากมาย

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

อ่าน: 22 ส่วนเสริมพรีเมียมที่ดีที่สุดสำหรับ Elementor

บริซซี่ โปร

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

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

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

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

จากนั้นเพิ่มชื่อป๊อปอัปของคุณแล้วคลิกปุ่ม สร้างแบบจำลอง

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

แต่ในบทช่วยสอนนี้ เราจะสร้างเทมเพลตป๊อปอัปตั้งแต่เริ่มต้น คลิกที่ไอคอน X เพื่อปิดไลบรารีเทมเพลต

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

คลิกไอคอนรูปเฟืองที่มุมซ้ายล่าง ในการตั้งค่าป๊อปอัป ให้เปลี่ยน ความกว้าง ใน 90% ของความกว้างของมุมมอง (VW) ร้อยเอ็ด ตำแหน่ง en กลาง-ล่าง.

จากนั้น ออกแบบเทมเพลตป๊อปอัพของคุณ เพิ่มส่วนใหม่และเลือกโครงสร้าง 5 คอลัมน์ ในการตั้งค่าส่วน ให้ตั้งค่า ความกว้าง บน 950 คุณสามารถเล่นกับการตั้งค่าของคุณ

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

กลับไปที่คอลัมน์ของคุณ ในคอลัมน์ด้านซ้าย ให้ตั้งค่าความกว้างเป็น 33% และสำหรับอีกสี่ช่องที่เหลือ ให้ตั้งค่าเป็น 16%

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

ทางด้านขวา เราจะเพิ่มวิดเจ็ตรูปภาพ คุณสามารถเพิ่มรูปภาพจากภาพขนาดย่อ/รูปภาพเด่นของโพสต์หรืออัปโหลดด้วยตนเอง

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

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

เนื่องจากคุณต้องการแสดงแท็ก Popup by post คุณสามารถตั้งค่าเงื่อนไขการแสดงผลดังต่อไปนี้ (ดูภาพเคลื่อนไหว)

คลิกถัดไป ในแท็บ ทริกเกอร์ตั้งค่าทริกเกอร์เป็น บนเลื่อน พลิกสวิตช์ไปที่ ใช่. กำหนด ทิศทาง sur Bas และ ความกว้าง มากกว่า 95% เนื่องจากเราต้องการให้ Popup ปรากฏขึ้นเมื่อผู้เข้าชมมาถึงจุดสิ้นสุดของบทความของเรา

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

มาดูกันว่าหน้าตาเป็นอย่างไร

ที่นี่คุณเพิ่งเสร็จสิ้นป๊อปอัปของคุณ ดูบทความที่เกี่ยวข้องของเรา:

ดาวน์โหลด Elementor Pro

แบ่งปันบทความนี้:

มิคอส การ์ตเนอร์

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