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 600.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 niesamowite funkcje, w tym możliwość dodawania suwaków z tłem wideo. Ale funkcją, która czyni go jeszcze bardziej wydajnym, jest możliwość rozszerzenia suwaka, aby wyświetlał się w trybie pełnoekranowym. Pokażemy więc, jak dodać funkcję pełnoekranową na suwaku.

Dodanie funkcji pełnoekranowej do modułu suwaka w Divi jest niezwykle łatwy do wdrożenia dzięki kilku wierszom CSS i JavaScript. W kilka minut 5 możesz przekonwertować suwak o pełnej szerokości na suwak pełnoekranowy, który rozwija się, aby wypełnić cały ekran, podobnie jak nagłówki pełnoekranowe.

Wdrożenie pełnoekranowej funkcji suwaka w Divi

Jeśli nie przeczytałeś naszego samouczek na temat 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.

Ł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 na pełnym ekranie, w zakładce „Niestandardowy CSS” dodaj klasę CSS o nazwie „ et_fullscreen_slider ".

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]

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 unsplash.com)

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

Po zakończeniu kliknij „ Zapisz i zamknij ".

Jak dodać niestandardowy CSS i JavaScript

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

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]

.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 javascript do pola tekstowego oznaczonego „ Dodaj kod do nagłówka swojego bloga »:

każda {function () {and_fullscreen_slider ($ (this));}); }); funkcja et_fullscreen_slider (et_slider) {var et_viewport_width = $ (okna) .width () et_viewport_height = $ (okna) .height () = $ et_slider_height (et_slider) .find () innerHeight () et_pb_slider_container_inner. ". , admin_bar $ = $ ( '# wpadminbar) main_header $ = $ (' # hand-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); </ Script>

wreszcie

Teraz masz suwak w trybie pełnoekranowym dla swojej witryny. Użyj go, aby utworzyć skuteczne suwaki o 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 wyświetla na przykład pełnego ekranu na iPhonie, przechylając iPhone'a suwak jest od czasu do czasu wyświetlany na pełnym ekranie, ale nie cały czas ... jakby nie reagował, czy masz pomysł na rozwiązanie tego małego problemu?

    Z góry dziękuję
    Z poważaniem,

  2. Witam,
    Dziękuję za ten artykuł. Czytałem, że nie trzeba instalować motywu potomnego z Divi, dopóki nie zmienisz zbyt mocno CSS.
    Nadal istnieje małe dostosowanie ...
    Czy polecasz dziecku motyw przed zastosowaniem swojego samouczka?
    Z góry dziękuję za wszystkie dobre rady, często mnie to inspiruje 🙂

  3. Witaj, bardzo dobry artykuł!
    Poszedłem za tym, co zostało wskazane w artykule, ale mój suwak nie jest wyświetlany na pełnym ekranie w DIVI.
    Czy możesz mi pomóc? Chciałbym umieścić go na mojej stronie głównej.

    Dziękuję za pomoc

  4. Witam,
    Buduję swoją stronę główną z budowniczym ... kiedy robię wstępną wizualizację, widzę stronę.
    Problem polega na tym, że po zapisaniu strony i ponownym jej otwarciu suwak nie pojawia się.
    Czy ktoś mógłby mi pomóc?

Zostaw komentarz

Twój adres e-mail nie zostanie 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
11 akcji
udział5
ćwierkanie1
Enregistrer5