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

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

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

1. انتقل إلى Divi Theme Builder وأضف قالبًا جديدًا

انتقل إلى Divi Theme Builder

ابدأ بالذهاب إلى Divi Theme Builder.

ابدأ في إنشاء رأس عام

ثم انقر فوق "إنشاء رأس عام" وحدد "إنشاء رأس عام".

2. ابدأ في إنشاء رأس عام

إعدادات القسم

لون الخلفية

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

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

تحجيم

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

• العرض: 100٪

تباعد

قم بتعديل الحشوة العلوية والسفلية للقسم أيضًا.

• الحشوة العلوية: 2vw
• الحشوة السفلية: 2vw

مربع الظل

وافصل محتوى الصفحة عن العنوان العام بإضافة ظل مربع دقيق إلى القسم التالي.

• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.13)

معرف CSS

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

• معرف CSS: مساحة القسم

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

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

position: fixed;
top: 0;

فهرس Z.

للتأكد من بقاء القسم أعلى محتوى الصفحة والنشر بالكامل ، سنعمل على زيادة فهرس z للقسم أيضًا.

• الفهرس Z: 99999

أضف صفًا جديدًا

هيكل العمود

بمجرد الانتهاء من إعدادات العمود ، تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

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

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

تباعد

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

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

معرف CSS

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

• معرف CSS: عرض الصف

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

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

display: flex;
align-items: center;

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

تحميل الشعار

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

تحجيم

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

• العرض: 5vw (Desktop) ، 9vw (Tablet) ، 13vw (Phone)

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

اختر قائمة

انتقل إلى العمود الثاني وأدخل وحدة القائمة. حدد قائمة من اختيارك.

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

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

تخطيط

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

• النمط: توسيط
• اتجاه القائمة المنسدلة: لأسفل

نص القائمة

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

• خط القائمة: Rubik
• لون نص القائمة: # 000000
• حجم نص القائمة: 0.9vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)

القائمة المنسدلة

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

• لون خلفية القائمة المنسدلة: #ffffff
• لون خط القائمة المنسدلة: # 2970fa

الأيقونات

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

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

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

أضف نسخة

إلى العمود التالي والأخير. أضف وحدة زر مع نسخة من اختيارك.

انتقام

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

• محاذاة الزر: يمين

إعدادات الزر

صمم الزر وفقًا لذلك:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.8vw (سطح المكتب) ، 1.5vw (جهاز لوحي) ، 2vw (هاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # 2970fa
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 0 بكسل
• تباعد حرف الزر: 1 بكسل
• خط الزر: Rubik
• نمط خط الزر: أحرف كبيرة

تباعد

وأضف بعض قيم الحشو المخصصة عبر أحجام الشاشات المختلفة.

• الحشوة العلوية: 0.8vw (سطح المكتب) ، 1.8vw (Tablet) ، 2.5vw (الهاتف)
• الحشوة السفلية: 0.8vw (سطح المكتب) ، 1.8vw (Tablet) ، 2.5vw (الهاتف)
• الحشوة اليسرى: 1.5vw (سطح المكتب) ، 3vw (Tablet) ، 4vw (الهاتف)
• الحشو الأيمن: 1.5vw (Desktop) ، 3vw (Tablet) ، 4vw (Phone)

مربع الظل

أكمل إعدادات الوحدة بإضافة ظل مربع دقيق.

• مربع الظل الرأسي: 20 بكسل
• مربع قوة طمس الظل: 30 بكسل
• لون الظل: rgba (41،112،250،0.2)

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

أدخل JQuery & CSS Code

يعالج الجزء التالي والأخير من هذا البرنامج التعليمي تأثير الانكماش ، باستخدام معرفي CSS اللذين خصصناهما للقسم والصف. أضف Code Module إلى العمود 2 باستخدام الأسطر التالية من كود JQuery و CSS. تأكد من وضع كود JQuery بين علامات البرنامج النصي ورمز CSS بين علامات النمط.

jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});

.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}

.slow-transition {
transition: all 0.9s ease-out 0s;
}

#main-content {
margin-top: 5vw;
}

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

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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