ديفي: أفضل موضوع وورد في كل العصور!

أكثر تنزيلات 901.000، Divi هو موضوع WordPress الأكثر شعبية في العالم. إنها كاملة وسهلة الاستخدام وتأتي مع أكثر من 62 قوالب مجانية.

هل ترغب في إضافة شعار سريع الاستجابة إلى وحدة Fullwidth Menu الخاصة بك الخاصة بـ ديفي بحيث تتكيف مع العرض على الهاتف المحمول؟

هل تعلم أن أكثر من 50٪ من حركة الإنترنت تأتي من الأجهزة المحمولة؟ هذا يعني أن النسخة المحمولة من ملف موقع انترنت مهمة للغاية وقد تكون الطريقة الرئيسية لزيارة شخص ما لصفحتك.

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

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

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

لنبدأ!

مسح

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

ما تحتاجه للبدء

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

أنت الآن جاهز للبدء!

كيفية إضافة شعار متجاوب إلى وحدة الرأس ذات العرض الكامل في Divi

قم بإنشاء الوحدة النمطية Fullwidth Header

اقرأ أيضا: Divi: كيفية عرض وحدة Fullwidth Header في وضع ملء الشاشة

إضافة قسم العرض الكامل

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

أولاً ، أضف قسم كامل العرض (عرض كامل) إلى العنوان العام ضمن القائمة الحالية.

في إعدادات قسم العرض الكامل ، انتقل إلى متقدم، à Puis تأثيرات التمرير.

  • موقف مثبت: التمسك بالأعلى

بعد ذلك ، أضف لون الخلفية.

  • الخلفية: # f5f0eb

أضف لونًا مختلفًا للخلفية في الحالة اللاصقة.

بسهولة إنشاء موقع الويب الخاص بك مع Elementor

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

  • الخلفية (مثبت): #ffffff

أضف وحدة Fullwidth Header

الآن دعنا نضيف وحدة Fullwidth Header.

افتح إعدادات الوحدة وأزل الخلفية.

لتكرار مظهر القائمة الأصلية بسهولة ، يمكننا استخدام ميزة نسخ الأنماط لنسخ بعض الإعدادات المخصصة.

أنظر أيضا: ديفي: كيفية تغيير التدرج اللوني للخلفية عند التمرير

افتح إعدادات القائمة الرئيسية ، ثم انقر بزر الماوس الأيمن فوق نص القائمة وحدد نسخ أنماط نص القائمة.

بمجرد النسخ ، انقر فوق النقاط الثلاث لوحدة Fullwidth Header ، ثم حدد أنماط نص القائمة السابقة.

الآن سنكرر نفس الخطوات مع إعدادات القائمة المنسدلة.

كرر مرة أخرى للرموز.

قم بتعيين محاذاة النص إلى اليمين.

  • محاذاة النص: صحيح

اضبط أقصى ارتفاع للشعار أسفله تصميمثم التحجيم.

  • أقصى ارتفاع للشعار: 50 بكسل

هل تريد بيع منتجاتك على الإنترنت؟

قم بتنزيل WooCommerce مجانًا ، أفضل المكونات الإضافية للتجارة الإلكترونية لبيع منتجاتك المادية والرقمية على WordPress وإنشاء متجرك عبر الإنترنت بسهولة. مثالي للمبتدئين.

أضف 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 التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...

%d المدونين مثل هذه الصفحة: