هل ترغب في إضافة شعار سريع الاستجابة إلى وحدة Fullwidth Menu الخاصة بك الخاصة بـ Divi بحيث تتكيف مع العرض على الهاتف المحمول؟
هل تعلم أن أكثر من 50٪ من مرور يأتي الإنترنت من الأجهزة المحمولة؟ هذا يعني أن النسخة المحمولة من ملف موقع انترنت مهمة للغاية وقد تكون الطريقة الرئيسية لزيارة شخص ما لصفحتك.
تأكد الخاص بك موقع انترنت تعد الاستجابة السريعة والصديقة للجوال خطوة أساسية في تصميم موقع انترنت.
في هذا البرنامج التعليمي ، سنوضح لك كيفية إضافة شعار متجاوب إلى وحدة قائمة Fullwidth الخاصة بك باستخدام خيارات الاستجابة المضمنة في Divi.
سيسمح لك ذلك بإضافة شعار أكبر أو أكثر تعقيدًا سيظهر على الشاشات الأكبر وشعارًا أصغر أو أبسط سيظهر على الشاشات الأصغر.
لنبدأ!
مسح
إليك معاينة لما سنصممه. سيكون لإصدار سطح المكتب من موقع الويب شعار موسع بنص إضافي ، وستحتوي نسخة الهاتف المحمول من الشعار على العلامة التجارية الأساسية للشعار فقط.
ما تحتاجه للبدء
جميع أولاً ، قم بتثبيت وتفعيل سمة Divi وتأكد من أن لديك أحدث إصدار من Divi على موقع الويب الخاص بك. بعد ذلك، تأكد من أن لديك نسختين على الأقل من شعارك: أحدهما لعرض سطح المكتب لموقعك والآخر لعرض الجوال. وأخيراً قم بتحميل القالب قوالب الرأس والتذييل لحزمة تخطيط المدرسة الثانوية لديفي.
أنت الآن جاهز للبدء!
كيفية إضافة شعار متجاوب إلى وحدة الرأس ذات العرض الكامل في Divi
قم بإنشاء الوحدة النمطية Fullwidth Header
اقرأ أيضا: Divi: كيفية عرض وحدة Fullwidth Header في وضع ملء الشاشة
إضافة قسم العرض الكامل
نظرًا لأن القائمة الأصلية تم إنشاؤها باستخدام وحدة قائمة قياسية ، فسنحتاج إلى تعديل التخطيط لإضافة وحدة Fullwidth Header.
أولاً ، أضف قسم كامل العرض (عرض كامل) إلى العنوان العام ضمن القائمة الحالية.
في إعدادات قسم العرض الكامل ، انتقل إلى متقدم، à Puis تأثيرات التمرير.
- موقف مثبت: التمسك بالأعلى
بعد ذلك ، أضف لون الخلفية.
- الخلفية: # f5f0eb
أضف لونًا مختلفًا للخلفية في الحالة اللاصقة.
- الخلفية (مثبت): #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 التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
