كيفية تضمين شريط القائمة الأساسي في تصميم صفحة Divi الخاصة بك

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

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

دعنا نذهب اليها!

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

معاينة

لنبدأ بإلقاء نظرة على النتيجة النهائية على أحجام شاشات مختلفة:

إعدادات مخصص الموضوع

انتقل إلى مُخصص القوالب

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

حفظ صورة الخلفية

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

تحميل صورة الخلفية إلى الإعدادات العامة

بعد ذلك ، انتقل إلى الإعدادات العامة> الخلفية وقم بتحميل الصورة إلى خلفية موقع الويب الخاص بك.

• صورة خلفية Strech: ممكّن
• موقف الخلفية: ثابت

إعدادات شريط القوائم الأساسية

سنقوم أيضًا بدمج شريط القوائم الأساسي جاهزًا بتصميم Divi الخاص بنا. للقيام بذلك ، سنحتاج إلى تعديل إعدادات شريط القوائم الأساسي أولاً. انتقل إلى Header & Navigation> Primary Menu Bar واستخدم الإعدادات التالية:

• أقصى ارتفاع للشعار: 100
• حجم النص: 18
• تباعد الأحرف: -1
• الخط: بوبينز
• لون النص: # 333333
• لون الارتباط النشط: # f55c83
• لون الخلفية: rgba (255،255،255،0)
• لون خلفية القائمة المنسدلة: #FFFFFF

أضف صفحة جديدة

صفحة CSS المخصصة

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

#main-header {
margin-top: 140px;
}

إضافة قسم جديد

لون الخلفية

لنبدأ بالتصميم! أضف صفحة جديدة ، وانتقل إلى Visual Builder وأضف قسمك الأول. افتح إعدادات القسم التالية وأضف "rgba (255،255،255،0.81)" كلون للخلفية. سيسمح هذا لصورة خلفية موقعنا بالظهور.

تباعد

تابع بالانتقال إلى إعدادات التباعد وإضافة الهامش المخصص والحشو التاليين:

• الهامش العلوي والسفلي: 100 بكسل
• الهامش الأيمن والأيسر: 60 بكسل
• الحشوة العلوية: 135 بكسل
• الحشو السفلي: 0 بكسل

زوايا مدورة

أضف "30 بكسل" إلى كل ركن من أركان القسم أيضًا.

الحدود

بعد ذلك ، أضف حدًا علويًا إلى القسم الخاص بك:

• عرض الحد العلوي: 35 بكسل
• لون الحد العلوي: # 333333

مربع الظل

للإنهاء ، أضف ظل صندوق دقيق للغاية.

• قوة مربع الظل الضبابية: 61 بكسل
• قوة انتشار الظل المربع: -13 بكسل

أضف الصف رقم 1

هيكل العمود

حان الوقت لبدء إضافة صفوف ووحدات! أضف صفك الأول باستخدام عمودين متساويين الحجم.

تحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم:

• جعل هذا الصف بعرض كامل: نعم
• معادلة ارتفاعات العمود: نعم

تباعد

أضف بعض المساحة المتروكة بعد ذلك:

• الحشوة العلوية: 250 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)
• الحشو السفلي: 200 بكسل (سطح المكتب) ، 100 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)
• الحشوة اليسرى للعمود 1: 50 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)

أضف وحدة نص العنوان إلى العمود 1

إعدادات نص H1

يمكننا الآن البدء في إضافة الوحدات. سنبدأ بالعمود الأول بإضافة عنوان نصي جديد.

• خط العنوان: بوبينز
• وزن خط العنوان: متوسط
• حجم نص العنوان: 120 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي) ، 58 بكسل (الهاتف)

أضف لونًا مختلفًا إلى جزء من النسخة

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

أضف وحدة نص الوصف إلى العمود 1

إعدادات النص

أسفل وحدة النص السابقة مباشرةً ، امض قدمًا وأضف وصفًا لوحدة النص باستخدام إعدادات النص التالية:

• خط النص: بوبينز
• وزن خط النص: عادي
• حجم النص: 20 بكسل (سطح المكتب) ، 15 بكسل (الجهاز اللوحي والهاتف)
• ارتفاع خط النص: 2em

تباعد

سنحتاج إلى بعض الهامش الإضافي لوحدة النص هذه:

• الهامش العلوي والسفلي: 50 بكسل

أضف وحدة الزر إلى العمود 1

إعدادات الزر

الوحدة الأخيرة في هذا العمود هي وحدة الأزرار. بعد إضافة نسخة CTA ، قم بتغيير أنماط الزر:

• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: #FFFFFF
• لون التدرج 1: # f45085
• لون التدرج 2: # f88c7e
• اتجاه التدرج: 137 درجة
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 40 بكسل
• خط الزر: بوبينز
• وزن خط الزر: عادي
• نمط الخط: أحرف كبيرة

تباعد

افتح إعدادات التباعد بعد ذلك وأضف بعض الهامش والحشو إلى الزر الخاص بك:

• الهامش السفلي: 100 بكسل (سطح المكتب) ، 20 بكسل (الجهاز اللوحي والهاتف)
• الحشوة العلوية والسفلية: 15 بكسل
• الحشوة اليسرى واليمنى: 50 بكسل

مربع الظل

أخيرًا وليس آخرًا ، سنستخدم ظل مربع دقيقًا جدًا لإنشاء مزيد من العمق على صفحتنا:

• مربع قوة طمس الظل: 55 بكسل
• قوة انتشار الظل المربع: -4 بكسل
• لون الظل: rgba (84،84،84،0.25)

أضف وحدة الصورة النمطية إلى العمود 2

حفظ وتحميل الصورة

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

أضف الصف رقم 2

هيكل العمود

حان الوقت لإضافة الصف الثاني! اختر هيكل العمود التالي له:

لون خلفية العمود 1

بعد ذلك ، افتح إعدادات الصف وأضف "#FFFFFF" كلون خلفية العمود 1.

نسخ الخلفية زر التدرج

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

قم بلصق الخلفية المتدرجة في العمود 2

بعد ذلك ، ارجع إلى إعدادات الصف الخاص بك والصق خلفية التدرج في العمود الثاني.

لون خلفية العمود 3

بالنسبة للعمود الثالث ، نستخدم لون الخلفية "#FFFFFF".

تحجيم

انتقل إلى إعدادات التحجيم التالية وقم بتغيير الإعدادات:

• استخدام العرض المخصص: نعم
• العرض المخصص: 2600 بكسل
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

سنحتاج أيضًا إلى بعض الحشو الإضافي:

• الحشوة العلوية والسفلية: 0 بكسل
• الحشوة العلوية والسفلية للعمود: 30 بكسل

مربع الظل

أخيرًا وليس آخرًا ، سنستخدم ظل الصندوق الدقيق:

• قوة مربع الظل الضبابية: 61 بكسل
• قوة انتشار الظل المربع: -20 بكسل

إضافة وحدة دعاية مغالى فيها رقم 1

اختر الرمز

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

إعدادات الرمز

قم بتغيير إعدادات الرمز الخاص بك وفقًا لذلك:

• لون الأيقونة: # f55c83
• وضع الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الرمز: 88 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 50 بكسل (الهاتف)

إعدادات نص العنوان

افتح إعدادات نص العنوان بعد ذلك وقم بإجراء بعض التغييرات:

• خط العنوان: بوبينز
• وزن خط العنوان: متوسط
• حجم نص العنوان: 34 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 23 بكسل (الهاتف)

إعدادات النص الأساسي

يجب تعديل النص الأساسي أيضًا:

• خط الجسم: بوبينز
• وزن خط الجسم: عادي
• حجم النص الأساسي: 16 بكسل (سطح المكتب) ، 14 بكسل (الجهاز اللوحي والهاتف)
• ارتفاع خط الجسم: 2em

تباعد

ولإنشاء تصميم أكثر جاذبية من الناحية الجمالية ، أضف بعض الحشو:

• الحشوة العلوية والحشو السفلي: 100 بكسل
• الحشوة اليسرى واليمنى: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 10 بكسل (الهاتف)

استنساخ وحدة Blurb مرتين ووضعها في الأعمدة المتبقية

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

تغيير الوحدة النمطية Blurb في العمود 2

تغيير لون الأيقونة

لا تحتاج وحدات Blurb النمطية الثالثة إلى أي تغييرات ، بينما تحتاج الثانية. ابدأ بتغيير لون الأيقونة إلى اللون الأبيض.

تغيير لون النص

افتح إعدادات النص بعد ذلك وقم بتغيير لون النص إلى "فاتح".

تعطيل الملاحة الثابتة

للتأكد من احتفاظ شريط القوائم الأساسي بمكانه داخل التصميم ، سنحتاج إلى تعطيل شريط التنقل الثابت أيضًا. للقيام بذلك ، انتقل إلى WordPress Dashboard> Divi> Theme Options> تعطيل خيار Fixed Navigation Bar وحفظ الإعدادات .

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة على أحجام الشاشات المختلفة:

افكار اخيرة

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