วิธีสร้างป๊อปอัปที่กำหนดเองด้วย OptiMonk

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

เติบโตขึ้นมาบน Canva? โชคดีที่คุณไม่จำเป็นต้องมีทักษะการออกแบบนักฆ่าเพื่อสร้างป๊อปอัปที่มี Conversion สูง ไลบรารี OptiMonk ของเรา มีเทมเพลตการส่งข้อความแบบพร้อมใช้งานกว่า 200 แบบ คุณสามารถใช้เทมเพลตของเราเพื่อ ขยายรายชื่ออีเมล เอาชนะการละทิ้งรถเข็น โปรโมตข้อเสนอพิเศษ รวบรวม คำติชมจาก ลูกค้า และอื่นๆ อีกมากมาย

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

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

พร้อม? ลงมือทำกันเถอะ!

สารบัญ

ขั้นตอนที่ 1: สร้างป๊อปอัปที่กำหนดเองด้วยการคลิกเพียงไม่กี่ครั้ง

ขั้นตอนที่ 2: แก้ไขแคมเปญป๊อปอัปที่กำหนดเองของคุณ

ป๊อปอัปที่กำหนดเองทำถูกต้อง

ขั้นตอนที่ 1: สร้างป๊อปอัปที่กำหนดเองด้วยการคลิกเพียงไม่กี่ครั้ง

ขั้นแรก ลงชื่อเข้าใช้ แดชบอร์ด OptiMonk ของ คุณ คลิก ที่ปุ่ม 'แคมเปญใหม่' จากนั้น คลิกที่ปุ่ม 'เริ่มตั้งแต่เริ่มต้น'

custom popup 01 - How to Create a Custom Popup with OptiMonk?

เลือกโดเมนของคุณและกด 'ถัดไป' ในหน้าต่างนี้:

custom popup 02 - How to Create a Custom Popup with OptiMonk?

ขั้นตอนที่ 2: แก้ไขแคมเปญป๊อปอัปที่กำหนดเองของคุณ

คุณจะเห็นป๊อปอัปว่างเปล่าเมื่อคุณเปลี่ยนเส้นทางไปยังตัวแก้ไข นี่คือตัวอย่าง:

custom popup 03 - How to Create a Custom Popup with OptiMonk?

มาสร้างป๊อปอัปสำหรับการลดราคาช่วงฤดูร้อนกันเถอะ

โดยคลิกที่แท็บเลย์เอาต์:

custom popup 04 - How to Create a Custom Popup with OptiMonk?

จากนั้นเลือก 'frame' เพื่อแก้ไข เช่น:

custom popup 05 - How to Create a Custom Popup with OptiMonk?

จากนั้นคุณสามารถแก้ไขขนาดป๊อปอัปภายใต้แท็บเดียวกันได้:

custom popup 06 - How to Create a Custom Popup with OptiMonk?

ถัดไป ไปที่แท็บรูปแบบแล้วเลือกสีพื้นหลังที่คุณต้องการใช้:

custom popup 07 - How to Create a Custom Popup with OptiMonk?

ต้องการเปลี่ยนพื้นหลังของปุ่ม 'X' ที่ปิดป๊อปอัปหรือไม่ กลับไปที่เลย์เอาต์และเลือกแท็บ 'ปุ่มปิด'

custom popup 08 - How to Create a Custom Popup with OptiMonk?

ที่นี่ คุณสามารถเปลี่ยนสีพื้นหลังของป๊อปอัปและสีของปุ่ม 'X'

custom popup 09 - How to Create a Custom Popup with OptiMonk?

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

ด้านล่าง เราเพิ่มบล็อก—ซึ่งอยู่ภายใต้ 'องค์ประกอบโครงสร้าง':

custom popup 10 - How to Create a Custom Popup with OptiMonk?

เลือกเค้าโครงคอลัมน์สำหรับบล็อก ที่นี่เราได้ไปหนึ่งกับสองคอลัมน์:

custom popup 11 - How to Create a Custom Popup with OptiMonk?

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

custom popup 12 - How to Create a Custom Popup with OptiMonk?

เราสามารถเปลี่ยนตำแหน่งหรือขนาดของภาพถ่ายได้เสมอในอนาคต

คุณสามารถลากและวางองค์ประกอบข้อความในคอลัมน์ทางขวา:

custom popup 13 - How to Create a Custom Popup with OptiMonk?

คุณสามารถเพิ่มข้อความที่ต้องการและแก้ไขแบบอักษร ขนาด สี น้ำหนัก และความสูงของบรรทัดให้เหมาะกับความต้องการของคุณ:

ในการเพิ่มข้อความ ให้ทำตามขั้นตอนง่ายๆ 3 ขั้นตอนเหล่านี้:

1. ไปที่ 'เพิ่มองค์ประกอบ'

2. คลิก 'ข้อความ' ใต้ 'องค์ประกอบพื้นฐาน'

3. ลากและวางไอคอนข้อความลงในป๊อปอัปของคุณ

custom popup 14 - How to Create a Custom Popup with OptiMonk?

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

custom popup 15 - How to Create a Custom Popup with OptiMonk?

ตอนนี้ มาเพิ่มอีกบล็อกภายใต้บล็อกนี้ ลองเปลี่ยนการนับคอลัมน์เป็น 1 ในกรณีนี้:

custom popup 16 - How to Create a Custom Popup with OptiMonk?

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

custom popup 17 - How to Create a Custom Popup with OptiMonk?

ขั้นแรก ตั้งเวลา

คุณสามารถทำได้โดยคลิกที่แท็บ 'ทั่วไป' คุณจะพบตัวเลือกสำหรับ:

1. เลือกเวลาที่แน่นอนหรือวันที่แน่นอน (เลือกตัวเลือกของคุณจากรายการดรอปดาวน์)

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

custom popup 18 - How to Create a Custom Popup with OptiMonk?

แล้วแก้ไขสไตล์

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

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

custom popup 19 - How to Create a Custom Popup with OptiMonk?

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

custom popup 20 - How to Create a Custom Popup with OptiMonk?

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

custom popup 21 - How to Create a Custom Popup with OptiMonk?

ดูดีขึ้นแล้วใช่ไหม?

ตอนนี้ เราสามารถเปลี่ยนแปลงตัวยึดของฟิลด์และจัดตำแหน่งให้อยู่ตรงกลางได้

custom popup 22 - How to Create a Custom Popup with OptiMonk?

ตอนนี้เราต้องการปุ่ม

ไปที่ 'เพิ่มองค์ประกอบ' 'องค์ประกอบพื้นฐาน' จากนั้นเลือก 'ปุ่ม'

custom popup 23 - How to Create a Custom Popup with OptiMonk?

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

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

custom popup 24 - How to Create a Custom Popup with OptiMonk?

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

1. คลิกแท็บ 'เพิ่มองค์ประกอบ'

2. ลากและวางองค์ประกอบข้อความลงในป๊อปอัปของคุณ

นี่คือวิธีที่เราจัดสไตล์ของเรา:

custom popup 25 - How to Create a Custom Popup with OptiMonk?

ตาดา! นั่นเป็นวิธีที่คุณสามารถสร้างป๊อปอัปแบบกำหนดเองได้ภายในไม่กี่นาที

คุณสามารถเปลี่ยนแปลงการออกแบบขั้นสุดท้ายได้หากต้องการ เช่น เปลี่ยนประเภทแบบอักษร

custom popup 26 - How to Create a Custom Popup with OptiMonk?

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

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

ป๊อปอัปที่กำหนดเองทำถูกต้อง

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

custom popup 27 - How to Create a Custom Popup with OptiMonk?

ป๊อปอัปสามารถช่วยสร้างรายชื่ออีเมลและเพิ่มการเข้าถึงของคุณได้ บริษัทฟิตเนส Crossrope.com เติบโตขึ้นถึง 900% ด้วยป๊อปอัปง่ายๆ

ต่อไปนี้คือวิธีการทำซ้ำสิ่งที่ยอดเยี่ยมเกี่ยวกับ ป๊อปอัปการสร้างรายชื่อ นี้ :

1. เลือกเฉดสีที่เข้มและดึงดูดสายตา

2. ใช้คำกระตุ้นการตัดสินใจเพียงครั้งเดียวเพื่อเพิ่มอัตราการแปลงของคุณ

3. คำขอจากผู้เยี่ยมชมนั้นน้อยมาก: กรอกที่อยู่อีเมลของคุณ อย่าทำให้ลูกค้าของคุณมากเกินไปด้วยการถามมากเกินไป

4. ปุ่ม 'X' ที่ชัดเจนในสีตัดกันกับพื้นหลังทำให้ผู้เยี่ยมชมออกจากป๊อปอัปได้ง่าย วิธีนี้ช่วยให้คุณหลีกเลี่ยงไม่ให้ผู้เข้าชมรำคาญหากไม่ต้องการเปิดเผยที่อยู่อีเมล

custom popup 28 - How to Create a Custom Popup with OptiMonk?

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

1. เลือกจานสีที่สดใสเพื่อดึงดูดความสนใจ

2. ข้อความขั้นต่ำจะผลักดันผู้เข้าชมให้คลิกปุ่มเพื่อรับส่วนลด 63% หากคุณต้องการให้ผู้เยี่ยมชมทำ Conversion ให้เน้นความสนใจของพวกเขาด้วยข้อความขั้นต่ำ

3. คุณสามารถผลักดันให้เกิด Conversion โดยใช้เฉดสีที่ตัดกันสำหรับปุ่มและพื้นหลังของป๊อปอัป

custom popup 29 - How to Create a Custom Popup with OptiMonk?

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

1. เพิ่มความเร่งด่วนโดยเน้นการขายตามฤดูกาลที่คำนึงถึงเวลา

2. เน้นประโยชน์ของการแบ่งปันที่อยู่อีเมลในที่ร่มที่สะดุดตา (“74%”)

3. โปรโมตรายการที่ต้องการซึ่งผู้เยี่ยมชมต้องการได้รับข้อตกลงเพื่อเพิ่มอัตราการคลิกผ่านของคุณ

custom popup 30 - How to Create a Custom Popup with OptiMonk?

คุณเอาชนะ รถเข็นที่ถูกทิ้งร้าง และลดอัตราการตีกลับได้อย่างไร? ด้วย ป๊อปอัปตั้งใจ ออก

ป๊อปอัปนี้ทำสิ่งนี้สำเร็จอย่างมีสไตล์ นี่คือสิ่งที่คุณสามารถนำไปใช้ได้:

1. สำเนาชวนให้นึกถึง: “Hello to Summer” เป็นแรงบันดาลใจให้ภาพบาร์บีคิวกับเพื่อนๆ และวันพักผ่อนที่ชายหาด ใช้ภาษาที่เชื่อมโยงกับเหตุการณ์และอารมณ์เชิงบวกเพื่อดึงดูดผู้เข้าชมของคุณ

2. ส่งเสริมข้อเสนอเชิงกลยุทธ์ที่ช่วยเพิ่มมูลค่าการสั่งซื้อเฉลี่ยของคุณ (เช่น ใช้จ่าย $500 เพื่อรับ $100)

3. ตรวจสอบให้แน่ใจว่าผู้เข้าชมของคุณต้องคัดลอกและวางรหัสส่วนลดของพวกเขา สิ่งนี้กระตุ้นให้พวกเขาใช้มันโดยเร็วที่สุด

สร้างป๊อปอัปแบบกำหนดเองแรกของคุณด้วย OptiMonk

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

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

พร้อมที่จะสร้าง? สร้างบัญชี OptiMonk ฟรีวันนี้ หรือ เยี่ยมชมไลบรารีเทมเพลตของเรา และเลือกเทมเพลตที่พร้อมใช้งานของเรา