كيفية إضافة تأثيرات الرسوم المتحركة إلى الأقسام / الصفوف في Divi

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

ومع ذلك ، إذا كنت تبحث عن طريقة لإضافة تأثيرات الرسوم المتحركة هذه إلى وحدات أو أقسام أو صفوف أخرى من موقع الويب الخاص بك ، فهذا ممكن أيضًا. في هذا المنشور ، سنوضح لك كيفية القيام بذلك بالضبط. إلى جانب توضيح كيفية إضافة تأثيرات الرسوم المتحركة المضمنة ، سنوضح لك أيضًا كيفية دمج wow.js و animate.css في موقع Divi الخاص بك.

في نهاية هذا المنشور ، ستتمكن من إضافة تأثيرات لطيفة إلى كل من صفوفك وأقسامك. لمساعدتك في تصور العملية ، نود مشاركة المثال التالي (الذي سنوضح لك كيفية تحقيقه في نهاية هذا المنشور):

الرسوم المتحركة Divi أو Wow.js & Animate.css؟

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

متى تستخدم الرسوم المتحركة Divi

هناك خمسة تأثيرات متحركة متاحة داخل Divi يمكنك استخدامها:

• التلاشي
• الشريحة السفلية
• الشريحة اليسرى
• الشريحة الصحيحة للداخل
• الشريحة العلوية للداخل

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

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

متى تستخدم Wow.js & Animate.css

يعد دمج wow.js & animate.css في موقع الويب الخاص بك أمرًا قد يعجبك حقًا بسبب الخيارات العديدة التي لديك. هناك 14 فئة من تأثيرات الرسوم المتحركة تحتوي على تأثيرات مختلفة ذات صلة بهذه الفئة. الفئات التي يمكنك الاختيار من بينها هي التالية:

• طالبي الانتباه
• المداخل المرتدة
• مخارج الارتداد
• مداخل باهتة
• مخارج يتلاشى
• زعانف
• سرعة الضوء
• مداخل دوارة
• مخارج متناوبة
• مداخل منزلقة
• انزلاق مخارج
• مداخل التكبير
• التكبير يخرج
• العروض الخاصة

يمكنك مشاهدة جميع التأثيرات المتوفرة من خلال النقر على الرابط التالي. تظهر تأثيرات الحركة هذه أيضًا عند التمرير.

كيفية إضافة تأثيرات الرسوم المتحركة إلى الأقسام / الصفوف في Divi

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

استخدم تأثيرات الرسوم المتحركة المضمنة

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

في مثالنا ، سنضيف تأثيرات الرسوم المتحركة إلى القسم الأول والصف الأول من صفحتنا. إضافة الرسوم المتحركة للقسم أو الصف في كلتا الحالتين هي نفسها. فيما يلي أكواد فئة CSS لتأثيرات الرسوم المتحركة المختلفة:

• فئة Fade-in CSS: et-waypoint et_pb_animation_fade_in
• فئة CSS للشريحة السفلية: et-waypoint et_pb_animation_bottom
• فئة CSS للشريحة اليسرى: et-waypoint et_pb_animation_left
• الشريحة اليمنى: فئة CSS: et-waypoint et_pb_animation_right
• أعلى فئة CSS للشرائح: et-waypoint et_pb_animation_top

أضف تأثير الرسوم المتحركة إلى الصف

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

إضافة تأثير الرسوم المتحركة إلى القسم

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

النتيجة

بمجرد إضافة التأثيرات إلى القسم والصف الخاصين بك ، سترى النتيجة التالية في مكانها الصحيح:

أضف Wow.js & Animate.css إلى مظهر طفلك

في هذا الجزء التالي ، سوف نوضح لك كيفية إضافة wow.js و animate.css إلى موقع WordPress الخاص بك وكيفية استخدامه في جميع أنحاء موضوع Divi الخاص بك.

بادئ ذي بدء ، أود أن أنسب الفضل إلى Jeremy Cookson في هذا المنشور حول كيفية دمج wow.js و animate.css في WordPress. في هذا الجزء من المنشور ، سنوضح لك بالضبط كيفية إجراء التكامل لموقع WordPress على الويب الذي تم إنشاؤه باستخدام سمة Divi.

لإضافة wow.js & animate.css إلى صفحة الويب الخاصة بك ، سيتعين عليك استخدام سمة فرعية على موقع الويب الخاص بك. إذا كنت تتساءل عن كيفية إنشاء سمة فرعية ، فراجع هذا المنشور. بعد إنشاء الملفات الرئيسية للقالب الفرعي الخاص بك ، ستحتاج إلى إضافة ملفين آخرين لإكمال المظهر الفرعي الخاص بك بتأثيرات الرسوم المتحركة.

قم بتنزيل الملفات وإضافتها إلى موضوع طفلك

اجعل موضوع طفلك في متناول اليد وقم بتنزيل الملفين التاليين في نفس الوقت من خلال النقر على الرابطين التاليين:

• animate.min.css
• wow.min.js

بمجرد تنزيل الملفين ، قم بإنشاء مجلدات فرعية داخل القالب الفرعي الخاص بك. قم بتسمية أحدهما CSS والآخر JS. بعد ذلك ، ضع animate.min.css في مجلد CSS و wow.min.js في مجلد JS.

تحميل موضوع الطفل

الشيء التالي الذي ستحتاج إلى القيام به هو تحميل وتنشيط السمة الفرعية التي قمت للتو بإضافة wow.js و animate.css إليها. انتقل إلى لوحة معلومات WordPress> المظهر> السمات> وانقر على "إضافة جديد" في الجزء العلوي من الصفحة.

أضف كود PHP إلى ملف Functions.php الخاص بك

بمجرد تحميل السمة الفرعية ، أضف الأسطر التالية من كود PHP إلى ملف function.php الخاص بالقالب الفرعي الخاص بك:

// * Enqueue Animate.CSS و WOW.js
add_action ('wp_enqueue_scripts'، 'sk_enqueue_scripts') ؛
الوظيفة sk_enqueue_scripts () {
wp_enqueue_style ('animate'، get_stylesheet_directory_uri (). '/css/animate.min.css') ،
wp_enqueue_script ('wow'، get_stylesheet_directory_uri (). '/js/wow.min.js'، array ()، ”، true)؛
}
// * Enqueue script لتفعيل WOW.js
add_action ('wp_enqueue_scripts'، 'sk_wow_init_in_footer') ؛
function sk_wow_init_in_footer () {add_action ('print_footer_scripts'، 'wow_init')؛}
// * إضافة JavaScript قبل </body> الوظيفة wow_init () {؟>
<script type = ”text / javascript”>
جديد WOW (). init ()؛ </script> <؟ php}

أضف الرسوم المتحركة إلى الصفوف والأقسام

نظام إضافة تأثيرات wow.js و animate.css إلى الصفوف والأقسام هو نفس نظام تأثيرات الرسوم المتحركة Divi. سيتعين عليك فتح إعدادات الصف أو القسم الذي تريد إضافة تأثير الحركة إليه. بعد ذلك ، يمكنك وضع فئة CSS المعينة للرسوم المتحركة في حقل CSS Class في القسم أو الصف الخاص بك.

أضف الرسوم المتحركة إلى الصف

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

نتيجة

عندما تقوم بإضافة فئة CSS ومعاينة الصفحة التي تعمل عليها ، يجب أن تكون قد حققت النتيجة التالية:

إضافة الرسوم المتحركة إلى القسم

تنطبق نفس الطريقة على إضافة تأثير الحركة إلى قسم. انتقل إلى علامة التبويب خيارات متقدمة وأضف فئة CSS "wow bounceInDown" إلى حقل CSS Class في القسم الخاص بك.

نتيجة

إذا اتبعت جميع الخطوات بشكل صحيح ، يجب أن تحقق النتيجة التالية:

خيارات متقدمة

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

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

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

الآن ، قم بإضافة فئة تأخير CSS إلى إعدادات الصفحة التي تعمل عليها بالنقر فوق الزر التالي:

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

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

نتيجة

بمجرد إضافة وقت التأخير ، يجب أن تبدو النتيجة كما يلي:

افكار اخيرة

في هذا المنشور ، أوضحنا لك كيفية إضافة تأثيرات الرسوم المتحركة إلى موقع Divi الخاص بك. قدمنا ​​لك احتمالين. يوضح لك الأول كيفية استخدام تأثيرات الرسوم المتحركة القياسية التي توفرها Divi. يتيح لك الاحتمال الثاني دمج wow.js و animate.css. يمكن أن يساعدك استخدام تأثيرات الرسوم المتحركة على موقع الويب الخاص بك في التأكيد على المحتوى الذي تريد مشاركته مع زوارك. إلى جانب ذلك ، يبدو رائعًا أيضًا. إذا كان لديك أي أسئلة أو اقتراحات. تأكد من ترك تعليق في قسم التعليقات أدناه.

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة Stocker top / shutterstock.com