الحاجة لإنشاء قائمة عائمة شفافة في Divi؟
هل تبحث عن طريقة لوضع رأسك العام فوق الأقسام الرئيسية لصفحاتك؟ في درس Divi التعليمي اليوم، سنوضح لك كيفية القيام بذلك بالضبط.
سننشئ رأسًا عالميًا مذهلاً من البداية (باستخدام مُنشئ المواضيع من Divi) وسنقوم بتطبيق تأثير عائم على شريط القائمة.
دعونا نذهب.
مسح
قبل الغوص في هذا البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة التي نريد تحقيقها.
انتقل إلى Divi's Theme Builder وأضف قالبًا جديدًا
ALLEZ على Divi> Theme Builder.
قم بإنشاء الرأس العام مع Divi Theme Builder
انقر فوق "إضافة رأس عام" وتابع بتحديد "إنشاء رأس عام".
إعدادات القسم
لون الخلفية
بمجرد دخولك إلى محرر القوالب ، ستلاحظ قسمًا على الصفحة. افتح هذا القسم وقم بتغيير لون الخلفية إلى لون شفاف تمامًا. سيسمح هذا لكل شيء أسفل القسم بالظهور.
- الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
التحجيم
ثم انتقل إلى علامة التبويب نمط القسم وقم بتغيير الحد الأقصى للعرض.
- أقصى عرض (انظر لقطة الشاشة): 100٪
مباعدة
قم أيضًا بإزالة جميع الهوامش الداخلية العلوية والسفلية الافتراضية.
- رأس الهامش الداخلي: 0 بكسل
- الهامش الداخلي السفلي: 0 بكسل
مؤشر Z
وللتأكد من بقاء القسم على رأس كل شيء محتويات من قسم البطل سيتعين علينا زيادة مؤشر z في إعدادات الرؤية.
- مؤشر Z: 99999
أضف سطرًا جديدًا
هيكل العمود
بمجرد الانتهاء من إعدادات القسم ، يمكنك إضافة صف جديد باستخدام بنية العمود التالية:
التحجيم
بدون إضافة أي وحدات نمطية ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم كما يلي:
- تنسيق ارتفاعات العمود: نعم
- أقصى عرض: 100٪
- أقصى عرض: 100٪
مباعدة
ثم أضف هوامش داخلية مخصصة (علوي وسفلي).
- الهامش الداخلي الأقصى: 2vw
- الهامش الداخلي السفلي: 0vw
العنصر الرئيسي
بعد ذلك ، انتقل إلى علامة التبويب خيارات متقدمة وتأكد من بقاء الأعمدة بجوار بعضها البعض على أحجام شاشات أصغر عن طريق إضافة سطر واحد من كود CSS إلى عنصر الصف الرئيسي.
display: flex;
العمود 2
لون الخلفية
استمر بفتح إعدادات العمود 2 وتغيير لون الخلفية إلى لون شبه شفاف.
- لون الخلفية: rgba (255,255,255,0.71،XNUMX،XNUMX،XNUMX)
الحدود
أضف أيضًا حدًا سفليًا إلى العمود.
- عرض الحد السفلي: 2 بكسل
- لون الزر والحد السفلي: # f4583f
صندوق الظل
وإنشاء تأثير عائم عن طريق إضافة ظل مربع دقيق.
- مربع الظل: [عرض لقطة]
- موضع البدء: 20 بكسل
- قوة طمس الظل القوس: 50 بكسل
- قوة انتشار الظل المربع: -20 بكسل
- لون خط الترجمة: rgba (0,0,0,0.23،XNUMX،XNUMX،XNUMX)
أضف وحدة صورة إلى العمود 1
تنزيل الشعار
بمجرد الانتهاء من إعدادات الصف والعمود ، حان الوقت لإضافة الوحدات ، بدءًا من وحدة الصورة في العمود 1. قم بتحميل شعار بخلفية شفافة.
انحياز
قم بالتبديل إلى علامة التبويب نمط الوحدة النمطية وقم بتغيير المحاذاة.
- محاذاة الصورة: توسيط
التحجيم
قم أيضًا بتغيير عرض الوحدة في إعدادات التحجيم.
- أقصى عرض: 8 vw (سطح مكتب) ، 14 vw (كمبيوتر لوحي) ، 21 vw (هاتف)
أضف وحدة القائمة إلى العمود 2
حدد قائمة
دعنا ننتقل إلى العمود التالي. هناك ، الوحدة الوحيدة التي نحتاجها هي وحدة القائمة. حدد قائمة من اختيارك.
قم بإزالة لون الخلفية
ثم انتقل إلى إعدادات الخلفية وقم بإزالة لون الخلفية.
توفير
قم بالتبديل إلى علامة التبويب نمط الوحدة النمطية وقم بتغيير التخطيط.
- النمط: توسيط
- القائمة المنسدلة: لأسفل
نص القائمة
أيضا نمط إعدادات نص القائمة.
- خط القائمة: Mulish
- لون نص القائمة: # 6f6666
- قائمة حجم النص: 1vw (سطح المكتب) ، 2vw (الكمبيوتر اللوحي) ، 3vw (الهاتف)
قائمة منسدلة
ثم قم بتغيير الإعدادات من القائمة المنسدلة.
- لون صف القائمة المنسدلة: # f4583f
الرموز
استخدم هذا اللون نفسه للون رمز قائمة الهامبرغر في إعدادات الرمز.
- لون أيقونة قائمة همبرغر: # f4583f
مباعدة
أكمل إعدادات الوحدة النمطية عن طريق إضافة المساحة المتروكة العلوية والسفلية في إعدادات التباعد.
- الهامش الداخلي الأقصى: 1,5 فولكس فاجن
- الهامش الداخلي السفلي: 1,5 فولكس فاجن
أضف وحدة الزر إلى العمود 3
إضافة نص إلى الزر
دعنا ننتقل إلى العمود التالي والأخير. أضف وحدة زر بنص من اختيارك.
انحياز
ثم قم بتغيير محاذاة الوحدة النمطية.
- محاذاة الزر: توسيط
إعدادات زر
تابع عن طريق تخصيص الزر وفقًا لذلك:
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 0,9 vw (سطح المكتب) ، 1,5 vw (جهاز لوحي) ، 2,5 vw (هاتف)
- لون نص الزر: #ffffff
- زر الخلفية: # f4583f
- عرض حد الزر: 0 بكسل
- لون حدود الزر: # f4583f
- زر Border Radius: 0 بكسل
- خط الزر: موليش
- زر خافت الإضاءة: نص غامق
مباعدة
أكمل إعدادات الوحدة بإضافة حشوة مخصصة على أحجام مختلفة للشاشة.
- الهامش الداخلي العلوي والسفلي: 1vw (سطح المكتب) ، 2vw (الجهاز اللوحي) ، 3vw (الهاتف)
- الهامش الداخلي الأيمن والأيسر: 2vw (سطح المكتب) ، 3vw (كمبيوتر لوحي) ، 4vw (هاتف)
معلمات القسم الإضافية
العنصر الرئيسي الافتراضي
بمجرد الانتهاء من التخصيص العام، هناك شيء آخر يجب القيام به؛ ضع القسم فوق محتويات من صفحتك. للقيام بذلك، سنحتاج إلى إضافة سطرين من كود CSS إلى العنصر الرئيسي للقسم.
position: absolute;
top: 0;
العنصر الأساسي عند التمرير
تأكد من إضافة نفس الأسطر من كود CSS إلى خيار التمرير الخاص بالعنصر الرئيسي. سيمنع هذا القسم من الوميض بمجرد أن تحوم فوقه.
position: absolute;
top: 0;
حفظ التغييرات المنشئ وعرض النتيجة
بمجرد الانتهاء من القسم ، يمكنك حفظ الرأس العام وعرض النتيجة على موقعك!
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة.
تحميل DIVI Now !!!
وفي الختام
لذا ! هذا كل شيء لهذا المقال. لقد أوضحنا لك كيفية إنشاء شريط قوائم عائم وشفاف باستخدام Divi Theme Builder. يتم وضع الرأس أعلى القسم الأول من صفحتك أو منشورك.
للتعرف على Divi's Theme Builder ، يمكنك أيضًا قراءة مقالتنا على كيفية إنشاء رأس عالمي باستخدام منشئ سمات Divi
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...