حسِّن موقع Elementor الإلكتروني الخاص بك باستخدام رسوم متحركة مخصصة للتحميل المسبق

جدول المحتويات

• سبب أهمية الرسوم المتحركة للتحميل المسبق
• أنماط التحميل المسبق التي يمكنك استخدامها
• خطوة بخطوة: إضافة محمل مسبق مخصص في Elementor
  • الخطوة 1: تثبيت مكون إضافي للتحميل المسبق
  • الخطوة 2: تثبيت أداة التحميل المسبق بلس
  • الخطوة 3: تكوين إعدادات أداة التحميل المسبق
  • الخطوة 4: اختيار الرسوم المتحركة للتحميل المسبق
  • الخطوة 5: ضبط التصميم والتوقيت
• دمج أداة التحميل المسبق مع Elementor لتحكم أكبر
• اختبار أداة التحميل المسبق وتحسينها
• الأفكار النهائية: جعل موقع Elementor الخاص بك متميزًا

سبب أهمية الرسوم المتحركة للتحميل المسبق

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

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

أنماط التحميل المسبق التي يمكنك استخدامها

قبل الغوص في كيفية إضافة أدوات التحميل المسبق إلى موقع Elementor الخاص بك، دعنا نستكشف الأنماط المختلفة التي يمكنك استخدامها:

1. الرسوم المتحركة الدوارة: خيار كلاسيكي. بسيط ولكنه فعّال، حيث يخبر الدوّار الدوّار المستخدمين بحدوث شيء ما.
   • حالة الاستخدام: مناسب لمواقع الويب البسيطة أو ذات التوجه التقني. هذا النمط مباشر وغير مشتت للانتباه، مما يجعله مثاليًا لمواقع الويب التي تكون البساطة فيها هي المفتاح.
   • نصائح التخصيص: استخدم ألوان علامتك التجارية للدوار للحفاظ على الاتساق.
2. شريط التقدم: مثالي إذا كنت ترغب في نقل نسبة تحميل دقيقة، مما يمنح الزائرين إحساسًا بالمدة التي يحتاجون فيها إلى الانتظار.
   • حالة الاستخدام: رائعة للمواقع ذات المحتوى الثقيل مثل التجارة الإلكترونية أو المدونات التي تحتوي على العديد من الصور. توفر أشرطة التقدم للمستخدمين مؤشرًا واضحًا لتقدم التحميل، مما يقلل من الإحباط.
   • نصائح التخصيص: قم بتخصيص لون شريط التقدم ليتماشى مع لوحة الألوان الأساسية لموقعك الإلكتروني، وفكر في إضافة تسمية مثل "جارٍ التحميل... يرجى الانتظار" لجعلها أكثر إفادة.
3. شعار الرسوم المتحركة: يمكنك تحريك شعارك للحفاظ على العلامة التجارية مع إظهار بعض الذوق الإبداعي.
   • حالة الاستخدام: مثالي لمواقع الويب التي تركز على العلامة التجارية مثل الوكالات أو العلامات التجارية للأزياء أو المحافظ الإبداعية. يعزز هذا النوع من أدوات التحميل المسبق هوية العلامة التجارية.
   • نصائح التخصيص: استخدم أدوات مثل المؤثرات اللاحقة أو ملفات لوتيفيلز لإنشاء رسوم متحركة SVG خفيفة الوزن لشعارك. تأكد من أن حلقة الرسوم المتحركة سلسة ولا تدوم أكثر من بضع ثوانٍ.
4. تلاشي النص للداخل/خارج النص: كلمات مثل "جارٍ التحميل..." التي تظهر وتتلاشى هي خيار بسيط ولكنه مؤثر، مما يضيف لمسة شخصية.
   • حالة الاستخدام: مثالي للمدونات الشخصية أو المواقع الإلكترونية المجتمعية. فهي تخلق شعوراً دافئاً وودوداً، مما يجعل المستخدمين يشعرون بمزيد من التواصل.
   • نصائح التخصيص: قم بتخصيص النص ليناسب صوت علامتك التجارية - استخدم شيئًا فريدًا مثل "انتظر، محتوى مذهل في الطريق!" لإضافة شخصية مميزة.

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

خطوة بخطوة: إضافة محمل مسبق مخصص في Elementor

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

الخطوة 1: تثبيت مكون إضافي للتحميل المسبق

إن أسهل طريقة لإضافة رسوم متحركة للتحميل المسبق في Elementor هي استخدام مكون إضافي. تتضمن بعض الخيارات الأكثر شيوعًا ما يلي:

• لوفت لودر: مكون إضافي قابل للتخصيص بدرجة كبيرة ويتكامل بشكل جيد مع Elementor.
• التحميل المسبق بلس: يوفر مرونة كبيرة لإضافة الرسوم المتحركة وضبط الإعدادات.
• أداة تحميل الصفحات: خيار متميز مع تحكم شامل في التصميم والعرض.

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

الخطوة 2: تثبيت أداة التحميل المسبق بلس

1. انتقل إلى لوحة تحكم ووردبريس.
   • سجِّل الدخول إلى لوحة إدارة ووردبريس الخاصة بك.
   • من لوحة التحكم، ستتمكن من الوصول إلى تثبيت الإضافات وتخصيص الإعدادات.
2. انتقل إلى الإضافات > إضافة جديد.
   • انقر على المكونات الإضافية على الشريط الجانبي الأيسر، ثم انقر فوق إضافة جديد.
3. ابحث عن "Preloader Plus" في شريط البحث.
   • اكتب "Preloader Plus" في شريط البحث واضغط على Enter.
4. انقر فوق التثبيت الآن ثم تفعيل.
   • بمجرد العثور على المكون الإضافي، انقر فوق التثبيت الآن.
   • بعد اكتمال التثبيت، انقر فوق تفعيل لتمكين الإضافة على موقع الويب الخاص بك.

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

الخطوة 3: تكوين إعدادات أداة التحميل المسبق

1. افتح إعدادات التحميل المسبق بالإضافة إلى الإعدادات من لوحة القيادة.
   • انتقل إلى الإعدادات > التحميل المسبق زائد للوصول إلى خيارات التكوين.
2. انتقل إلى الإعدادات العامة علامة التبويب.
   • هنا، يمكنك تمكين أداة التحميل المسبق أو تعطيلها وإعداد سلوكها الأساسي.
3. تمكين أداة التحميل المسبق عن طريق تشغيل مفتاح التبديل.
   • سيؤدي ذلك إلى تنشيط أداة التحميل المسبق عبر موقعك الإلكتروني بناءً على الإعدادات التي تختارها.

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

• صفحات للعرض: حدد الصفحات التي تريد أن يكون التحميل المسبق مرئيًا فيها (على سبيل المثال، الصفحة الرئيسية، كل الصفحات، إلخ).
  • نصيحة: للحصول على تجربة مستخدم أفضل، ضع في اعتبارك تمكين أداة التحميل المسبق فقط على الصفحات ذات المحتوى الثقيل الذي يستغرق تحميله وقتًا أطول.
• عرض التردد: اختر ما إذا كنت تريد إظهاره على تحميل الصفحة الأولى فقط أو في كل مرة ينتقل فيها الزائر إلى صفحة جديدة.
  • نصيحة: يمكن أن يؤدي استخدامه فقط لتحميل الصفحة الأولى إلى تحسين تجربة التصفح الإجمالية من خلال تقليل الرسوم المتحركة المتكررة للتحميل.

الخطوة 4: اختيار الرسوم المتحركة للتحميل المسبق

1. انتقل إلى إعدادات النمط علامة التبويب.
   • في علامة التبويب هذه، يمكنك تكوين مظهر أداة التحميل المسبق.
   • مثال على ذلك: يمكنك زيارة https://example.com لمعرفة كيف يمكن للتحميل المسبق للرسوم المتحركة للشعار أن يعزز العلامة التجارية لملف إبداعي.
2. حدد نوع التحميل المسبق: اختر بين الدوار أو شريط التقدم أو الرسوم المتحركة المخصصة.
   • بناءً على نمط علامتك التجارية، اختر نوع أداة التحميل المسبق الذي يناسب احتياجاتك.
   • مثال على ذلك: بالنسبة لموقع إلكتروني للتجارة الإلكترونية مثل https://shopdemo.com، يعمل شريط التقدم بشكل جيد لإبقاء المستخدمين على اطلاع دائم.
3. بالنسبة لـ التحميل المسبق المخصص، قم بتحميل صورة GIF أو SVG لشعارك إذا كنت تريد رسمًا متحركًا يحمل علامتك التجارية.
   • انقر على التحميل لإضافة رسوم متحركة مخصصة قبل التحميل المسبق.

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

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

الخطوة 5: ضبط التصميم والتوقيت

• لون الخلفية: اضبط لون الخلفية ليتناسب مع لوحة ألوان علامتك التجارية. يمكنك استخدام لون يتناقض مع شعارك لجعله بارزاً.
  • التعليمات: انقر على منتقي الألوان في لون الخلفية واختر لوناً يتوافق مع سمة موقعك الإلكتروني.
• مدة الرسوم المتحركة: اضبط المدة الزمنية للمدة التي يجب أن تعمل فيها الرسوم المتحركة. عادةً ما تكون أقل من 3 ثوانٍ يعمل بشكل أفضل للاحتفاظ بانتباه المستخدم دون إحباط.
  • نصيحة: اختبر مددًا مختلفة للعثور على النقطة المثالية التي لا يبدو فيها التحميل المسبق سريعًا جدًا ولا بطيئًا جدًا.
• تلاشي الصفحة للداخل/خارج الصفحة: استخدم مؤثرات التلاشي للداخل/الخارج لتوفير انتقال أكثر سلاسة بين التحميل المسبق والمحتوى الفعلي.
  • نصيحة: يمكن أن يؤدي تأثير التلاشي الطفيف إلى جعل الانتقال يبدو أكثر صقلاً وأقل فجاجة.

دمج أداة التحميل المسبق مع Elementor لتحكم أكبر

إذا كنت تريد مزيدًا من التحكم الدقيق في مكان ووقت ظهور أداة التحميل المسبق الخاصة بك، يمكنك دمج Preloader Plus مع Elementor باستخدام CSS مخصص لـ Elementor الميزة.

• في Elementor, تحرير الصفحة حيث تريد إضافة أداة التحميل المسبق.
  • انتقل إلى الصفحة التي تريد تعديلها وانقر فوق تحرير باستخدام Elementor.
• افتح متقدم ثم قم بالتمرير لأسفل إلى CSS مخصص.
  • انقر على متقدم على اللوحة اليسرى، ثم مرر لأسفل للعثور على علامة التبويب CSS مخصص المجال.
• أضف كود CSS لإنشاء رسوم متحركة للتحميل المسبق لأقسام محددة من الصفحة. على سبيل المثال:

/* CSS مخصص للتحميل المسبق *//
.قسم التحميل المسبق {
  الرسوم المتحركة: يتلاشى في 2 ثانية سهولة في الخروج;
}

@إطارات رئيسية تتلاشى في {
  0% { التعتيم: 0؛ }
  100% { التعتيم: 1؛ }
}

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

اختبار أداة التحميل المسبق وتحسينها

الآن بعد أن قمت بإعداد أداة التحميل المسبق، من المهم اختبارها. إليك بعض النصائح:

• التحقق من الأجهزة المختلفة: استخدم أدوات مثل BrowserStack لترى كيف تبدو أداة التحميل المسبق الخاصة بك على الهاتف المحمول والكمبيوتر اللوحي وسطح المكتب. تأكد من أنه يوفر تجربة متسقة عبر جميع الأجهزة.
  • التعليمات: افتح BrowserStack، وحدد الأجهزة التي تريد اختبارها، وانتقل إلى موقع الويب الخاص بك.
• مراقبة سرعة التحميل: تذكّر أن أداة التحميل المسبق يجب أن تعزز التجربة دون إبطاء صفحتك بشكل كبير. استخدم أدوات مثل GTmetrix أو إحصاءات سرعة الصفحة من جوجل إنسايتس لضمان تحسين سرعة تحميل موقعك على الويب.
  • نصيحة: إذا كانت أداة التحميل المسبق تؤثر سلبًا على أوقات التحميل، ففكر في تحسين حجم ملف الرسوم المتحركة أو قصر استخدام أدوات التحميل المسبق على صفحات محددة.
• تجنب الإفراط في الاستخدام: الرسوم المتحركة للتحميل المسبق فعالة، ولكن الإفراط في استخدامها في كل صفحة يمكن أن يحبط الزوار. استخدمها بشكل استراتيجي - خاصة على الصفحات الأثقل التي تحتاج إلى وقت إضافي للتحميل.
  • نصيحة: اختبار سلوك المستخدم مع التحميل المسبق وبدونه على صفحات محددة باستخدام أدوات مثل هوتجار لمعرفة ما إذا كانت أدوات التحميل المسبق تعمل على تحسين تجربة المستخدم أو إعاقتها.

الأفكار النهائية: جعل موقع Elementor الخاص بك متميزًا

أداة التحميل المسبق جيدة التصميم هي أكثر من مجرد شاشة تحميل - إنها أداة قوية للعلامة التجارية ومحسِّن لتجربة المستخدم. للارتقاء بموقعك الإلكتروني Elementor إلى المستوى التالي، لا تتوقف عند مجرد إضافة أداة التحميل المسبق. قم بتحسين أداء موقعك باستمرار وفكر في كيفية إضافة كل تفاعل - من التحميل المسبق إلى الرسوم المتحركة للصفحة - إلى قصة علامتك التجارية.

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