Ползунок полной ширины имеет несколько замечательных функций, включая возможность добавлять слайдеры с видео-фоном. Но одна особенность, которая делает его еще более мощным, - это возможность расширить ползунок для отображения в полноэкранном режиме. Итак, мы покажем вам, как добавить в слайдер полноэкранный режим.

Добавление полноэкранного режима к модулю слайдера Divi чрезвычайно легко реализовать с помощью нескольких строк CSS и JavaScript. Всего за 5 минут вы можете превратить свой полноэкранный слайдер в полноэкранный слайдер, который расширяется, чтобы заполнить весь экран, так же, как полноэкранные заголовки.

Реализация функциональности полноэкранного слайдера на Divi

Если вы не читали наши учебник по презентации интерфейса DiviЯ приглашаю вас сделать это.

Шаг 1: добавить слайдер со слайдами в режиме полной ширины

Используйте " Дива Builder »Добавить раздел« полная ширина »И нажмите« «  Вставить модуль .

Добавить полную ширину модуля.

добавить модуль слайдера DiVi #

В настройках полноэкранного слайдера на вкладке «Пользовательский CSS» добавьте класс CSS с именем « et_fullscreen_slider .

В «Общие настройки» добавьте новый слайд.

В настройках слайдов в разделе «Общие параметры» обновите следующие элементы:

• Раздел: [введите вашу тему]
• Кнопка Текст: [введите ваш текст кнопки]
• Кнопка URL: [введите ваш кнопку URL]
• Фоновое изображение: [добавить фоновое изображение] (Я использую изображение с сайта unsplash.com)

Повторите этот шаг для скольких слайдов, сколько вы хотите добавить.

После этого нажмите " Сохранить и выйти .

Как добавить собственный CSS и JavaScript

С панели управления WordPress перейдите к Divi → Опции темы В разделе «Общие настройки» введите следующий CSS в текстовое поле Custom CSS:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {мин-высота: 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" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]

Другие учебные пособия Divi

• сайты 5 для использования ресторана Divi темы
• Как добавить текст в продукт Divi WooCommerce
• Как изменить цвет меню между страницами Divi
• Как персонализировать сетки блога с Divi
• Как использовать роль DiVi редактор на WordPress
• Как создать полноэкранный слайдер Divi
• Как изменить цвет меню между страницами Divi
• Особенности, которые вы, вероятно, не знаете о Divi
• Как использовать Divi Builder в WordPress
• Как использовать модуль прокрутки видео Divi
• Как использовать модуль Flip Builder Flip
• Как добавить отзыв модуль на Divi Builder
• Как использовать текстовый модуль Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя Divi
• Как использовать модуль Divi Social Media
• Как пользоваться магазинным модулем на тему WordPress Divi
• Как использовать боковую панель Divi
• Как использовать модуль таблицы цен Divi
• Как использовать титульный модуль изданий Divi
• Как добавить видео модуль Divi
• Как использовать навигационный модуль статьи
• Как использовать модуль поиска Divi
• Как использовать модуль кошелька Divi
• Как использовать модуль пользователя в Divi Builder
• Как использовать модуль кошелька с фильтром Divi
• Как использовать ползунок полной ширины
• Как использовать модуль изображения Divi Builder
• Как использовать полноразмерный навигационный модуль Divi Builder
• Как использовать модуль галереи изображений
• Как использовать модуль карты полной ширины Divi Builder
• Как использовать модуль Divi Full Width Portfolio
• Как использовать полноразмерный заголовочный модуль Divi
• Как использовать Divi Counter Module
• Как использовать слайдер статей в Divi Builder
• Как использовать модуль Divi Email Optin