كل ما تحتاج لمعرفته عن وحدة Lottie Divi 5

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

في هذا المنشور ، سنشرح كل ما تحتاج لمعرفته حول وحدة Lottie ، بما في ذلك ميزاتها وعملية الإعداد وخيارات التخصيص وطرق استخدامها. لنقفز!

ما هي ملفات لوتي؟

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

اشترك في قناتنا على YouTube

في Divi 5 ، تدمج وحدة Lottie بسلاسة هذه الرسوم المتحركة في البناء المرئي ، مما يتيح للمستخدمين إضافة لمسات ديناميكية وحديثة إلى مواقع الويب الخاصة بهم في بضع نقرات. سواء أكان تسليط الضوء على CTA أو إضافة الذوق إلى قسم Hero ، فإن وحدة Lottie تجعل دمج الرسوم المتحركة دون ترميز معقد.

باستخدام وحدة Lottie ، يحول Divi 5 كيفية إحضار حركة تصاميم الويب الخاصة بك ، مما يجعلها آسرًا وفعالًا.

الميزات الرئيسية

وحدة Lottie في Divi 5 هي أداة متعددة الاستخدامات مليئة بالقدرات التي تجعل إنشاء الرسوم المتحركة الديناميكية والمحسّنة سهلة. يوفر التحكم في سلوك الرسوم المتحركة ، مما يتيح لك تعديل السرعة والاتجاه والمشغلات والمزيد. دعونا نلقي نظرة على بعض ميزاتها الرئيسية.

سهولة الاستخدام

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

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

بالنسبة لأولئك الذين يبحثون عن لمسة فريدة من نوعها ، يمكنك إنشاء رسوم متحركة مخصصة باستخدام أدوات مثل Adobe After Effects مع البرنامج المساعد Bodymovin. يصدر هذا البرنامج المساعد الرسوم المتحركة كملفات JSON متوافقة مع وحدة Lottie. سواء اخترت الرسوم المتحركة قبل الصنع أو المخصصة ، فإن العملية واضحة.

خيارات التخصيص

توفر وحدة Lottie في Divi 5 خيارات التخصيص ، مما يتيح لك التحكم في عدة جوانب من ملف Lottie. بالنسبة للتجارب التفاعلية ، استخدم الرسوم المتحركة المشغل لاختيار وقت تنشيط الرسوم المتحركة ، مثل التحميل ، عندما يدخل العنصر في إطار العرض أو التحوم أو النقر أو التمرير. يمكنك تمكين الرسوم المتحركة الحلقة للسماح بالحركة المستمرة على ملف Lottie الخاص بك ، وضبط سرعة الرسوم المتحركة ، وتحديد الاتجاه (إلى الأمام أو الخلف) ، والاختيار بين العادي أو الارتداد في حقل وضع اللعب .

تحميل الرسوم المتحركة JSON

تتطلب إضافة الرسوم المتحركة Lottie إلى Divi 5 تحميل ملفات JSON ، التنسيق القياسي لملفات Lottie. ومع ذلك ، لا يدعم WordPress تحسين عمليات تحميل JSON في مكتبة الوسائط الخاصة بها ، لذلك ستحتاج إلى اتخاذ خطوات إضافية لضمان تمكنك من تحميلها.

الخيار الأول هو إنشاء سمة طفل وإضافة مقتطف PHP إلى وظائف موضوع طفلك. هذه الطريقة خفيفة الوزن وتضمن التعامل الآمن لملفات الرسوم المتحركة الخاصة بك. بدلاً من ذلك ، يمكنك استخدام مكون إضافي مثل أنواع تحميل الملفات للسماح بتحميلات JSON دون لمس أي رمز ، مما يجعله مثاليًا للمستخدمين الذين يفضلون حل التوصيل والتشغيل. للحصول على دليل خطوة بخطوة لتنفيذ أي من الطريقة ، تحقق من مقال الدعم الخاص بنا ، والذي يمر بك خلال العملية لإعداد موقع الويب الخاص بـ Divi 5 لتحميل JSON.

كيفية استخدام وحدة Lottie في Divi 5

إضافة الرسوم المتحركة اللوت في Divi 5 أمر واضح ومباشر. إنشاء أو تنزيل الرسوم المتحركة اللوت من مصدر مثل Lottiefiles أو Lorticon. ابحث وانقر فوق وحدة Lottie في البناء المرئي لإضافتها إلى صفحتك.

قم بتحميل ملف JSON أو حدد موقعه في معرض Media WordPress الخاص بك.

اختر الرسوم المتحركة الزناد . يمكنك ضبطه على التحريك على التحويل أو العرض أو التحوم أو النقر أو التمرير إلى تحريك.

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

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

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

في علامة تبويب التصميم ، يمكنك التحكم في التحجيم والمواءمة والارتفاع والتباعد والمزيد.

على الرغم من أنه لا يمكنك تغيير ألوان ملفات Lottie الخاصة بك داخل Divi 5 ، إلا أن معظم مواقع الويب التي تسمح لك باختيار ألوان محددة وعرضات السكتة الدماغية قبل تنزيلها.

كما ترون ، فإن إضافة ملف lottie إلى موقع Divi 5 الخاص بك يستغرق ثواني ويضيف القليل من الذوق إلى صفحات الويب الخاصة بك دون القلق بشأن الأداء.

أمثلة عملية باستخدام وحدة Lottie

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

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

صفحات الاتصال

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

404 صفحة

تحويل إحباط 404 أخطاء إلى لحظات لا تنسى مع الرسوم المتحركة المرحة Lottie. أضف بوصلة الغزل أو أيقونة البحث المتحركة إلى صفحة 404 ، مقترنة برسالة قصيرة.

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

منتجات مميزة

عرض منتجات Woo المفضلة لديك أو فئاتها مع الرسوم المتحركة Lottie لتسليط الضوء على المنتجات المعروضة للبيع. على سبيل المثال ، ضع الرسوم المتحركة لشارة بيع Lottie بجوار منتج مميز لتسليط الضوء عليه.

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

أقسام الخدمات

اجعل قسم الخدمات الخاص بك في الحياة مع الرسوم المتحركة Lottie التي تمثل بصريًا عروضك. على سبيل المثال ، استخدم الرسوم المتحركة Looping لوكالة التسويق الخاصة بك ، وضبط السرعة لمطابقة النغمة.

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

أقسام البطل

اجعل أقسام البطل الخاصة بك لا تنسى مع الرسوم المتحركة Bold Lottie التي تحدد نغمة موقع الويب الخاص بك. أولاً ، أضف الرسوم المتحركة الخلفية السلسة باستخدام وحدة Divi's Lottie. ثم ، ضعه خلف الصفوف والوحدات النمطية مع إعدادات موقف Divi.

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

قم بتنزيل الملفات

تنزيل مجانًا

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

تحميل

لقد اشتركت بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والوصول إلى حزم تخطيط Divi الأسبوعية المجانية!

خاتمة

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

هل أنت مستعد لتجربة وحدة لوتي؟ شارك أفكارك أو إبداعاتك في التعليقات أو على وسائل التواصل الاجتماعي.