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

إضافة ميزة ملء الشاشة إلى وحدة شريط التمرير الخاصة بـ 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