كيف تكشف عن رأسك العام أثناء التمرير لأعلى وإخفاء أثناء التمرير لأسفل باستخدام Divi

عندما تقوم بإنشاء العنوان العام الخاص بك ، هناك العديد من الأشياء التي تحتاج إلى أخذها في الاعتبار. تحتاج العناصر التي تضعها في رأس الصفحة إلى مساعدة زوار موقعك على التنقل بسهولة. لتقليل الوقت الذي يقضيه الأشخاص في التنقل ، يختار العديد من مصممي الويب رأسًا علويًا ثابتًا ، مما يسمح للزوار بالانتقال إلى صفحات أو منشورات أخرى على الفور. هذا مناسب حقًا ، ولكن عند إنشاء رأس ثابت ، يتم أخذ جزء كبير من ارتفاع منفذ العرض للزائرين ، مما يسمح بظهور محتوى أقل في وقت واحد. إذا لم تكن على استعداد لتقديم تلك التضحية ، فاعلم أنه ليس عليك ذلك. يمكنك الحصول على مزايا الرأس الثابت من خلال السماح للرأس العام بالكشف عندما يقوم الزوار بالتمرير لأعلى ، وإخفائه عند التمرير لأسفل. اليوم ، سنوجهك من خلال إخفاء رأسك العالمي والكشف عنه باستخدام Divi's 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

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

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

هناك ، انقر فوق "إضافة رأس عام" وحدد "إنشاء رأس عام".

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

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

لون الخلفية

داخل محرر القالب ، ستلاحظ قسمًا. افتح هذا القسم وقم بتغيير لون الخلفية.

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

تحجيم

انتقل إلى علامة تبويب التصميم وحدد عرضًا بنسبة 100٪ للقسم الخاص بك بعد ذلك.

• العرض: 100٪

تباعد

أضف بعض الحشو العلوي والسفلي المخصص أيضًا.

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

مربع الظل

سنقوم بتطبيق ظل مربع خفي على قسمنا أيضًا.

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

معرف CSS

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

• معرّف CSS: global-header-section

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

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

position: fixed;
top: 0;

فهرس Z.

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

• الفهرس Z: 99999

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

هيكل العمود

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

تحجيم

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

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

تباعد

قم بإزالة جميع الحشو الافتراضي العلوي والسفلي أيضًا.

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

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

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

display: flex;
align-items: center;

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

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

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

إعادة تعيين أنماط الشبكة الاجتماعية الفردية

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

أضف مسافات شبكة اجتماعية فردية

ستحتاج إلى فتح إعدادات كل شبكة اجتماعية على حدة وإضافة مساحة سفلية في إعدادات التباعد.

• الحشو السفلي: 0.5vw

انتقام

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

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

إعدادات الرمز الافتراضية

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

• لون الأيقونة: # 000000

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

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

• لون الأيقونة: # c2ab92

الحدود

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

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: # 000000

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

اختر قائمة

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

تحميل الشعار

قم بتحميل شعار للوحدة التالية.

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

وقم بإزالة لون الخلفية.

تخطيط

بعد ذلك ، انتقل إلى علامة تبويب التصميم وتأكد من تطبيق الإعدادات التالية على التخطيط:

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

نص القائمة الافتراضي

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

• لون الارتباط النشط: # c2ab92
• خط القائمة: الغاق Garamond
• لون النص: # 000000
• حجم نص القائمة: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)

نص قائمة التمرير

قم بتعديل نص القائمة عند التمرير.

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

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

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

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

الأيقونات

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

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

تحجيم

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

• أقصى عرض للشعار: 5vw (سطح المكتب) ، 10vw (كمبيوتر لوحي) ، 13vw (هاتف)

ارتباط القائمة CSS

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

padding-bottom: 1vw;
border-bottom: 1px solid #000;

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

أضف نسخة

إلى آخر وحدة! هناك ، الوحدة الوحيدة التي نحتاجها هي وحدة نصية.

إضافة رابط

ستكون هذه الوحدة بمثابة CTA. أضف ارتباط من اختيارك.

• عنوان URL لارتباط الوحدة النمطية: #

الإعدادات الافتراضية للنص

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

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

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

تغيير لون النص عند التمرير.

• لون النص: # c2ab92

تحجيم

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

• العرض: 12vw (Desktop) ، 18vw (Tablet) ، 22vw (Phone)
• محاذاة الوحدة: المركز

تباعد

وأضف بعض الحشو السفلي في إعدادات التباعد.

• الحشو السفلي: 0.5vw

الحدود

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

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: # 000000

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

أدخل JQuery & CSS Code

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

jQuery(function($){
  
var topPosition = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});

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

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

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

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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