هل سبق لك أن زرت موقعًا إلكترونيًا وانبهرت بالرسوم المتحركة والرسومات التفاعلية؟ قد تظن أن هذا النوع من الرسوم المتحركة يتطلب الكثير من البرمجة والخبرة التقنية لإنشائه، ولكن مع رسوم لوتي المتحركة، الأمر أسهل مما تتخيل!
رسوم لوتي المتحركة هي رسوم متحركة تعتمد على المتجهات، ويمكن إضافتها بسهولة إلى موقعك الإلكتروني باستخدام أدوات مثل ووردبريس وإليمينتور. من خلال إضافة لوتي فايلز لووردبريس، يمكنك إضافة الرسوم المتحركة وتخصيصها بسرعة في موقعك باستخدام محرر غوتنبرغ.
دعونا نشرح لكم خطوات إضافة واستخدام رسوم لوتي المتحركة في ووردبريس وإليمينتور.
فهم رسوم لوتي المتحركة
قبل أن نخوض في تفاصيل إضافة رسوم متحركة Lottie إلى WordPress أو Elementor، دعونا نستعرض بعض أساسيات رسوم Lottie المتحركة.
بدايةً، ما هي رسوم لوتي المتحركة تحديدًا؟ لوتي مكتبة برمجية طورتها شركة Airbnb، تُتيح عرض رسوم متحركة من برنامج After Effects في الوقت الفعلي، ثم تصديرها كملفات JSON. يسهل استخدام هذه الملفات على الإنترنت، مما يجعلها خيارًا شائعًا لمطوري ومصممي المواقع الإلكترونية الراغبين في إضافة بعض الرسوم المتحركة والتفاعلية إلى مواقعهم.
إذن، أين يمكنك العثور على رسوم متحركة لشخصية لوتي؟ لحسن الحظ، هناك العديد من المصادر المتاحة للعثور على رسوم متحركة لشخصية لوتي وتنزيلها. أحد هذه المصادر الشائعة هو موقع LottieFiles.com ، الذي يضم مكتبة ضخمة من الرسوم المتحركة المجانية والمدفوعة لشخصية لوتي، والتي يمكنك تصفحها وتنزيلها.
خيار آخر هو إنشاء رسوم متحركة خاصة بك باستخدام برنامج Adobe After Effects وتصديرها كملفات JSON.
موضوع ذو صلة: كيفية تحويل تصميم Adobe XD إلى موقع ويب WordPress؟
بعد تجهيز رسوم Lottie المتحركة، الخطوة التالية هي تحميلها لاستخدامها في ووردبريس أو إليمنتور. الأمر بسيط للغاية - ما عليك سوى تحميل ملف JSON الخاص بالرسوم المتحركة التي اخترتها وحفظه على جهازك.
لماذا يجب عليك إضافة رسوم متحركة من لوتي إلى موقعك الإلكتروني؟
إليكم بعض الأسباب الوجيهة التي تجعلكم لا تفوتون فرصة الاستعانة بخدمات لوتي للرسوم المتحركة لموقعكم الإلكتروني:
تجربة مستخدم رائعة
أولاً وقبل كل شيء، تُساهم رسوم لوتي المتحركة في زيادة تفاعل المستخدمين وجعل موقعك الإلكتروني أكثر جاذبية. بإضافة الرسوم المتحركة والتفاعلية إلى موقعك، يمكنك خلق تجربة مستخدم أكثر ديناميكية تُساعد على إبقاء الزوار على موقعك لفترة أطول.
لا يؤثر على أداء الموقع الإلكتروني
إضافةً إلى تحسين تجربة المستخدم، تتميز رسوم لوتي المتحركة بأداءٍ أفضل من الرسوم المتحركة التقليدية. ولأنها تعتمد على المتجهات، فإن حجم ملفاتها أصغر بكثير من ملفات GIF أو غيرها من الرسوم المتحركة التقليدية . وهذا يعني تحميلها بسرعة أكبر دون التأثير على أداء موقعك الإلكتروني.
قابل للتطوير
من مزايا استخدام رسوم لوتي المتحركة قابليتها للتوسع، إذ يمكن تكبيرها أو تصغيرها دون فقدان الجودة أو الدقة . وهذا يجعلها خيارًا ممتازًا للتصميم المتجاوب ، حيث تحتاج إلى أن تبدو الرسومات رائعة على مختلف أحجام الشاشات.
قابل للتخصيص
وأخيرًا، تتميز رسوم لوتي المتحركة بإمكانية تخصيصها بشكل كبير. يمكنك تعديل السرعة، وإعدادات التكرار، وخصائص أخرى للرسوم المتحركة لتتناسب مع تصميم موقعك الإلكتروني وتجربة المستخدم. ولأن رسوم لوتي المتحركة تُنشأ في برنامج أدوبي أفتر إفكتس، فإن لديك تحكمًا كاملًا في الرسوم المتحركة نفسها.
باختصار، تُعدّ رسوم لوتي المتحركة وسيلة رائعة لإضفاء لمسة جمالية وتفاعلية على موقعك الإلكتروني. إذا كنت تسعى لتحسين تجربة المستخدم وأداء موقعك، فمن المؤكد أن استخدام رسوم لوتي المتحركة على موقعك يستحق التفكير.
إضافة رسوم متحركة لوتي في ووردبريس
الآن وقد فهمت ما هي رسوم لوتي المتحركة ولماذا يجب عليك استخدامها، دعنا نفهم كيفية إضافتها واستخدامها في ووردبريس
- الخطوة الأولى هي تثبيت إضافة LottieFiles. يمكنك القيام بذلك عن طريق الانتقال إلى قسم "الإضافات" في لوحة تحكم ووردبريس الخاصة بك والبحث عن "LottieFiles".
- بمجرد العثور على الإضافة، انقر فوق "تثبيت" ثم "تفعيل" لتمكين الإضافة على موقعك.
- أنشئ منشورًا أو صفحة جديدة في ووردبريس باستخدام محرر غوتنبرغ.
- أضف كتلة "لوتي" جديدة إلى صفحتك بالنقر فوق زر "إضافة كتلة" والبحث عن "لوتي" في مكتبة الكتل.
- في إعدادات كتلة Lottie، انقر فوق زر "اكتشاف الرسوم المتحركة" لتصفح وتحديد ملف رسوم متحركة Lottie من جهاز الكمبيوتر الخاص بك أو مكتبة LottieFiles.
- بمجرد اختيارك للرسوم المتحركة، يمكنك ضبط سرعة الرسوم المتحركة وإعدادات التكرار والخصائص الأخرى في إعدادات الكتلة.
- يمكنك أيضًا إضافة تفاعلات إلى رسوم Lottie المتحركة باستخدام زر "إضافة تفاعل" في إعدادات الكتلة. يتيح لك هذا تشغيل إجراء محدد عندما ينقر المستخدم أو يمرر مؤشر الماوس فوق الرسوم المتحركة.
بمجرد أن تصبح راضيًا عن رسوم لوتي المتحركة، احفظ منشورك أو صفحتك وستظهر الرسوم المتحركة على موقع ووردبريس الخاص بك!
إضافة رسوم متحركة لوتي في إليمنتور
إذا كنت تستخدم Elementor لإنشاء موقعك الإلكتروني، فإن إضافة تأثيرات Lottie المتحركة أمر في غاية السهولة. يوفر Elementor أداة Lottie مخصصة تُسهّل إضافة تأثيرات Lottie المتحركة إلى صفحاتك.
للبدء، ما عليك سوى سحب وإفلات أداة Lottie على صفحة Elementor الخاصة بك. ثم انقر على الأداة لفتح إعدادات Lottie.
في إعدادات Lottie، يمكنك إما تحميل ملف Lottie من جهازك أو إضافته عبر رابط خارجي . بمجرد تحميل ملف Lottie، ستظهر لك معاينة للرسوم المتحركة في الأداة.
من هنا، يمكنك تخصيص الرسوم المتحركة عن طريق ضبط سرعة الحركة، وإعدادات التكرار، وغير ذلك. كما يمكنك إضافة تفاعلات إلى الرسوم المتحركة، مثل أحداث النقر أو تأثيرات التمرير، باستخدام ميزة التفاعلات المدمجة في Elementor.
خاتمة
تهانينا، لقد تعلمت الآن كيفية إضافة واستخدام رسوم متحركة Lottie في WordPress و Elementor!
باتباع الخطوات الموضحة في هذه المدونة، يمكنك إضافة رسوم متحركة جذابة وتفاعلية إلى موقعك الإلكتروني دون الحاجة إلى معرفة واسعة بالبرمجة أو خبرة فنية.
انطلق وجرّب إضافة تأثيرات لوتي المتحركة إلى موقعك على ووردبريس أو إليمنتور. باستخدام التأثير المناسب، يمكنك تحسين تجربة المستخدم، وإيصال المعلومات المهمة، وإضفاء لمسة جمالية على موقعك.
إذا كنت تواجه صعوبة في إضافة تأثيرات لوتي المتحركة إلى موقعك على ووردبريس أو إليمنتور، فلا تقلق! خدمة تطوير ووردبريس لمساعدتك. يتمتع فريقنا بسنوات من الخبرة في إنشاء مواقع ويب جذابة وديناميكية باستخدام ووردبريس، ويمكننا مساعدتك في تحويل رؤيتك إلى واقع.
