كيفية إنشاء تنقل عمودي شفاف يتداخل مع موقع Divi الخاص بك

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

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

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

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

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

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

إنشاء التصميم في Divi

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

الاعدادات العامة

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

قم بتنشيط التنقل العمودي

لتبدأ ، تحتاج إلى تمكين التنقل العمودي على موقع الويب الخاص بك. للقيام بذلك ، انتقل إلى لوحة معلومات WordPress> المظهر> تخصيص> الرأس والتنقل> تنسيق الرأس> وقم بتمكين التنقل العمودي.

اختر إعدادات التصميم الخاصة بك في The Theme Customizer

الآن بما أنك لا تزال في أداة تخصيص السمات ، يمكنك ضبط جميع إعدادات التنقل العمودي بنفس الطريقة التي تغير بها التنقل العلوي. ارجع إلى Header & Navigation> Primary Menu> وقم بإجراء جميع التعديلات التي ترغب في إجرائها على قائمتك الأساسية.

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

أضف كود CSS

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

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

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

أضف كود CSS في مُخصص القوالب

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

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

بالإضافة إلى ذلك ، إذا كنت ترغب في ضبط عرض التنقل العمودي أيضًا ، فقم بنسخ ولصق الأسطر التالية من كود CSS بدلاً من ذلك:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}

إعادة إنشاء التنقل العمودي البسيط

الآن بعد أن تعاملنا مع الخطوات اللازمة لإنشاء تنقل عمودي شفاف يتداخل مع موقع الويب الخاص بك ، سنقوم بإعادة إنشاء المثال. المثال ، مرة أخرى ، يبدو كالتالي:

نصائح عامة للتصميم

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

تمركز كل شيء

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

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

خلفية من نفس اللون في كل مكان

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

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

ابدأ في إنشاء المثال

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

إنشاء رأس عرض كامل

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

إعدادات العنوان

أيضًا ، قم بالتمرير لأسفل في علامة التبويب نفسها وقم بإجراء التغييرات التالية على الفئة الفرعية لنص العنوان:

• خط العنوان: Lato Light
• نمط خط العنوان: عواصم
• نمط خط العنوان: 60 (سطح المكتب) ، 50 (جهاز لوحي) ، 40 (هاتف)
• لون نص العنوان: #FFFFFF

إعدادات العنوان الفرعي

علاوة على ذلك ، استمر في التمرير وتأكد من أن إعدادات الفئة الفرعية لنص العنوان الفرعي هي كما يلي:

• خط العنوان الفرعي: Lato Light
• حجم خط العنوان الفرعي: 22 بكسل (سطح المكتب والجهاز اللوحي) ، 19 (هاتف)
• لون نص العنوان الفرعي: # c4c4c4

إعدادات الزر

أخيرًا ، قم بإجراء التغييرات التالية على فئة الأزرار الفرعية في علامة التبويب التصميم:

• استخدام الأنماط المخصصة للزر الأول: نعم
• حجم الزر رقم واحد: 15 (سطح المكتب والجهاز اللوحي) ، 12 (هاتف)
• لون نص الزر واحد: # 000000
• لون خلفية الزر واحد: #FFFFFF
• زر واحد الخط: Lato Light
• نمط خط الزر الأول: غامق وعواصم

إعدادات الخلفية المتدرجة

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

في مثالنا ، نستخدم خلفيات داكنة. لذلك ، سنبدأ باللون الأسود في التدرج اللوني. اللون الآخر الذي قمنا بمطابقته مع صورة الخلفية هو "rgba (0،49،109،0.43)".

علاوة على ذلك ، فإن الإعدادات التي استخدمناها للألوان المتدرجة هي كما يلي:

• نوع التدرج: خطي
• اتجاه التدرج: 87 درجة
• موقف البداية: 0٪
• موضع النهاية: 62٪

المضي قدما ، أضف صورة خلفية وقم بتطبيق الإعدادات التالية:

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

التغييرات في مخصص الموضوع

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

• أقصى ارتفاع للشعار: 83
• حجم النص: 14
• تباعد الأحرف: 0
• الخط: Lato Light
• نمط الخط: عواصم
• لون النص: #FFFFFF
• لون الارتباط النشط: #FFFFFF
• لون الخلفية: #FFFFFF
• لون خلفية القائمة المنسدلة: rgba (221،153،51،0)
• لون خط القائمة المنسدلة: # 1E73BE
• لون نص القائمة المنسدلة: #FFFFFF

أضف كود CSS مخصص في مُخصص القوالب

بينما لا تزال في مُخصص القوالب ، سنقوم بإضافة خطوط كود CSS المطلوبة لجعل التصميم يبدو كما هو.

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

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

النتيجة النهائية

نتيجة لجميع الخطوات التي اتبعتها خلال هذا المنشور ، يجب أن تحصل على النتيجة التالية على موقع الويب الذي تعمل عليه:

تغليف

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!