Souhaitez vous ajouter un logo réactif à votre module Fullwidth Menu de Divi afin qu'il s'adapte à la vue sur mobile ?
هل تعلم أن أكثر من 50% من زيارات الإنترنت تأتي من الأجهزة المحمولة؟ هذا يعني أن النسخة المحمولة من موقعك الإلكتروني بالغة الأهمية، وقد تكون الوسيلة الرئيسية لزيارة صفحتك.
إن التأكد من أن موقع الويب الخاص بك يستجيب ويتوافق مع الأجهزة المحمولة يعد خطوة أساسية في تصميم موقع الويب.
في هذا البرنامج التعليمي، سنوضح لك كيفية إضافة شعار مستجيب إلى وحدة القائمة ذات العرض الكامل باستخدام خيارات الاستجابة المضمنة في Divi.
سيسمح لك ذلك بإضافة شعار أكبر أو أكثر تعقيدًا سيظهر على الشاشات الأكبر وشعارًا أصغر أو أبسط سيظهر على الشاشات الأصغر.
لنبدأ!
مسح
إليك معاينة لما سنصممه. سيكون لإصدار سطح المكتب من موقع الويب شعار موسع بنص إضافي ، وستحتوي نسخة الهاتف المحمول من الشعار على العلامة التجارية الأساسية للشعار فقط.
ما تحتاجه للبدء
جميع أولاً ، قم بتثبيت وتفعيل سمة Divi تأكد من تثبيت أحدث إصدار من Divi على موقعك. بعد ذلك، تأكد من وجود نسختين على الأقل من شعارك: نسخة لسطح المكتب ونسخة للجوال. أخيرًا، نزّل القالب. قوالب الرأس والتذييل لحزمة تخطيط المدرسة الثانوية لديفي.
أنت الآن جاهز للبدء!
كيفية إضافة شعار متجاوب إلى وحدة الرأس ذات العرض الكامل في Divi
قم بإنشاء الوحدة النمطية Fullwidth Header
اقرأ أيضا: Divi: كيفية عرض وحدة Fullwidth Header في وضع ملء الشاشة
إضافة قسم العرض الكامل
نظرًا لأن القائمة الأصلية تم إنشاؤها باستخدام وحدة قائمة قياسية ، فسنحتاج إلى تعديل التخطيط لإضافة وحدة Fullwidth Header.
أولاً ، أضف قسم كامل العرض (عرض كامل) إلى العنوان العام ضمن القائمة الحالية.
في إعدادات قسم العرض الكامل ، انتقل إلى متقدم، à Puis تأثيرات التمرير.
- موقف مثبت: التمسك بالأعلى
بعد ذلك ، أضف لون الخلفية.
- الخلفية: # f5f0eb
Ajoutez une couleur différente pour l’arrière-plan à l'état sticky.
- الخلفية (مثبت): #ffffff
أضف وحدة Fullwidth Header
الآن دعنا نضيف وحدة Fullwidth Header.
افتح إعدادات الوحدة وأزل الخلفية.
لتكرار مظهر القائمة الأصلية بسهولة ، يمكننا استخدام ميزة نسخ الأنماط لنسخ بعض الإعدادات المخصصة.
أنظر أيضا: ديفي: كيفية تغيير التدرج اللوني للخلفية عند التمرير
افتح إعدادات القائمة الرئيسية ، ثم انقر بزر الماوس الأيمن فوق قائمة النص وحدد نسخ أنماط نص القائمة.
بمجرد النسخ ، انقر فوق النقاط الثلاث لوحدة Fullwidth Header ، ثم حدد أنماط نص القائمة السابقة.
الآن سنكرر نفس الخطوات مع إعدادات القائمة المنسدلة.
كرر مرة أخرى للرموز.
قم بتعيين محاذاة النص إلى اليمين.
- محاذاة النص: صحيح
اضبط أقصى ارتفاع للشعار أسفله تصميمثم التحجيم.
- أقصى ارتفاع للشعار: 50 بكسل
أضف CSS التالية إلى القسم قائمة الارتباط ضمن CSS مخصص.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
أخيرًا ، اضبط الحشوة العلوية والسفلية.
- المساحة المتروكة: 10 بكسل
- الحشو السفلي: 10 بكسل
الآن احذف قسم القائمة الأصلي.
أضف شعارًا سريع الاستجابة
الآن سنضيف الشعار المتجاوب. لحسن الحظ ، تجعل Divi هذا الأمر سهلاً من خلال خيارات الاستجابة المضمنة.
سو وصف المنتج، افتح إعدادات الشعار وقم بتحميل إصدار سطح المكتب لشعارك.
حدد رمز وضع الهاتف المحمول لاستخدام الخيارات سريعة الاستجابة ، ثم استبدل شعار الهاتف المحمول بشعارك المتجاوب.
قم بإنشاء صفحة جديدة بتخطيط محدد مسبقًا
لرؤية قائمة العرض الكامل مع الشعار المتجاوب قيد التشغيل ، دعنا ننشئ صفحة جديدة بتخطيط محدد مسبقًا من مكتبة Divi.
بالنسبة لهذا التصميم ، سنستخدم الصفحة الرئيسية للمدرسة الثانوية الخاصة بـ حزمة تخطيط المدرسة الثانوية لمطابقة الرأس والتذييل.
أضف صفحة جديدة إلى موقع الويب الخاص بك وأعطها عنوانًا ، ثم حدد الخيار استخدم Divi Builder. نظرًا لأننا قمنا باستيراد تخطيط الرأس والتذييل كرأس عام وتذييل الصفحة ، استخدم التخطيط الافتراضي لهذه الصفحة.
سنستخدم تخطيطًا معد مسبقًا من مكتبة Divi لهذا المثال ، لذا حدد تصفح التخطيطات.
ابحث عن التخطيط وحدده الصفحة الرئيسية للمدرسة الثانوية.
اختر استخدم هذا التخطيط لإضافة التنسيق إلى صفحتك.
نتيجة نهائية
الآن دعونا نلقي نظرة على تصميمنا النهائي.
تحميل DIVI الآن !!!
الخاتمة
يعد امتلاك موقع ويب متوافق مع الجوّال وسريع الاستجابة أكثر أهمية من أي وقت مضى. وبفضل خيارات Divi المدمجة ، أصبح بناء واحد أسهل من أي وقت مضى!
باستخدام الشعار سريع الاستجابة ، ستكون هوية علامتك التجارية واضحة دائمًا ، بغض النظر عن حجم الشاشة.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...