วิธีสร้างป๊อปอัพด้วยการโต้ตอบของ Divi 5 (ดาวน์โหลดฟรี)

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

ในโพสต์นี้เราจะนำคุณผ่านการสร้างป๊อปอัพโดยใช้คุณสมบัติการโต้ตอบของ Divi 5 มาดำน้ำกันเถอะ!

การโต้ตอบ Divi 5 คืออะไร?

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

สมัครสมาชิกช่อง YouTube ของเรา

องค์ประกอบสำคัญของการโต้ตอบแบบ Divi

การโต้ตอบทุกครั้งใน Divi 5 ประกอบด้วยสามองค์ประกอบหลัก:

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

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

ทำไมคุณควรใช้การโต้ตอบสำหรับการสร้างป๊อปอัพ

การโต้ตอบ Divi 5 มีข้อดีหลายประการสำหรับการสร้างป๊อปอัป:

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

คู่มือทีละขั้นตอนในการสร้างป๊อปอัพใน Divi 5

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

1. ติดตั้งชุดเค้าโครง

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

เมื่อกล่องโต้ตอบปรากฏขึ้นให้เลือก เค้าโครง premade จากตัวเลือกที่มีอยู่

คลิกรูปขนาด ย่อการเรียนรู้ออนไลน์ เพื่อเน้นหน้าเว็บที่มีอยู่

เลือกการออกแบบ หน้า Landing Page และคลิก ใช้เลย์เอาต์นี้ เพื่อโหลดลงในตัวสร้างภาพ

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

2. สร้างส่วนสำหรับป๊อปอัพ

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

คลิกที่ไอคอนเพื่อแทรกแถวใหม่ เลือกตัวเลือกที่สองภายใต้ คอลัมน์ออฟเซ็ต

3. ออกแบบป๊อปอัพ

ตอนนี้เราสามารถเริ่มเพิ่มเนื้อหาลงในป๊อปอัพของเรา เมื่อกล่องโต้ตอบ แทรกหรือแถว ปรากฏขึ้นให้คลิกเพื่อเพิ่มโมดูล หัวเรื่อง

ป้อน “ ต้องการลด 15%?” ในฟิลด์หัวเรื่องภายใต้แท็บเนื้อหา

เพื่อให้การออกแบบสอดคล้องกันทั่วทั้งหน้าคุณสามารถใช้คุณสมบัติแอตทริบิวต์ของ Divi 5 เพื่อคัดลอกการตั้งค่าโมดูลส่วนหัวอื่นสำหรับป๊อปอัพของเรา ในส่วนด้านบนโดยตรงโฮเวอร์เหนือโมดูลส่วนหัวคลิกขวาและคลิก คัดลอกแอตทริบิวต์

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

ภายใต้โมดูลส่วนหัวเพิ่มโมดูล ข้อความ ใหม่

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

คุณสามารถเพิ่มข้อความของคุณลงในฟิลด์ข้อความหรือใช้ Divi AI เพื่อสร้างให้คุณ

ต่อไปเราจะเพิ่มโมดูล การเลือกใช้อีเมล ภายใต้โมดูลข้อความ

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

ขั้นตอนสุดท้ายคือการเพิ่มรูปภาพไปยังคอลัมน์ด้านขวาของป๊อปอัพของเรา ค้นหาโมดูล รูปภาพ และเพิ่มลงในคอลัมน์ที่ 2 ของเค้าโครงของเรา

อัปโหลดรูปภาพและเพิ่มลงในโมดูลรูปภาพ เมื่อมาถึงจุดนี้ส่วนของคุณควรมีลักษณะคล้ายกับสิ่งนี้:

4. สร้างปุ่มปิด

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

เมื่อกล่องโต้ตอบ แทรกแถว ปรากฏขึ้นให้คลิกเค้าโครง คอลัมน์เดียว ภายใต้ คอลัมน์เท่ากับ เพื่อเพิ่มลงในส่วน

คลิกเพื่อเพิ่มโมดูล ไอคอน ในแถว

เลือก ไอคอนปิด จากตัวเลือกที่มีอยู่ มันสามารถอยู่ได้อย่างง่ายดายโดยพิมพ์“ ปิด” ลงในช่องค้นหาเหนือรายการไอคอน

สลับไปที่ แท็บการออกแบบ และป้อนการตั้งค่าการออกแบบต่อไปนี้:

• ไอคอนสี: #5344B9
• ขนาดไอคอน: 36px
• การจัดตำแหน่ง: ถูกต้อง

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

5. ปรับการตั้งค่าส่วน

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

ในฟิลด์ ความกว้าง ให้ป้อน 80% สำหรับความกว้าง ถัดไปตั้งค่าตัวเลือก การจัดตำแหน่งส่วน เป็น ศูนย์

ใต้ เส้นขอบ ตั้ง รัศมีเส้นขอบ 10px

นอกจากนี้เราจะเพิ่มเงากล่องเพื่อให้ป๊อปอัพของเราโดดเด่นกว่าเนื้อหาที่เหลือ ค้นหาเมนูแบบเลื่อนลงของ Box Shadow และขยาย ภายใต้ Box Shadow เลือก ที่ตั้งไว้ล่วงหน้า 1

สุดท้ายตรงไปที่ แท็บเนื้อหา เพื่อเพิ่มสีสำหรับพื้นหลังของส่วนป๊อปอัปของเรา

6. สร้างปฏิสัมพันธ์เพื่อแสดงป๊อปอัพ

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

เลือก โหลด จากตัวเลือกที่มีอยู่ การตั้งค่านี้จะอนุญาตให้ป๊อปอัปปรากฏบนหน้าโหลด

เมื่อกล่องโต้ตอบ แก้ไขการโต้ตอบ ปรากฏขึ้นให้ป้อนการตั้งค่าต่อไปนี้และคลิก บันทึก :

• ป้ายกำกับผู้ดูแลระบบ: การโต้ตอบแบบป๊อปอัพ
• เหตุการณ์ทริกเกอร์: โหลด
• การกระทำของเอฟเฟกต์: แสดงองค์ประกอบ
• โมดูลเป้าหมาย: ส่วน (ป๊อปอัพ)
• เวลาหน่วงเวลา: 5 วินาที

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

• ฉลากผู้ดูแลระบบ: ปิดป๊อปอัพ
• เหตุการณ์ทริกเกอร์: คลิก
• การกระทำของเอฟเฟกต์: สลับการมองเห็น
• โมดูลเป้าหมาย: ส่วน (ป๊อปอัพ)
• เวลาหน่วงเวลา: 0

7. ทดสอบและปรับแต่งป๊อปอัพของคุณด้วยจุดพักที่ตอบสนองได้ของ Divi 5

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

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

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

8. ตั้งค่าตัวเลือกการแสดงผล

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

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

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

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

ตัวเลือกการปรับแต่งป๊อปอัพขั้นสูง

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

แสดงเงื่อนไข

คุณสามารถใช้ตัวเลือกเงื่อนไขของ Divi เพื่อแสดงป๊อปอัพตามพฤติกรรมของผู้ใช้เช่นบทบาทผู้ใช้ ตัวอย่างเช่นคุณสามารถแสดงป๊อปอัพเพื่อผู้ใช้ที่เข้าสู่ระบบเพื่อส่งเสริมการสมัคร

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

รวมเอฟเฟกต์

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

การรวมกลุ่ม AI

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับป๊อปอัปที่มีประสิทธิภาพ

เพื่อให้แน่ใจว่าป๊อปอัปของคุณปรับปรุงประสบการณ์การใช้งานและขับเคลื่อนผลลัพธ์ให้พิจารณาแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

1. เก็บไว้เป็นมิตรกับผู้ใช้

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

ตั้งค่าความล่าช้าในการป๊อปอัพของคุณเพื่อหลีกเลี่ยงการสูญเสียการมีส่วนร่วมของผู้ใช้

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

2. ปรับให้เหมาะสมสำหรับประสิทธิภาพ

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

3. การออกแบบป๊อปอัปโดยคำนึงถึงมาตรฐานการเข้าถึง

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

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

4. ทดสอบทุกขนาดหน้าจอ

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

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

การดาวน์โหลด

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

สร้างป๊อปอัปด้วยการโต้ตอบ Divi 5

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

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