يأتي شريط التمرير ذو العرض الكامل مع بعض الميزات الرائعة بما في ذلك القدرة على إضافة أشرطة تمرير بخلفيات فيديو. ولكن إحدى الميزات التي تجعلها أكثر قوة هي القدرة على توسيع شريط التمرير لعرضه في وضع ملء الشاشة. لذلك سنوضح لك كيفية إضافة وظائف ملء الشاشة إلى شريط التمرير.
إضافة ميزة ملء الشاشة إلى وحدة شريط التمرير الخاصة بـ Divi من السهل جدًا تنفيذه باستخدام بضعة أسطر من CSS و JavaScript. في 5 دقائق فقط ، يمكنك تحويل شريط تمرير العرض الكامل إلى شريط تمرير ملء الشاشة يتم توسيعه لملء الشاشة بالكامل ، تمامًا مثل رؤوس ملء الشاشة.
تنفيذ وظيفة شريط التمرير ملء الشاشة على Divi
إذا لم تكن قد قرأت برنامج تعليمي حول عرض واجهة Divi، أنا أدعوك للقيام بذلك.
الخطوة 1: إضافة شريط التمرير مع الشرائح في وضع العرض الكامل
استخدم " ديفي البناء »أضف قسم« العرض الكامل »وانقر على« إدراج وحدة نمطية ".
إضافة وحدة نمطية ذات العرض الكامل.
إضافة وحدة نمطية المنزلق ديفي #
في إعدادات شريط تمرير ملء الشاشة ، ضمن علامة التبويب "CSS مخصصة" ، أضف فئة CSS تسمى " et_fullscreen_slider ".
في "الإعدادات العامة" أضف شريحة جديدة.
في إعدادات الشريحة ، ضمن الإعدادات العامة ، قم بتحديث العناصر التالية:
- القسم: [أدخل القسم الخاص بك]
- زر النص: [أدخل زر النص الخاص بك]
- زر عنوان URL: [أدخل زر عنوان URL]
- صورة الخلفية: [أضف صورة الخلفية]أنا أستخدم صورة من موقع unsplash.com)
كرر هذه الخطوة لعدد الشرائح التي تريد إضافتها.
بمجرد الانتهاء ، انقر فوق " احفظ المخرج ".
كيفية إضافة CSS و JavaScript مخصص
من لوحة معلومات WordPress ، انتقل إلى " ديفي → خيارات الموضوع وضمن "الإعدادات العامة" ، أدخل CSS التالي في مربع نص CSS المخصص:
.et_pb_slides .et_fullscreen_slider، .et_pb_slide .et_fullscreen_slider، .et_pb_container .et_fullscreen_slider {مين الطول: 100٪ كبيره. الطول: 100٪ المهم.! }
انقر فوق علامة التبويب التالية وأضف جافا سكريبت التالية إلى مربع النص بعنوان " أضف الكود إلى الرأس بلوق الخاص بك ":
(function($) { $(window).on('load resize', function() { $('.et_fullscreen_slider').each(function() { et_fullscreen_slider($(this)); }); }); function et_fullscreen_slider(et_slider) { var et_viewport_width = $(window).width(), et_viewport_height = $(window).height(), et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(), $admin_bar = $('#wpadminbar'), $main_header = $('#main-header'), $top_header = $('#top-header'); $(et_slider).height('auto'); if ($admin_bar.length) { var et_viewport_height = et_viewport_height - $admin_bar.height(); } if ($top_header.length) { var et_viewport_height = et_viewport_height - $top_header.height(); } if (!$('.et_transparent_nav').length) { var et_viewport_height = et_viewport_height - $main_header.height(); } if (et_viewport_height > et_slider_height) { $(et_slider).height(et_viewport_height); } } })(jQuery);
أخيرا
الآن لديك شريط تمرير وضع ملء الشاشة لجهازك موقع على شبكة الإنترنت. استخدمه لإنشاء منزلقات فعالة بعرض كامل لمعظم المتصفحات.
إذا كان لديك أي أسئلة ، لا تتردد في طرحها.
[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = ”# 18b69d” custom_hover_background = ”# 118d7a” custom_color = ”# ffffff” custom_hover_color = ”# ffffff” icon_right = ”fa fa-download”] DOWNLOAD DIVI THEME [/ vcex_button] [/ width_column] [= vc_column] / 1 ″] [vcex_button url = ”https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=2&url=23065&tid40632=tutorials” target = ”blank” layout = ”توسيع” align = ”center” font_family = ”Raleway” font_weight = ”1 ″ style =” flat ”custom_background =” # c700e ”custom_hover_background =” # 4226d8f ”custom_color =” # ffffff ”custom_hover_color =” # ffffff ”icon_right =” fa fa-download ”] تنزيل TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
دروس ديفي أخرى
- المواقع 5 للاستخدام مطعم ديفي موضوع
- كيفية إضافة نص على منتج Divi WooCommerce
- كيفية تغيير لون القائمة بين صفحات Divi
- كيفية تخصيص شبكات بلوق مع ديفي
- كيفية استخدام دور ديفي محرر على وورد
- كيفية إنشاء كامل الشاشة المنزلق ديفي
- كيفية تغيير لون القوائم بين صفحات Divi
- الميزات التي ربما لا تعرفها عن Divi
- كيفية استخدام Divi Builder على وورد
- كيفية استخدام وحدة Divi Video scrolling
- كيفية استخدام وحدة Divi Builder Flip
- كيفية إضافة وحدة شهادة على Divi Builder
- كيفية استخدام وحدة Divi النصية
- كيفية إنشاء شريط التمرير على ديفي
- كيفية تحرير دور مستخدم Divi
- كيفية استخدام وحدة Divi Social Media
- كيفية استخدام وحدة متجر على موضوع ووردبرس]
- كيفية استخدام وحدة Divi الشريط الجانبي
- كيفية استخدام Divi Price Table Module
- كيفية استخدام وحدة العنوان لمنشورات Divi
- كيفية إضافة وحدة فيديو ديفي
- كيفية استخدام وحدة الملاحة المادة
- كيفية استخدام وحدة البحث Divi
- كيفية استخدام وحدة محفظة Divi
- كيفية استخدام وحدة الشخص على Divi Builder
- كيفية استخدام وحدة المحفظة مع فلتر Divi
- كيفية استخدام وحدة المنزلق بعرض كامل
- كيفية استخدام Divi Builder Image Module
- كيفية استخدام وحدة التنقل كاملة العرض في Divi Builder
- كيفية استخدام وحدة معرض الصور
- كيفية استخدام وحدة بطاقة Divi Builder Full-Width
- كيفية استخدام وحدة Divi Full Width Portfolio
- كيفية استخدام وحدة الرأس Divi ذات العرض الكامل
- كيفية استخدام Divi Counter Module
- كيفية استخدام شريط التمرير المقالات على Divi Builder
- كيفية استخدام وحدة Divi Email Optin
مرحبا وشكرا على هذا البرنامج التعليمي! لا يمكنني العثور على كود js و css لإدراجهما في شريط التمرير هنا
مرحبًا ، برنامج تعليمي رائع.
من ناحية أخرى ، لا يتم عرضه بملء الشاشة على iPhone على سبيل المثال ، عن طريق إمالة جهاز iphone ، يتم عرض شريط التمرير من وقت لآخر في وضع ملء الشاشة ولكن ليس طوال الوقت ... كما لو أنها لم تكن مستجيبة ، هل لديك أي فكرة لإصلاح هذه المشكلة الصغيرة؟
شكرا مسبقا،
مع خالص التقدير،
مرحبا،
حاول إلغاء تنشيط جميع المكونات الإضافية الأخرى ، وتحقق أيضًا من أن إصدارات WordPress و Divi محدثة.
مساء الخير كيف يمكنني تخصيص حجم الشريحة لمطابقة حجم صورة البانر بحيث لا يمكنني اقتصاص الصورة؟
مرحبا،
أنا لا أفهم هذا السؤال.
مرحبا،
شكرا لهذه المادة. لقد قرأت أنه ليس من الضروري بالضرورة تثبيت سمة فرعية مع Divi طالما أننا لا نقوم بتعديل CSS كثيرًا.
لا يزال هناك القليل من التخصيص هنا ...
فهل توصي بموضوع ثانوي قبل تطبيق البرنامج التعليمي الفائق الخاص بك؟
أشكرك مقدمًا على كل نصائحك الجيدة ، غالبًا ما أستلهم منها 🙂
مرحبا،
ليس بالضرورة. يمكنك الاحتفاظ بديفي إذا لم يكن لديك الكثير من المعرفة التقنية.
مرحبا ، مقال جيد جدا!
لقد اتبعت ما تم الإشارة إليه في المقالة ولكن شريط التمرير الخاص بي لم يتم عرضه بملء الشاشة على DIVI.
أيمكنك أن تعينني ؟ أود وضعها على صفحتي الرئيسية.
شكرا على مساعدتك
مرحبا،
هل اتصلت بفريق DIVI؟
مرحبا اليانور ،
لدي نفس المشكلة ... هل وجدت حلا؟
شكرا مسبقا
مرحبا،
أقوم ببناء صفحتي الرئيسية باستخدام منشئ… عندما أقوم بمعاينة ، أرى الصفحة.
المشكلة هي أنه عند حفظ صفحتي وفتحها مرة أخرى ، لا يظهر شريط التمرير.
هل يستطيع أي شخص مساعدتي رجاء؟
مرحبا،
قد يكون هذا بسبب خطأ ، هل حاولت الاتصال بدعم Eleganthemes؟
مرحبا،
شكرا لك على مقالك!
هل تعرف كيف يمكنني تغيير سرعة الشرائح من الشرائح؟