Przejdź do głównej treści

Jak utworzyć suwak pełnym ekranie Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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 swojego bloga »:

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

(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 pełnoekranowy suwak swojej witryny. Użyj go do tworzenia efektywnych suwaków pełnej szerokości dla większości przeglądarek.

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

Inne samouczki Divi

Ten artykuł zawiera komentarze 12

  1. 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,

  2. 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ę 🙂

  3. 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

  4. 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?

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
12 akcji
udział5
ćwierkanie1
Enregistrer6