Как да създадете плъзгач на цял екран на Divi

by Блеър Jersyer | Divi, WordPress инстркцията

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

Добавянето на функция на цял екран към плъзгащия модул на Divi е изключително лесен за изпълнение с няколко реда CSS и JavaScript. Само за 5 минути можете да превърнете плъзгача с пълна ширина в плъзгач на цял екран, който се разширява, за да запълни целия екран, подобно на заглавията на цял екран.

Внедряването на функцията за плъзгач на цял екран в Divi

Ако не сте прочели нашето урок за представянето на интерфейса Divi, Каня ви да го направите.

Стъпка 1: Добавете плъзгач с слайдове в режим на пълна ширина

Използвайте „ Строител Диви »Добавяне на раздел« пълна ширина »И кликнете върху«  Поставете модул ".

Как да добавя модул в divi builder

Добавете модул с пълна ширина.

добавете плъзгащ се модул към Divi #

В настройките на плъзгача на цял екран, в раздела „Персонализиран CSS“, добавете CSS клас, наречен „ et_fullscreen_slider ".

Разширена css модификация на слайдер divi

В "Общи настройки" добавете нов слайд.

Добавете диаспозитив към divi

В настройките на слайда под Общи настройки актуализирайте следните елементи:

  • Категория: [въведете заглавието]
  • Бутон за текст: [въведете текста]
  • Бутон за URL адрес: [въведете бутона за URL адреса]
  • Фоново изображение: [добавете вашето фоново изображение] (Използвам изображение от unsplash.com)

Настройки на слайд Divi

Повторете тази стъпка за толкова слайдове, които искате да добавите.

След като сте готови, кликнете върху „ Запазване и излизане ".

Как да добавите персонализирани CSS и JavaScript

От таблото за управление на WordPress отидете на „ Divi → Опции за тема И под „Общи настройки“ въведете следния CSS в текстовото поле на персонализиран 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" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] ИЗТЕГЛЕТЕ ТЕМАТА DIVI [/ vcex_button] [/ colu width_m»n_colum » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "] EM DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Други уроци по Диви