نوار لغزنده تمام عرض دارای برخی از ویژگی های عالی از جمله توانایی افزودن اسلایدر با پس زمینه ویدیو است. اما ، یک ویژگی که آن را حتی بیشتر قدرتمند می کند ، توانایی گسترش نوار لغزنده برای نمایش در حالت تمام صفحه است. بنابراین ما به شما نشان خواهیم داد که چگونه عملکرد تمام صفحه را به یک نوار لغزنده اضافه کنید.

اضافه کردن یک ویژگی تمام صفحه به ماژول کشویی DIVI با چند خط CSS و JavaScript بسیار آسان است. فقط در مدت 5 دقیقه می توانید نوار لغزنده تمام عرض خود را به یک کشویی تمام صفحه تبدیل کنید که منبسط شده و کل صفحه را پر می کند ، دقیقاً مانند هدرهای تمام صفحه.

اجرای قابلیت کشویی تمام صفحه روی Divi

اگر ما را نخوانده اید آموزش ارائه رابط Divi، من شما را به انجام این کار دعوت می کنم.

مرحله 1: یک اسلایدر با اسلایدها را در حالت تمام عرض اضافه کنید

استفاده از " ساز دوو »افزودن بخش« عرض کامل »و روی«  ماژول را وارد کنید '.

یک ماژول عرض کامل اضافه کنید

ماژول کشویی را در دووی اضافه کنید

در تنظیمات کشویی تمام صفحه ، در زیر "Custom CSS" ، یک کلاس CSS به نام "اضافه کنید et_fullscreen_slider '.

در "تنظیمات عمومی" یک اسلاید جدید اضافه کنید.

در تنظیمات اسلاید ، زیر تنظیمات عمومی موارد زیر را به روز کنید:

• بخش: [بخش خود را وارد کنید]
• دکمه ی متن: [دکمه ی متن خود را وارد کنید
• دکمه URL: [دکمه ی URL خود را وارد کنید]
• تصویر پس زمینه: [تصویر پسزمینه خود را اضافه کنید (من از تصویری از unsplash.com استفاده می کنم)

این مرحله را به همان تعداد اسلایدها که می خواهید اضافه کنید تکرار کنید.

پس از اتمام ، روی " ذخیره و خروج '.

نحوه افزودن CSS و JavaScript سفارشی

از داشبورد وردپرس به " گزینه های تم Divi → و در بخش "تنظیمات عمومی" ، CSS زیر را در جعبه متن سفارشی CSS وارد کنید:

.et_pb_slides .et_fullscreen_slider، .et_pb_slide .et_fullscreen_slider، .et_pb_container .et_fullscreen_slider {حداقل ارتفاع: 100 درصد، ارتفاع: 100٪ مهم است؛! }

روی برگه بعدی کلیک کنید و javascript زیر را به جعبه متن با عنوان "اضافه کنید" کد را به سر اضافه کنید وبلاگ شما »:

(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=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” 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”]دانلود تم DIVI [/vcex_button][/vc_colum][/vc_colum] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”family” =_font ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-NAD”]DOW قالب DIVI[/vcex_button][/vc_column][/vc_row]

سایر آموزشهای دوگانه

• سایت های رستوران 5 که از موضوع دووی استفاده می کنند
• چگونه برای اضافه کردن متن در محصول Divi WooCommerce
• چگونه می توان رنگ منو را بین صفحات Divi تغییر داد
• نحوه شخصی سازی شبکه های یک وبلاگ با Divi
• نحوه استفاده از ویرایشگر نقش دووی در وردپرس
• نحوه ایجاد یک نوار لغزنده تمام صفحه Divi
• چگونگی تغییر رنگ منوها بین صفحات Divi
• ویژگی هایی که احتمالاً در مورد Divi نمی دانید
• نحوه استفاده از Divi Builder در وردپرس
• نحوه استفاده از ماژول پیمایش ویدئو Divi
• نحوه استفاده از ماژول Flip Builder Divi
• نحوه اضافه کردن ماژول توصیفی در Divi Builder
• نحوه استفاده از ماژول متن دووی
• نحوه ایجاد کشویی در دیوی
• نحوه ویرایش نقش کاربر Divi
• نحوه استفاده از ماوی رسانه اجتماعی Divi
• نحوه استفاده از ماژول فروشگاه با موضوع WordPress Divi
• نحوه استفاده از ماوی نوار کناری Divi
• نحوه استفاده از ماژول جدول قیمت دووی
• چگونه از عنوان ماژول نشریات دووی استفاده کنیم
• نحوه اضافه کردن ماژول ویدیویی از دیوی
• نحوه استفاده از ماژول ناوبری مقاله
• چگونه از ماوی جستجوی Divi استفاده کنیم
• چگونه از ماژول کیف پول Divi استفاده کنیم
• نحوه استفاده از ماژول شخص در Divi Builder
• نحوه استفاده از ماژول کیف پول با فیلتر Divi
• نحوه استفاده از ماژول کشویی عرض کامل
• نحوه استفاده از ماژول Image Divid Builder
• نحوه استفاده از ماژول ناوبری تمام عرض Divi Builder
• نحوه استفاده از ماژول گالری تصاویر
• نحوه استفاده از ماوی کارت Width Divi Builder
• نحوه استفاده از ماژول Portfolio Full Width Divi
• نحوه استفاده از ماژول هدر تمام عیار Divi
• چگونه از ماوی شمارنده Divi استفاده کنیم
• نحوه استفاده از نوار لغزنده مقالات در Divi Builder
• نحوه استفاده از ماژول Divi ایمیل Optin