كيف تجعل شعارك يتقاطع مع أشرطة القائمة الأساسية والثانوية داخل رأس Divi الخاص بك

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

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

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل قالب Global Header مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

1. إنشاء قالب رأس عمومي جديد

انتقل إلى Divi Theme Builder

ابدأ بالانتقال إلى Divi Theme Builder في الواجهة الخلفية لموقع WordPress الخاص بك. بمجرد الوصول إلى هناك ، انقر فوق "إضافة رأس عام".

إضافة رأس عمومي جديد

سوف تظهر القائمة المنسدلة. لبدء البناء من البداية ، تابع بتحديد "إنشاء رأس عام".

2. بناء تصميم الرأس

إضافة قسم التخصص

لبناء هذا التصميم ، سنستخدم قسمًا متخصصًا.

هيكل العمود

هذا هو هيكل العمود الذي نستخدمه لقسم التخصص لدينا:

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

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

• العمود 1 لون الخلفية: rgba (255،191،0،0.27)

تحجيم

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

• معادلة ارتفاعات العمود: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض الداخلي: 100٪
• أقصى عرض داخلي: 2580 بكسل

تباعد

قم بتعديل إعدادات التباعد أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة العلوية للعمود 1: 0 بكسل
• المساحة المتروكة السفلية للعمود 1: 0 بكسل
• الحشوة العلوية للعمود 2: 0 بكسل
• الحشوة السفلية للعمود 2: 0 بكسل

معرّفات CSS للعمود

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

• معرّف CSS للعمود 1: رأس العمود الأول
• معرّف CSS للعمود 2: رأس العمود الثاني

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

تحميل الصور

حان الوقت لإضافة وحدات ، بدءًا من وحدة الصورة في العمود 1. قم بتحميل شعارك.

انتقام

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

• محاذاة الصورة: المركز

تحجيم

قم بتطبيق أقصى عرض على إعدادات الحجم أيضًا.

• العرض الأقصى: 100 بكسل

الرؤية

وإخفاء الوحدة بأحجام أصغر للشاشة.

أضف الصف رقم 1 إلى العمود 2

هيكل العمود

في العمود 2 من قسم التخصص ، سنضيف الصف الأول باستخدام بنية العمود التالية:

لون الخلفية

افتح إعدادات الصف واستخدم لون الخلفية التالي:

• لون الخلفية: # a163ff

تباعد

انتقل إلى علامة تبويب تصميم الصف وقم بتغيير إعدادات التباعد كما يلي:

• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

الحدود

قم بتطبيق إعدادات الحدود التالية بعد ذلك:

• عرض الحد السفلي: 3 بكسل
• عرض الحد الأيسر:
  • سطح المكتب: 3 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل
• لون الحدود: # 6c2eb9

العنصر الرئيسي CSS

واستخدم الأسطر التالية من كود CSS داخل العنصر الرئيسي للصف:

display: flex;
justify-content: center;
align-items: center;

إخفاء العمود 1 و 2 في أحجام الشاشات الأصغر

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

أضف وحدة متابعة الوسائط الاجتماعية إلى العمود 1

أضف الشبكات الاجتماعية

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

لون خلفية الشبكة الاجتماعية الفردية

قم بتعديل لون الخلفية لكل شبكة اجتماعية على حدة.

• لون الخلفية: #ffeeba

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

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

• لون الأيقونة: # 6c2eb9

الحدود

أضف بعض الزوايا الدائرية إلى إعدادات الحدود أيضًا.

• جميع الزوايا: 100 بكسل

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: بوبينز
• محاذاة النص: الوسط

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

أضف نسخة

في العمود 3 ، الوحدة الوحيدة التي نحتاجها هي وحدة الأزرار. أضف نسخة من اختيارك.

محاذاة الزر

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير محاذاة الزر عبر أحجام الشاشات المختلفة.

• محاذاة الزر:
  • سطح المكتب: صحيح
  • الجهاز اللوحي والهاتف: المركز

إعدادات الزر

صمم الزر التالي.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 14 بكسل
• لون نص الزر: # 6c2eb9
• لون خلفية الزر: #ffeeba
• خط الزر: بوبينز
• وزن خط الزر: غامق
• نمط خط الزر: أحرف كبيرة

• إظهار رمز الزر: نعم
• وضع رمز الزر: يسار

تباعد

وقم بتطبيق قيم الحشو التالية:

• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل
• الحشو الأيسر: 50 بكسل
• الحشو الأيمن: 30 بكسل

أضف الصف رقم 2 إلى العمود 2

هيكل العمود

يستخدم الصف التالي والأخير الذي نحتاجه في العمود الثاني من القسم لدينا بنية العمود التالية:

لون الخلفية

افتح إعدادات الصف واستخدم لون الخلفية التالي:

• لون الخلفية: rgba (161،99،255،0.1)

تباعد

قم بتعديل إعدادات تباعد الصف بعد ذلك.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

الحدود

بعد ذلك ، قم بتطبيق إعدادات الحدود التالية:

• عرض الحد الأيسر:
  • سطح المكتب: 3 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل
• لون الحد الأيسر: # 6c2eb9

إضافة وحدة قائمة إلى العمود

اختر قائمة

ثم الوحدة التي نحتاجها في هذا الصف هي وحدة القائمة. حدد قائمة من اختيارك.

تحميل الشعار على الكمبيوتر اللوحي والهاتف

بعد ذلك ، قم بتحميل شعار على الجهاز اللوحي والهاتف فقط.

إزالة لون الخلفية

قم بإزالة لون خلفية الوحدة بعد ذلك.

إعدادات نص القائمة

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

• خط القائمة: بوبينز
• لون نص القائمة: # 6c2eb9
• حجم نص القائمة: 16 بكسل

إعدادات القائمة المنسدلة

قم بتطبيق لون خط القائمة المنسدلة التالي بعد ذلك:

• لون خط القائمة المنسدلة: rgba (0،0،0،0)

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

بعد ذلك ، قم بتغيير إعدادات الرمز.

• لون أيقونة عربة التسوق: # 6c2eb9
• لون رمز البحث: # 6c2eb9
• لون أيقونة قائمة همبرغر: # 6c2eb9

تحجيم

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

• عرض الشعار الأقصى:
  • الجهاز اللوحي: 70 بكسل
  • الهاتف: 50 بكسل

أضف وحدة التعليمات البرمجية إلى العمود 1

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

أضف علامات الأنماط

ضع بعض علامات الأنماط داخل مربع الشفرة.

أدخل كود CSS بين علامات الأنماط

وضع الأسطر التالية من كود CSS بين علامات الأنماط:

@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}

#header-second-column {
width: 90% !important;
}
}

@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}

4. حفظ تغييرات Divi Theme Builder

الآن بعد أن أصبح كل شيء في مكانه ، فإن الشيء الوحيد المتبقي هو حفظ جميع تغييرات Divi Theme Builder وعرض النتيجة!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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