Suwak o pełnej szerokości ma kilka niesamowitych funkcji, w tym możliwość dodawania suwaków z tłem wideo. Ale jedną z funkcji, która sprawia, że ​​jest jeszcze potężniejszy, jest możliwość rozwinięcia suwaka w celu wyświetlenia w trybie pełnoekranowym. Pokażemy Ci, jak dodać funkcjonalność pełnoekranową do suwaka.

Dodanie funkcji pełnego ekranu do modułu suwaka programu Divi jest niezwykle łatwy do zaimplementowania dzięki kilku wierszom CSS i JavaScript. W zaledwie 5 minut możesz przekształcić suwak o pełnej szerokości w suwak pełnoekranowy, który rozszerza się, aby wypełnić cały ekran, podobnie jak nagłówki pełnoekranowe.

Wdrożenie pełnoekranowej funkcji suwaka w Divi

Jeśli nie czytałeś naszego samouczek dotyczący prezentacji interfejsu Divi, Zapraszam do zrobienia tego.

Krok 1: Dodaj suwak ze slajdami w trybie pełnej szerokości

Użyj „ Builder Divi »Dodaj sekcję« pełna szerokość »I kliknij«  Włóż moduł ".

Jak dodać moduł do Divi Builder

Dodaj moduł o pełnej szerokości.

dodaj moduł suwakowy do urządzenia Divi #

W ustawieniach suwaka trybu pełnoekranowego, na karcie „Niestandardowy CSS” dodaj klasę CSS o nazwie „ et_fullscreen_slider ".

Zaawansowana modyfikacja suwaka divi w CSS

W „Ustawieniach ogólnych” dodaj nowy slajd.

Dodaj diaspositive na divi

W ustawieniach slajdu w obszarze Ustawienia ogólne zaktualizuj następujące elementy:

  • Kategoria: [wpisz swoją nazwę]
  • Przycisk Tekst: [wprowadź swój tekst]
  • Przycisk adresu URL: [wprowadź swój adres URL]
  • Obraz w tle: [dodaj swój obraz tła] (Używam obrazu z unsplash.com)

Ustawienia slajdów Divi

Powtórz ten krok dla tylu slajdów, ile chcesz dodać.

Po zakończeniu kliknij „ Wyjście bezpieczeństwa ".

Jak dodać niestandardowy CSS i JavaScript

Z pulpitu nawigacyjnego WordPress przejdź do „ Divi → Opcje motywu W sekcji „Ustawienia ogólne” wprowadź następujący kod CSS w polu tekstowym Niestandardowy CSS:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {min wysokość: 100% znacząca; wysokość: 100%! ważna; }

kliknij następną kartę i dodaj następujący skrypt javascript do pola tekstowego zatytułowanego „ Dodaj kod do nagłówka Twój blog »:

(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);

wreszcie

Teraz masz suwak trybu pełnoekranowego dla swojego strona internetowa. Użyj go, aby stworzyć efektywne suwaki o pełnej szerokości dla większości przeglądarek.

Jeśli masz jakieś pytania, nie wahaj się ich zadać.

[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”]POBIERZ MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” font_family = „Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]

Inne samouczki Divi