كيفية جعل رأسك الشفاف ثابتًا عند التمرير باستخدام Divi

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

لون الخلفية

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

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

تباعد

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

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

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

هيكل العمود

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

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: أوزوالد
• نمط خط النص: أحرف كبيرة
• لون النص: #ffffff
• حجم الخط:
  • سطح المكتب: 19 بكسل
  • الجهاز اللوحي: 18 بكسل
  • الهاتف: 16 بكسل
• محاذاة النص: الوسط

أضف القسم رقم 2

تباعد

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

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

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

هيكل العمود

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

لون خلفية شفاف

افتح إعدادات الصف وقم بتطبيق لون خلفية شفاف تمامًا على الصف.

• لون الخلفية: rgba (255،255،255،0)

تحجيم

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

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

تباعد

أضف بعض الحشو الأيمن والأيسر المخصص بعد ذلك.

• الحشوة اليسرى: 10٪
• الحشوة اليمنى: 10٪

مربع الظل

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

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

موقع

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

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

العمود 2 الرؤية

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

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

اختر قائمة

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

تحميل الشعار

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

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

قم بإزالة لون خلفية الوحدة أيضًا.

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

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

• خط القائمة: أوزوالد
• وزن خط القائمة: غامق
• نمط خط القائمة: أحرف كبيرة
• لون نص القائمة: #efefef
• حجم نص القائمة: 18 بكسل
• محاذاة النص: صحيح

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

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

• لون خط القائمة المنسدلة: rgba (0،0،0،0)
• لون خلفية قائمة الهاتف المحمول: rgba (0،0،0،0.95)

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

بعد ذلك ، قم بتغيير ألوان الرمز في إعدادات الرموز.

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

إعدادات الشعار

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

• عكس الصورة: 90٪

تحجيم

بعد ذلك ، سنخصص أقصى ارتفاع لشعارنا.

• أقصى ارتفاع للشعار: 40 بكسل

تباعد

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

• الحشوة العلوية:
  • الجهاز اللوحي والهاتف: 10 بكسل
• الحشوة السفلية:
  • الجهاز اللوحي والهاتف: 10 بكسل

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

أضف نسخة

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

محاذاة الزر

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

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

إعدادات الزر

صمم الزر التالي.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 16 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # ed4441
• لون حدود الزر: # ed4441

• نصف قطر حدود الزر: 0 بكسل
• تباعد حرف الزر: 4 بكسل
• خط الزر: أوزوالد
• وزن خط الزر: غامق
• نمط خط الزر: أحرف كبيرة
• إظهار رمز الزر: نعم
• لون أيقونة الزر: # 1a1a1a

تباعد

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

• الهامش العلوي: -70 بكسل
• الحشوة العلوية: 25 بكسل
• الحشو السفلي: 25 بكسل

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

بدوره قسم # 2 مثبت

الآن بعد أن وضعنا أساس رأسنا ، حان الوقت لتطبيق التأثير اللاصق! للقيام بذلك ، ابدأ بفتح إعدادات القسم الثاني وقم بتطبيق الإعدادات الثابتة التالية على علامة التبويب المتقدمة:

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

لون خلفية الصف اللاصق

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

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

تباعد الصفوف اللزجة

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

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

ظل مربع صف مثبت

نحن نغير لون ظل الصندوق في حالة لزجة أيضًا.

• لون الظل: rgba (0،0،0،0.08)

تموضع الصف اللزج

بعد ذلك ، سنعيد وضع الصف إلى النسبي في الحالة اللاصقة.

• الموقف: نسبي
• أصل الإزاحة: أعلى اليسار

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

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

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

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

إلى جانب لون خلفية قائمة الجوال في إعدادات القائمة المنسدلة.

• لون خلفية قائمة الجوال: #ffffff

ألوان أيقونة القائمة اللاصقة

قم بتغيير ألوان الأيقونة في حالة ثابتة أيضًا.

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

مرشح الشعار اللاصق

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

• عكس الصورة: 0٪

تباعد الأزرار اللاصقة

وأكمل البرنامج التعليمي عن طريق إزالة الهامش العلوي السلبي للزر أثناء الالتصاق.

• الهامش العلوي: 0 بكسل

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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