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