كل ما تحتاج لمعرفته حول تفاعلات Divi 5

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

ملاحظة مهمة: Divi 5 موجود حاليًا في Alpha العامة ومحسّن لمواقع الويب الجديدة. لا نوصي بترحيل مواقع Divi 4 الحالية بعد ذلك بسبب التطوير المستمر وقضايا التوافق المحتملة مع الوحدات القديمة. ترقبوا التحديثات حيث يقترب Divi 5 من إصداره الكامل!

دعنا نصل إليه.

ما هي تفاعلات Divi 5؟

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

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

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

المكونات الأساسية لتفاعلات Divi 5

في قلب تفاعلات Divi 5 توجد ثلاثة مكونات رئيسية تعمل معًا لجعل تصاميمك في الحياة:

أحداث الزناد

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

تشمل المشغلات المتاحة:

• انقر : ينقر المستخدم على زر أو صورة أو عنصر آخر لإطلاق تفاعل.
• الماوس إدخال/خروج: يحوم المستخدم أو يترك عنصرًا.
• Viewport Enter/Exit: يدخل عنصر أو يخرج من المنطقة المرئية للشاشة أثناء تمرير المستخدم.
• التحميل: يبدأ التفاعل عند تحميل الصفحة ، مع تأخير زمني اختياري.

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

الإجراءات تأثير

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

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

استهداف الوحدة النمطية

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

الميزات الرئيسية لتفاعلات Divi 5

تبرز تفاعلات Divi 5 لمجموعة الميزات السهلة الاستخدام والمتعددة الاستخدامات:

• لا توجد واجهة رمز: تكوين المشغلات والتأثيرات والأهداف من خلال واجهة بديهية ضمن علامة التبويب المتقدمة لأي عنصر دون استخدام أي CSS أو JavaScript.
• أنواع التفاعل المتنوعة: قم بإنشاء النوافذ المنبثقة لالتقاط الرصاص ، والتبديل للأسئلة الشائعة ، أو تتلاشى بفعول التمرير لأقسام البطل ، أو تأثيرات الماوس الشبيهة بالمظلات للمحافظ.
• أداء خفيف الوزن: تم تصميمه مباشرةً في Divi 5 ، ويزيل التفاعلات الحاجة إلى الإضافات من الجهات الخارجية ، وتقليل الانتفاخات في الموقع وتحسين أوقات التحميل.
• مجموعات الزناد الديناميكية: الجمع بين المشغلات المتعددة ، مثل حدث التمرير مع تأخير زمني ، للتفاعلات المتطورة مثل المنبثقة التي تظهر بعد تمرير المستخدم أسفل الصفحة.
• التصميم المتجاوب: تخصيص سطح المكتب ، والقرص ، والتفاعلات المحمولة باستخدام نقاط التوقف المستجيبة القابلة للتخصيص DIVI 5.

كيفية الوصول إلى تفاعلات Divi 5 واستخدامها

يعد إنشاء تفاعل في Divi 5 أمرًا واضحًا ، وذلك بفضل تكامله داخل المنشئ البصري. اتبع هذه الخطوات البسيطة للبدء:

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

انتقل إلى علامة التبويب المتقدمة وانقر فوق " التفاعلات" المنسدلة . انقر فوق الزر + إضافة التفاعل من هناك.

نريد إنشاء تأثير إمالة/تحويل الماوس على صورتنا. للقيام بذلك ، سنحتاج إلى إنشاء تفاعلين - أحدهما للصورة والآخر للعمود الذي يحتوي على الصورة. ابدأ بإعطاء تفاعلك اسمًا في تسمية المسؤول ، ثم أدخل الإعدادات التالية:

• حدث الزناد: الماوس أدخل
• تأثير التأثير: حركة الماوس المرآة
• الوحدة الهدف: الصورة
• تأخير الوقت: 0
• نوع الحركة: ترجمة
• الحساسية: 10

بمجرد وجود جميع الإعدادات في مكانها ، انقر فوق زر حفظ التفاعل للمتابعة.

بعد ذلك ، سنقوم بإنشاء تفاعل التحويل على العمود. انقر فوق + إضافة التفاعل مرة أخرى. أدخل الإعدادات التالية لإنشاء التفاعل:

• تسمية المسؤول: عمود الميل
• حدث الزناد: الماوس أدخل
• تأثير التأثير: حركة الماوس المرآة
• الوحدة الهدف: العمود
• تأخير الوقت: 0
• نوع الحركة: الميل
• الحساسية: 30

بمجرد إدخال الإعدادات ، يجب أن يبدو تفاعلك هكذا:

استخدم زر المعاينة لعرض تفاعلك.

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

أنواع التفاعلات التي يمكنك إنشاؤها

فيما يلي بعض الأمثلة العملية لعرض براعة تفاعلات Divi 5 ، كاملة مع المشغلات والتأثيرات والتطبيقات في العالم الحقيقي.

نرحب منبثقة للزوار الجدد

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

لإنشاء هذا التفاعل ، ستحتاج إلى إنشاء قسم للنوافئ المنبثقة وتعيين الإعدادات التالية:

• تسمية المسؤول: popup
• حدث الزناد: تحميل
• الإجراء التأثير: عنصر إظهار
• وحدة الهدف: القسم (المنبثقة)-تأكد من تسمية القسم الخاص بك قبل إنشاء التفاعل
• تأخير الوقت: 5 ثوان

سنحتاج أيضًا إلى إنشاء تفاعل لإغلاق المنبثقة. أسهل طريقة هي إضافة وحدة رمز إلى الزاوية اليمنى العليا من القسم المنبثق وتعيين الإعدادات التالية:

• تسمية المسؤول: زر إغلاق
• حدث الزناد: انقر
• تأثير التأثير: إخفاء العنصر
• الوحدة الهدف: القسم (المنبثقة)
• تأخير الوقت: 0

للتحكم في وضع المنبثقة الخاصة بك ، استخدم إعدادات موضع Divi 5. في علامة التبويب المتقدمة ، حدد موقع القائمة المنسدلة للموضع وقم بتعيين الموضع على ثابت . من هناك ، اختر الموقع الذي ترغب في ظهوره على الصفحة. في هذا المثال ، لدينا ضبط على المركز . من الجيد أيضًا تعيين فهرس Z بحيث يظهر المنبثقة فوق كل شيء آخر على الصفحة ، مثل 99999 .

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

تبديل رؤية عنصر ما

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

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

• تسمية المسؤول: خدمات العرض
• حدث الزناد: انقر
• الإجراء التأثير: عنصر إظهار
• الوحدة الهدف: القسم (الكشف عن الخدمات)
• تأخير الوقت: 0

بعد ذلك ، قم بتعيين رابط المرساة لفتح القسم. افتح إعدادات الزر وأدخل #Services في حقل عنوان URL لعلامة Button Link في علامة التبويب المحتوى.

انقر فوق قسم الميزات أسفل الزر وانتقل إلى علامة التبويب المتقدمة. قم بتعيين المرساة عن طريق إضافة خدمات إلى حقل معرف CSS ضمن قائمة CSS ID & Classes.

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

آثار حركة الماوس

تتيح لك Divi 5 تفاعلات إنشاء تأثيرات حركة ماوس ديناميكية عندما يحوم المستخدم على عنصر التصميم. على سبيل المثال ، يمكنك الجمع بين التفاعلات لإنشاء تأثير إمالة على العنوان والعمود الأصل.

ستحتاج إلى إنشاء تفاعل للعنصر أولاً لإنجاز هذا التفاعل. أدخل الإعدادات التالية في علامة التبويب "المتقدمة للصورة":

• تسمية المسؤول: عنوان الرسوم المتحركة
• حدث الزناد: الماوس أدخل
• تأثير التأثير: حركة الماوس المرآة
• الوحدة الهدف: النص
• تأخير الوقت: 0
• نوع الحركة: الميل
• الحساسية: 30

عند إدخال الإعدادات ، يجب أن تبدو مثل لقطة الشاشة أدناه.

بعد ذلك ، قم بتعيين تفاعل على العمود الذي يحتوي على العنوان باستخدام الإعدادات التالية:

• تسمية المسؤول: إمالة العمود
• حدث الزناد: الماوس أدخل
• تأثير التأثير: حركة الماوس المرآة
• الوحدة الهدف: العمود
• تأخير الوقت: 0
• نوع الحركة: الميل
• الحساسية: 50

بمجرد الانتهاء ، يجب أن تبدو إعداداتك مشابهة لقطات الشاشة أدناه.

التفاعلات المستندة إلى الإعداد المسبق

يمكنك استخدام تفاعلات Divi 5 إلى جانب الإعدادات المسبقة لإنشاء تأثيرات إما مع مشغلات Enter/Exitport. على سبيل المثال ، إذا كنت ترغب في عرض قسم على صفحتك عن طريق تغيير لون الخلفية أو إضافة نمط ظل الحدود ، فيمكنك استخدام التفاعلات للقيام بذلك. في المثال أدناه ، يتغير لون الخلفية والعرض والحدود عندما يحوم المستخدم فوق القسم.

لإنشاء هذا التأثير ، ستحتاج أولاً إلى إنشاء مسبق لإظهار القسم قبل وبعد Mouseover. في هذا المثال ، أنشأنا اثنين - واحد مع خلفية صفراء صلبة وآخر مع تأثيرات مختلفة وخلفية خضراء.

بمجرد إنشاء الإعدادات المسبقة الخاصة بك ، يمكنك استخدام التفاعلات لتبديل التغييرات على التحويم. ابدأ بإنشاء التفاعل الأول مع الإعدادات التالية:

• تسمية المسؤول: خلفية صفراء
• حدث الزناد: الماوس أدخل
• إجراء التأثير: تبديل الإعداد المسبق
• الوحدة الهدف: القسم (التسعير)
• تأخير الوقت: 1 ثانية
• الإعداد المسبق: الخلفية الصفراء

بعد ذلك ، قم بإنشاء تفاعل ثانٍ للماوس عن طريق إدخال الإعدادات التالية:

• تسمية المسؤول: الخلفية الخضراء
• حدث الزناد: مخرج الماوس
• إجراء التأثير: تبديل الإعداد المسبق
• الوحدة الهدف: القسم (التسعير)
• تأخير الوقت: 0
• الإعداد المسبق: الإعداد المسبق الأخضر

فوائد استخدام تفاعلات Divi 5

يوفر Divi 5 Interactions نهجًا قويًا وبسيطًا لبناء مواقع الويب ، وتقديم مجموعة من المزايا التي تجعلها ميزة بارزة لمستخدمي Divi. إليك نظرة أعمق على سبب هذه الميزة هي إضافة مفيدة إلى Divi 5:

1. لا مطلوب مطلوب

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

على سبيل المثال ، بدلاً من الاعتماد على المكون الإضافي المنبثق ، يتعامل Divi 5 Interactions مع كل شيء داخل البناء المرئي ، مما يضمن وجود قاعدة كود أصغر وتجربة مستخدم أكثر سلاسة. هذا يعني أيضًا عدد أقل من التحديثات لإدارة وخفض مخاطر تعارضات البرنامج المساعد ، مما يجعل موقعك أكثر موثوقية.

2. إنه سهل الاستخدام

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

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

3. حرية التخصيص

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

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

4. تعزيز مشاركة المستخدم

تعزز العناصر التفاعلية مشاركة المستخدم من خلال جعل مواقع الويب أكثر غامرة واستجابة. تساعد Divi 5 Interactions على إبقاء الزائرين على موقعك من خلال تشجيع التفاعل ، مثل النقر على Toggles للكشف عن التسعير البديل أو تشغيل النوافذ المنبثقة لالتقاط الرصاص. على سبيل المثال ، يمكن لموقع المطاعم استخدام الرسوم المتحركة التي يتم تشغيلها للتمرير للكشف عن قسم القائمة.

نصائح عملية للبدء

لتحقيق أقصى استفادة من تفاعلات Divi 5 ، اقترب منه بشكل استراتيجي لضمان النتائج المثلى. فيما يلي بعض النصائح لإرشادك خلال العملية:

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

ارفع موقع الويب الخاص بك بتفاعلات Divi 5

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

جاهز للبدء؟ قم بتنزيل أحدث Divi 5 alpha و Dive في التفاعلات لإنشاء النوافذ المنبثقة ، والمحتوى المتولد ، وتأثيرات التمرير ، والمزيد. ملاحظة سريعة: Divi 5 جاهز لمواقع الويب الجديدة ، لكننا لا نوصي باستخدامه في المواقع الحالية حتى الآن.

التعليق أدناه أو تواصل على قنوات التواصل الاجتماعي الخاصة بنا لمشاركة إبداعاتك معنا. نود أن نراهم!