هل ترغب في إضافة الرسوم المتحركة Lottie بتنسيق Elementor?
منذ الإصدار 2.10.0 ، إليمنتور برو يدعم الرسوم المتحركة Lottie ، مما يسمح لك بإضافة رسوم متحركة خفيفة إلى صفحتك. قبل التحديث ، يمكنك تطبيق تأثيرات الرسوم المتحركة على عنصر واجهة مستخدم من الخيار تأثيرات الحركة تحت علامة التبويب متقدم.
ومع ذلك ، يعمل لوتي بطريقة مختلفة. Lottie هو تنسيق رسوم متحركة ، يشبه إلى حد كبير GIF ، لذا يعد ملف Lottie شرطًا أساسيًا لإضافة الرسوم المتحركة Lottie إلى Elementor.
في Elementor، يمكنك إضافة ملف Lottie باستخدام عنصر واجهة مستخدم Lottie. لذلك، يمكنك أيضًا تطبيق تأثيرات الحركة على ملف Lottie الخاص بك. على سبيل المثال، يمكنك تطبيق تأثير التمرير الأفقي لجعل Lottie الخاص بك يتحرك أفقيًا - إما في الاتجاه الأيمن أو في الاتجاه الأيسر - عند تمرير الصفحة. هذا مثال.
يمكنك مشاهدة ملف الرسوم المتحركة الأصلي أعلاه هنا. في ملف Lottie الأصلي ، يظل الدراج - ودراجته - في نفس الموضع عند تمرير الصفحة. لجعلها تتحرك لليمين عند تمرير الصفحة لأسفل ولليسار عند تمرير الصفحة لأعلى ، يمكنك استخدام تأثير الحركة المدمج في Elementor.
إذا كنت جديدًا في Elementor ، فراجع دليلنا حول: كيفية تثبيت Elementor على WordPress
ما هو Lottie وأين يمكن الحصول على ملف Lottie؟
كما ذكرنا سابقًا ، لوتي هو تنسيق رسوم متحركة. إنه تنسيق رسوم متحركة مبني على JSON طوره مهندسو Airbnb. يمكنك قراءة المزيد عن قصة لوتي على الصفحة cette.
أكبر فائدة لاعتماد Lottie على جهازك موقع انترنت هل هذا لك موقع انترنت سيكون أخف بكثير لأن ملف Lottie أصغر بكثير من تنسيقات الرسوم المتحركة الأخرى ، بجودة بصرية واضحة. يمكنك أيضًا تغيير حجم ملف Lottie دون كسر وحدات البكسل.
يعد Adobe After Effects إحدى الأدوات التي يمكنك استخدامها لإنشاء ملف Lottie. يمكنك أيضًا الحصول على ملفات Lottie مجانًا ملفات لوتي.
يرجى ملاحظة أن Lottie وLottieFiles شيئان مختلفان. يعد Lottie مرة أخرى — — تنسيقًا للرسوم المتحركة، في حين أن LottieFiles هو تنسيق موقع انترنت الذي يقدم ملفات Lottie.
كيفية إضافة الرسوم المتحركة لوتي في Elementor
قبل البدء في إضافة الرسوم المتحركة Lottie في Elementor ، تأكد من ترقية Elementor Pro. بمجرد أن تكون جاهزًا ، قم بإنشاء صفحة جديدة وتحريرها باستخدام Elementor. أو تعديل واحدة موجودة.
في محرر Elementor ، اسحب أداة Lottie إلى منطقة التحرير
اذهب إلى اللوحة اليسرى. على الكتلة لوتي تحت علامة التبويب محتويات، حدد المصدر. إذا اخترت ملف وسائط، ما عليك سوى تحميل ملف Lottie (ملف JSON) بالنقر فوق أيقونة التحميل.
اقرأ أيضا: كيفية تعيين حجم مخصص لأيقونة زر العنصر
يمكنك بعد ذلك ضبط المحاذاة وإضافة عنوان URL مخصص.
إذا كنت تريد استخدام ملف Lottie مستضاف على مصدر تابع لجهة خارجية ، فحدد الخيار URL خارجي والصق عنوان URL لملف Lottie الذي تريد استخدامه في الحقل المتاح.
ثم افتح الكتلة تعديلاة تحت علامة التبويب محتويات للتحكم في سلوك الرسوم المتحركة. أولاً ، حدد نوع المشغل لتشغيل الرسوم المتحركة لوتي. يمكنك الاختيار من بين 4 أنواع من المشغلات:
- منفذ العرض: يبدأ تشغيل الرسوم المتحركة Lottie بناءً على النافذة العلوية (المنطقة المرئية من شاشة الجهاز).
- انقر فوق: يبدأ تشغيل الرسوم المتحركة Lottie عندما أ زائر انقر عليه.
- على التحويم: يبدأ تشغيل الرسوم المتحركة Lottie عندما أ زائر يحوم الماوس له.
- عند التمرير: يتم تشغيل الرسوم المتحركة Lottie فقط عند تمرير الصفحة.
يمكنك أيضًا تعيين خيار التمكين أنشوطة، تفعيل الخيار يعكس، اضبط نقطة البداية / النهاية واضبط سرعة التشغيل.
هناك أيضًا خيار لتمكين Lazyload.
لتعيين عرض ملف Lottie الخاص بك ، يمكنك الانتقال إلى علامة التبويب الطراز. في علامة التبويب هذه ، يمكنك ضبط العرض بالإضافة إلى إضافة عامل تصفية CSS كما هو الحال عند العمل مع أداة الصورة.
إذا كنت تريد تطبيق حركة أفقية مثل تلك الموجودة في المثال أعلاه ، فانتقل إلى علامة التبويب متقدم. كتلة مفتوحة تأثيرات الحركة وتنشيط تأثيرات التمرير.
انقر فوق الخيار التمرير الأفقي. اضبط الاتجاه والسرعة والنافذة.
وفي الختام
إذا كنت تريد تنزيل ملف Lottie من موقع LottieFiles ، فتأكد من تنزيل ملف JSON. أولاً ، حدد ملف Lottie الذي تريد تنزيله وانقر فوق الزر تنزيل JSON .
احصل على Elementor Pro الآن !!!
وفي الختام
هنا ! هذا كل شيء في هذا المقال الذي يوضح لك كيف أضف الرسوم المتحركة Lottie في Elementor. إذا كانت لديك أية مخاوف بشأن كيفية الوصول ، فأخبرنا بذلك تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...