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

مسح

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

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

ابدأ بالانتقال إلى Divi Theme Builder.

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

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

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

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

لون الخلفية

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

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

التحجيم

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

• العرض: 100٪

مباعدة

إضافة أيضا الحشو العلوي والسفلي مخصصة.

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

صندوق الظل

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

• مربع الظل طمس القوة: 50px
• لون الظل: rgba (0,0,0,0,08،XNUMX،XNUMX،XNUMX،XNUMX)

معرف CSS

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

• معرف CSS: قسم الرأس العام

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

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

position: fixed;top: 0;

مؤشر Z

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

• مؤشر Z: 99999

أضف سطرًا جديدًا

هيكل العمود

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

التحجيم

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

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

مباعدة

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

• الحشو العلوي: 0px
• الحشو السفلي: 0px

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

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

display: flex;align-items: center;

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

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

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

إعادة تعيين أنماط وسائل الإعلام الاجتماعية الفردية

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

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

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

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

انحياز

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

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

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

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

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

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

وتغيير لون رمز التمرير.

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

الحدود

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

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

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

اختر القائمة

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

تنزيل الشعار

ثم تحميل شعار في الوحدة النمطية.

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

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

توفير

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

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

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

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

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

تحوم نص القائمة

تغيير نص القائمة على التحويم.

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

قائمة منسدلة

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

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

الرموز

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

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

التحجيم

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

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

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

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

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

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

أضف نسخة

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

إضافة رابط

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

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

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

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

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

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

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

• لون النص: # c2ab92

التحجيم

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

• العرض: 12vw (سطح المكتب) ، 18vw (الكمبيوتر اللوحي) ، 22vw (الهاتف)
• محاذاة الوحدة: المركز

مباعدة

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

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

الحدود

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

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

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

أدخل كود JQuery و CSS

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

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

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

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

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

مسح

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

الأفكار النهائية

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