هل تريد إنشاء شريط تمرير كامل الشاشة باستخدام Divi؟
يمكن أن يعمل شريط تمرير الشاشة الكاملة بشكل جيد للغاية كعنوان لصفحة الويب الرئيسية الخاصة بك.
يُبقي وضع ملء الشاشة المحتوى المهم في أعلى الصفحة باستمرار. وتتيح خاصية شريط التمرير للمستخدمين رؤية محتوى إضافي دون الحاجة إلى التمرير لأسفل الصفحة.
إنشاء شريط تمرير ملء الشاشة باستخدام Divi سهلٌ للغاية. يكمن السر في تحديد ارتفاع شريط التمرير بما يتناسب مع ارتفاع المتصفح، ثم إزالة أي قيود إضافية على الهوامش والعرض في الصف أو القسم الرئيسي.
في غضون دقائق قليلة ، يمكنك إنشاء شريط تمرير بملء الشاشة يتم توسيعه لملء الشاشة بأكملها عند تحميل الصفحة ويبدو رائعًا على جميع الأجهزة.
دعونا نبدأ.
مسح
فيما يلي نظرة عامة موجزة عن شريط التمرير الذي سننشئه في هذا البرنامج التعليمي.
قم بإنشاء صفحة جديدة باستخدام Divi Builder
في لوحة معلومات WordPress ، انتقل إلى الصفحات> إضافة جديد
أعط عنوانًا ذا صلة بك وانقر فوق "استخدم Divi Builder'
أخيرا ، انقر فوق "ابدأ البناء"
بعد ذلك ، سيكون لديك صفحة فارغة لبدء التصميم في Divi.
قم بإنشاء شريط تمرير ملء الشاشة في Divi
تكوين القسم والخط
للبدء ، أضف صفًا من عمود واحد إلى القسم.
هامش القسم
قبل إضافة وحدة نمطية ، افتح إعدادات القسم ، وانتقل إلى علامة التبويب تصميم، اسحب الخيار التباعد وقم بتغيير الإعدادات كما يلي:
- المساحة المتروكة (أعلى وأسفل): 0 بكسل
إعدادات الخط
بعد ذلك ، افتح إعدادات الخط وقم بتحديث ما يلي في علامة التبويب تصميم :
- العرض: 100٪
- العرض الأقصى: 100٪
- المساحة المتروكة (أعلى وأسفل): 0 بكسل
مع كل هذه الإعدادات في مكانها الصحيح ، يمكننا الآن الانتقال إلى إنشاء شريط التمرير الفعلي.
إنشاء شريط تمرير ملء الشاشة
لإنشاء شريط تمرير ملء الشاشة ، أضف وحدة شريط تمرير جديدة إلى الصف.
أضف الصور إلى كل شريحة
قبل تحديث إعدادات الشريحة العامة ، افتح الإعدادات الافتراضية للشريحة الأولى
أضف صورة وصورة خلفية إلى الشريحة. في هذا المثال ، نستخدم نفس الصورة لصورة الشريحة وصورة الخلفية (حوالي 1920 × 1500 بكسل).
ثم افتح الإعدادات للشريحة الثانية
أضف صورة وخلفية مختلفة عن الصورة السابقة إلى الشريحة.
لاحظ أنه يمكنك إضافة أي عدد تريده من الشرائح.
تحديث إعدادات شريط التمرير
الآن بعد أن أصبح لكل شريحة صورة فريدة وصورة خلفية ، نحن على استعداد لتحديث إعدادات شريط التمرير بشكل عام.
ارجع إلى إعدادات شريط التمرير وقم بتحديث ما يلي ضمن علامة التبويب تصميم :
غطاء
- استخدام تراكب الخلفية: نعم
- لون تراكب الخلفية: rgba (27,18,38,0.74،XNUMX،XNUMX،XNUMX)
مربع الظل
- نمط الظل المربع: انظر الالتقاط (1)
- مربع الظل (أفقي ورأسي) الموضع: -8vw
- قوة انتشار الظل في الصندوق: -6,5 فولكس فاجن
- لون الظل: # cf1259
نص العنوان
تحرير إعدادات العنوان
- خط العنوان: مونتسيرات
- وزن خط العنوان: غامق للغاية
- حجم النص: 5vw (سطح المكتب) ، 40 بكسل (الجهاز اللوحي والهاتف)
نص أساسي
قم بتحرير إعدادات نص الوصف كما يلي:
- وزن خط الجسم: شبه عريض
- حجم النص الأساسي: 16 بكسل
- ارتفاع الخط: 1.8 م
أنماط الزر
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 16 بكسل
- الخلفية: # cf1259
- عرض الحدود: 0 بكسل
- نصف قطر الحدود: 0 بكسل
- وزن الخط: عريض
- نمط الخط: TT
- المساحة المتروكة (أعلى وأسفل): 15 بكسل
- الحشو (يسار ويمين): 30 بكسل
ارتفاع شريط التمرير وعرض المحتوى
- عرض المحتوى الأقصى: 90٪
- ارتفاع الحد الأدنى: 100vh
سيضمن منح شريط التمرير ارتفاعًا لا يقل عن 100 فولت في الساعة أن يمتد شريط التمرير إلى الارتفاع الكامل لنافذة المتصفح. هذا هو المفتاح لإنشاء شريط تمرير ملء الشاشة.
سيمتد شريط التمرير العرض الكامل لنافذة المتصفح ، لأن عرض الخط هو 100٪.
سهام المنزلق
ضمن علامة التبويب خيارات متقدمة ، قم بتحديث حجم وموضع أسهم شريط التمرير عن طريق إضافة CSS المخصص التالي إلى منطقة CSS أسهم الشرائح :
font-size: 8vw !important;
margin-top: -4vw;
سيؤدي هذا إلى تكبير أسهم Slider على أحجام الشاشات الكبيرة وتصغيرها إلى حجم أصغر على الهاتف المحمول.
اطرح ارتفاع الرأس من ارتفاع شريط التمرير
إذا كان لديك رأس على الصفحة ، فسيتم تمديد شريط تمرير ملء الشاشة قليلاً أسفل نافذة المتصفح.
وذلك لأن ارتفاع الرأس يقلل من شريط التمرير الذي يبلغ ارتفاعه حاليًا 100 فولت في الساعة (100٪ من ارتفاع النافذة / المتصفح). لمنع دفع شريط التمرير أسفل إطار عرض المتصفح ، يمكنك إضافة وظيفة CSS احسب () لطرح ارتفاع الرأس من ارتفاع شريط التمرير.
ستحتاج إلى معرفة ارتفاع الرأس (سطح المكتب والجوال) حتى يعمل هذا. إذا كنت تستخدم رأس Divi الافتراضي ، فسيكون ارتفاع الرأس 80 بكسل. وبالتالي ، يجب أن يكون ارتفاع شريط التمرير 100vh - 80px.
لإضافة الارتفاع المخصص ، افتح إعدادات Slider وأضف CSS المخصص التالي إلى عنصر Slider الرئيسي وأيضًا لكل شريحة:
min-height: calc(100vh - 80px)!important;
نتيجة نهائية
ها هي النتيجة النهائية.
تحميل DIVI Now !!!
وهكذا يبدو التصميم على الجهاز اللوحي والهاتف.
الخاتمة
تتمثل الخطوات الأساسية لإنشاء شريط تمرير ملء الشاشة في Divi في تكوين القسم والصف لتمتد بالعرض الكامل للمتصفح ، ثم إعطاء شريط التمرير ارتفاعًا لا يقل عن 100vh.
إذا كنت تستخدم رأسًا ، فيمكنك إضافة مقتطف CSS مخصص يطرح ارتفاع الرأس لضمان عدم امتداد شريط تمرير ملء الشاشة إلى ما وراء الجزء السفلي من المتصفح.
من خلال هذه الخطوات الرئيسية ، يمكنك تخصيص شريط التمرير (والشرائح) بشكل أكبر ولكنك تريد استخدام جميع الميزات القوية المضمنة في Divi Builder.
استخدمه لإنشاء منزلقات جميلة وفعالة تملأ أي شاشة على أي جهاز.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...