كيفية إنشاء شريط تنقل مثبت من أسفل إلى أعلى في Divi

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

هيا بنا نبدأ!

نظرة خاطفة

لمساعدتك في تصور النتيجة التي نحاول تحقيقها ، دعنا نلقي نظرة على النتيجة النهائية:

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد واختر ملف التنزيل من جهاز الكمبيوتر الخاص بك.

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

إنشاء شريط تنقل مثبت من أسفل إلى أعلى في Divi

الجزء 1: إنشاء القسم العلوي والعنوان

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

اضف سطر

للبدء ، أضف صفًا من عمود واحد إلى القسم الافتراضي.

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

قبل إضافة وحدة نمطية ، افتح إعدادات القسم وأضف خلفية كما يلي:

• لون الخلفية: # e9f9ff
• صورة الخلفية: [إضافة صورة]

ضمن علامة تبويب التصميم ، قم بتحديث الحد الأدنى للارتفاع والحشو.

• الحد الأدنى للارتفاع: 100vh (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
• الحشوة: 20vh أعلى ، 20vh أسفل

نص العنوان

لإنشاء نص العنوان ، أضف وحدة نصية جديدة إلى الصف.

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

<h1>Above the Fold</h1>

إعدادات النص

ضمن علامة التبويب تصميم إعدادات النص ، قم بتحديث أنماط خطوط العنوان كما يلي:

• خط العنوان: روبيك
• وزن خط العنوان: شبه عريض
• نمط خط العنوان TT
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 302ea7
• حجم نص العنوان: 130 بكسل (سطح المكتب) ، 70 بكسل (الجهاز اللوحي) ، 40 بكسل (الهاتف)
• تباعد حروف العنوان: 2 بكسل
• ارتفاع خط العنوان: 1.3em

الجزء 2: إنشاء قسم الجزء السفلي غير المرئي

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

لإنشاء القسم ، قم بتكرار قسم الجزء المرئي من الصفحة الذي أنشأناه للتو.

قم بتحديث خلفية القسم المكرر.

• لون الخلفية: # f4def1

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

• ارتفاع الحد الأدنى: 200vh

ثم قم بتحديث محتوى الوحدة النصية عن طريق استبدال كلمة "أدناه" بكلمة "أعلاه".

الجزء 3: إنشاء شريط التنقل اللاصق

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

إضافة قسم وصف جديد

أضف قسمًا عاديًا جديدًا أسفل قسم الجزء المرئي من الصفحة مباشرةً.

ثم أضف صفًا من عمود واحد إلى القسم.

خلفية القسم والحشو

افتح إعدادات القسم وقم بتحديث لون الخلفية.

• لون الخلفية: # 302ea7

ثم قم بإزالة الحشوة العلوية والسفلية بحيث يكون ارتفاع شريط التنقل أقل.

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

إضافة تجاوز مرئي

للتأكد من أن القوائم المنسدلة ستظل مرئية ، قم بتحديث خيارات الرؤية على النحو التالي:

• التدفق الأفقي: مرئي
• التدفق العمودي: مرئي

امنح القسم موقفًا مطلقًا على الهاتف المحمول

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

للقيام بذلك ، امنح القسم موضعًا مطلقًا على الجهاز اللوحي والهاتف.

• الموضع: نسبي (سطح المكتب) ، مطلق (الجهاز اللوحي والهاتف)

أضف الموضع الثابت لسطح المكتب والجوال

لإضافة الوضع الثابت إلى قسم شريط التنقل ، قم بتحديث ما يلي:

• الوضع اللاصق: التمسك بالأعلى والأسفل (سطح المكتب) ، التمسك بالأعلى (الجهاز اللوحي والهاتف)

تحديث مساحة الصفوف

بمجرد اكتمال القسم اللاصق ، افتح إعدادات الصف داخل القسم وقم بتحديث الحشو كما يلي:

• الحشو: 10 بكسل للأعلى ، 10 بكسل للأسفل

إنشاء قائمة التنقل

مع القسم والصف في مكانه الصحيح ، نحن على استعداد لإنشاء قائمة التنقل.

ابدأ بإضافة وحدة قائمة إلى صف العمود الواحد.

محتوى القائمة

قم بتحديث محتوى القائمة على النحو التالي:

• حدد القائمة من القائمة المنسدلة
• إضافة صورة شعار (أنا أستخدم صورة بحجم 122 × 52 بكسل)
• اخرج لون الخلفية الافتراضي

ضمن علامة تبويب التصميم ، قم بتحديث إعدادات نص القائمة والأيقونات التالية:

• لون الارتباط النشط: #fff
• خط القائمة: Rubik
• نمط خط القائمة: TT
• لون نص القائمة: #fff
• حجم نص القائمة: 16 بكسل
• محاذاة النص: صحيح
• لون خط القائمة المنسدلة: # e19dff
• لون نص قائمة الجوال: # 302ea7
• لون رمز عربة التسوق: #fff
• لون رمز البحث: #fff
• لون أيقونة قائمة همبرغر: #fff

استخدام حد لتعويض الموضع المطلق لشريط التنقل على الهاتف المحمول

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

افحص ارتفاع قسم شريط التنقل على الهاتف المحمول

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

قم بإضافة إزاحة الحد العلوي إلى قسم الجزء المرئي من الصفحة

الآن بعد أن حددنا ارتفاع القسم ، افتح الإعدادات للقسم العلوي (فوق الجزء المرئي من الصفحة).

ضمن علامة تبويب التصميم ، أضف الحد العلوي التالي على الجهاز اللوحي والهاتف:

• عرض الحد العلوي: 72 بكسل (الجهاز اللوحي والهاتف)
• لون الحد العلوي: # 302ea7

نظرًا لأن الحد هو نفس ارتفاع القسم الذي يحتوي على الموضع المطلق ، فلن تتمكن من رؤية الحد لأنه يعمل فقط على دفع القسم لأسفل حتى لا يتم قطعه.

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

تحقق من النتيجة النهائية!

افكار اخيرة

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

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

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

هتافات!