فهم الفرق بين المشغلات والآثار والأهداف في Divi 5

تستخدم التفاعلات الجديدة لـ DIVI 5 نموذجًا بسيطًا - الزناد ، التأثير ، الهدف. افصل ما الذي يبدأ ، ما يحدث ، وما هي التغييرات ، ويمكنك إنشاء حركة منسقة واضحة عبر تخطيطك. في هذا المنشور ، سنشرح كل جزء ، ونوضح كيف يتناسب مع بعضها البعض ، والمشي من خلال مثال سريع يمكنك إعادة استخدامه. دعنا نصل إليه!

ما هي المشغلات والآثار والأهداف؟

تم تصميم التفاعلات في Divi 5 من ثلاثة أجزاء متحركة تعمل معًا. يحدد المشغل الأشياء في الحركة ، ويقرر التأثير كيف تبدو الاستجابة ، ويحدد الهدف أي عنصر يتغير.

اشترك في قناتنا على YouTube

عندما تقوم بإعداد تفاعل ، سيطلب منك Divi ملء الأجزاء الثلاثة:

إن فهم كل دور بشكل منفصل سيجعل من السهل معرفة كيفية الاتصال بنظام واحد كامل.

الزناد هو ما يبدأ

كل تفاعل يبدأ بعملة انطلاق تسمى الزناد. إنها الخطوة الأولى التي يتخذها المستخدم ، مثل نقرة الماوس ، أو تحوم أو تحميل الصفحة ، والتي تبدأ الإجراء. على سبيل المثال ، تحريك الماوس عبر بطاقة التسعير يضع السلسلة في الحركة.

من تلقاء نفسها ، الزناد لا يفعل أي شيء. يحتاج إلى استجابة.

التأثير هو ما يحدث

بمجرد حرائق الزناد ، يتبع التأثير. هذا هو المكان الذي تقرر فيه رد الفعل ، مثل الميل أو التلاشي أو المقياس أو التمويه أو أي مزيج من الحركات. تصور نفس بطاقة التسعير التي تتوسع قليلاً وإضافة ظل أعمق حيث يحوم المؤشر فوقها - هذا هو التأثير.

أخيرًا ، تحتاج إلى تحديد مكان تطبيق التأثير.

الهدف هو ما يتغير

الهدف هو ببساطة العنصر الذي يتغير عندما يطلق النار على الزناد. التحوم هو تفاعل شائع الاستخدام ، لكنه يؤثر فقط على العنصر نفسه. بمعنى آخر ، العنصر الذي بدأ التفاعل (المشغل) هو أيضًا العنصر الذي يتغير (الهدف).

على سبيل المثال ، يمكن أن يؤدي التحوم فوق عمود إلى أن يجعل مقياس العمود نفسه ، لأنه الهدف أيضًا.

هذا أبقى كل شيء محصورة في عنصر واحد. لا يزال بإمكانك إعداد الأمور بهذه الطريقة في Divi 5 ، لكنك لم تعد تقتصر عليها.

الآن يمكن أن يكون الزناد والهدف مختلفًا ، مما يمنحك المزيد من التحكم. على سبيل المثال ، عندما يدخل المؤشر قسمًا ، يقيس الزر على الرغم من أنه لم يتم لمسه. في هذه الحالة ، الزر هو الهدف.

كيف يعملون معًا

الآن بعد أن رأينا كل جزء من تلقاء نفسه ، تأتي القوة الحقيقية عند توصيلها بسلسلة:

• حرائق الزناد: يقوم الزائر بشيء مثل النقر أو تحريك الماوس أو الدخول أو المغادرة أو تحميل الصفحة.
• يحدد التأثير : أنت تقرر أي نوع من الاستجابة المرئية أو الحركة للعرض.
• ينطبق الهدف: تغيير الأراضي على العنصر الذي اخترته.

فكر في الأمر مثل توصيل الدائرة. يقلب المفتاح ، يتدفق التيار ، المصباح يضيء.

في Divi 5 ، يمكنك توصيل تلك الدائرة بأي طريقة تريدها. يمكن أن يحوم على عمود زره. يمكن أن يتلاشى تحميل الصفحة في صورة البطل. يمكن للنقرة الواحدة تحريك عدة وحدات في وقت واحد ، مما يجعل القسم يشعر بالتنسيق.

هذا هو عندما تتوقف التفاعلات عن الشعور بأنها تحوم أجمل وتبدأ العمل مثل لغة التصميم. لم تعد عالقًا مع عنصر واحد يتفاعل مع نفسه. يمكنك سلسلة الاستجابات ، وتنشرها ، ونشر الاستجابات لربط التصميم بأكمله.

تعلم كل شيء عن تفاعلات Divi 5

الصيغة في Divi 5

جمال تفاعلات Divi 5 هو أنها ليست إضافات عشوائية. يتبعون صيغة واضحة: TRIGGER → تأثير ← الهدف. يصبح بناء التفاعلات المعقدة بسيطة ومتسقة بمجرد رؤيته كنمط قابل للتكرار.

دعونا نضع هذه الصيغة موضع التنفيذ لتظهر لك كيف تعمل معًا. بالنسبة لهذا المثال ، دعنا ننشئ نموذج جهة اتصال ينبثق على الشاشة عندما ينقر المستخدم على الزر.

لإنشاء هذا التأثير ، ستقوم بتعيين تفاعل على الزر الذي تريد استخدامه كمشغل. حدد هذه الإعدادات:

• حدث الزناد: انقر فوق (قررنا أن الحدث سيؤدي إلى تشغيله عندما ينقر المستخدم على الزر)
• تأثير التأثير: عرض العنصر (نموذج الاتصال المخفي)
• الوحدة الهدف: القسم (جهة الاتصال) هو التسمية المعينة لقسم الاتصال.

بعد ذلك ، قم بتعيين رابط المرساة لفتح قسم الاتصال. أولاً ، افتح إعدادات قسم نموذج الاتصال وانتقل إلى علامة التبويب المتقدمة . ضمن معرف CSS والفئات ، قم بتعيين معرف CSS : الاتصال.

ثم ، انتقل إلى إعدادات الزر وأدخل #Contact في حقل URL لربط الزر .

أخيرًا ، قم بتعيين الحالة الأولية للنموذج على المخفية بحيث تظهر فقط عند تشغيلها. افتح إعدادات قسم نموذج الاتصال ، وانتقل إلى علامة التبويب المتقدمة ، وتحت Visib ility ، حدد نقاط التوقف التي تريد إخفائها فيها.

الآن اختبره. انقر فوق الزر ، ويظهر قسم الاتصال المخفي.

هذا التدفق البسيط (انقر فوق → إظهار → نموذج الاتصال) هو نفس النمط الذي ستعيد استخدامه للنوافذ المنبثقة أو التبديل أو الكشف اللطيف عند الحمل أو الرسوم المتحركة المربوطة عبر قسم. بمجرد أن تفكر من حيث الزناد والتأثير والهدف ، فإن الاحتمالات تفتح بسرعة.

جرب التفاعلات في Divi 5 اليوم

لديك النمط. الآن ضعها في العمل على صفحة حقيقية. افتح تخطيط الاختبار وقم ببناء تأثير تفاعل صغير واحد يمكنك الانتهاء منه في عشر دقائق. اختر شيئًا تستخدمه بالفعل على موقع العميل.

فيما يلي بعض المطالبات الصغيرة للحصول على المتداول:

• يدخل الماوس قسمًا ، مما يجعل مقياس الأزرار بمهارة
• يكشف النقر على زر "جهة الاتصال" عن نموذج مدبب
• إجازة الماوس على بطاقة إعادة ضبط بطاقة إعادة ضبط
• يتلاشى تحميل الصفحة في صورة البطل ، ثم العنوان بعد لحظة بعد ذلك

أخبرنا في التعليقات إذا كنت قد استخدمت ميزة تفاعلات Divi 5 حتى الآن ، وما تفكر فيه!