Tworzenie niekończących się poziomych kart przesuwanych dla urządzeń mobilnych za pomocą Divi

Przeglądanie treści to coś, co prawie każdy robi na co dzień. Zasadniczo stało się to drugą naturą, więc nie trzeba dodawać, że dodanie go do witryny może pomóc poprawić ogólne wrażenia użytkownika. W tym poście pokażemy, jak tworzyć niekończące się poziome karty przeciągane, które są przeznaczone głównie na urządzenia mobilne i tablety, w których bierze udział dotyk. Chociaż jest to samouczek zorientowany na urządzenia mobilne, wynik będzie działał świetnie również na komputerach stacjonarnych. Użytkownicy mogą korzystać z paska przewijania, który zostanie dołączony, lub „przesunąć” w lewo i w prawo za pomocą touchpada.

Weźmy się za to!

Zapowiedź

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

Przykład 1: wiersz jednokolumnowy

Pulpit

mobilny

Przykład 2: Wiersz dwukolumnowy + wiele modułów w „kolumnie przesuwania”

Pulpit

mobilny

Zbliżać się

• Aby stworzyć ten piękny efekt, musimy przekształcić całą pionową kolumnę w poziomy mechanizm przesuwania/przewijania siatki za pomocą zaledwie kilku linii kodu CSS
• Użycie pionowej kolumny do tego mechanizmu (i przekształcenie jej w poziomą siatkę) pozwoli Ci dodać tyle kart przesuwanych, ile chcesz, możesz określić, ile kolumn ma być
• Innymi słowy; dodasz moduły w dół, a mechanizm swipe/scroll umieści rąbek w poziomej kolumnie
• W pierwszym przykładzie użyjemy wiersza jednokolumnowego
• Dzięki temu mechanizm przesuwania zajmie całą szerokość ekranu
• Z drugiej strony drugi przykład zamienia tylko jedną z dwóch kolumn w mechanizm przesuwania/przewijania i pozostawia drugą kolumnę w stanie statycznym
• Pokażemy również, jak dodać wiele modułów do „kolumny” mechanizmu przesuwania/przewijania
• Gdy zrozumiesz to podejście, będziesz w stanie dosłownie stworzyć dowolny projekt, który chcesz i będzie częścią mechanizmu przesuwania / przewijania, który możesz zobaczyć w powyższych plikach GIF
• Możesz znaleźć wszystkie płynne obrazy tła, których użyjemy, przechodząc do postu „Pobierz 10 DARMOWYCH obrazów tła sekcji płynów dla Divi”

Subskrybuj nasz kanał YouTube

Odtwórz przykład nr 1

Dodaj nową sekcję

Zacznijmy tworzyć pierwszy przykład! Dodaj nową sekcję do strony, nad którą pracujesz.

Dodaj nowy wiersz

Struktura kolumny

Następnie dodaj wiersz z jedną kolumną. Zamienimy całą tę kolumnę w mechanizm przesuwania/przewijania.

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i przejdź do ustawień rozmiaru. Tutaj usuniemy całą przestrzeń między sekcją, wierszem i kolumną. Innymi słowy, kolumna zajmie całą szerokość ekranu.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Kod CSS kolumny

Jak wspomniano wcześniej, zmieniamy samą kolumnę w mechanizm siatki przesuwania/przewijania. Aby to zrobić, potrzebujemy trzech linii niestandardowego kodu CSS, który znajdziesz poniżej. Śmiało i dodaj je do głównego elementu kolumny w zaawansowanej zakładce wiersza.

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 70%);

Pierwsza linia kodu CSS umożliwia przewijanie/przesuwanie. Druga linia zamienia kolumnę w poziomą siatkę. A trzecia linia kodu CSS definiuje siatkę. Zasadniczo mówimy, że chcemy 6 kolumn, z których każda będzie miała szerokość 70%. W zależności od liczby kart przesuwanych, które chcesz wyświetlić w mechanizmie przesuwania/przewijania, będziesz musiał zmodyfikować wartości. Załóżmy na przykład, że chcesz, aby 10 różnych kart przesuwania było częścią mechanizmu i chcesz zwiększyć szerokość każdej kolumny do 90%, zamiast tego musisz użyć następującego wiersza kodu CSS:

grid-template-columns: repeat(10, 90%);

Dodaj moduł CTA do kolumny 1

Dodaj zawartość

Gdy skończysz modyfikować ustawienia wierszy, dodaj do kolumny moduł CTA. Dodaj wybrane przez siebie treści.

Połączyć

Musisz również dodać adres URL linku przycisku, aby przycisk był wyświetlany w module.

Tło gradientowe

Kontynuuj, dodając tło gradientowe.

• Kolor 1: #802bff
• Kolor 2: #001519

Zdjęcie w tle

W części poświęconej podejściu tego posta wspomnieliśmy, że użyjemy płynnych obrazów tła, które można pobrać bezpłatnie, przechodząc do tego postu. Po pobraniu płynnych obrazów tła wyszukaj plik obrazu „ płyn-style-2.png ” i prześlij go na kartę obrazu tła. Zmodyfikuj odpowiednio ustawienia obrazu tła:

• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: nakładka

Ustawienia tekstu

Przejdź do karty projektu i upewnij się, że obowiązują następujące ustawienia tekstu:

• Orientacja tekstu: Środek
• Kolor tekstu: jasny

Ustawienia tekstu tytułu

Następnie zmodyfikuj ustawienia tekstu tytułu.

• Czcionka tytułu: Didact Gothic
• Grubość czcionki tytułu: pogrubiona
• Rozmiar tekstu tytułu: 1vw (komputer), 2,5vw (tablet), 4vw (telefon)
• Wysokość wiersza tytułu: 1,9 em

Ustawienia tekstu podstawowego

Wraz z ustawieniami tekstu podstawowego.

• Czcionka ciała: Otwórz Sans
• Rozmiar tekstu ciała: 0,6vw (komputer), 1,3vw (tablet), 2,5vw (telefon)
• Wysokość linii ciała: 2,6 em (komputer stacjonarny i tablet), 2,1 em (telefon)

Ustawienia przycisków

Zmieniamy również wygląd przycisku w tym module.

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

Rozmiary

Ważne jest również, aby nieznacznie zmniejszyć szerokość modułu CTA w ustawieniach rozmiaru. Zapewni to, że zawsze będzie luka między tym modułem a kolejnym modułem w mechanizmie przesuwania/przewijania.

• Szerokość: 95%
• Wyrównanie modułu: Środek

Rozstaw

Oczywiście chcemy, aby wszystko wyglądało świetnie na wszystkich ekranach o różnych rozmiarach. Dlatego dodamy różne niestandardowe wartości dopełnienia w ustawieniach odstępów.

• Górny margines: 50px
• Margines dolny: 50px
• Górna wyściółka: 12vw (komputer stacjonarny), 5vw (tablet), 14vw (telefon)
• Dolna wyściółka: 12vw (komputer stacjonarny), 5vw (tablet), 14vw (telefon)
• Lewa wyściółka: 20vw (komputer), 3vw (tablet), 8vw (telefon)
• Prawa wyściółka: 20vw (komputer), 3vw (tablet), 8vw (telefon)

Granica

Na koniec dodajemy również „20px” do każdego z rogów modułu.

Klonuj moduł CTA tyle razy, ile chcesz

Po zakończeniu dostosowywania modułu CTA możesz śmiało sklonować moduł tyle razy, ile chcesz.

Zmień tło gradientu i obraz tła duplikatu 1

Zmień tło gradientowe pierwszego duplikatu.

• Kolor 1: #7a010d
• Kolor 2: #001519

Zamiast tego użyj obrazu tła „ fluid-style-9.png ”.

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: nakładka

Zmień tło gradientu i obraz tła duplikatu 2

Następnie zmień gradientowe tło drugiego duplikatu.

• Kolor 1: #26ccff
• Kolor 2: #001519

Prześlij plik obrazu „fluid-style-10a.png” jako obraz tła.

• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: górny lewy
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: nakładka

Zmień tło gradientu i obraz tła duplikatu 3

Zmień tło gradientowe trzeciego duplikatu.

• Kolor 1: #ff21b8
• Kolor 2: #001519

Prześlij obraz tła „ fluid-style-6.png ”.

• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: nakładka

Zmień tło gradientowe i obraz tła duplikatu 4

Zmień tło gradientowe czwartego duplikatu.

• Kolor 1: #4400aa
• Kolor 2: #001519

Jako obrazu tła użyj pliku „ fluid-style-4.png ”.

• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: środek
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: nakładka

Zmień tło gradientu i obraz tła duplikatu 5

Zmień tło gradientowe ostatniego duplikatu.

• Kolor 1: #ff2626
• Kolor 2: #001519

Użyj pliku „ fluid-style-7.png ” jako obrazu tła.

• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: u góry po prawej
• Powtarzanie obrazu tła: bez powtórzeń
• Mieszanie obrazu tła: nakładka

Dostosuj CSS kolumny do liczby modułów

Wspomnieliśmy o tym wcześniej, ale ponownie upewnij się, że kod CSS odpowiada liczbie modułów w Twojej kolumnie.

Stylizacja paska przewijania

Dodaj klasę CSS do kolumny

Możesz także stylizować pasek przewijania, który jest dostarczany z tym mechanizmem siatki przesuwania / przewijania. Dodaj następującą klasę CSS do swojej kolumny:

• Klasa CSS kolumny: swipe-scrollbar

Dodaj niestandardowy CSS do ustawień strony

Następnie otwórz ustawienia strony, przejdź do zakładki zaawansowane i dodaj następujący niestandardowy kod CSS:

.swipe-scrollbar::-webkit-scrollbar {
width: 10px;
}
.swipe-scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.swipe-scrollbar::-webkit-scrollbar-thumb {
background: #333;
border-radius: 50px;
}

Odtwórz przykład nr 2

Klonuj poprzednią sekcję

Przejdźmy do następnego przykładu! Sklonuj sekcję, którą utworzyłeś w poprzedniej części tego posta.

Zmień ustawienia odstępów CTA

Następnie zmień ustawienia odstępów pierwszego modułu CTA.

• Górny margines: 50px
• Margines dolny: 50px
• Górna wyściółka: 5vw (komputer stacjonarny i tablet), 14vw (telefon)
• Dolna wyściółka: 5vw (komputer stacjonarny i tablet), 14vw (telefon)
• Lewa wyściółka: 4vw (komputer), 3vw (tablet), 8vw (telefon)
• Prawa wyściółka: 4vw (komputer), 3vw (tablet), 8vw (telefon)

Rozszerz ustawienia odstępów na wszystkie moduły w kolumnie

Rozszerz te nowe ustawienia odstępów, klikając prawym przyciskiem myszy i klikając opcję „Rozszerz style odstępów”.

• Do: Wszystkie wezwanie do działania
• Przez: ta kolumna

Zmień strukturę kolumn

Kontynuuj, zmieniając strukturę kolumn wiersza.

Przenieś moduły do ​​drugiej kolumny

I umieść każdy z modułów w drugiej kolumnie.

Przenieś CSS do drugiej kolumny i zmień wartości

Ponieważ przenieśliśmy moduły z jednej kolumny do drugiej, musimy zrobić to samo z kodem CSS. Zamiast tego dodaj klasę CSS do kolumny 2.

• Kolumna 2 Klasa CSS: swipe-scrollbar

Umieść wiersze kodu CSS w kolumnie 2 Main Element. Zmieniamy również szerokość każdej kolumny na „80%”.

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 80%);

Dodaj moduł tekstu tytułu do kolumny 1

Dodaj zawartość

Kontynuuj, dodając nowy moduł tekstowy do pierwszej kolumny. Dodaj wybrane przez siebie treści H2.

Ustawienia tekstu nagłówka

Przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu H2.

• Czcionka nagłówka 2: Dydaktyka gotycka
• Grubość czcionki nagłówka 2: pogrubiona
• Nagłówek 2 Wyrównanie tekstu: do środka
• Rozmiar tekstu nagłówka 2: 2.5vw (komputer), 5vw (tablet), 6vw (telefon)

Rozstaw

Dodaj również niestandardowy górny margines.

• Górny margines: 100px

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Następnym modułem, którego potrzebujemy w kolumnie 1, jest moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Kolor

Następnie zmień kolor separatora.

• Kolor: #333333

Rozmiary

Wraz z ustawieniami rozmiaru.

• Waga dzielnika: 7px
• Wysokość: 0px
• Szerokość: 10%
• Wyrównanie modułu: Środek

Rozstaw

Uzupełnij moduł dzielnika, dodając niestandardowy górny margines na różnych rozmiarach ekranu.

• Górny margines: 1.8vw (komputer stacjonarny), 2.5vw (tablet), 4vw (telefon)

Dodaj moduł tekstu podstawowego do kolumny 1

Dodaj zawartość

Następnym i ostatnim modułem, który potrzebujemy w pierwszej kolumnie, jest opis Moduł tekstowy. Dodaj wybrane treści.

Ustawienia tekstu

Kontynuuj, zmieniając ustawienia tekstu na karcie projektu.

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 0,7vw (komputer), 1,6vw (tablet), 2,3vw (telefon)

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Szerokość: 43% (komputer stacjonarny), 68% (tablet), 70% (telefon)
• Wyrównanie modułu: Środek

Rozstaw

I dodaj niestandardowy górny i dolny margines.

• Górny margines: 50px
• Margines dolny: 50px

Przełącz na widok szkieletowy

Gdy skończysz modyfikować wszystkie moduły w kolumnie 1, przejdź dalej i przełącz się na widok szkieletowy.

Dodaj moduł tekstowy na górę kolumny 2

Tutaj dodamy moduł tekstowy na górze drugiej kolumny. Dodany przez nas kod CSS pomógł nam stworzyć 6 różnych kolumn. Oznacza to, że jeśli chcesz, aby w każdej z tych 6 kolumn pojawiły się dwa różne moduły, musisz mieć łącznie 12 modułów. Umieszczenie modułów odbywa się poziomo, więc pierwsze 5 modułów, które masz w kolumnie 2, pojawi się obok siebie. Następnie mechanizm przełączy się na inny rząd i doda pozostałe 6 modułów.

Dodaj zawartość

Otwórz nowy moduł tekstowy, który dodałeś na górze drugiej kolumny i dodaj wybraną treść.

Ustawienia tekstu

Następnie przejdź do zakładki projekt i zmodyfikuj ustawienia tekstu.

• Czcionka tekstu: Didact Gothic
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #000000
• Rozmiar tekstu: 1.1vw (komputer), 3vw (tablet), 3.5vw (telefon)

Klonuj moduł tekstowy 5x

Śmiało i sklonuj ten moduł tekstowy 5 razy. Teraz będziesz mieć 6 różnych modułów tekstowych, co odpowiada liczbie modułów CTA, które również posiadamy. Więc jeśli zamiast tego używasz 10 modułów CTA, musisz dodać 10 modułów tekstowych (lub dowolnych innych modułów), aby zrównoważyć strukturę kolumn.

Zmień zawartość duplikatów

Zmień zawartość każdego z duplikatów, aby pasowała do modułu CTA, który pojawi się pod nim, i gotowe!

Zapowiedź

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

Przykład 1: wiersz jednokolumnowy

Pulpit

mobilny

Przykład 1: Wiersz dwukolumnowy + wiele modułów w „kolumnie przesuwania”

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak tworzyć niekończące się poziome karty do przesuwania za pomocą Divi. Tworzenie tych kart przesuwanych nie tylko pomoże Ci dodać dodatkowy wymiar do Twojej witryny, ale także pomoże odwiedzającym płynnie poruszać się po całej zawartości Twojej witryny. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!