كيفية إضافة أداة تحميل مسبق أنيقة إلى موقع Divi الخاص بك

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

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

لنلقي نظرة.

نظرة خاطفة

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

هذه هي الطريقة التي تظهر بها أداة التحميل المسبق على الهاتف. يمكنك جعله يتم عرضه على الهاتف أم لا ، ويمكنك حتى تعيين نقطة التوقف لتحديد حجم الشاشة التي سيتم عرضها عليه. تركته ممكّنًا للهواتف حتى نتمكن من معرفة كيفية عمله.

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

قم بتثبيت DP Preloader

قم بشراء DP Preloader من Divi Marketplace. DP Preloader هو مكون إضافي تابع لجهة خارجية مع الكثير من الخيارات حول كيفية ومكان عرض أداة التحميل المسبق. عادةً ما تكلف 13 دولارًا وتتضمن استخدامًا غير محدود للموقع وسنة واحدة من الدعم والتحديثات.

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

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

حدد اختيار ملف وانتقل إلى الملف المضغوط على جهاز الكمبيوتر الخاص بك وحدده. انقر فوق التثبيت الآن وانتظر حتى ينتهي التثبيت.

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

خيارات DP Preloader

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

الخيارات العامة لمحمل DP المسبق

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

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

إعدادات DP Preloader Image

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

• أحمر - # ea3900
• أبيض - #ffffff

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

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

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

إعدادات ألوان محمل DP المسبق

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

• أحمر - # ea3900
• أبيض - #ffffff

إعدادات الرسوم المتحركة لمحمل DP المسبق

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

• تأثيرات التحميل المسبق - SlideUp
• سرعة التلاشي لأداة التحميل المسبق - بطيئة
• وقت تأخير التحميل المسبق - 2350

نتائج

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

إليك كيفية ظهور أداة التحميل المسبق على الهاتف.

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

هذا هو عرض الهاتف.

خواطر ختامية

هذه هي نظرتنا إلى كيفية إضافة أداة تحميل مسبق أنيقة إلى موقع Divi الخاص بك. تساعد إضافة أداة التحميل المسبق إلى موقع Divi على الويب في إبلاغ المستخدم بحدوث شيء ما في الخلفية. DP Preloader ممتاز لهذا الغرض. إنه سهل الاستخدام. لديك الكثير من أدوات التحميل المسبق للاختيار من بينها ولديك التحكم في ألوان أداة التحميل المسبق والخلفية. إذا كنت ترغب في تخصيصه بشكل أكبر ، فيمكنك تحميل ملف Gif الخاص بك واستخدامه كأداة التحميل المسبق.

الآن يمكنك بسهولة إضافة أداة تحميل مسبق مخصصة إلى موقع Divi الخاص بك!

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

صورة مميزة عبر FastMotion / shutterstock.com