كيفية استخدام الرسوم المتحركة Lottie في WordPress

يعد دمج الرسوم المتحركة في موقع الويب الخاص بك على WordPress طريقة رائعة لإضفاء الحيوية على صفحة ويب متعبة والحفاظ على مشاركة زوارك طوال فترة وجودهم على موقعك. طريقة سهلة وفعالة للقيام بذلك هي استخدام الرسوم المتحركة lottie: رسوم متحركة عالية الجودة وخفيفة الوزن.

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

هناك عدة طرق مختلفة لإنشاء هذه الرسوم المتحركة وإضافتها بسلاسة إلى موقع WordPress الخاص بك.

ما هي الرسوم المتحركة لوتي؟

Lottie هي مكتبة لأنظمة Android و iOS و Web و Windows تعرض الرسوم المتحركة لـ After Effects وتسمح بتصدير بيانات الرسوم المتحركة كملفات JSON بدلاً من نوع ملف صورة نموذجي. باختصار ، يمكنهم بسهولة استبدال الأصول الثابتة بشيء ممتع وجذاب.

تم تقديم هذا الحل مفتوح المصدر لأول مرة من قبل الفريق في AirBnB ، لكنه سرعان ما يكتسب شعبية بين المصممين ورسامي الرسوم المتحركة عبر الأسواق المختلفة. تتمثل إحدى الميزات الكبيرة لاستخدام الرسوم المتحركة lottie في موقع WordPress الخاص بك في أن حجم الملف صغير جدًا مقارنةً بملفات GIF المتحركة أو ملفات mp4. بالإضافة إلى ذلك ، يسمح تنسيق الرسوم المتحركة المرن للمتصفح بالتعامل مع العرض.

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

إنشاء الرسوم المتحركة لوتي

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

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

مخصص لوتي الرسوم المتحركة

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

تستخدم الكثير من الرسوم المتحركة lottie أسلوبًا توضيحيًا ، لذلك ستحتاج إلى تحديد ما إذا كان هذا يتناسب مع العلامة التجارية لموقع الويب وأسلوبه قبل المضي قدمًا معه. بمجرد أن تقرر العناصر الرسومية وتأثيرات الرسوم المتحركة ، سيحتاج صانع الرسوم المتحركة إلى إنشاء الرسوم المتحركة المخصصة في Adobe After Effects وتصديرها كرسوم متحركة ، باستخدام ملحق After Effects. سيؤدي ذلك إلى عرض رسوم متحركة عالية الجودة يمكن تنفيذها بسهولة في موقعك.

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

الرسوم المتحركة الأسهم لوتي

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

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

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

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

إضافة أنيميشن لوتي في ووردبريس

إنها عملية سلسة جدًا لإضافة الرسوم المتحركة lottie إلى موقع WordPress على الويب. يمكنك إما استخدام عنصر واجهة مستخدم HTML مخصص لإضافة رمز الرسوم المتحركة إلى الموقع ، أو استخدام مكون WordPress الإضافي لإضافة الرسوم المتحركة.

أداة HTML مخصصة

يمكن لمطور WordPress الماهر استخدام مكتبة JavaScript صغيرة وأداة HTML مخصصة لإضافة الرسوم المتحركة lottie إلى الموقع. ستبدأ بتحميل البرنامج النصي lottie.min.js مع ملف الرسوم المتحركة .json وأي أصول صور إلى مجلد السمة. ثم هناك مقتطف صغير من JS لإضافته إلى عنصر واجهة المستخدم لبدء البرنامج النصي Lottie ، والذي يقوم بتحميل ملف الرسوم المتحركة .json في حاوية div المطلوبة.

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

تتطلب معظم المكونات الإضافية لإضافة الرسوم المتحركة lottie دون مساعدة المطور منشئ صفحة Elementor ، لذلك يميل نهج HTML المخصص إلى العمل بشكل أفضل إذا كنت تستخدم سمة أو مكونًا إضافيًا لمنشئ الصفحة بخلاف Elementor.

تعد إضافة عناصر إلى الموقع بدون مكون إضافي أفضل أيضًا لسرعة موقع الويب وأدائه نظرًا لأن إضافة المزيد والمزيد من المكونات الإضافية سيؤثر على الموقع.

خيارات البرنامج المساعد WordPress

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

عنصر برو - لوتي القطعة

Elementor هو أداة إنشاء صفحات لـ WordPress مع ميزات السحب والإفلات ، ويتضمن ترخيص Elementor Pro أداة Lottie. باستخدام هذه الأداة ، يمكنك إضافة رسوم متحركة لوتي بدون رمز وتخصيص أبعاد وسلوك الرسوم المتحركة. يتصل هذا المكون الإضافي بشكل ملائم بموقع ويب مخزون Lottie Files ، بحيث يمكنك بسهولة تحديد خيارات الرسوم المتحركة للمخزون مباشرة من الموقع أو تحميل إبداعاتك الخاصة.

كتل جوتنبرج - الإضافات النهائية

إذا كنت تستخدم محرر Gutenberg على موقعك ، فيمكن أن يكون المكون الإضافي Ultimate Addon لـ Gutenberg خيارًا جيدًا لإضافة رسوم متحركة lottie بمساعدة مكون إضافي. كان محرر Gutenberg جزءًا من نواة WordPress منذ إصدار WordPress 5.0 ، ولكنه ليس الأكثر شيوعًا. لا تزال العديد من المواقع تستخدم المحرر الكلاسيكي أو أدوات إنشاء الصفحات الأخرى مثل Site Origin أو Elementor أو Beaver Builder ، على سبيل المثال لا الحصر.

ومع ذلك ، فهو خيار قابل للتطبيق. يعد Ultimate Addons for Gutenberg مكونًا إضافيًا تمت مراجعته جيدًا ويقدم الكثير من الميزات الرائعة ، بما في ذلك خيار إضافة الرسوم المتحركة lottie والتحكم في الخيارات المتقدمة ، مثل سرعة الرسوم المتحركة والمشغل.

إضافات WordPress الإضافية

هناك مكونات إضافية متاحة في دليل WordPress لإضافة وتخصيص الرسوم المتحركة lottie. ضع في اعتبارك أن بعض المكونات الإضافية تتطلب إنشاء موقعك واستخدامه Elementor ، مثل Premium Addons for Elementor و Elementskit Addon for Elementor. هناك أيضًا مكونات إضافية مخصصة لموضوعات WordPress والمنشآت الأخرى ، مثل سمة Divi أو كتل Gutenberg.

حان الوقت للحصول على الرسوم المتحركة

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

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