วิธีสร้างป๊อปอัปเปิดบนปุ่มคลิกโดยใช้ Elementor [2022]

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

5 กรณีการใช้งานที่ดีที่สุดของปุ่มด้วย Elementor Modal Popup

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

1. สำหรับจับลูกค้าเป้าหมายสำหรับธุรกิจ

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

2. การรวบรวมอีเมล์สมัครสมาชิก

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

3. การส่งเสริมการตลาดและการขาย

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

4. แบ่งปันประกาศที่น่าตื่นเต้น

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

5. ใช้เป็นล็อคเนื้อหา

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

เหตุใด Elementor จึงเป็นแพลตฟอร์มที่ดีที่สุดในการสร้างป๊อปอัปบนปุ่ม

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

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

บทช่วยสอนแบบไม่มีโค้ด: วิธีสร้างป๊อปอัป Elementor Modal เปิดเมื่อคลิกปุ่ม

ตอนนี้ เข้าสู่บทช่วยสอนและเริ่มสร้างป๊อปอัปที่เปิดขึ้นเมื่อคลิกปุ่ม ก่อนที่จะเริ่มสร้างป๊อปอัป Elementor สิ่งที่คุณต้องมีคือสมาธิ 5 นาทีและทำตามขั้นตอนการสอนง่ายๆ นี้ทีละขั้นตอน

ขั้นตอนที่ 1: เริ่มต้นใช้งาน Elementor PRO

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

ขั้นตอนที่ 2: สร้างเทมเพลตโดยใช้ Elementor Popup Builder

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

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

ขั้นตอนที่ 3: กำหนดค่าและปรับแต่งเทมเพลตป๊อปอัป

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

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

ขั้นตอนที่ 4: ตั้งค่าเงื่อนไข & ทริกเกอร์

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

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

ขั้นตอนที่ 4: เพิ่มปุ่ม Elementor ในตำแหน่งที่คุณต้องการ

ตอนนี้ เปิดหน้าที่คุณต้องการตั้งค่าป๊อปอัปเปิดขึ้นเมื่อคลิกปุ่ม หากคุณต้องการสร้างหน้าใหม่ ให้ไปที่ Pages → Add New สำหรับบทช่วยสอนนี้ เราจะเชื่อมต่อโมดอลป๊อปอัปกับปุ่ม Elementor ลากและ วางปุ่ม Elementor บนหน้าของคุณ

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

ภาพรวมขั้นสุดท้ายของป๊อปอัปเปิดขึ้นบนปุ่ม Elementor คลิก

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

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

โบนัสสำหรับส่วนเสริมที่จำเป็นสำหรับผู้ใช้ Elementor

โปรแกรมเสริมที่ จำเป็นสำหรับ Elementor เป็นห้องสมุด Elementor ที่ทรงพลังที่สุดที่มีผู้ใช้งาน มากกว่า 1 ล้าน คน และวิดเจ็ตที่ไม่ซ้ำกัน 85+ รายการ และวิดเจ็ต Creative Button มาพร้อมกับการออกแบบที่หลากหลายยิ่งขึ้นและการใช้งานอเนกประสงค์สำหรับลูกค้า หากคุณกำลังใช้วิดเจ็ตปุ่ม Addons ที่จำเป็น ในทำนองเดียวกันกับปุ่ม Elementor คุณสามารถทำให้ป๊อปอัปเปิดขึ้นได้ด้วยการคลิกปุ่มได้อย่างง่ายดาย

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

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