ทำความเข้าใจความแตกต่างระหว่างทริกเกอร์ผลกระทบและเป้าหมายใน Divi 5

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

ทริกเกอร์เอฟเฟกต์และเป้าหมายคืออะไร?

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

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

เมื่อคุณตั้งค่าการโต้ตอบ Divi จะขอให้คุณกรอกทั้งสามส่วน:

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

ทริกเกอร์คือสิ่งที่เริ่มต้น

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

ด้วยตัวเองทริกเกอร์ไม่ได้ทำอะไรเลย มันต้องการการตอบกลับ

เอฟเฟกต์คือสิ่งที่เกิดขึ้น

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

ในที่สุดคุณต้องตัดสินใจว่าจะใช้ผลกระทบที่ไหน

เป้าหมายคือสิ่งที่เปลี่ยนแปลง

เป้าหมายเป็นเพียงองค์ประกอบที่เปลี่ยนแปลงเมื่อทริกเกอร์ยิง การโฉบเป็นปฏิสัมพันธ์ที่ใช้กันทั่วไป แต่มันมีผลต่อองค์ประกอบเท่านั้น กล่าวอีกนัยหนึ่งองค์ประกอบที่เริ่มต้นการโต้ตอบ (ทริกเกอร์) ยังเป็นองค์ประกอบที่เปลี่ยนแปลง (เป้าหมาย)

ตัวอย่างเช่นการโฉบเหนือคอลัมน์สามารถสร้างมาตราส่วนคอลัมน์เดียวกันนั้นได้เนื่องจากเป็นเป้าหมาย

สิ่งนี้ทำให้ทุกอย่างถูก จำกัด อยู่ในองค์ประกอบเดียว คุณยังสามารถตั้งค่าสิ่งนั้นได้ใน Divi 5 แต่คุณไม่ได้ จำกัด อยู่อีกต่อไป

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

พวกเขาทำงานร่วมกันอย่างไร

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

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

คิดว่ามันเหมือนกับการเดินสายวงจร สวิตช์พลิกกระแสกระแสไฟหลอดไฟจะสว่างขึ้น

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

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

เรียนรู้ทุกอย่างเกี่ยวกับปฏิสัมพันธ์ของ Divi 5

สูตรใน Divi 5

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

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

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

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

ถัดไปตั้งค่าลิงค์สมอเพื่อเปิดส่วนการติดต่อ ก่อนอื่นให้เปิดการตั้งค่าส่วนของแบบฟอร์มการติดต่อและไปที่แท็บ ขั้นสูง ภายใต้ CSS ID & คลาส ให้ตั้งค่า CSS ID : ติดต่อ

จากนั้นไปที่การตั้งค่าของปุ่มและป้อน #Contact ในฟิลด์ ปุ่มลิงค์ลิงค์

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

ตอนนี้ทดสอบ คลิกปุ่มและส่วนที่ติดต่อที่ซ่อนอยู่จะปรากฏขึ้น

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

ลองปฏิสัมพันธ์ใน Divi 5 วันนี้

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

นี่คือข้อเสนอมินิบางส่วนที่จะกลิ้ง:

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

แจ้งให้เราทราบในความคิดเห็นหากคุณใช้คุณสมบัติการโต้ตอบของ Divi 5 และคุณคิดอย่างไร!