الدليل الكامل لإنشاء أداة تحميل مسبق احترافية في Elementor Pro للحصول على تجربة موقع ويب أكثر سلاسة

مقدمة

إحدى الطرق الفعالة لتحسين هذه التجربة هي إضافة أداة تحميل مسبق - وهي الرسوم المتحركة أو الصورة that appears while the page content loads in the background. This gives users a seamless transition as they wait, ensuring your site feels polished and professional. In this guide, we’ll walk through each step of setting up a أداة التحميل المسبق في إليمنتور برو, allowing you to display custom animations or brand logos that reinforce your site’s identity.

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

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

A preloader is a placeholder animation or graphic that displays while your site’s content is loading. This can be especially useful for pages with heavy content that may take longer to load. Using a preloader creates a better user experience by reducing perceived load time, keeping users engaged, and preventing them from seeing partially loaded pages. Additionally, a preloader allows you to showcase your branding and add a bit of personality to your website.

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

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

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

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

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

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

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

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

نشر القالب:

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

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

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

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

Now, let’s add a الحاوية التي ستضم الرسوم المتحركة قبل التحميل المسبق. تعيين فريد من نوعه معرّف CSS لهذه الحاوية ستسمح لنا باستهدافها باستخدام CSS وجافا سكريبت لاحقًا.

إضافة حاوية:

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

تعيين معرف CSS:

• انتقل إلى متقدم tab of the container’s settings.

• في معرّف CSS الحقل، أدخل التحميل المسبق لـ abc_preload. This ID will be used to apply custom CSS and JavaScript to control the preloader’s behavior.

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

لإنشاء العنصر المرئي من أداة التحميل المسبق الخاصة بك، يمكنك إضافة أيقونة أو الصورة widget to display either a loading icon or your brand’s logo.

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

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

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

• انتقل إلى متقدم tab of the widget’s settings and set the CSS ID to أبك_لودلر.

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

• انتقل إلى الطراز tab and adjust the icon or image size to suit your design. It’s often best to use icons with a size of around 1بكس.

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

Next, we’ll add an HTML widget that contains JavaScript to control when the preloader is displayed and when it disappears. This script will hide the preloader after a short delay, allowing your content to load smoothly.

إضافة أداة 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>

This code will hide the preloader 2 seconds after the page content has started loading. Based on your website’s average load time, you can adjust the 2000 لزيادة التأخير أو تقليله (بالمللي ثانية).

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

• In the HTML widget’s متقدم اضبط مُعرِّف CSS على abc_preloader_adds لمنع التباعد غير المقصود.

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

With the structure in place, we’ll إضافة 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 {
  العرض: لا شيء;
}

https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-15-21-17-14.mp4

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

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

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

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

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

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

الخاتمة

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

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

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

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

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

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

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

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

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

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