كيفية إضافة الرسوم المتحركة لوتي في WordPress (4 خطوات بسيطة)

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

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

مقدمة إلى الرسوم المتحركة لوتي

Lottie هو تنسيق ملف مفتوح المصدر للرسوم المتحركة على الويب. يمكّنك من إنشاء رسوم متحركة مخصصة لعلامتك التجارية واستخدامها على موقع الويب الخاص بك:

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

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

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

كيفية إضافة الرسوم المتحركة Lottie إلى WordPress (في 4 خطوات)

الآن بعد أن عرفت المزيد عن Lottie Animations ، دعنا نلقي نظرة على كيفية إضافتها إلى موقع WordPress الخاص بك على الويب:

الخطوة 1: تثبيت وتفعيل Otter Blocks

هناك العديد من الطرق لإضافة الرسوم المتحركة Lottie في WordPress. على سبيل المثال ، يمكنك استخدام HTML و JavaScript. ومع ذلك ، يمكن أن تكون هذه الطريقة معقدة إلى حد ما.

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

أسهل طريقة لإضافة Lottie Animations إلى موقعك هي باستخدام مكون إضافي مثل Otter Blocks:

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

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

إذا كنت ترغب في استخدام الإصدار المجاني ، فانتقل إلى الإضافات > إضافة جديد في لوحة معلومات WordPress وابحث عن "Otter Blocks:"

ثم ، انقر فوق تثبيت > تنشيط . يجب أن تشاهد الآن مجموعة مختارة من الكتل الجديدة في محرر القوالب.

الخطوة 2: اختر رسمًا متحركًا من مكتبة Lottie

الآن بعد أن قمت بإعداد Otter Blocks على موقع الويب الخاص بك ، يمكنك التوجه إلى مكتبة Lottie لاختيار الرسوم المتحركة. للوصول إلى التصميمات ، ستحتاج إلى إنشاء حساب مجاني.

بمجرد إنشاء ملف التعريف الخاص بك ، انتقل إلى Discover وحدد الرسوم المتحركة المجانية الجاهزة للاستخدام :

هنا ، يمكنك تصفح مكتبة عناصر Lottie التي يمكن استخدامها على مواقع الويب والتطبيقات والوسائط الاجتماعية:

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

على سبيل المثال ، يمكنك ضبط سرعة الرسوم المتحركة وتغيير لون الخلفية. إذا قمت بالنقر فوق تحرير ألوان الطبقة ، فسيتم نقلك إلى محرر Lottie:

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

إذا قمت بإجراء تغيير لا يعجبك ، فانقر فوق سهم التراجع في أعلى يسار الشاشة.

الخطوة 3: الصق عنوان URL للرسوم المتحركة Lottie في Otter Block أو قم بتحميل ملف Lottie

بمجرد أن تصبح راضيًا عن التصميم الخاص بك ، لديك خياران لإضافته إلى WordPress:

1. يمكنك نسخ عنوان URL للرسوم المتحركة Lottie لإضافة الإصدار من خادم LottieFiles إلى موقعك. ستجد هذا في نافذة الرسوم المتحركة المنبثقة ، أسفل التصميم مباشرةً.
2. يمكنك تنزيل ملف LottieFile النهائي على جهاز الكمبيوتر الخاص بك عن طريق النقر فوق الزر "تنزيل" في الزاوية العلوية اليمنى وتحديد تنسيق dotLottie . سيتيح لك ذلك استضافة الملف على الخادم الخاص بك.

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

انقر لإضافة كتلة جديدة وابحث عن "Lottie Animations:"

أضف الكتلة إلى صفحتك. ثم اختر أحد هذه الخيارات:

• إدراج من عنوان URL - استخدم هذا إذا كنت تريد إدخال رابط ملف Lottie على خوادم LottieFiles. كل ما عليك فعله هو لصق رابط Lottie Animation URL الذي نسخته من موقع LottieFiles على الويب.
• تحميل - استخدم هذا إذا قمت بتنزيل ملف dotLottie الفعلي من LottieFiles. يمكنك بعد ذلك تحميل هذا الملف إلى موقع WordPress الخاص بك.

بعد ذلك ، اضغط على Enter وستظهر الرسوم المتحركة على الصفحة:

يمكنك الآن حفظ تغييراتك والانتقال إلى الخطوة الأخيرة.

الخطوة 4: تخصيص الرسوم المتحركة الخاصة بك مع Otter Blocks

الآن بعد أن أضفت رسوم Lottie المتحركة الخاصة بك في WordPress ، فأنت جاهز لتخصيص التصميم والتخطيط. في إعدادات الحظر ، سترى مجموعة مختارة من خيارات العرض.

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

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

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

إذا توجهت إلى شروط الرؤية ، فستتمكن من تكوين الرسوم المتحركة الخاصة بك لتظهر فقط في ظروف معينة:

على سبيل المثال ، قد ترغب في أن يكون الحظر مرئيًا للمستخدمين الذين قاموا بتسجيل الدخول فقط ، أو أن يتم عرضه في تاريخ محدد. للقيام بذلك ، انقر فوق Add Rule Group . ثم حدد السهم لفتح الإعدادات:

ضمن CONDITION ، استخدم القائمة المنسدلة لتهيئة إعدادات الرؤية الخاصة بك. يمكنك إضافة أكثر من شرط وإنشاء مجموعات قواعد إضافية.

ابدأ مع الرسوم المتحركة Lottie في WordPress

للتلخيص ، فيما يلي أربع خطوات لإضافة رسوم متحركة لوتي في WordPress:

لمزيد من الطرق لتحسين محرر WordPress الأصلي ، يمكنك التحقق من مجموعتنا الكاملة لأفضل مكونات WordPress الإضافية.

هل لديك أي أسئلة حول إضافة Lottie Animations في WordPress؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!