Jak stworzyć automatyczną karuzelę za pomocą Divi i Slick.js

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy, jak stworzyć automatyczną karuzelę za pomocą Divi, Slick.js i pakietu Ice Cream Shop Layout Pack. Zaczniemy od włączenia zgrabnej biblioteki JS do naszej strony internetowej i kontynuujemy, aby działała w Divi Builder. To świetny sposób na stworzenie automatycznej karuzeli dla dowolnego modułu, który chcesz zaprezentować. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ automatycznej karuzeli ZA DARMO

Aby położyć swoje ręce na darmowym układzie automatycznej karuzeli, musisz najpierw pobrać go za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

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ładów Divi!

Upewnij się, że dołączasz plik Slick.js do tagów głowy! Bez tego to nie zadziała. Zobacz pierwszy krok poniżej.

1. Dodaj Slick JS do integracji z motywem Divi

Przejdź do opcji motywu Divi

Pierwsza część tego samouczka jest bardzo ważna; dodanie Slick.js do Twojej witryny. Aby to zrobić, przejdź do opcji motywu Divi.

Dodaj Slick.js do tagów nagłówka

Przejdź do zakładki integracji i dodaj plik Slick.js do tagów head swojej witryny.

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

2. Utwórz nową stronę za pomocą układu menu lodziarni

Dodaj nową stronę

Kontynuuj, dodając nową stronę do swojej witryny. Nadaj swojej stronie tytuł, opublikuj stronę i przełącz się na Divi Builder.

Prześlij układ menu lodziarni

W tym samouczku używamy układu menu Pakietu układu Ice Cream Shop, ale możesz użyć dowolnej innej strony/układu, który wybierzesz.

2. Dodaj nową sekcję do strony

Dodaj nową sekcję

Kolejnym krokiem w tworzeniu automatycznej karuzeli jest dodanie nowej sekcji do swojej strony.

Kolor tła

Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #f5f5f5

Dolny rozdzielacz

Dodaj również dolną przegrodę do sekcji.

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #ffffff
• Waga rozdzielacza: 10vw

Rozstaw

Wraz z dolną wyściółką.

• Dolna wyściółka: 10vw

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając pierwszy wiersz, korzystając z następującej struktury kolumn:

Dodaj moduł tekstu tytułu do kolumny

Dodaj zawartość H2

Dodaj moduł tekstowy do kolumny wiersza i wstaw wybrane przez siebie treści H2.

Ustawienia tekstu H2

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu H2:

• Czcionka nagłówka 2: Monit
• Grubość czcionki nagłówka 2: Ultra Light
• Nagłówek 2 Wyrównanie tekstu: do środka
• Rozmiar tekstu nagłówka 2: 60px (komputer), 40px (tablet), 25px (telefon)
• Nagłówek 2 Wysokość linii: 1,2 em

Rozmiary

Zmodyfikuj również ustawienia rozmiaru modułu.

• Maksymalna szerokość: 800px
• Wyrównanie modułu: Środek

3. Poświęć nowy wiersz z jedną kolumną na automatyczny suwak

Dodaj nowy wiersz

Struktura kolumny

Aby utworzyć automatyczną karuzelę, musimy poświęcić nowy wiersz elementom, które chcemy umieścić w karuzeli. Upewnij się, że wybrałeś wiersz z tylko jedną kolumną. W kolejnych krokach przekształcimy tę kolumnę w automatyczną karuzelę.

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i pozwól wierszowi zająć całą szerokość ekranu w ustawieniach rozmiaru.

• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Dodaj trochę górnego marginesu i usuń wszystkie domyślne górne i dolne dopełnienie.

• Górny margines: 50px
• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Przepełnienia

Ukrywamy też przepełnienia, aby upewnić się, że nic nie przewyższa kontenera wierszy.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Ustawienia kolumny

Kontynuuj, otwierając ustawienia kolumny.

Klasy CSS

Dodaj do kolumny dwie różne klasy CSS. Upewnij się, że zostawiłeś między nimi odstęp. W dalszej części tego samouczka użyjemy tych klas do stworzenia automatycznej karuzeli.

• Klasa CSS: suwak do lodów

Dodaj pierwszy element suwaka do kolumny (moduł wezwania do działania)

Treść domyślna

Czas zacząć dodawać pierwszy przedmiot z karuzeli! Skorzystamy z modułu Call to Action, ale zachęcamy do skorzystania z dowolnego innego wybranego modułu. Wprowadź wybraną treść.

Zawartość po najechaniu kursorem

Zastąp tytuł i treść treści pustym znakiem (na przykład: „ ”), aby usunąć zawartość po najechaniu myszą.

Połączyć

Upewnij się, że dodałeś również link do modułu, aby pojawił się przycisk.

• URL linku przycisku: #

Domyślne tło gradientowe

Następnie przejdź do ustawień tła i dodaj tło gradientowe.

• Kolor 1: #8300e9
• Kolor 2: rgba (41,196,169,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: góra
• Pozycja startowa: 35%
• Pozycja końcowa: 35%

Usuń Hover Gradient Background

Usuń tło gradientowe po najechaniu myszą.

Zdjęcie w tle

Prześlij również odpowiedni obraz tła.

Ustawienia tekstu tytułu

Przejdź do karty projektu i odpowiednio zmień ustawienia tekstu tytułu:

• Czcionka tytułu: Monit
• Rozmiar tekstu tytułu: 2vw (komputer), 4vw (tablet), 5vw (telefon)
• Wysokość wiersza tytułu: 2vw (komputer), 3vw (tablet), 4vw (telefon)

Ustawienia tekstu podstawowego

Zmodyfikuj również ustawienia tekstu podstawowego.

• Czcionka ciała: Open Sans
• Rozmiar tekstu ciała: 0,9vw (komputer), 2vw (tablet), 2,5vw (telefon)
• Wysokość linii ciała: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)

Ustawienia przycisków

Następnie przejdź do ustawień przycisku i zmień styl przycisku w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,9vw (komputer stacjonarny), 1,5vw (tablet), 2vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #000000 (domyślnie), #ff6f7e (najechanie)
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 0px
• Odstępy między przyciskami: 2px
• Czcionka przycisku: monit
• Waga czcionki przycisku: Regularna
• Styl czcionki przycisku: wielkie litery

• Górny margines: 19vw (komputer stacjonarny), 30vw (tablet), 45vw (telefon)
• Górna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Lewa wyściółka: 2vw (komputer), 4vw (tablet), 5vw (telefon)
• Prawa wyściółka: 2vw (komputer), 4vw (tablet), 5vw (telefon)

Rozmiary

Zmieniamy również szerokość i wysokość modułu.

• Szerokość: 23vw
• Wysokość: 23vw (komputer stacjonarny), 50vw (tablet), 80vw (telefon)

Rozstaw

Na koniec przejdź do ustawień odstępów i dodaj niestandardowe wartości marginesów i dopełnienia.

• Lewy margines: 1vw
• Prawy margines: 1vw
• Górna wyściółka: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)

4. Klonuj element suwaka tyle razy, ile chcesz

Klonuj moduł CTA cztery razy

Po ukończeniu pierwszego modułu CTA możesz śmiało sklonować go tyle razy, ile chcesz. Każdy moduł w tej kolumnie będzie częścią automatycznej karuzeli.

Zmień treść, tło gradientowe i obraz tła dla każdego duplikatu

Upewnij się, że zmieniłeś treść, tło gradientowe i obraz tła każdego duplikatu, aby każdy moduł CTA był unikalny.

5. Dodaj nowy wiersz poniżej poprzedniego

Dodaj następny i ostatni wiersz do sekcji, używając następującej struktury kolumn:

Wstaw pierwszy moduł kodu z kodem jQuery

Dodaj nowy moduł kodu do kolumny

Dodaj pierwszy moduł kodu do kolumny.

Wstaw kod CSS

I wstaw następujące wiersze kodu CSS:

<style>
.slick-slider
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-slide
{
float: left;
}
</style>

Wstaw drugi moduł kodu z kodem CSS

Dodaj nowy moduł kodu do kolumny

Dodaj kolejny moduł kodu tuż pod poprzednim.

Wstaw kod jQuery

I wstaw następujące wiersze kodu jQuery:

<script>
jQuery(function($){
$('.icecream-items').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 700,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 1079,
settings: {
slidesToShow: 2
}
}]
});
});
</script>

Po dodaniu kodu CSS i jQuery możesz wyjść z programu Visual Builder, aby wyświetlić wynik!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć automatyczną karuzelę za pomocą Divi, slick.js i pakietu Ice Cream Shop Layout Pack. To świetny sposób na dodanie interakcji do Twojej witryny. Możesz sprawić, by ta technika działała z dowolnym rodzajem modułu, który chcesz wyświetlić! Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.