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

مسح

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

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

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

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

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

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

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

لون الخلفية

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

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

التحجيم

انتقل إلى علامة التبويب "التصميم" وقم بتعيين عرض بنسبة 100% للقسم التالي.

• العرض: 100٪

مباعدة

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

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

صندوق الظل

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

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

معرف CSS

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

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

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

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

position: fixed;top: 0;

مؤشر Z

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

• مؤشر 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

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

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 مجانًا! إذا كانت لديكم أي أسئلة أو اقتراحات، تفضلوا بكتابة تعليق في قسم التعليقات أدناه.