كيفية تأطير قائمة التنقل الخاصة بك باستخدام فواصل الأقسام

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة خاطفة على ما يمكن تحقيقه باستخدام تقنية التصميم هذه.

ماذا تحتاج

في هذا البرنامج التعليمي ، كل ما تحتاجه حقًا هو ما يلي:

• موضوع Divi (مثبت ونشط)
• حزمة تخطيط الصيدلة (حزمة تخطيط معدة مسبقًا مجانية متوفرة داخل Divi Builder)

إعداد قائمتك الأساسية في مُخصص القوالب

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

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

لكن بالنسبة لهذا البرنامج التعليمي ، أريد أن أجعل خلفية الرأس شفافة حتى أتمكن من إضافة الخلفية المخصصة الخاصة بي. للقيام بذلك ، نحتاج إلى الانتقال إلى أداة تخصيص السمات. من لوحة معلومات WordPress ، انتقل إلى Divi> Theme Customizer. ثم من قائمة أداة التخصيص ، انتقل إلى Header & Navigation> Primary Menu Bar.

قم بتغيير لون الخلفية ليكون شفافًا تمامًا عن طريق سحب شريط تمرير الشفافية بالكامل لأسفل أو أدخل رمز اللون rgba (255،255،255،0).

كما ترى ، اختفت خلفية الرأس البيضاء وانتقل قسمك الأول إلى أعلى الصفحة ليكون بمثابة خلفية للرأس والقائمة الأساسية.

نظرًا لأننا سنضيف خلفية ملونة لتأطير قائمة التنقل الخاصة بنا ، فلنقم بتحديث خيارات نص القائمة التالية أيضًا.

الخط: مونتسيرات
نمط الخط: غامق (B)
لون النص: أبيض
لون الارتباط النشط: أبيض

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

لون خلفية القائمة الأساسية: #ffffff
لون ارتباط القائمة الأساسي: rgba (0،0،0،0.61)
لون ارتباط القائمة الأساسي النشط: # ff5473

الآن نحن جاهزون! تأكد من نشر التغييرات الخاصة بك.

تأطير قائمة التنقل الخاصة بك بخلفية مقسم القسم

مثال 1

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

عد الآن إلى وضع سطح المكتب لإكمال التصميم.

افتح إعدادات القسم وقم بتحديث ما يلي:

نمط الفاصل العلوي: انظر الصورة
لون الفاصل: # ff5473
ارتفاع الحاجز: 150 بكسل
تكرار المقسم الأفقي: 0.8x
الهامش المخصص: -80 بكسل للقاع
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

هذا ما يبدو عليه في الموقع المباشر.

المثال رقم 2

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

انتقل إلى إعدادات القسم وقم بتحديث ما يلي:

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

العرض: 75٪
محاذاة القسم: حق
نمط الفاصل: انظر قطة
تكرار المقسم الأفقي: 1x

هذا هو الشكل الذي تبدو عليه:

مع تنشيط التنقل الثابت ، يمكنك معرفة كيفية تنشيط رأس القائمة الثابتة تمامًا عندما تبدأ القائمة في مغادرة الإطار.

إذا كنت ترغب في تعطيل التنقل الثابت ، فانتقل إلى Divi> Theme Options ، وقم بتعطيل خيار Fixed Navigation Bar ضمن الإعدادات العامة.

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

متجاوب

سيبدو الإطار جيدًا أيضًا على الهاتف المحمول.

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

استخدم إطارات ألوان مختلفة على صفحات مختلفة

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

الفكر النهائي

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!