كيفية إنشاء شريط قائمة عائم وشفاف عالميًا باستخدام منشئ سمات Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب الرأس العام لشريط القوائم العائم مجانًا

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

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

تنزيل مجاني

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

تحميل

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

اشترك في قناتنا على اليوتيوب

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

انتقل إلى Divi Theme Builder

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

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

ثم ، انقر فوق "إضافة رأس عام" وتابع عن طريق تحديد "إنشاء رأس عام".

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

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

لون الخلفية

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

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

تحجيم

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

• العرض: 100٪

تباعد

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

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

فهرس Z.

وللتأكد من بقاء القسم في مقدمة محتوى قسم الأبطال بالكامل ، سنحتاج إلى زيادة فهرس z للقسم في إعدادات الرؤية.

• الفهرس Z: 99999

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

هيكل العمود

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

تحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم على النحو التالي:

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

تباعد

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

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

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

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

display: flex;

العمود 2

لون الخلفية

استمر بفتح إعدادات العمود 2 وتغيير لون الخلفية إلى لون شبه شفاف.

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

الحدود

أضف حدًا سفليًا إلى العمود أيضًا.

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

مربع الظل

وإنشاء تأثير عائم عن طريق إضافة ظل مربع دقيق.

• مربع الظل الرأسي: 20 بكسل
• مربع قوة طمس الظل: 50 بكسل
• قوة انتشار الظل المربع: -20 بكسل
• لون الظل: rgba (0،0،0،0.23)

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

تحميل الشعار

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

انتقام

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

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

تحجيم

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

• العرض: 8vw (كمبيوتر مكتبي) ، 14vw (كمبيوتر لوحي) ، 21vw (هاتف)

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

اختر قائمة

إلى العمود التالي. هناك ، الوحدة الوحيدة التي نحتاجها هي وحدة القائمة. حدد قائمة من اختيارك.

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

بعد ذلك ، انتقل إلى إعدادات الخلفية وقم بإزالة لون الخلفية.

تخطيط

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

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

نص القائمة

صمم إعدادات نص القائمة أيضًا.

• خط القائمة: Muli
• لون نص القائمة: # 6f6666
• حجم نص القائمة: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)

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

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

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

الأيقونات

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

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

تباعد

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

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

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

أضف نسخة

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

انتقام

قم بتغيير محاذاة الوحدة بعد ذلك.

• محاذاة الزر: الوسط

إعدادات الزر

تابع عن طريق تصميم الزر وفقًا لذلك:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.9vw (سطح المكتب) ، 1.5vw (الجهاز اللوحي) ، 2.5vw (الهاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # f4583f
• عرض حد الزر: 0 بكسل
• لون حدود الزر: # f4583f
• نصف قطر حدود الزر: 0 بكسل

• خط الزر: مولي
• وزن خط الزر: غامق

تباعد

وأكمل إعدادات الوحدة بإضافة بعض الحشو المخصص عبر أحجام الشاشات المختلفة.

• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشو الأيسر: 2vw (سطح المكتب) ، 3vw (كمبيوتر لوحي) ، 4vw (هاتف)
• الحشو الأيمن: 2vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4vw (هاتف)

إعدادات القسم الإضافية

العنصر الأساسي الافتراضي

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

position: absolute;
top: 0;

تحوم العنصر الرئيسي

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

position: absolute;
top: 0;

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

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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