كيفية إضافة الرسوم المتحركة لوتي في Elementor (3 طرق سهلة)

أصبحت الرسوم المتحركة جزءًا لا غنى عنه في تصميم الويب الحديث. يتم استخدامها ليس فقط لجذب انتباه الزوار ولكن أيضًا لتقديم رسائل قابلة للتشغيل بطرق جذابة. لطالما استوفت ملفات GIF و JPEG و PNG و Short Video Clips المتطلبات الرسومية لمواقع الويب.

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

لقد كانت Lottie Animation طريقة ممتازة للتغلب على هذه الضغوط. لأنها سريعة ورائعة في توصيل الرسائل في أسرع فترة زمنية. ما يمكن أن تقدمه رسوم متحركة لوتي مدتها ثلاث ثوانٍ يتطلب 5-10 صور للقيام بنفس الشيء.

Elementor هي أداة قوية لإنشاء الصفحات يمكنك من خلالها إضافة رسوم Lottie المتحركة إلى مواقع الويب الخاصة بك بطرق مبسطة. سنشرح ثلاث طرق لكيفية إضافة Lottie animé في مواقع Elementor في هذه المقالة. قبل ذلك ، سنغطي بعض الأسئلة الأساسية. استمر في القراءة حتى النهاية!

جدول المحتويات

• ما هي الرسوم المتحركة لوتي ولماذا يجب عليك استخدامها؟
• كيفية البحث عن الرسوم المتحركة المجانية لوتي؟
• كيفية إضافة Lottie Animation في موقع Elementor: دليل خطوة بخطوة
• نصائح إضافية: أشياء يجب مراعاتها أثناء إضافة Lottie Animation على موقع ويب
• أسئلة وأجوبة حول كيفية إضافة Lottie Animations في Elementor
• ملاحظات أخيرة حول كيفية إضافة Lottie Animation في Elementor

ما هي الرسوم المتحركة لوتي ولماذا يجب عليك استخدامها؟

Lottie animé هو ملف يستند إلى JSON (JavaScript Object Notion) يمكن تشغيله على التطبيقات وصفحات الويب من أي نوع. الرسوم المتحركة Lottie خفيفة الوزن وسريعة وسلسة بطبيعتها لأنها مدمجة في تنسيق ملف JavaScript. يمكنك توسيع نطاقها أو تقليلها دون مواجهة أي مشكلات تتعلق بالبكسل.

يوجد أدناه مثال على الرسوم المتحركة Lottie.

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

ما هي فوائد استخدام الرسوم المتحركة Lottie؟

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

أ. حجم الملف الصغير

تكون ملفات الرسوم المتحركة Lottie أصغر بكثير من تنسيقات الفيديو و GIF وتنسيقات الملفات الأخرى. يمكنك بسهولة إنشاء ملف رسوم متحركة لوتي عالي الرسوم مدته ثلاث ثوانٍ ضمن 200 كيلو بايت. لكن من الصعب فعل الشيء نفسه في تنسيقات الفيديو و GIF.

ب. لا تفقد الجودة أبدًا

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

ج. لا تبطئ موقع الويب أبدًا

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

د. يساعد على الزناد التحويل

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

ه. مكتبة مفتوحة المصدر متاحة

www.LottieFiles.com هي مكتبة رائعة مفتوحة المصدر حيث ستجد الكثير من ملفات Lottie الجاهزة المتاحة. العديد من المصممين يجعلون هذه المكتبة مليئة بالحيلة من خلال المساهمة بمزيد من الرسوم المتحركة لوتي يوميًا تقريبًا.

كيفية البحث عن الرسوم المتحركة المجانية لوتي؟

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

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

• انتقل إلى www.LottieFiles.com.
• خذ المؤشر تحت Discover .
• من القائمة المنسدلة ، انقر فوق رسوم متحركة جاهزة للاستخدام .

ملاحظة: يمكنك شراء رسوم متحركة لوتي متميزة من السوق.

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

قم بجزء الاستكشاف بنفسك.

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

كيفية إضافة Lottie Animation في موقع Elementor: دليل خطوة بخطوة

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

الآن ، سنساعدك في استكشاف ثلاث طرق سهلة لإضافة الرسوم المتحركة Lottie إلى موقع الويب الخاص بك باستخدام المكون الإضافي لـ Elementor page builder. هيا بنا نبدأ.

الطريقة 01: كيفية إضافة Lottie Animation في موقع Elementor باستخدام الرمز القصير

الكود القصير هو عنصر واجهة مستخدم مجاني للمكوِّن الإضافي لـ Elementor page builder. ما عليك سوى الإصدار Lite من هذا المكون الإضافي لاستخدام الأداة. قم بتنزيله وتثبيته من الرابط أدناه.

• العنصر

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

الخطوة 01: قم بسحب وإسقاط أداة الرمز القصير على لوحة Elementor Canvas

افتح المنشور أو الصفحة حيث تريد إظهار Lottie Animations باستخدام Elementor. افعل الأشياء التالية بعد ذلك.

• قم بسحب وإسقاط عنصر واجهة المستخدم Shortcode في المنطقة التي اخترتها.

الخطوة 02: انسخ كود iFrame

• ارجع إلى ملف الرسوم المتحركة الذي حددته من LottieFiles.com.
• قم بالتمرير لأسفل الصفحة قليلاً.
• انسخ كود iFrame من المنطقة المحددة التي أظهرناها في الصورة أدناه.

الخطوة 03: الصق كود iFrame في مربع الرمز القصير

• انتقل إلى صفحة Elementor الخاصة بك.
• الصق كود iFrame في مربع الرمز القصير في لوحة العناصر.

سترى الرسوم المتحركة تعمل على Elementor Canvas. لكن مشكلة استخدام أداة Shortcode لإضافة رسوم Lottie المتحركة هي أنك لن تحصل على أي خيارات تخصيص. لا يمكنك توسيع نطاقه أو خفضه كما يحلو لك.

كلما قمت بالتكبير ، كلما تم تشويش الصورة. سيكون لها أيضًا مشكلات في البكسل. من الأفضل استخدام أي من الطريقتين التاليتين.

الطريقة 02: كيفية إضافة Lottie Animation في موقع Elementor من خلال رابط خارجي

ستتطلب هذه الطريقة أداة Lottie المتوفرة في Elementor Pro. هذا يعني أنه يجب أن يكون لديك Elementor و Elementor Pro مثبتان على موقع WordPress الخاص بك. قم بتنزيلها من الروابط التالية.

• العنصر
• إليمينتور برو

بمجرد الانتهاء من جزء التثبيت ، ابدأ باتباع الخطوات التالية.

الخطوة 01: قم بسحب وإسقاط Lottie Widget

اكتب Lottie في شريط البحث Elementor. ستظهر القطعة أدناه.

• قم بسحب الأداة وإسقاطها في المنطقة المحددة من Elementor Canvas.

الخطوة 02: انسخ عنوان URL للرسوم المتحركة Lottie

• ارجع إلى ملف الرسوم المتحركة الذي حددته من LottieFiles.com.
• انسخ عنوان URL للرسوم المتحركة Lottie من المنطقة المحددة الموضحة في الصورة أدناه.

الخطوة 03: الصق عنوان URL للرسوم المتحركة Lottie في Elementor

• انتقل إلى صفحة Elementor الخاصة بك.
• انقر فوق القائمة المنسدلة بجوار المصدر .
• حدد عنوان URL خارجي .
• الصق عنوان URL في مربع URL الخارجي .

سترى الرسوم المتحركة تعمل على لوحة Elementor Canvas.

الخطوة 04: ضبط الإعدادات

• انقر فوق الإعدادات .
• ستحصل على الكثير من الخيارات المفتوحة هناك.

سيسمح خيار Trigger بالتعيين عند ظهور الرسوم المتحركة ، سواء عند النقر أو التمرير أو التمرير أو نقطة العرض. ستعمل التكرار على تمكين الرسوم المتحركة من الظهور بشكل متكرر. استكشف الخيارات الباقية بنفسك.

الخطوة الخامسة: إضفاء الطابع الشخصي على الرسوم المتحركة لوتي

• انتقل إلى Style> Lottie على لوحة Elementor.

يمكنك استخدام الخيارات المتاحة لتغيير مرشحات Width و Max Width و Hover و Opacity و CSS كما تريد.

الطريقة 03: كيفية إضافة Lottie Animation في Elementor Site من خلال Media File

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

الخطوة 01: قم بسحب وإسقاط Lottie Widget

ارجع إلى صفحة العنصر الخاصة بك.

• قم بسحب وإسقاط أداة Lottie في المنطقة التي اخترتها كما أظهرنا من قبل.

الخطوة 02: قم بتنزيل ملف الرسوم المتحركة Lottie JSON

• انتقل إلى ملف الرسوم المتحركة Lottie الذي حددته.
• انقر فوق الزر تنزيل .
• انقر فوق Lottie JSON .

سيتم تنزيل ملف الرسوم المتحركة على محرك الأقراص الخاص بك.

الخطوة 03: قم بتحميل ملف الرسوم المتحركة Lottie من خلال ملف الوسائط

• حدد ملف الوسائط من القائمة المنسدلة بجوار المصدر.
• انقر فوق أيقونة التحميل.

• حدد ملف الرسوم المتحركة من محرك الأقراص حيث قمت بتنزيله.

• سترى ملف الرسوم المتحركة Lottie قيد التشغيل على لوحة Elementor.

وبالتالي يمكنك إضافة الرسوم المتحركة Lottie إلى موقع WordPress الخاص بك باستخدام المكون الإضافي لـ Elementor page builder. الأمر متروك لك الآن بشأن الطريقة التي تريد استخدامها.

نصائح إضافية: أشياء يجب مراعاتها أثناء إضافة Lottie Animation على موقع ويب

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

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

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

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

ب. استخدم حيث يمكن أن تؤدي إلى التحويلات

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

• قسم البطل
• نموذج الاتصال
• مشاركه إجتماعيه
• معارض الصور وعرض الشرائح
• قسم شكرا لك

ج. الحفاظ على تناسق الألوان بين موقع الويب الخاص بك والرسوم المتحركة

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

د. عرض الرسوم المتحركة في تخطيطات مثالية (الطول والعرض)

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

أسئلة وأجوبة حول كيفية إضافة Lottie Animations في Elementor

الآن ، سنغطي إجابات بعض الأسئلة الأكثر شيوعًا حول موضوع كيفية إضافة رسوم Lottie المتحركة في مواقع Elementor.

ملاحظات أخيرة حول كيفية إضافة Lottie Animation في Elementor

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

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

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

آمل أن تكون قد استمتعت بهذا المقال. اشترك معنا إذا كنت تحب تلقي المزيد من المقالات الشيقة مثل هذه وتتبع قنواتنا على Facebook و Twitter للحصول على تحديثات منتظمة.