كيفية تبديل رأس Divi الخاص بك برأس آخر في التمرير

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. انتقل إلى Divi Theme Builder وابدأ في إنشاء رأس عام

انتقل إلى Divi Theme Builder

ابدأ بالانتقال إلى Divi Theme Builder في الواجهة الخلفية لموقع WordPress الخاص بك وانقر فوق 'Add Global Header'.

بناء رأس عام

ثم انقر فوق "Build Global Header" لإعادة توجيهك إلى محرر القالب.

2. قم بإنشاء كلا الرأسين في نفس القسم

تعديل القسم

تحجيم

بمجرد دخولك إلى محرر القوالب ، ستلاحظ قسمًا. افتح إعدادات القسم وتأكد من أن عرض القسم "100٪".

• العرض: 100٪

تباعد

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

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

مربع الظل

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

• مربع الظل الرأسي: 15 بكسل
• لون الظل: rgba (0،0،0،0.06)

موقع

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

• المركز: ثابت
• الموقع: توب سنتر

إضافة رأس الصف رقم 1

هيكل العمود

سيكون كلا الرأسين اللذين سننشئهما جزءًا من نفس القسم. سنستخدم صفًا منفصلاً لكل رأس. أضف رأس الصف الأول باستخدام بنية العمود التالية:

لون الخلفية

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتغيير لون الخلفية.

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

تحجيم

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

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

تباعد

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

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

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

أكمل إعدادات الصف بإضافة سطرين من كود CSS إلى العنصر الرئيسي للصف. سيساعدنا رمز CSS هذا في محاذاة محتوى العمود بالكامل.

display: flex;
align-items: center;

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

تحميل الصور

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

انتقام

قم بتغيير محاذاة الوحدة بعد ذلك.

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

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

اختر قائمة

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

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

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

تخطيط

انتقل إلى علامة تبويب التصميم وقم بتغيير التخطيط وفقًا لذلك:

• النمط: توسيط

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

بعد ذلك ، قم بإجراء بعض التغييرات على إعدادات نص القائمة.

• خط القائمة: Roboto
• وزن خط القائمة: غامق
• لون نص القائمة: #ffffff (سطح المكتب) ، # 000000 (الجهاز اللوحي والهاتف)
• حجم نص القائمة: 18 بكسل

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

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

• لون خط القائمة المنسدلة: 000000 #

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

نقوم أيضًا بتغيير لون رمز قائمة الهامبرغر.

• لون أيقونة قائمة همبرغر: #ffffff

تباعد

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

• الحشوة اليسرى: 30 بكسل (الجهاز اللوحي والهاتف فقط)
• الحشو الأيمن: 30 بكسل (الجهاز اللوحي والهاتف فقط)

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

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

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

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

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

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

انتقام

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

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

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

قم بتعديل لون الرمز أيضًا.

• لون الأيقونة: # 0042c9

الحدود

وأكمل إعدادات الوحدة بإضافة بعض نصف قطر الحدود.

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

إضافة رأس الصف رقم 2

هيكل العمود

إلى العنوان الثاني! أضف صفًا جديدًا باستخدام بنية العمود التالية:

تحجيم

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

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

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

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

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

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

display: flex;
align-items: center;

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

وأكمل إعدادات الصف بفتح إعدادات العمود 3 واستخدام لون الخلفية.

• لون الخلفية: # 0042c9

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

تحميل الصور

في العمود 1 ، الوحدة الوحيدة التي نحتاجها هي وحدة صورة. قم بتحميل شعار من اختيارك.

انتقام

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

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

وحدة قائمة النسخ ووضعها في العمود 2 من رأس الصف رقم 2

استنساخ وحدة القائمة التي تم استخدامها في الصف السابق ووضع النسخة المكررة في العمود الأوسط للصف الثاني.

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

افتح وحدة القائمة المكررة وقم بتغيير لون نص القائمة.

• لون نص القائمة: # 0042c9

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

قم بتعديل إعدادات نص القائمة المنسدلة أيضًا.

• لون خط القائمة المنسدلة: # ffc21d

تعديل إعدادات الأيقونة

أكمل إعدادات وحدة القائمة عن طريق تغيير لون رمز قائمة الهامبرغر.

• لون أيقونة قائمة همبرغر: # 0042c9

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

أضف نسخة

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

انتقام

قم بتعديل محاذاة الزر بعد ذلك.

• محاذاة الزر: الوسط

إعدادات الزر

بعد ذلك ، قم بتصميم الزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل (سطح المكتب) ، 18 بكسل (جهاز لوحي) ، 15 بكسل (هاتف)
• لون نص الزر: #ffffff
• عرض حد الزر: 0 بكسل

• خط الزر: Roboto
• وزن خط الزر: غامق

تباعد

وأكمل إعدادات الوحدة بإضافة بعض الحشو المخصص عبر أحجام الشاشات المختلفة.

• الحشوة العلوية: 33 بكسل (سطح المكتب) ، 35 بكسل (جهاز لوحي) ، 38 بكسل (هاتف)
• الحشو السفلي: 33 بكسل (سطح المكتب) ، 35 بكسل (جهاز لوحي) ، 38 بكسل (هاتف)

2. إضافة فئات CSS

الجزء

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

• فئة CSS: قسم الرأس

رأس الصف رقم 1

ثم افتح رأس الصف الأول واستخدم فئة CSS التالية:

• فئة CSS: header-1

رأس الصف # 2

افتح الصف الثاني أيضًا. استخدم فئة CSS التالية لها:

• فئة CSS: header-2

3. أضف كود JQuery & CSS

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

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

إضافة كود JQuery (بين علامات البرنامج النصي)

بعد ذلك ، أضف الأسطر التالية من التعليمات البرمجية لـ CSS بين علامات البرنامج النصي كما ترى في شاشة الطباعة أدناه:

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

إضافة كود CSS (بين علامات الأنماط)

أضف كود CSS التالي بين علامات النمط أيضًا:

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

4. حفظ تغييرات منشئ السمات وعرض النتيجة

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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