مقدمة

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

انقر على انتقل إلى قناة شراء Elementor Pro الأصلية.

ما هي أداة التحميل المسبق ولماذا تستخدمها؟

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

كيفية إنشاء أداة تحميل مسبق في Elementor Pro

الخطوة 1: إنشاء قالب رأس الصفحة

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

الوصول إلى منشئ القالب:

• انتقل إلى لوحة تحكم Elementor Dashboardالتنقل القوالبوحدد منشئ القالب.

إنشاء قالب رأس جديد:

• في منشئ القوالب، حدد موقع الرأس وانقر على + لإنشاء قالب جديد.

• حدد قالباً وانقر فوق إدراج للانتقال إلى الصفحة.

نشر القالب:

• بعد تصميم العنوان الخاص بك، انقر فوق النشر.

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

• انقر فوق الحفظ والإغلاق.

الخطوة 2: إضافة حاوية وتعيين معرف CSS

والآن، دعونا نضيف الحاوية التي ستضم الرسوم المتحركة قبل التحميل المسبق. تعيين فريد من نوعه معرّف CSS لهذه الحاوية ستسمح لنا باستهدافها باستخدام CSS وجافا سكريبت لاحقًا.

إضافة حاوية:

• داخل قالب الرأس الجديد، أضف حاوية ذات عمود واحد.

تعيين معرف CSS:

• انتقل إلى متقدم من إعدادات الحاوية.

• في معرّف CSS الحقل، أدخل التحميل المسبق لـ abc_preload. سيُستخدم هذا المعرف لتطبيق CSS و JavaScript مخصص للتحكم في سلوك أداة التحميل المسبق.

الخطوة 3: إضافة أيقونة أو صورة القطعة

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

إضافة الأداة:

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

تعيين معرّف CSS للقطعة الجانبية:

• انتقل إلى متقدم في علامة تبويب إعدادات الأداة وتعيين معرف CSS إلى أبك_لودلر.

تصميم الأيقونة أو الصورة:

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

الخطوة 4: إضافة أداة HTML Widget للتحكم في أداة التحميل المسبق

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

إضافة أداة HTML Widget:

• أسفل أداة الأيقونة أو الصورة، أضف أداة HTML.

إدراج كود جافا سكريبت:

• في عنصر واجهة HTML، الصق كود JavaScript التالي:

<script>
  document.addEventListener('DOMContentLoaded', function () {
    setTimeout(function () {
      document.getElementById('abc_preload').style.display = 'none';
      document.getElementById('content').classList.add('visible');
    }, 2000); // Adjust the delay as needed (in milliseconds)
  });
</script>

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

تعيين معرف CSS لأداة HTML Widget:

• في عنصر واجهة HTML متقدم اضبط مُعرِّف CSS على abc_preloader_adds لمنع التباعد غير المقصود.

الخطوة 5: إضافة CSS مخصص لتصميم أداة التحميل المسبق

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

فتح إعدادات CSS المخصصة:

• انقر فوق إعداد الصفحة أيقونة (رمز الترس) في لوحة Elementor.

• انتقل إلى متقدم وافتح علامة التبويب CSS مخصص القسم.

• الصق كود CSS التالي:

#ab5Tabc_preload {
  الموضع: ثابت;
  أعلى: 0;
  اليسار: 0;
  العرض: 100%;
  الارتفاع: 100%;
  الخلفية: #P5Tfff;
  العرض: مرن;
  محاذاة العناصر: في المنتصف;
  تبرير المحتوى: في المنتصف;
  مؤشر z: 1000;
}

#abc_Tabc_loader {
  الحدود: 8 بكسل صلبة #36363636;
  الحد الأعلى للحدود: 8px #3498db صلب #3498db;
  نصف قطر الحدود: 50%;
  العرض: 50 بكسل;
  الارتفاع: 50 بكسل;
  الرسوم المتحركة: تدور 1 ثانية خطية لانهائية;
}

@إطارات رئيسية تدور {
  0% { التحويل: تدوير(0ديج)؛ } }
  100% { التحويل: تدوير(360 درجة)؛ } }
}

#P5Tabc_preloader_adds {
  العرض: لا شيء;
}

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

الخطوة 6: نشر القالب واختبار أداة التحميل المسبق

نشر قالب العنوان:

• انقر فوق النشر وتأكيد شروط العرض على النحو التالي الموقع بالكامل للتأكد من أن أداة التحميل المسبق نشطة عبر موقعك.

اختبار أداة التحميل المسبق:

• قم بزيارة موقع الويب الخاص بك لرؤية أداة التحميل المسبق أثناء العمل. إذا بدا وقت التحميل قصيرًا جدًا أو طويلًا جدًا، فقم بتعديل التأخير في كود JavaScript حسب الحاجة.

الخاتمة

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

• إنشاء قالب رأس الصفحة.
• إضافة حاوية للتحميل المسبق.
• يُستخدم CSS و JavaScript للتحكم في مظهره وسلوكه.

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

الأسئلة الشائعة

1. ما هي فوائد استخدام أداة التحميل المسبق؟

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

2. هل يمكنني تخصيص الرسوم المتحركة قبل التحميل المسبق؟

نعم، يمكنك تخصيص الرسوم المتحركة للتحميل المسبق عن طريق تعديل CSS في الكود. يمكنك تغيير عنصر #ab5Tabc_loader لتضمين أنواع مختلفة من الرسوم المتحركة والألوان والأحجام والتأثيرات المرئية الأخرى. إذا رغبت في ذلك، يمكنك استبدال الرمز بصيغة GIF أو أي رسوم متحركة مخصصة أخرى.

3. كيف يمكنني ضبط مدة التحميل المسبق؟

في شيفرة JavaScript، سترى قيمة 2000 في الدالة setTimeout، والتي تمثل التأخير بالمللي ثانية. يمكنك تغيير هذه القيمة لزيادة أو تقليل وقت عرض أداة التحميل المسبق. على سبيل المثال، سيؤدي تغييرها إلى 3000 إلى عرض المُحمِّل المسبق لمدة 3 ثوانٍ.