Jak zbudować niestandardowy suwak na pełnym ekranie z Divi 5 (do pobrania za darmo)

Jedno z najnowszych wydań Divi 5 przedstawia moduł grupy karuzelowej, funkcję tworzenia niestandardowych, angażujących suwaków i karuzeli dla Twojej witryny WordPress. Możesz łatwo zaprezentować swoje portfolio, produkty, wciągający bohater lub suwak na pełnym ekranie i przenieść projekt Twojej witryny na nowe wyżyny.

W tym poście zapewniamy przewodnik krok po kroku, aby stworzyć suwak na pełnym ekranie za pomocą modułu grupy karuzelowej. Zanurzmy się!

Zrozumienie modułu karuzeli grupy

Moduł grupy karuzelowej jest wszechstronnym dodatkiem do Divi 5, co umożliwia tworzenie dynamicznych suwaków i karuzeli.

W przeciwieństwie do tradycyjnych modułów, obsługuje szeroki zakres układów, od prostych karuzeli obrazowej po złożone suwaki post-oparte napędzane przez Builder Loop. Ta elastyczność sprawia, że ​​idealnie nadaje się do prezentowania treści, takich jak portfele, referencje lub galerie produktów w fascynujący sposób.

Kluczowe cechy modułu karuzeli grupy

Moduł karuzeli grupy świeci z solidnymi funkcjami. Obsługuje dynamiczne pętle treści, umożliwiając pobieranie postów, stron lub niestandardowych typów postów bezpośrednio do suwaka za pomocą Builder Loop.

Moduł pozwala również użyć dowolnego modułu Divi do budowy pięknych, angażujących suwaków za pomocą zagnieżdżonych rzędów i grup modułów. Możesz dostosować nawigację za pomocą strzał i paginacji, dostosowywanie ich pozycji, koloru i innych stylów do witryny.

Opcje automatycznego opcji, regulowane prędkości i funkcje pauzy na poduszwie zapewniają przyciągające wzrok wrażenia dla odwiedzających, zapewniając, że pozostaną na Twojej stronie dłużej. Ponadto moduł jest w pełni konfigurowalny, umożliwiając tworzenie układów pełnego ekranu i pełnej szerokości, dzięki czemu jest idealny do sekcji bohatera, serwisu lub funkcji na Twojej stronie.

Jak zbudować suwak na pełnym ekranie z modułem karuzeli Divi 5

W tym samouczku pokażemy, jak korzystać z modułu grupy karuzelowej do zbudowania suwaka na pełnym ekranie dla nadchodzących stron internetowych Divi 5. Do końca będziesz mieć zestaw umiejętności, aby zbudować urzekające suwaki, aby zachęcić odwiedzających do działania.

Krok 1: Konfigurowanie nowej strony

Utwórz nową stronę, dodaj tytuł i kliknij użyj Divi Builder, aby rozpocząć.

Po otwarciu wizualnego konstruktora wybierz kompilację od zera w ramach opcji Utwórz swoją stronę .

Ułóż sekcję na nowej stronie, aby ujawnić ikonę ustawień . Kliknij, aby ujawnić ustawienia sekcji.

Przejdź do zakładki projektowej . Kliknij menu rozwijane układu . Zgodnie z treścią wybierz Centrum . W polu wyrównanych elementów wybierz Centrum . Umożliwi to koncentrację treści naszej sekcji w poziomie i pionie.

Następnie dostosujemy ustawienia odstępów dla sekcji. Rozwiń menu rozwijane odstępów . Ustaw margines na 0px , górny i dolny. Pod wypełnieniem ustaw górny i dolny na 0px .

Po ustawieniach sekcji kliknij ikonę Green +, aby dodać nowy wiersz.

Wybierz wiersz jednopozadowy w równych kolumnach .

Następnie dodaj moduł grupy karuzelowej do wiersza.

Przed dodaniem zawartości musimy skonfigurować moduł karuzeli Row i Group z FlexBox i Sterownik odstępów.

Krok 2: Skonfiguruj ustawienia wiersza

Utworzenie suwaka na pełnym ekranie wymaga od nas ustawienia wiersza i modułu karuzeli grupy na 100% szerokości . Kliknij ikonę warstw , aby łatwo dostosować sekcje. Ma to kluczowe znaczenie przy pracy z sekcjami i wierszami pełnometrażowymi, zwłaszcza gdy wyściółka i margines zostały ustawione na 0. Ułatwia to dostrzeżenie struktury układu strony

W widoku warstwy kliknij, aby wybrać jednocześnie wiersz, w którym mieści się moduł karuzeli grupy. Przejdź do ustawień projektu. W menu rozwijanym układu dostosuj szczelinę poziomą do 0 .

Ustaw także wyrównanie elementów na środek do wiersza.

Ustaw szerokość i maksymalną szerokość na karcie SING na 100%.

Na karcie odstępów ustaw górny i dolny margines i wyściółka na 0px .

Krok 3: Skonfiguruj ustawienia karuzeli grupy

Następnie skonfigurujemy ustawienia karuzeli grupy. Rozwiń menu rozwijane ustawienia karuzeli na karcie Content. Możesz włączyć automatyczną obrót , wybrać automatyczną prędkość obrotu przy domyślnym ustawieniu 2000 ms i włączyć pauzę na zawisie .

Na karcie Elements Wyłącz Pokaż nawigację DOT i pozostaw włączone strzałki . Możesz także wybrać niestandardową ikonę lewych i prawych strzał.

Kliknij, aby rozwinąć kartę strzałek w karcie Projekt. Przypisz #ffffff jako kolor strzałki , pozostaw rozmiar strzałki na domyślnie 48px i pozostaw pozycję strzałki ustawiona do wewnątrz .

Rozwiń kartę tła i przypisz #000000 jako kolor tła .

Krok 4: Styl pierwszej grupy

Możemy dodać zawartość do pierwszego slajdu do ustawień sekcji, wiersza i grupy. Kliknij kartę zawartości w module grupy karuzelowej i kliknij ikonę Ustawienia dla grupy.

Rozwiń menu rozwijane tła i wybierz kartę gradientu .

Kliknij pierwszy suwak gradientu , aby przypisać nowy kolor. Wprowadź #efb648 do pola kolorów .

Następnie kliknij na 2. suwak gradientu i przypisz #F28F52 jako kolor.

W polu typu gradientu wybierz okólnik .

Następnie przejdź do zakładki projektowej . Rozwiń kartę odstępów i przypisz 5% wyściółki do górnej i dolnej grupy.

Krok 5: Dodaj treść do pierwszej grupy

Teraz, gdy ustawienia naszej grupy są skonfigurowane, możemy zacząć dodawać treść do grupy. Kliknij ikonę Black +, aby dodać moduł.

Gdy pojawi się okno dialogowe Wstaw moduł lub wiersz, kliknij kartę Nowy wiersz . W sekcji równych kolumn wybierz wiersz pojedynczej kolumny .

Dodaj moduł nagłówka

Wybierz i wstaw moduł nagłówka .

Rozwiń menu rozwijane i wprowadź sok pomarańczowy jako tytuł .

Przejdź do zakładki projektowej . Rozwiń menu rozwijane tekstu . Wybierz H1 jako poziom nagłówka , użyj Bebas Neue jako czcionki nagłówka , ustaw styl czcionki na szczycie do dużej , wyrównanie tekstu do środka , koloru tekstu do #FFFFFF , a rozmiar tekstu nagłówka do 20EM .

Użyj responsywnych elementów sterujących Divi 5, aby dostosować rozmiar tekstu na szczycie do 15EM na tablecie i 8EM na telefonie komórkowym.

Dodaj nowy rząd

Następnie dodamy nowy wiersz pod rzędem jednopozadowym zawierającym moduł nagłówka. Kliknij ikonę Black +, aby dodać nowy moduł.

Kliknij kartę nowego wiersza . W kolumnach przesunięcia wybierz opcję 1/4 + 1/2 + 1/4.

Na karcie Projekt rozszerz kartę SISING i wprowadź 70% dla szerokości i maksymalnej szerokości . Ustaw wyrównanie do centrum .

Dodaj moduł nagłówka

Wybierz moduł nagłówka i dodaj go do pierwszej kolumny .

Daj nagłówkowi tytuł i przejdź do zakładki projektowej . Rozwiń menu rozwijane tekstu . Wybierz H2 dla poziomu nagłówka , Bebas Neue jako czcionkę nagłówka , wielki poziom stylu czcionki , #ffffff jako kolor tekstu i 6em jako rozmiar tekstu .

Użyj responsywnych elementów sterujących Divi, aby dostosować rozmiar tekstu do 4EM .

Dodaj moduł tekstowy

Dodaj moduł tekstowy pod nagłówkiem w pierwszej kolumnie. Wprowadź tekst nadwozia i przełącz na kartę Projekt . Wybierz poppins jako czcionkę tekstową , ustaw kolor tekstu na #ffffff i rozmiar tekstu na 16px .

Dodaj moduł przycisku

Dodaj moduł przycisku pod modułem tekstowym w pierwszej kolumnie. Przypisz tekst do przycisku na karcie zawartości i zamień na kartę Projekt. Rozwiń menu rozwijane i włącz użyj niestandardowych stylów przycisku . Następnie rozwinąć menu tła przycisku . Na karcie koloru tła dodaj #528BF2 jako kolor przycisku.

Użyj sterowania Hover Divi 5, aby przypisać #6a7c9d jako koloru najemnika dla przycisku.

Wróć do widoku komputerów stacjonarnych. Rozwiń kartę rozwijaną obramowania przycisku . Dodaj 100px pod promieniem granicy przycisku i ustaw szerokość obramowania przycisku na 0px .

Rozwiń menu rozwijane tekstu przycisku . Przypisz poppiny jako czcionkę przycisku , #FFFFFF jako kolor tekstu i 16px jako rozmiar tekstu przycisku .

Rozwiń Ustawienia ikony przycisku i wyłącz przełącznik ikon ikon przycisku show .

Na koniec rozszerz menu rozwijane odstępów . Dodaj wyściółkę 15px do górnej i dolnej oraz 35px do lewej i prawej.

Dodaj moduł obrazu

Umieść moduł obrazu w drugiej kolumnie. Kiedy pojawiają się ustawienia, unosisz się nad polem obrazu, aby ujawnić ustawienia. Kliknij ikonę Ustawienia, aby załadować bibliotekę multimediów i prześlij obraz do modułu.

Następnie dodamy interakcję do obrazu, aby stworzyć efekt myszy. Przejdź do zakładki Advanced . Rozwiń menu interakcji , aby ujawnić jego ustawienia. Kliknij przycisk +Dodaj interakcję .

Wybierz myszkę , gdy pojawią się opcje.

Wprowadź pochylenie obrazu w polu etykiet administratora , wybierz Mysz Enter jako zdarzenie wyzwalające, MURROR MOUSH Ruch jako działanie efektu, wybierz obraz jako moduł docelowy, przechylenie jako typ ruchu i 15 dla wrażliwości. Na koniec kliknij przycisk Zapisz interakcję , aby włączyć interakcję.

Dodaj moduł liczników paska

Kliknij, aby dodać moduł liczników paska w 3. kolumnie. Na karcie zawartości. Na karcie elementy wyłącz procent pokazu .

Następnie rozwinąć kartę tła. Dodaj #ffffff jako kolor tła.

Zamień na kartę Projekt i rozwinąć menu rozwijane . W polu koloru tła paska dodaj #528BF2 jako kolor.

Rozwiń menu rozwijane tekstu tytułu . W polu czcionki tytułowej wybierz Bebas Neue . Wybierz #ffffff jako kolor tekstu i 22px jako rozmiar tekstu .

Zamień z powrotem na kartę zawartości. Tym razem kliknij ikonę ustawień dla pierwszego elementu licznika baru.

Wprowadź tekst w polu tytułowym i ustaw pole procentowe na 75 .

Kliknij, aby wrócić do karty głównej zawartości dla modułu liczników paska.

Teraz, gdy ustawione są nasze ustawienia projektowe, możesz łatwo skopiować pierwszy element licznika paska, aby zachować ustawienia.

Zduplikuj element licznika baru i zmień tytuł i procent na żądane ustawienia.

Krok 6: Dodaj animacje

Aby grupa była bardziej wciągająca, dodamy pewne efekty animacji. Najpierw dodamy efekt zoomu do naszego głównego nagłówka. Kliknij, aby wybrać główny nagłówek dla grupy. Przejdź do zakładki projektowej i przewiń w dół, aby rozwinąć kartę animacji. Wybierz Zoom dla animacji. Zostaw wszystkie ustawienia w taki sposób, w jaki sposób.

Następnie kliknij, aby rozwinąć drugi wiersz (trzy kolumny). Kliknij w ustawienia pierwszej kolumny.

Kliknij kartę Projekt i przewiń w dół, aby ujawnić kartę animacji. Wybierz Slajd dla stylu animacji i słusz do kierunku animacji. Zostaw wszystkie inne ustawienia w taki sposób, w jakim jest.

Kliknij z powrotem do karty głównej zawartości dla wiersza. Tym razem wybierz trzecią kolumnę. Przejdź do zakładki Projekt, rozwinąć kartę animacji i wybierz Slide> w lewo do animacji. Zostaw inne ustawienia na ich wartości domyślne.

Krok 7: Nakładające się wiersze

Aby dodać trochę dodatkowego stylu do układu, dostosujemy margines w 2. rzędzie, aby stworzyć efekt nakładania się. To popchnie rząd w górę, pozwalając mu nakładać się na główny nagłówek, aby uzyskać przyjemny efekt. Wybierz drugi wiersz w układzie i przejdź do zakładki projektowej. Rozwiń kartę odstępów, aby ujawnić ustawienia. Na górnej marży ustaw wartość na -8%.

Następnie zastosujemy wartość indeksu Z, aby umieścić drugi wiersz powyżej 1.. Przejdź do zakładki Advanced, rozwinąć ustawienia pozycji i zastosuj 999999 do pola indeksu Z.

Podczas podglądu suwaka zobaczysz, że drugi wiersz został wypchnięty do lekko nakładania pierwszego rzędu, tworząc ładny efekt nakładania się.

Krok 8: Reaktywność testowa

Zanim skopiujemy pierwszą grupę, dobrym pomysłem jest przetestowanie reakcji układu. Użyj konfigurowalnych responsywnych punktów przerwania Divi 5, aby dokonać jakichkolwiek korekt.

W Divi 5 istnieje teraz 7 punktów przerwania zamiast Divi 4's 3. Możesz użyć tych punktów przerwania, aby układ wyglądał niesamowicie w każdym rozmiarze ekranu. Przejdź przez punkty przerwania i dokonaj niezbędnych poprawek, zanim skopiujemy pierwszą grupę.

Jedną z najlepszych nowych funkcji w Divi 5 jest możliwość zmiany kolejności kolumn dla urządzeń mobilnych. Jest to świetny sposób na utrzymanie funkcjonowania projektu i skuteczności we wszystkich rozmiarach ekranu. W widoku mobilnym wybierz drugą kolumnę 2. rzędu w naszym układzie (3-kolumnowy rząd).

Na karcie zawartości rozwinąć kartę Zamów . Stamtąd ustaw kolejność wyświetlania na -1 . To umieścić kolumnę z obrazem u góry, umożliwiając obraz nagłówka, tak jak na widok na komputery stacjonarne i tabletu.

Krok 9: Dupliki grupy

Po tym, jak wszystko jest w kwadrat, możemy łatwo skopiować pierwszą grupę i zmienić gradient tła, tekst i obraz bez powtarzania wszystkich kroków. Na karcie zawartości grupy głównej kliknij, aby zduplikować pierwszą grupę.

Przed skopiowaniem przypisz etykietę administratora do grupy, aby ułatwić identyfikację.

Stamtąd zmień tytuł, zamień obraz i przypisz nowy gradient tła do grupy. Użyj #FC6A3C dla pierwszego suwaka gradientu i #C52F00 dla drugiego.

Będziesz także chciał zmienić kolory przycisków i liczników paska na #3DFCCA i #C52F00 na zawisie.

Musimy również dostosować czas animacji dla drugiej grupy. Zapewnia to, że animacje nie będą ładować innych slajdów, dopóki suwak nie osiągnie awansu. W głównym module nagłówkowym przejdź do karty Projekt , rozwinąć menu animacji i ustaw opóźnienie animacji na 2000 ms .

Zrób to samo dla 3-kolumnowego rzędu. W pierwszej i trzeciej kolumnach ustaw opóźnienie animacji na 2000 ms .

Zmiany w trzeciej grupie

Dla trzeciej grupy użyj #71B953 i #617A56 dla gradientu tła .

W przypadku modułów przycisków i liczników paska użyj #BA54B3 i #654F64 dla koloru nachylenia.

Będziesz także musiał zmienić opóźnienie animacji na module nagłówku oraz pierwszą i trzecią kolumny 2. rzędu na 4000 ms .

Zmiany w czwartej grupie

W przypadku gradientu tła użyj #AD52B7 i #AD52B7 .

Użyj #83B853 i #83B853 dla modułów licznika i przycisków.

Na koniec ustaw opóźnienie animacji na 6000 ms na głównym nagłówku w grupie, wraz z pierwszą i trzecią kolumnami 3-kolumnowego rzędu.

Krok 10: Podgląd i zapisz suwak

Ostatnim krokiem jest zapisanie układu i podgląd, aby upewnić się, że nie pominięto żadnych kroków. W The Visual Builder kliknij przycisk Zapisz w prawym górnym rogu.

Kliknij przycisk Podgląd, aby otworzyć układ w nowej karcie.

Po zakończeniu suwak powinien wyglądać tak:

To wszystko! Moduł grupy karuzelowej jest nowym wszechstronnym dodatkiem do Divi 5. Pozwala tworzyć suwaki i karuzele dla każdego projektu i oferuje nieograniczone opcje dostosowywania.

Pobierz układ karuzeli na pełnym ekranie

Jeśli chcesz skorzystać z układu, który odtworzyliśmy w tym poście, możesz uzyskać do niego dostęp przez poniższy formularz. Po pobraniu i rozpakowaniu folderu znajdziesz plik JSON. Przejdź do biblioteki Divi, aby przesłać plik, abyś mógł uzyskać dostęp do niego i użyć go dla dowolnej zbudowanej strony.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a my wysyłamy Ci e -mailem kopię pakietu układu Ultimate Divi Landing Page, a także ton innych niesamowitych i bezpłatnych zasobów, wskazówek i wskazówek. Śledź dalej, a będziesz mistrzem Divi w krótkim czasie. Jeśli jesteś już subskrybowany, po prostu wpisz swój adres e -mail poniżej i kliknij Pobierz, aby uzyskać dostęp do pakietu układu.

POBIERAĆ

Udało ci się zasubskrybować. Sprawdź swój adres e -mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układu Divi!

Zbuduj dziś swoją pierwszą karuzel w Divi 5

Utworzenie niestandardowego suwaka na pełnym ekranie z modułem Carousel Group Divi 5 otwiera świat możliwości tworzenia angażujących doświadczeń na twoich stronach internetowych. Zgodnie z krokami w tym poście nauczyłeś się korzystać z funkcji modułu, z zaawansowanych opcji dostosowywania, takich jak animacje, responsywne punkty przerwania i interaktywne efekty. Elastyczność modułu karuzeli grupy pozwala budować slajdy na wszystko, co możesz sobie wyobrazić, a jednocześnie zachowując bezproblemowy, profesjonalny wygląd we wszystkich rozmiarach ekranu.

Pobierz najnowszą publiczną alfa Divi 5, eksperymentuj z modułem grupy karuzelowej i daj nam znać, co myślisz w komentarzach lub w naszych kanałach mediów społecznościowych.