ปฏิสัมพันธ์สำหรับ Divi 5 (ป๊อปอัพ, สลับ, เอฟเฟกต์เมาส์และอื่น ๆ )

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

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

ลองดูวิดีโอต่อไปนี้เพื่อดูคุณสมบัติใหม่ที่ดำเนินการ

สร้างองค์ประกอบแบบโต้ตอบของคุณเอง

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

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

ตัวอย่างปฏิสัมพันธ์

ก่อนที่ฉันจะลึกลงไปในการตั้งค่าเหล่านี้ให้ฉันแสดงตัวอย่างบางส่วนของการโต้ตอบที่สามารถบรรลุได้

ตัวอย่างที่ 1: การสร้างป๊อปอัพ

ในตัวอย่างวิดีโอด้านล่างฉันใช้การโต้ตอบเพื่อสร้างป๊อปอัพ

ฉันเพิ่ม Trigger Enter Viewport ในส่วนซึ่งใช้เอฟเฟกต์การมองเห็นสลับกับป๊อปอัพของฉัน ส่วนเข้าสู่วิวพอร์ตของฉันกระตุ้นการมองเห็นของป๊อปอัปและมันก็เลื่อนในการใช้การตั้งค่าแอนิเมชั่นของ Divi

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

ตัวอย่างที่ 2: การสร้างสลับ

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

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

ตัวอย่างที่ 3: การเปลี่ยนระหว่างที่ตั้งไว้ล่วงหน้า

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

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

ตัวอย่าง F: เอฟเฟกต์การเคลื่อนไหวของเมาส์

เอฟเฟกต์การเคลื่อนไหวของเมาส์ของระบบการโต้ตอบนั้นสนุกมาก

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

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

ความเป็นไปได้ไม่มีที่สิ้นสุด!

ฉันสามารถไปเรื่อย ๆ ด้วยตัวอย่างที่แตกต่างกันและฉันรู้สึกตื่นเต้นที่ได้เห็นสิ่งที่คุณเกิดขึ้น

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

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

เวอร์ชันหนึ่งของการโต้ตอบรองรับเอฟเฟกต์ต่อไปนี้:

• สลับการมองเห็น - สลับองค์ประกอบระหว่างสถานะที่มองเห็นได้และสถานะที่ซ่อนอยู่โดยอัตโนมัติ
• แสดงองค์ประกอบ - ทำให้องค์ประกอบที่ซ่อนอยู่สามารถมองเห็นได้
• ซ่อนองค์ประกอบ - ทำให้องค์ประกอบที่มองเห็นได้ซ่อน
• สลับล่วงหน้า - สวิตช์เปิด/ปิดการตั้งค่าล่วงหน้าสำหรับองค์ประกอบด้วยการเปลี่ยนที่ตั้งไว้ล่วงหน้าที่มีอยู่
• เพิ่มที่ตั้งไว้ล่วงหน้า - ใช้คลาสสไตล์ที่ตั้งไว้ล่วงหน้ากับองค์ประกอบด้วยการแทนที่ตัวเลือกของค่าที่ตั้งไว้ล่วงหน้าที่มีอยู่
• ลบที่ตั้งไว้ล่วงหน้า - ลบคลาสสไตล์ที่ตั้งไว้ล่วงหน้าออกจากองค์ประกอบ
• แอตทริบิวต์สลับ - เพิ่มหรือลบค่าแอตทริบิวต์ HTML เฉพาะขององค์ประกอบเช่นคลาส CSS และ ID
• เพิ่มแอตทริบิวต์ - เพิ่มค่าแอตทริบิวต์ HTML เฉพาะให้กับองค์ประกอบหากไม่มีอยู่แล้ว
• ลบแอตทริบิวต์ - ลบค่าแอตทริบิวต์ HTML เฉพาะออกจากองค์ประกอบ
• สลับคุกกี้ - เพิ่มหรือลบค่าคุกกี้ออกจากคุกกี้ ตัวอย่างเช่นตั้งค่าคุกกี้เมื่อป๊อปอัพปรากฏขึ้นเพื่อติดตามเมื่อผู้ใช้เห็นป๊อปอัพ จากนั้นใช้ตัวเลือกเงื่อนไขของ Divi เพื่อซ่อนป๊อปอัพในการเข้าชมหน้าในอนาคตสำหรับผู้ใช้นั้น
• เพิ่มคุกกี้ - เพิ่มค่าคุกกี้และคุกกี้ที่คุณกำหนดให้กับเบราว์เซอร์ของผู้เข้าชม
  ลบคุกกี้ - ลบคุกกี้ที่ระบุ
• เลื่อนไปที่องค์ประกอบ - เลื่อนหน้าอย่างราบรื่นเพื่อนำองค์ประกอบเป้าหมายเข้ามาในมุมมอง
• การเคลื่อนไหวของเมาส์มิเรอร์ - ทำให้องค์ประกอบเป้าหมายติดตามการเคลื่อนไหวของเมาส์ภายในองค์ประกอบทริกเกอร์โดยใช้ประเภทการเคลื่อนไหวที่หลากหลาย (แปล, สเกล, ความทึบ, เอียงหรือหมุน) ด้วยความไวที่ปรับได้

ลอง Divi 5 วันนี้

การโต้ตอบสำหรับ Divi 5 มีให้บริการในวันนี้และเป็นหนึ่งในคุณสมบัติมากมายที่มาถึง Divi ในปีนี้

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

ตามที่ระบุไว้ในตารางการเปิดตัวหลายเฟสดั้งเดิมของ Divi 5 Divi 5 Public Alpha เป็นเหมือน“ Divi 5 Lite” มันขาดคุณสมบัติไม่กี่อย่างและอาจไม่เหมาะสำหรับเว็บไซต์ที่มีอยู่ แต่ก็พร้อมที่จะใช้กับเว็บไซต์ใหม่หากคุณต้องการประสบการณ์ใน Divi 4

เราต้องการให้คุณลองและถ้าคุณรักมันให้ใช้มัน เมื่อทุกคนรักมันเราจะทำให้มันเป็นทางการ

คุณเคยลองสีสัมพัทธ์แล้วหรือยัง?

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

ดูวิดีโอนี้สำหรับรายละเอียดทั้งหมด

การอัปเดต Divi 5 เพิ่มเติมกำลังมา

2025 เป็นปีของ Divi 5 งานที่น่าเบื่ออยู่ข้างหลังเรา เราสร้างรากฐานที่รวดเร็วเป็นพิเศษและตอนนี้ถึงเวลาแล้วที่ Divi จะกลับมาอีกครั้ง

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

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