هل ترغب في إنشاء شريط تنقل في Divi يكون ثابتًا من أسفل إلى أعلى الصفحة؟
في البرنامج التعليمي Divi سنعرض لك اليوم خطوة بخطوة كيفية إنشاء شريط تنقل ثابت من الأسفل إلى الأعلى في Divi.
سيسمح هذا لشريط التنقل بالبقاء مبدئيًا في أسفل الصفحة للحصول على تخطيط فريد في الجزء المرئي من الصفحة. بعد ذلك ، بمجرد التمرير في القسم الموجود أعلى الصفحة ، سيظل شريط التنقل أعلى الصفحة ويبقى هناك طوال الصفحة.
يمكنك القول أن الصفحة سوف "تسيطر" على القائمة الموجودة في أسفل الشاشة وتجلب تأثير تفاعلي لطيف لقائمتك الرئيسية وموقع الويب الخاص بك.
لنبدأ!
مسح
لمساعدتك في تصور النتيجة التي نحاول تحقيقها ، دعنا نلقي نظرة على النتيجة النهائية:
تحميل DIVI الآن !!!
لنبدأ بإنشاء صفحة جديدة باستخدام Divi Builder
للبدء ، سوف تحتاج إلى القيام بما يلي:
من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.
أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder
ثم انقر فوق ابدأ البناء (البناء من الصفر)
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
قم بإنشاء شريط تنقل مثبت من أسفل إلى أعلى في Divi
الجزء 1: إنشاء القسم والرأس فوق خط الماء
بالنسبة للجزء الأول من هذا البرنامج التعليمي ، سننشئ القسم والعنوان فوق الجزء المرئي من الصفحة والذي سيكون بمثابة قسم الرأس الرئيسي لصفحتنا. سيكون القسم في وضع ملء الشاشة على سطح المكتب للتأكد من أن القسم يشغل نافذة العرض بالكامل.
اقرأ أيضا: Divi: اختر بين الشبكة والتصميم الكامل العرض لوحدة الحافظة القابلة للتصفية
أضف صف
للبدء ، أضف صفًا إلى عمود إلى القسم الافتراضي.
إعدادات القسم
قبل إضافة وحدة نمطية ، افتح إعدادات القسم وأضف خلفية كما يلي:
- لون الخلفية: # e9f9ff
- صورة الخلفية: [إضافة صورة]
تحت علامة التبويب تصميم، قم بتحديث الحد الأدنى للارتفاع والحشو.
- الحد الأدنى للارتفاع: 100vh (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
- الحشوة: 20vh (أعلى وأسفل)
نص العنوان
لإنشاء نص الرأس ، أضف وحدة نصية جديدة إلى السطر.
ثم قم بتحديث المحتوى برأس H1 التالي:
<h1>Above the Fold</h1>
إعدادات النص
تحت علامة التبويب تصميم في إعدادات وحدة النص ، قم بتحديث أنماط خط الرأس كما يلي:
- عنوان:
- الخط: روبي
- وزن الخط: شبه عريض
- النمط: TT
- محاذاة النص: توسيط
- لون النص: # 302ea7
- الحجم: 130 بكسل (سطح المكتب) ، 70 بكسل (جهاز لوحي) ، 40 بكسل (هاتف)
- تباعد الأحرف: 2 بكسل
- ارتفاع الخط: 1,3 م
الجزء 2: إنشاء القسم أسفل خط الماء
لتوضيح وظيفة شريط التنقل اللاصق ، نحتاج إلى إضافة قسم أسفل الجزء المرئي من الصفحة حتى نتمكن من توفير مساحة للتمرير.
لإنشاء القسم ، قم بتكرار القسم الموجود أعلى الثنية التي أنشأناها للتو.
قم بتحديث خلفية القسم المكرر.
- لون الخلفية: # f4def1
ثم امنح القسم ارتفاعًا أدنى كبيرًا ليتسع للتمرير لأسفل الصفحة. هذا ببساطة قسم يُملأ مكان محتوى الصفحة الفعلي.
- ارتفاع الحد الأدنى: 200vh
بعد ذلك، قم بتحديث محتويات وحدة النص عن طريق استبدال الكلمة "أقل" من قبل "في الاعلى".
الجزء 3: إنشاء شريط التنقل اللاصق
لإنشاء شريط التنقل اللاصق من أسفل إلى أعلى ، فإن خطوتنا الأولى هي إنشاء قسم جديد من صف واحد إلى عمود واحد.
تمت إضافة قسم وخط جديد
أولاً ، دعنا نضيف قسمًا عاديًا جديدًا أسفل القسم الموجود في الجزء المرئي من الصفحة مباشرةً.
بعد ذلك ، دعنا نضيف صفًا من عمود واحد إلى القسم.
خلفية القسم والحشو
افتح إعدادات القسم وقم بتحديث لون الخلفية.
- لون الخلفية: # 302ea7
ثم قم بإزالة المساحة المتروكة العلوية والسفلية بحيث يكون ارتفاع شريط التنقل أقل.
- المساحة المتروكة: 0 بكسل (أعلى وأسفل)
أضف تجاوزًا مرئيًا
لضمان بقاء القوائم المنسدلة مرئية، قم بتحديث خيارات الرؤية على النحو التالي:
- التدفق الأفقي: مرئي
- التدفق العمودي: مرئي
امنح القسم موقعًا مطلقًا على الهاتف المحمول
سيتم فتح القائمة المنسدلة للجوال بشكل افتراضي أسفل رمز الهامبرغر. إذا احتفظنا بشريط التنقل في الجزء السفلي ، فسيخفي القائمة المنسدلة إذا نقر المستخدم عليه.
للحصول على تجربة مستخدم أفضل ، نريد أن يبدأ شريط التنقل في أعلى الصفحة على الجهاز اللوحي وشاشة الهاتف.
لهذا ، امنح القسم موضعًا مطلقًا على الجهاز اللوحي والهاتف.
- المركز: نسبي (سطح المكتب) ، مطلق (الجهاز اللوحي والهاتف)
أضف موضعًا ثابتًا لسطح المكتب والجوال
لإضافة الوضع الثابت إلى قسم شريط التنقل ، قم بتحديث ما يلي:
- الوضع اللاصق: التمسك بالأعلى والأسفل (سطح المكتب) ، التمسك بالأعلى (الجهاز اللوحي والهاتف)
تحديث مساحة الصفوف
بمجرد اكتمال القسم اللاصق ، افتح إعدادات الصف داخل القسم وقم بتحديث الحشو كما يلي:
- المساحة المتروكة: 10 بكسل (أعلى وأسفل)
قم بإنشاء قائمة التنقل
مع القسم والخط في مكانهما ، نحن على استعداد لإنشاء قائمة التنقل.
ابدأ بإضافة وحدة قائمة إلى صف العمود الواحد.
محتوى القائمة
قم بتحديث محتوى القائمة كما يلي:
- حدد القائمة من القائمة المنسدلة
- أضف صورة الشعار
- إزالة لون الخلفية الافتراضي
تحت علامة التبويب تصميم، قم بتحديث إعدادات نص القائمة والأيقونات التالية:
- لون الارتباط النشط: #fff
- خط القائمة: روبي
- نمط خط القائمة: TT
- لون النص: #fff
- حجم نص القائمة: 16 بكسل
- محاذاة النص: صحيح
- لون خط القائمة المنسدلة: # e19dff
- لون نص قائمة الجوال: # 302ea7
- لون رمز عربة التسوق: #fff
- لون رمز البحث: #fff
- لون أيقونة قائمة همبرغر: #fff
استخدام حد لتعويض الموضع المطلق لشريط التنقل على الهاتف المحمول
نظرًا لأن قسم شريط التنقل له موقع مطلق على الهاتف المحمول ، فسيكون الشريط أعلى (ويقطع) القسم العلوي من الصفحة. لإصلاح ذلك ، نحتاج إلى إزاحة القسم العلوي باستخدام حد علوي بنفس ارتفاع شريط / قسم التنقل.
افحص ارتفاع قسم شريط التنقل على الهاتف المحمول
لتحديد ارتفاع شريط التنقل على الهاتف المحمول ، افتح نسخة مباشرة من الصفحة في نافذة متصفح جديدة. ثم يمكنك تقليل عرض المتصفح إلى أقل من 980 بكسل لمشاهدة قائمة الهاتف المحمول.
يمكنك أيضًا استشارة: Divi: كيفية إنشاء شريط تنقل مثبت
انقر بزر الماوس الأيمن فوق القسم الذي يحتوي على القائمة واختر الخيار تفقد العنصر في قائمة سياق المتصفح. من المفترض أن تشاهد مربع أدوات أسفل القسم يوضح أبعاد القسم (بما في ذلك الارتفاع).
في هذا المثال ، يبلغ ارتفاع قسم navbar 72 بكسل.
أضف إزاحة حد أعلى للقسم الموجود أعلى الجزء المرئي من الصفحة
الآن وقد حددنا ارتفاع القسم ، افتح الإعدادات للقسم العلوي (فوق الجزء المرئي من الصفحة).
تحت علامة التبويب تصميم، أضف الحد العلوي التالي على الجهاز اللوحي والهاتف:
- عرض الحد العلوي: 72 بكسل (الكمبيوتر اللوحي والهاتف)
- لون الحد العلوي: # 302ea7
نظرًا لأن الحد هو نفس ارتفاع القسم الذي يحتوي على الموضع المطلق ، فلن تتمكن من رؤية الحد لأنه يعمل فقط على دفع القسم لأسفل حتى لا يتم قطعه.
نتيجة نهائية
اكتشف النتيجة النهائية!
تحميل DIVI الآن !!!
الخاتمة
يمكن بسهولة إنشاء شريط تنقل لاصق من الأسفل إلى الأعلى باستخدام وضع Divi المدمج و خيارات مثبتة.
السر هو جعل ارتفاع القسم فوق الطية 100 سم، ثم إضافة شريط التنقل أسفله، والذي يلتصق بأسفل وأعلى المتصفح. نأمل أن يُضفي هذا مظهرًا أكثر تميزًا وجاذبيةً فوق الطية لموقعك الإلكتروني.
يعمل شريط التنقل اللاصق هذا بشكل أفضل لتصميم صفحة واحدة بدلاً من قالب شامل. ومع ذلك ، يمكنك بسهولة اختيار استخدام هذا كتصميم لصفحتك الرئيسية واستخدام رأس عام لبقية الصفحات باستخدام مولد موضوع ديفي .
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...