تفاعلات Divi 5 (المنبثقة ، والتبديل ، وتأثيرات الماوس والمزيد)

اليوم ، نحن متحمسون لإصدار تفاعلات لـ Divi 5 ، وهو نظام قوي لإنشاء عناصر تفاعلية مثل المنبثقة والتبديل ، والتأثيرات القائمة على التمرير الإبداعي والفأر.

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

تحقق من الفيديو التالي لمشاهدة الميزة الجديدة في العمل.

بناء العناصر التفاعلية الخاصة بك

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

يبدأ الزناد التفاعل ، مثل عند النقر أو التحوم. يحدث التأثير عندما يتم تشغيل التفاعل ، مثل تبديل الرؤية أو الإعداد المسبق أو السمة ، والهدف هو العنصر المتأثر في الصفحة.

أمثلة التفاعل

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

مثال 1: بناء منبثقة

في مثال الفيديو أدناه ، استخدمت التفاعلات لإنشاء نافذة منبثقة.

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

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

مثال 2: بناء تبديل

في مثال الفيديو أدناه ، استخدمت التفاعلات لتبديل جداول التسعير الشهرية والسنوية.

أضفت تفاعلين إلى صف واحد لتبديل رؤية أقسام التسعير السنوية والشهرية المتناوبة. بعد ذلك ، أضفت تفاعلين آخرين لتبديل رؤية وحدتين للأيقونة ، مما يمنح المستخدم ملاحظات إضافية عند النقر.

مثال 3: الانتقال بين الإعدادات المسبقة

واحدة من أقوى الآثار هي تأثير التبديل المسبق. نظرًا لأن الإعدادات المسبقة تسمح لك بتعديل إعدادات العنصر ، فلا يوجد حد لما يمكنك القيام به. عندما يغير الزناد الإعداد المسبق على عنصر مستهدف ، يمكن أن يحوله بعدة طرق.

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

مثال F: تأثيرات حركة الماوس

الآثار القائمة على أنظمة التفاعل القائمة على ماوس هي الكثير من المرح.

في مثال الفيديو أدناه. لقد أضفت العديد من التفاعلات إلى قسم البطل ، مستهدفة عناصر مختلفة مع تأثيرات قائمة على تنشيط الماوس للحساسيات المختلفة.

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

الاحتمالات لا حصر لها!

يمكن أن أستمر مع أمثلة مختلفة ، وأنا متحمس لرؤية ما توصلت إليه.

بالنظر إلى محرر التفاعل عن كثب ، يمكنك رؤية بعض التأثيرات الإضافية التي لم أذكرها بعد ، مثل تعديل السمات وملفات تعريف الارتباط والتمرير إلى العناصر.

على سبيل المثال ، يمكنك استخدام تأثيرات السمات لتغيير فئات CSS لعنصر ، أو معرف ، أو أي شيء آخر.

النسخة الأولى من التفاعلات تدعم التأثيرات التالية:

• تبديل الرؤية - يقوم بتبديل عنصر بين الحالات المرئية والمخفية تلقائيًا.
• عرض العنصر - يجعل عنصرًا مخفيًا مرئيًا.
• إخفاء العنصر - يجعل عنصرًا مرئيًا مخفيًا.
• تبديل الإعداد المسبق - يقوم بتبديل الإعداد المسبق/إيقاف تشغيله لعنصر ، مع استبدال اختياري للإعدادات المسبقة الحالية.
• أضف الإعداد المسبق - يطبق فئة نمط محددة مسبقًا على عنصر ، مع استبدال اختياري للإعدادات المسبقة الحالية.
• إزالة الإعداد المسبق - يزيل فئة النمط المسبق من عنصر.
• سمة تبديل - يضيف أو يزيل قيمة سمة HTML المحددة للعنصر ، مثل فئة CSS ومعرف.
• إضافة السمة - يضيف قيمة سمة HTML محددة إلى عنصر إذا لم يكن موجودًا بالفعل.
• إزالة السمة - يزيل قيمة السمة HTML محددة من عنصر.
• تبديل ملف تعريف الارتباط - أضف أو إزالة قيمة ملف تعريف الارتباط من ملف تعريف الارتباط. على سبيل المثال ، قم بتعيين ملف تعريف ارتباط عندما يبدو أن نافذة منبثقة تتتبع متى شاهد المستخدم نافذة منبثقة. بعد ذلك ، استخدم خيارات حالة Divi لإخفاء المنبثقة في زيارات الصفحة المستقبلية لهذا المستخدم.
• أضف ملف تعريف الارتباط - يضيف قيمة ملف تعريف الارتباط وملف تعريف الارتباط الذي تحدده إلى متصفح الزائر.
  إزالة ملفات تعريف الارتباط - قم بإزالة ملف تعريف ارتباط محدد.
• قم بالتمرير إلى العنصر - قم بتمرير الصفحة بسلاسة لجلب العنصر الهدف إلى العرض.
• Mirror Mouse Movement - يجعل العنصر المستهدف يتبع حركة الماوس داخل عنصر الزناد باستخدام أنواع الحركة المختلفة (ترجمة أو مقياس أو عتامة أو إمالة أو تدوير) بحساسية قابلة للتعديل.

جرب 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 هو سنة ديفي 5 . العمل الشاق وراءنا. لقد قمنا ببناء الأساس الفائق الصارم ، والآن حان الوقت ل Divi للعودة.

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

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