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

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

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

1. بناء هيكل عنصر الرأس داخل قالب رأس جديد

إنشاء قالب رأس عمومي جديد

ابدأ بالذهاب إلى Divi Theme Builder. هناك ، ابدأ في إنشاء رأس عام أو مخصص جديد.

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

لون الخلفية

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

• لون الخلفية: # 001b34

تباعد

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

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

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

هيكل العمود

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

لون الخلفية

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

• لون الخلفية: # 001b34

تحجيم

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

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

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشوة السفلية: 0
• الحشوة اليسرى:
  • سطح المكتب: /
  • الجهاز اللوحي والهاتف: 5٪
• الحشوة اليمنى:
  • سطح المكتب: /
  • الجهاز اللوحي والهاتف: 5٪

إعدادات العمود 1

لون الخلفية

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

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

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

اختر قائمة

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

تحميل الشعار

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

لون الخلفية

ثم قم بتغيير لون الخلفية.

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

الصورة الخلفية

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

• حجم صورة الخلفية: صالح
• موقف صورة الخلفية: المركز

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

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

• حجم نص القائمة: 18 بكسل

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

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

• لون خط القائمة المنسدلة: rgba (0،0،0،0)
• لون خلفية قائمة الجوال: # ddc1a7
• لون نص قائمة الجوال: # 063765

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

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

• لون أيقونة عربة التسوق: #ffffff
• لون رمز البحث: #ffffff
• لون أيقونة قائمة همبرغر: #ffffff

تحجيم

بعد ذلك ، قم بتعديل الحد الأقصى لعرض الشعار في إعدادات التحجيم.

• عرض الشعار الأقصى: 70 بكسل

تباعد

قم بتطبيق بعض قيم الحشو المخصصة بعد ذلك.

• حشوة علوية: 1٪
• حشوة سفلية: 1٪
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

مربع الظل

جنبا إلى جنب مع بعض الظل مربع مخصص.

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

تحويل الترجمة

وأكمل إعدادات الوحدة بتعديل إعدادات ترجمة التحويل كما يلي:

• حق:
  • سطح المكتب: 20 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل

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

أضف نسخة

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

محاذاة الزر

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

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

إعدادات الزر

بعد ذلك ، صمم الزر وفقًا لذلك:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 16 بكسل
• لون نص الزر: # 2a2a2a
• لون خلفية الزر: #ffffff
• عرض حد الزر: 0 بكسل
• لون حدود الزر: rgba (0،0،0،0)

• وزن خط الزر: غامق
• نمط خط الزر: أحرف كبيرة

تباعد

امنح بعض الشكل لزرك باستخدام حشوة مخصصة أيضًا.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشوة اليسرى: 40 بكسل
• الحشوة اليمنى: 40 بكسل

مربع الظل

بعد ذلك ، قم بتطبيق ظل الصندوق.

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

تحويل الترجمة

وأكمل إعدادات الوحدة عن طريق تعديل قيم ترجمة التحويل وفقًا لذلك:

• حق:
  • سطح المكتب: 50 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل

2. تطبيق تأثيرات لاصقة مخصصة لتحقيق تأثير الإخفاء قبل التمرير

جعل الصف في وضع مطلق

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

• الموقف: مطلق
• الموقع: أعلى اليسار

اجعل القسم مثبتًا

بعد ذلك ، سنفتح إعدادات القسم ونسمح لها بالالتزام بالأعلى.

• موقف مثبت: التمسك بالأعلى
• حد الالتصاق السفلي: لا شيء
• الإزاحة من العناصر اللاصقة المحيطة: نعم
• الانتقال الافتراضي والأنماط الثابتة: نعم

قسم الرسوم المتحركة

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

• نمط الرسوم المتحركة: تتلاشى

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

يمكنك أن تقرر بنفسك مدى بطء أو سرعة انزلاق العنوان لأسفل بمجرد بدء التمرير عن طريق تعديل مدة الانتقال في علامة التبويب "خيارات متقدمة" بالقسم. كلما زادت المدة ، كلما كان العنوان أبطأ.

• مدة الانتقال: 800 مللي ثانية

قسم تحويل الترجمة

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

• اليمين: -300 بكسل

سنعيد هذه القيمة إلى الصفر في الحالة اللاصقة. هذا يعني أنه بمجرد بدء التمرير ، يصبح الرأس مرئيًا مرة أخرى.

• مثبت لليمين: 0 بكسل

رؤية القسم خاصية CSS

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

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

  visibility: hidden

سنقوم بتغيير المحتوى الخاص بنا مرة أخرى ليكون مرئيًا في حالة ثبات. هذا كل شيء!

• العنصر الرئيسي اللزج:

  visibility: visible;

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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