ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับการโต้ตอบ Divi 5

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

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

มาถึงกันเถอะ

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

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

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

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

องค์ประกอบหลักของการโต้ตอบ Divi 5

หัวใจสำคัญของการโต้ตอบ Divi 5 เป็นองค์ประกอบสำคัญสามประการที่ทำงานร่วมกันเพื่อนำการออกแบบของคุณมาสู่ชีวิต:

เหตุการณ์ทริกเกอร์

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

ทริกเกอร์ที่มีอยู่รวมถึง:

• คลิก : ผู้ใช้คลิกปุ่มรูปภาพหรือองค์ประกอบอื่น ๆ เพื่อเปิดการโต้ตอบ
• Mouse ENTER/EXIT: ผู้ใช้วนเวียนอยู่หรือออกจากองค์ประกอบ
• Viewport ENTER/EXIT: องค์ประกอบเข้าหรือออกจากพื้นที่ที่มองเห็นได้ของหน้าจอเมื่อผู้ใช้เลื่อน
• โหลด: การโต้ตอบเริ่มต้นเมื่อหน้าโหลดพร้อมเวลาหน่วงเวลาเสริม

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

การกระทำที่มีผล

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

• สลับทัศนวิสัย: สลับองค์ประกอบระหว่างที่มองเห็นได้และซ่อนเร้น
• แสดง/ซ่อนองค์ประกอบ: ทำให้องค์ประกอบมองเห็นได้หรือซ่อนเร้น
• Toggle Preset: เปิดหรือปิดการตั้งค่าล่วงหน้าสำหรับองค์ประกอบการออกแบบที่มีความสามารถในการแทนที่ค่าที่ตั้งไว้ล่วงหน้าที่มีอยู่
• เพิ่มที่ตั้งไว้ล่วงหน้า: ใช้เพื่อเพิ่มคลาสสไตล์ที่ตั้งไว้ล่วงหน้าให้กับองค์ประกอบ คุณยังสามารถแทนที่ค่าที่ตั้งไว้ล่วงหน้าที่มีอยู่
• ลบที่ตั้งไว้ล่วงหน้า: ใช้เพื่อลบสไตล์ที่ตั้งไว้ล่วงหน้าออกจากองค์ประกอบ
• แอตทริบิวต์สลับ: เพิ่มหรือลบแอตทริบิวต์ HTML ขององค์ประกอบเช่นคลาส CSS หรือ CSS ID
• เพิ่มแอตทริบิวต์: สิ่งนี้จะเพิ่มค่าแอตทริบิวต์ HTML เฉพาะที่ไม่มีอยู่ในปัจจุบัน
• ลบแอตทริบิวต์: ลบแอตทริบิวต์ใด ๆ ที่ใช้กับองค์ประกอบ
• สลับคุกกี้: เพิ่มหรือลบค่าคุกกี้ ตัวอย่างเช่นคุณสามารถตั้งค่าคุกกี้เมื่อป๊อปอัพปรากฏขึ้นและตั้งค่าเป็นปรากฏเพียงครั้งเดียวโดยใช้การตั้งค่าเงื่อนไขของ Divi 5
• เพิ่มคุกกี้: เพิ่มค่าคุกกี้ที่คุณสามารถกำหนดให้กับเบราว์เซอร์ของผู้ใช้
• ลบคุกกี้: ลบคุกกี้ที่ระบุไว้ก่อนหน้านี้
• เลื่อนไปที่องค์ประกอบ: อนุญาตให้หน้าเลื่อนได้อย่างราบรื่นนำองค์ประกอบเป้าหมายเข้ามาในมุมมอง
• Mirror Mouse Movement: ช่วยให้คุณตั้งค่าการเคลื่อนไหวที่ตามการเคลื่อนไหวของเมาส์ของผู้ใช้ ตัวเลือกรวมถึงการแปล, สเกล, ความทึบ, เอียงหรือหมุน คุณยังสามารถปรับความไวของการเคลื่อนไหว

กำหนดเป้าหมายโมดูล

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

คุณสมบัติที่สำคัญของการโต้ตอบ Divi 5

การโต้ตอบ Divi 5 โดดเด่นสำหรับชุดคุณสมบัติที่ใช้งานง่ายและหลากหลาย:

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

วิธีการเข้าถึงและใช้การโต้ตอบ Divi 5

การสร้างปฏิสัมพันธ์ใน Divi 5 นั้นตรงไปตรงมาขอบคุณการรวมภายในตัวสร้างภาพ ทำตามขั้นตอนง่ายๆเหล่านี้เพื่อเริ่มต้น:

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

นำทางไปยัง แท็บขั้นสูง และคลิก การโต้ตอบแบบเลื่อนลง คลิกปุ่ม + เพิ่มการโต้ตอบ จากที่นั่น

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

• เหตุการณ์ทริกเกอร์: Mouse Enter
• การกระทำของเอฟเฟกต์: การเคลื่อนไหวของเมาส์กระจก
• โมดูลเป้าหมาย: รูปภาพ
• เวลาหน่วงเวลา: 0
• ประเภทการเคลื่อนไหว: แปล
• ความไว: 10

เมื่อการตั้งค่าทั้งหมดเข้ามาแล้วให้คลิกปุ่ม บันทึกการโต้ตอบ เพื่อดำเนินการต่อ

ต่อไปเราจะสร้างปฏิสัมพันธ์การแปลงในคอลัมน์ คลิกการโต้ตอบ + เพิ่มอีกครั้ง ป้อนการตั้งค่าต่อไปนี้เพื่อสร้างการโต้ตอบ:

• คอลัมน์ผู้ดูแลระบบ: คอลัมน์เอียง
• เหตุการณ์ทริกเกอร์: Mouse Enter
• การกระทำของเอฟเฟกต์: การเคลื่อนไหวของเมาส์กระจก
• โมดูลเป้าหมาย: คอลัมน์
• เวลาหน่วงเวลา: 0
• ประเภทการเคลื่อนไหว: เอียง
• ความไว: 30

เมื่อป้อนการตั้งค่าการโต้ตอบของคุณควรมีลักษณะเช่นนี้:

ใช้ปุ่ม ดูตัวอย่าง เพื่อดูการโต้ตอบของคุณ

หน้าของคุณจะปรากฏในแท็บใหม่ช่วยให้คุณสามารถดูตัวอย่างและทดสอบการโต้ตอบของคุณ

ประเภทของการโต้ตอบที่คุณสามารถสร้างได้

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

ยินดีต้อนรับป๊อปอัปสำหรับผู้เข้าชมใหม่

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

ในการสร้างการโต้ตอบนี้คุณจะต้องสร้างส่วนสำหรับป๊อปอัพของคุณและกำหนดการตั้งค่าต่อไปนี้:

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

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

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

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

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

สลับการมองเห็นขององค์ประกอบ

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

ในการสร้างเอฟเฟกต์นี้คุณจะตั้งค่าการโต้ตอบบนปุ่มที่คุณต้องการตั้งค่าเป็นทริกเกอร์สำหรับส่วนของคุณ ป้อนการตั้งค่าต่อไปนี้สำหรับการโต้ตอบ:

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

ถัดไปตั้งค่าลิงค์สมอเพื่อเปิดส่วน เปิดการตั้งค่าของปุ่มและป้อน #Services ลงในฟิลด์ URL ลิงค์ปุ่ม ของแท็บเนื้อหา

คลิกส่วนคุณสมบัติใต้ปุ่มและนำทางไปยังแท็บขั้นสูง ตั้งค่าจุดยึดโดยเพิ่ม บริการ ไปยังฟิลด์ CSS ID ภายใต้เมนู CSS ID & คลาส

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

เอฟเฟกต์การเคลื่อนไหวของหนู

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

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

• ค่ายผู้ดูแลระบบ: หัวเรื่องภาพเคลื่อนไหว
• เหตุการณ์ทริกเกอร์: Mouse Enter
• การกระทำของเอฟเฟกต์: การเคลื่อนไหวของเมาส์กระจก
• โมดูลเป้าหมาย: ข้อความ
• เวลาหน่วงเวลา: 0
• ประเภทการเคลื่อนไหว: เอียง
• ความไว: 30

เมื่อป้อนการตั้งค่าพวกเขาควรดูเหมือนภาพหน้าจอด้านล่าง

ถัดไปตั้งค่าการโต้ตอบในคอลัมน์ที่มีส่วนหัวโดยใช้การตั้งค่าต่อไปนี้:

• ป้ายกำกับผู้ดูแลระบบ: คอลัมน์เอียง
• เหตุการณ์ทริกเกอร์: Mouse Enter
• การกระทำของเอฟเฟกต์: การเคลื่อนไหวของเมาส์กระจก
• โมดูลเป้าหมาย: คอลัมน์
• เวลาหน่วงเวลา: 0
• ประเภทการเคลื่อนไหว: เอียง
• ความไว: 50

เมื่อเสร็จสิ้นการตั้งค่าของคุณควรมีลักษณะคล้ายกับภาพหน้าจอด้านล่าง

ปฏิสัมพันธ์ที่ตั้งไว้ล่วงหน้า

คุณสามารถใช้การโต้ตอบ Divi 5 ควบคู่ไปกับการตั้งค่าล่วงหน้าเพื่อสร้างเอฟเฟกต์ด้วยทริกเกอร์ Mouseover หรือ Viewport Enter/Exit ตัวอย่างเช่นหากคุณต้องการแสดงส่วนในหน้าของคุณโดยการเปลี่ยนสีพื้นหลังหรือเพิ่มสไตล์เงาชายแดนคุณสามารถใช้การโต้ตอบเพื่อทำ ในตัวอย่างด้านล่างสีพื้นหลังความกว้างและการเปลี่ยนแปลงชายแดนเมื่อผู้ใช้วนเวียนอยู่เหนือส่วน

ในการสร้างเอฟเฟกต์นี้คุณจะต้องสร้างที่ตั้งไว้ล่วงหน้าเพื่อแสดงส่วนก่อนและหลัง MouseOver ในตัวอย่างนี้เราได้สร้างสอง - หนึ่งที่มีพื้นหลังสีเหลืองแข็งและอีกอันที่มีเอฟเฟกต์ต่าง ๆ และพื้นหลังสีเขียว

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

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

จากนั้นสร้างการโต้ตอบครั้งที่สองสำหรับเมาส์โดยการเข้าสู่การตั้งค่าต่อไปนี้:

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

ประโยชน์ของการใช้ปฏิสัมพันธ์ Divi 5

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

1. ไม่จำเป็นต้องใช้ปลั๊กอิน

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

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

2. ใช้งานง่าย

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

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

3. อิสระในการปรับแต่ง

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

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

4. การมีส่วนร่วมของผู้ใช้ที่เพิ่มขึ้น

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

เคล็ดลับการปฏิบัติสำหรับการเริ่มต้น

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

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

ยกระดับเว็บไซต์ของคุณด้วยการโต้ตอบ Divi 5

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

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

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