مقدمة إلى LottieFiles وElementor
مجرد مقدمة سريعة لملفات Elementor وLottie. يعد Elementor أحد برامج إنشاء مواقع الويب الرائدة لإنشاء مواقع ويب احترافية على WordPress. يتيح Elementor للمستخدمين إنشاء مواقع ويب سريعة الاستجابة باستخدام تقنية السحب والإفلات. عنصر تم تطوير أداة إنشاء مواقع الويب بواسطة شركة Elementor Ltd، وهي شركة برمجيات إسرائيلية.
يقدم Elementor الكثير من الميزات التي قد يحتاجها مطور مواقع الويب لإنشاء مواقع ويب ذات مظهر احترافي. تعد أداة Lottie للرسوم المتحركة إحدى هذه الميزات.
Lottie هو تنسيق ملف للرسوم المتحركة الاتجاهية، وقد سُمي على اسم شارلوت رينيغر، الرائدة الألمانية في الرسوم المتحركة للصور الظلية. ملفات لوتي هي منصة مملوكة لشركة Design Barn Inc. والتي توفر ملفات Lottie عالية الجودة والتي يمكن استخدامها على مواقع الويب والتطبيقات ووسائل التواصل الاجتماعي والإعلانات وما إلى ذلك.
إذا كنت مهتمًا بمعرفة المزيد عن Lottie، فاطلع على دليل المبتدئين المجاني أدناه إلى Lottie. بحيث يمكنك أيضًا إنشاء ملفات Lottie وكسب المال من بيع رسوم Lottie المتحركة على موقع LottieFiles الإلكتروني.
دليل المبتدئين إلى لوتي – تعلم كيفية إنشاء الرسوم المتحركة لوتي.
كيفية استخدام لوتي في Elementor
يوفر Elementor تكاملاً سهلاً لرسوم Lottie المتحركة على أي موقع إلكتروني لـ Elementor في 4 خطوات فقط.
1. قم بتنزيل الرسوم المتحركة Lottie من موقع LottieFiles الإلكتروني
هناك الآلاف من المبدعين في جميع أنحاء العالم يقدمون رسوم متحركة Lottie عالية الاحترافية مجانًا على المنصة. كل ما عليك فعله هو إنشاء حساب على LottieFiles.com لتنزيل أي رسوم متحركة من اختيارك. وبصرف النظر عن الرسوم المتحركة المجانية، لديهم أيضًا رسوم متحركة متميزة يمكنك شراؤها من المنصة.
يوجد أدناه نموذج لرسوم متحركة Lottie من موقع LottieFiles الإلكتروني
2. قم بتضمين الرسوم المتحركة Lottie في مواقع Elementor
لتضمين الرسوم المتحركة Lottie، انتقل إلى محرر Elementor واسحب وأفلت الملف لوتي القطعة.
ملحوظة: Lottie Widget هي ميزة احترافية لـ Elementor، لذا إذا كنت تستخدم الإصدار المجاني من Elementor، فأنت بحاجة إلى الترقية إلى العنصر برو إصدار يصل إلى $49 سنويًا لاستخدام هذه الأداة.
إذا لم يكن لديك حساب Pro ولا تزال ترغب في تضمين بعض الرسوم المتحركة، فيمكنك نسخ كود HTML للرسوم المتحركة من منصة LottieFiles واستخدامها على موقع الويب الخاص بك باستخدام عنصر واجهة مستخدم HTML.
3. انقر على أيقونة مكتبة الوسائط - ملف الوسائط
في إعدادات Lottie Editor، انقر فوق أيقونة Media Library لتحميل رسوم Lottie المتحركة التي تم تنزيلها من موقع LottieFiles الإلكتروني.
هنا لديك أيضًا خيار استخدام عنوان URL لرسوم Lottie المتحركة، بدلاً من تحميل ملف الوسائط. في هذه الحالة، يتعين عليك تحديد خيار "الرابط الخارجي" بدلاً من "ملف الوسائط" من القائمة المنسدلة "المصدر".
4. قم بتحميل الرسوم المتحركة Lottie إلى مكتبة الوسائط
وأخيرًا، تحتاج إلى تحميل الرسوم المتحركة من جهاز الكمبيوتر الخاص بك إلى مكتبة الوسائط الخاصة بالموقع. هذا كل شيء، الآن لديك رسوم متحركة رائعة المظهر على موقع الويب الخاص بك.
أسباب عدم ظهور الرسوم المتحركة Lottie
في بعض الأحيان، تواجه تحديات معينة مع عدم ظهور الرسوم المتحركة Lottie على مواقع الويب الخاصة بك حتى لو كنت قد اتبعت جميع الخطوات الصحيحة.
فيما يلي بعض أسباب عدم ظهور رسوم Lottie المتحركة.
1. لا تظهر الرسوم المتحركة لوتي بسبب تعارض البرنامج المساعد
من الممكن أن تكون رسوم Lottie المتحركة مرئية عند تسجيل الدخول كمسؤول ولكنها لن تظهر على موقع الويب عند تسجيل الخروج. قد يكون هذا في الغالب بسبب بعض تعارضات المكونات الإضافية أو CSS على موقع الويب.
في هذه الحالة، يتعين عليك اختباره عن طريق إلغاء تنشيط جميع المكونات الإضافية الموجودة على موقع الويب مؤقتًا باستثناء Elementor وElementor Pro.
ثم حاول تحميل موقع الويب في نافذة التصفح المتخفي الجديدة أو في متصفح مختلف، وتأكد من مسح ذاكرة التخزين المؤقت لموقع الويب ومن الأفضل تجاوز أي أنظمة ذاكرة تخزين مؤقت تستخدمها مؤقتًا مثل Cloudflare وما إلى ذلك.
إذا كان بإمكانك رؤية رسوم Lottie المتحركة الآن على موقع الويب الخاص بك، فيمكنك التأكد من أن بعض المكونات الإضافية الخاصة بك تتعارض مع رسوم Lottie المتحركة. للتعرف على المكون الإضافي الذي يسبب المشكلة، يتعين عليك البدء في تنشيط المكون الإضافي واحدًا تلو الآخر وتحديث موقع الويب بعد تنشيط كل مكون إضافي للتحقق من استمرار ظهور الرسوم المتحركة.
لقد واجهت مشكلة مماثلة مع أحد مواقع الويب التي أديرها واكتشفت أن هناك مكونين إضافيين يتعارضان مع رسوم Lottie المتحركة.
- عضو نهائي يتعارض البرنامج المساعد مع أداة الرسوم المتحركة Lottie على Elementor. يعد Ultimate Member Pugin أحد المكونات الإضافية المفضلة لدي لموقع الويب الخاص بالعضوية، ولكن اعتبارًا من الإصدار 2.3.1، فإنه يتعارض مع أداة Lottie.
- الثاني هو البرنامج المساعد لطلب عرض الأسعار لـ WooCommerce، طلب عرض أسعار NP ووكومرس و طلب عرض أسعار NP WooCommerce Plus. يعد هذا مكونًا إضافيًا قويًا ومرنًا للغاية يمكّن عملائك من إرسال طلب عرض أسعار بسهولة إلى متجر WooCommerce الخاص بك.
وفقًا للاختبار الذي أجريته اعتبارًا من الإصدار 1.9.1 (طلب عرض أسعار NP WooCommerce) والإصدار 1.3.294 (طلب عرض أسعار NP WooCommerce Plus) يتعارض هذا البرنامج الإضافي مع Lottie Widget.
وبالمثل، ستحتاج إلى اختبار كل مكون إضافي وتحديد المكون الإضافي الذي يتوقف عن عرض رسوم Lottie المتحركة على موقع الويب.
بمجرد تحديد المكون الإضافي الذي يسبب المشكلة، يمكنك إبلاغ منشئ البرنامج الإضافي بذلك حتى يتمكنوا من التحقيق في المشكلة. يمكنك إخطار دعم Elementor بذلك أيضًا. لسوء الحظ، قد نحتاج إلى الانتظار حتى يتم حل المشكلة (إذا قاموا بإصلاحها) أو البحث عن حل بديل.
2. لا تظهر الرسوم المتحركة Lottie بسبب HTTP / HTTPS
بقدر ما لاحظت أن الرسوم المتحركة Lottie تعمل بشكل جيد مع مواقع https، لذا تأكد من استخدام موقع https.
إذا فشلت في تحميل ملف Lottie للرسوم المتحركة JSON بسبب مشكلة http، فيمكنك بدلاً من ذلك استخدام خيار الرابط الخارجي واستخدام عنوان URL للرسوم المتحركة من موقع LottieFiles على الويب.
ومع ذلك، أود أن أقترح استخدام موقع https وتحميل ملف الوسائط. إن حماية موقع الويب الخاص بك باستخدام شهادات SSL ليست باهظة الثمن، ويمكنك الحصول عليها شهادات SSL بأقل من $6 سنويًا. يمكنك أيضًا الاتصال بموفر الاستضافة الخاص بك لتثبيت SSL والتحويل إلى https.
3. الرسوم المتحركة Lottie لا تعمل بسبب ملف JSON التالف
يمكن أن يحدث أيضًا في بعض الأحيان أن يكون الملف الذي تم تنزيله من موقع الويب تالفًا. في هذه الحالة، أبلغ منشئ المحتوى بالمشكلة حتى يتمكن من حل المشكلة. ابحث دائمًا عن الرسوم المتحركة التي تحظى بالكثير من التقييمات والإعجابات الجيدة، حتى تقل فرص تنزيل الملفات التالفة.
الختام: 3 مشاكل مع لوتي
هذه بعض المشاكل الشائعة في ملفات Lottie في Elementor والتي واجهتها حتى الآن. إذا كنت تعرف أي مشكلات أو مكونات إضافية أخرى، فيرجى التعليق أدناه حتى يتمكن شخص آخر من مواجهة مشكلات مع ملفات Lottie في Elementor.
إذا كنت مهتمًا أيضًا بتطوير مهارات تطوير موقع الويب الخاص بك باستخدام Elementor، فأنا بقوة أنصحك بالانضمام إلى دورة WordPress Elementor الكاملة أدناه.
سيكون استثمارا يستحق! و الآن يمكنك التسجيل مع ما يصل 50% معطلة ⇊
كل ما تحتاجه هو جهاز كمبيوتر متصل بالإنترنت ومتصفح.
لا توجد مهارات ترميز أو برمجة مطلوبة
3 Responses
مرحبًا، لقد رأيت تعليقك في منتدى دعم الأعضاء النهائي.
هل وجدت حلاً للصراع بين لوتي وأم؟
مرحبًا، لقد تحققت من مقالتك، فهي مفيدة في حالة Elementor مع تضمين لوتي عادي ولكني عالق في دائرة منتج WPBakery. لقد استخدمت ردود فعل WP لأسلوب المنتجات. لقد عملت بشكل جيد مع المواضع العادية ولكنها لا تعمل في الرف الدائري الديناميكي.
هل يمكنك أن تقترح علي حلاً أفضل؟
شكرًا
- مزايده
مرحبًا! يوجد موقع ويب elementor هذا يحتوي على رسوم متحركة كبيرة في أسفل الصفحة، مباشرة بعد الخريطة، ولكنه غير مرئي على بعض أجهزة iPhone، مثل iPhone 12pro أو iPhone 8 الخاص بي أيضًا... إنه أمر غريب حقًا... هل لديك أي فكرة عن السبب ؟
ilbirraiuolo.it