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ł ".
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 ".
W „Ustawieniach ogólnych” dodaj nowy slajd.
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)
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
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu Divi WooCommerce
- Jak zmienić kolor menu między stronami Divi
- Jak spersonalizować siatki bloga za pomocą Divi
- Jak korzystać z roli Divi edytor na WordPressie
- Jak utworzyć pełnoekranowy suwak Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których prawdopodobnie nie wiesz o Divi
- Jak korzystać z Divi Builder na WordPress
- Jak korzystać z modułu przewijania wideo Divi
- Jak korzystać z modułu Divi Builder Flip
- Jak dodać moduł referencji w Divi Builder
- Jak korzystać z modułu tekstowego Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika Divi
- Jak korzystać z modułu Divi Social Media
- Jak korzystać z modułu sklepu na temat WordPress Divi
- Jak korzystać z modułu paska bocznego Divi
- Jak korzystać z modułu tabeli cen Divi
- Jak korzystać z modułu tytułowego publikacji Divi
- Jak dodać moduł wideo Divi
- Jak korzystać z modułu nawigacji artykułów
- Jak korzystać z modułu wyszukiwania Divi
- Jak korzystać z modułu portfela Divi
- Jak korzystać z modułu person w Divi Builder
- Jak korzystać z modułu portfela z filtrem Divi
- Jak korzystać z modułu suwaka o pełnej szerokości
- Jak korzystać z modułu obrazu Divi Builder
- Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
- Jak korzystać z modułu galerii obrazów
- Jak korzystać z pełnego modułu karty Divi Builder
- Jak korzystać z modułu portfela o pełnej szerokości Divi
- Jak korzystać z modułu nagłówka Divi o pełnej szerokości
- Jak korzystać z modułu licznika Divi
- Jak korzystać z suwaka artykułów w Divi Builder
- Jak korzystać z modułu Divi Email Optin
witam i dziękuję za ten samouczek! Nie mogę znaleźć kodu js i css do wstawienia w suwaku tutaj
Witaj, świetny samouczek.
Z drugiej strony nie jest wyświetlany na pełnym ekranie, na przykład na iPhonie, przechylając iPhone'a, suwak jest wyświetlany od czasu do czasu na pełnym ekranie, ale nie przez cały czas…. jakby nie reagował, masz pomysł na rozwiązanie tego małego problemu?
Z góry dziękuję,
Z poważaniem,
Witam,
Spróbuj wyłączyć wszystkie inne wtyczki, sprawdź także, czy Twoje wersje WordPress i Divi są aktualne.
Dzień dobry, jak mogę dostosować rozmiar slajdu do rozmiaru obrazu banera, aby nie można było go przyciąć?
Witam,
Nie rozumiem pytania.
Witam,
Dzięki za ten artykuł. Czytałem, że niekoniecznie jest konieczne instalowanie motywu potomnego w Divi, o ile nie modyfikujemy zbyt mocno CSS.
Nadal jest trochę dostosowywania ...
Czy więc polecasz motyw potomny przed zastosowaniem super samouczka?
Z góry dziękuję za wszystkie dobre rady, często z nich czerpię inspirację 🙂
Witam,
Niekoniecznie. Możesz zachować divi, jeśli nie masz zbyt dużej wiedzy technicznej.
Witaj, bardzo dobry artykuł!
Postępowałem zgodnie z tym, co zostało wskazane w artykule, ale mój suwak nie jest wyświetlany na pełnym ekranie w DIVI.
Możesz mi pomóc ? Chciałbym to umieścić na mojej stronie domowej.
Dziękuję za pomoc
Witam,
Czy skontaktowałeś się z zespołem DIVI?
Witaj Aliénor,
Mam ten sam problem ... Czy znalazłeś rozwiązanie?
Z góry dziękuję
Witam,
Buduję swoją stronę domową za pomocą kreatora… kiedy robię podgląd, widzę stronę.
Problem polega na tym, że kiedy zapisuję moją stronę i otwieram ją ponownie, suwak się nie pojawia.
Czy ktoś mógłby mi pomóc?
Witam,
Może to być spowodowane błędem, czy próbowałeś skontaktować się z pomocą techniczną Eleganthemes?
Witam,
Dziękuję za Twój artykuł!
Czy wiesz, jak mogę zmienić szybkość przewijania slajdów?