كيفية إضافة رسوم متحركة Lottie في ووردبريس (4 خطوات بسيطة)
يمكن أن يكون استخدام الرسوم المتحركة Lottie في WordPress طريقة رائعة لتجميل صفحاتك.
وهي عادةً ما تكون خفيفة الوزن وقابلة للتخصيص، وبالتالي يمكنها مساعدتك في إنشاء محتوى جذاب دون الإضرار بتجربة المستخدم (UX). ومع ذلك، ربما كنت تبحث عن طريقة خالية من التوتر لإضافتها إلى موقعك.
ولحسن الحظ، فإن العملية أسهل مما تعتقد. باستخدام مكون إضافي مثل Otter Blocks ، يمكنك إضافة وتخصيص رسوم Lottie المتحركة الخاصة بك ببضع نقرات فقط. ستتمكن أيضًا من ضبط شروط الرؤية حتى يتم اللعب في الوقت المناسب.
مقدمة للرسوم المتحركة لوتي
Lottie هو تنسيق ملف مفتوح المصدر للرسوم المتحركة على الويب. يمكّنك من إنشاء رسوم متحركة مخصصة لعلامتك التجارية واستخدامها على موقع الويب الخاص بك:
بالطبع، يمكنك دائمًا اختيار ملفات GIF، ولكن هذه الملفات يمكن أن تثقل كاهل موقعك. الرسوم المتحركة Lottie أصغر بكثير من صور GIF.
ولذلك، يمكنهم مساعدتك في جعل موقعك أكثر تشويقًا مع الحفاظ على تجربة المستخدم الخاصة بك وتقديم أوقات تحميل سريعة.
بالإضافة إلى ذلك، تأتي الرسوم المتحركة Lottie مع الكثير من خيارات التخصيص. المكتبة نفسها واسعة النطاق، وتوفر الوصول إلى آلاف العناصر والشخصيات والرسوم التوضيحية.
ومع ذلك، يمكنك أيضًا تبديل الألوان وتغيير إعدادات العرض وإضافة شروط الرؤية.
الرسوم المتحركة المخصصة يمكن أن تساعدك على إقناع زوار موقعك. بالإضافة إلى ذلك، يمكنهم جعل موقعك يبدو جديدًا وفريدًا.
كيفية إضافة رسوم متحركة Lottie إلى WordPress (في 4 خطوات)
الآن بعد أن عرفت المزيد عن Lottie Animations، دعنا نلقي نظرة على كيفية إضافتها إلى موقع WordPress الخاص بك:
- الخطوة 1: تثبيت وتفعيل Otter Blocks
- الخطوة 2: اختر رسمًا متحركًا من مكتبة Lottie
- الخطوة 3: الصق عنوان URL لرسوم Lottie المتحركة في Otter Block أو قم بتحميل ملف Lottie
- الخطوة 4: قم بتخصيص الرسوم المتحركة الخاصة بك باستخدام Otter Blocks
الخطوة 1: تثبيت وتفعيل Otter Blocks
هناك طرق عديدة لإضافة رسوم متحركة Lottie في WordPress. على سبيل المثال، يمكنك استخدام HTML وJavaScript. ومع ذلك، يمكن أن تكون هذه الطريقة معقدة إلى حد ما.
وبدلاً من ذلك، يمكنك استخدام البرنامج الإضافي Lottie Animations، على الرغم من أن هذا قد لا يكون متوافقًا مع جميع منشئي الصفحات. بالإضافة إلى ذلك، فهو لا يقدم العديد من الخيارات الأسلوبية.
أسهل طريقة لإضافة Lottie Animations إلى موقعك هي باستخدام مكون إضافي مثل Otter Blocks:
يضيف هذا البرنامج الإضافي كتل محتوى وقوالب جديدة إلى موقعك، بما في ذلك قالب لرسوم Lottie المتحركة.
كما أنه يوسع وظائف محرر الكتل من خلال CSS المخصص والرسوم المتحركة وشروط الرؤية والمزيد. لذلك، فهو يساعدك على تصميم صفحاتك بشكل أكثر كفاءة ويقلل من الحاجة إلى منشئي الصفحات.
إذا قمت بالترقية إلى Otter Blocks Pro ، فستتمكن من الوصول إلى الميزات المتقدمة مثل كتل WooCommerce الخاصة والإعدادات الأسلوبية الإضافية. ومع ذلك، لا تحتاج إلى الإصدار Pro لاستخدام ميزة الرسوم المتحركة Lottie.
إذا كنت تريد استخدام الإصدار المجاني، فتوجه إلى المكونات الإضافية > إضافة جديد في لوحة تحكم WordPress الخاصة بك وابحث عن “Otter Blocks:”
ثم انقر فوق تثبيت > تنشيط. يجب أن تشاهد الآن مجموعة مختارة من الكتل الجديدة في محرر الكتل.
الخطوة 2: اختر رسمًا متحركًا من مكتبة Lottie
الآن بعد أن قمت بإعداد Otter Blocks على موقع الويب الخاص بك، يمكنك التوجه إلى مكتبة Lottie لاختيار رسم متحرك. للوصول إلى التصاميم، ستحتاج إلى إنشاء حساب مجاني.
بمجرد إنشاء ملف التعريف الخاص بك، انتقل إلى ” اكتشف ” وحدد “رسوم متحركة مجانية جاهزة للاستخدام”:
هنا، يمكنك تصفح مكتبة عناصر Lottie التي يمكن استخدامها على مواقع الويب والتطبيقات ووسائل التواصل الاجتماعي:
عندما تجد الرسوم المتحركة التي تريد استخدامها، انقر على التصميم. ستظهر نافذة منبثقة حيث يمكنك إجراء بعض التغييرات على مظهر الرسوم المتحركة:
على سبيل المثال، يمكنك ضبط سرعة الرسوم المتحركة وتغيير لون الخلفية. إذا قمت بالنقر فوق تحرير ألوان الطبقة، فسيتم نقلك إلى محرر Lottie:
هنا، يمكنك تخصيص لون أي جزء من التصميم. ما عليك سوى النقر على قسم من العنصر الذي ترغب في تغييره، والانتقال إلى كل الألوان واستخدام منتقي الألوان لتطبيق نغمة جديدة:
إذا قمت بإجراء تغيير لا يعجبك، فانقر على سهم التراجع الموجود أعلى يسار الشاشة.
الخطوة 3: الصق عنوان URL لرسوم Lottie المتحركة في Otter Block أو قم بتحميل ملف Lottie
بمجرد أن تصبح راضيًا عن تصميمك، لديك خياران لإضافته إلى WordPress:
- يمكنك نسخ عنوان URL الخاص بـ Lottie Animation لإضافة الإصدار من خادم LottieFiles إلى موقعك. ستجد هذا في النافذة المنبثقة للرسوم المتحركة، أسفل التصميم مباشرةً.
- يمكنك تنزيل ملف LottieFile النهائي على جهاز الكمبيوتر الخاص بك عن طريق النقر فوق الزر “تنزيل” في الزاوية العلوية اليمنى وتحديد تنسيق dotLottie . سيتيح لك ذلك استضافة الملف على الخادم الخاص بك.
بعد ذلك، ارجع إلى موقع WordPress الخاص بك وافتح الصفحة أو المنشور الذي تريد إدراج الرسوم المتحركة الخاصة بك فيه.
انقر لإضافة كتلة جديدة وابحث عن “Lottie Animations:”
أضف الكتلة إلى صفحتك. ثم اختر أحد هذه الخيارات:
- إدراج من URL – استخدم هذا إذا كنت تريد إدخال الرابط إلى ملف Lottie على خوادم LottieFiles. كل ما عليك فعله هو لصق رابط URL الخاص بـ Lottie Animation الذي قمت بنسخه من موقع LottieFiles الإلكتروني.
- التحميل – استخدم هذا إذا قمت بتنزيل ملف dotLottie الفعلي من LottieFiles. يمكنك بعد ذلك تحميل هذا الملف إلى موقع WordPress الخاص بك.
بعد ذلك، اضغط على Enter وستظهر الرسوم المتحركة على الصفحة:
يمكنك الآن حفظ تغييراتك والانتقال إلى الخطوة النهائية.
الخطوة 4: قم بتخصيص الرسوم المتحركة الخاصة بك باستخدام Otter Blocks
الآن بعد أن قمت بإضافة الرسوم المتحركة Lottie الخاصة بك في WordPress، أنت جاهز لتخصيص التصميم والتخطيط. في إعدادات الحظر، سترى مجموعة مختارة من خيارات العرض.
ضمن TRIGGER، يمكنك الاختيار بين التشغيل التلقائي أو التمرير أو التمرير أو النقر. لن يتم تشغيل الرسم المتحرك حتى يتم إكمال أحد هذه الإجراءات على الصفحة:
لديك أيضًا خيار تبديل الرسوم المتحركة لتشغيلها في الحلقة. بالإضافة إلى ذلك، يمكنك ضبط سرعة الرسوم المتحركة الخاصة بك باستخدام شريط التمرير، وعكس الاتجاه، وتغيير عرض التصميم.
إذا كنت تريد تغيير لون الخلفية، فانقر فوق علامة التبويب “الخلفية”. هنا، يمكنك تحديد أحد الخيارات الصلبة الافتراضية، أو استخدام منتقي الألوان، أو اختيار خلفية متدرجة:
إذا توجهت إلى شروط الرؤية، فستتمكن من تكوين الرسوم المتحركة الخاصة بك لتظهر فقط في ظروف معينة:
على سبيل المثال، قد ترغب في أن يكون الحظر مرئيًا للمستخدمين الذين قاموا بتسجيل الدخول فقط، أو أن يتم عرضه في تاريخ محدد. للقيام بذلك، انقر فوق “إضافة مجموعة القواعد”. ثم حدد السهم لفتح الإعدادات:
ضمن CONDITION، استخدم القائمة المنسدلة لتكوين إعدادات الرؤية الخاصة بك. يمكنك إضافة أكثر من شرط وإنشاء مجموعات قواعد إضافية.
المصدر: themeisle
شاهد ايضا:
