Jak tworzyć mobilne solucje za pomocą modułu suwaka Divi (bezpłatne pobieranie!)

Slidery zawsze były bardzo popularne w projektowaniu stron internetowych. Jedną z ich największych zalet jest to, że odwiedzający mogą przeglądać je na urządzeniach mobilnych. W dzisiejszych czasach przesuwanie to nowe kliknięcie, więc oczywiste jest, że włączenie suwaków może pomóc poprawić wrażenia użytkowników mobilnych w Twojej witrynie. Tworząc witrynę internetową za pomocą Divi, możesz łatwo dodać moduł suwaka do dowolnego wiersza lub sekcji, nad którą pracujesz. A przy odrobinie kreatywności i eksperymentowania możesz osiągnąć oszałamiające projekty stron internetowych.

Jedną z rzeczy, które możesz zrobić, jest stworzenie mobilnej solucji za pomocą modułu Slider. Możesz dodać dowolną liczbę slajdów, a przewodnik będzie wyglądał równie dobrze na komputerze stacjonarnym i tablecie, chociaż początkowo został zaprojektowany z myślą o urządzeniach mobilnych. W tym poście odtworzymy oszałamiający przykład od podstaw i zaoferujemy sekcję do pobrania na jej końcu.

Weźmy się za to!

Zapowiedź

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

Statyczny

GIF

Zacznijmy odtwarzać!

Jak tworzyć mobilne przewodniki za pomocą modułu suwaka Divi

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Rozstaw

Zacznijmy tworzyć! Dodaj nową stronę lub otwórz istniejącą i dodaj do niej nową zwykłą sekcję. Otwórz ustawienia sekcji i dodaj kilka niestandardowych wartości dopełnienia, które pasują do różnych rozmiarów ekranu.

• Górna wyściółka: 4vw (komputer stacjonarny), 5vw (tablet), 3vw (telefon)
• Dolna wyściółka: 4vw (komputer stacjonarny), 5vw (tablet), 3vw (telefon)
• Lewa wyściółka: 30vw (komputer), 18vw (tablet), 3vw (telefon)
• Prawa wyściółka: 30vw (komputer), 18vw (tablet), 3vw (telefon)

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Tło gradientowe

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dodaj radialne tło gradientowe.

• Kolor 1: #f9f9f9
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: góra
• Pozycja startowa: 40%
• Pozycja końcowa: 40%

Rozmiary

Kontynuuj, przechodząc do ustawień rozmiaru wiersza i usuwając całą przestrzeń między kolumnami.

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

Rozstaw

Dodajemy także dolną wyściółkę do rzędu.

• Dolna wyściółka: 30px

Granica

Następnie dodaj „20px” do każdego z rogów w ustawieniach obramowania.

Cień Pudełka

Na koniec dodaj subtelny cień do wiersza, aby nadać stronie nieco głębi.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba (0,0,0,0,07)

Dodaj moduł suwaka

Zmień kolor tła

Po zakończeniu modyfikowania ustawień wiersza możesz dodać moduł suwaka. Otwórz ustawienia modułu i zmień kolor tła. Wszystkie zmiany wprowadzone na karcie projektu zostaną automatycznie zastosowane do wszystkich dodanych później slajdów.

• Kolor tła: rgba (255,255,255,0)

Ustawienia tekstu

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

• Orientacja tekstu: Środek
• Kolor cienia: rgba(0,0,0,0)

Ustawienia tekstu podstawowego

Następnie zmodyfikuj ustawienia tekstu podstawowego.

• Czcionka treści: domyślna (Open Sans)
• Rozmiar tekstu ciała: 0,6vw (komputer), 1,5vw (tablet), 2,4vw (telefon)
• Wysokość linii ciała: 2,2 em (komputer stacjonarny), 2,3 em (tablet), 2,4 em (telefon)

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 2vw
• Dolna wyściółka: 2vw

Niestandardowy kod CSS przycisku

Będziemy również musieli dodać niestandardowe wartości dopełnienia i marginesów, w szczególności do przycisku modułu suwaka. Ponieważ ten element jest połączony z różnymi elementami na każdym slajdzie, musisz ręcznie dodać dopełnienie i margines, używając kodu CSS na karcie Zaawansowane.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

Usuń aktywne suwaki

Po zakończeniu modyfikowania wszystkich ogólnych ustawień slajdów możesz kontynuować i usunąć aktywne slajdy, które już tam są. Zamiast ich używać, stworzymy je od podstaw w dalszej części posta. Pomoże nam to szybciej modyfikować i dostosowywać wszystko.

Dostosuj pierwszy slajd

Dostosuj zawartość w polu zawartości

Dodaj nowy slajd do modułu Slider i zacznij dostosowywać zawartość w polu zawartości. Na poniższych zrzutach ekranu zauważysz, że dodajemy obraz do pola zawartości, a nie do ustawień obrazu. Umożliwi nam to umieszczenie obrazu nad treścią pisemną. Ilustracje, których użyliśmy, można znaleźć, przechodząc do postu Pakiet układu graficznego programu Illustrator i pobierając obrazy na jego końcu. Dodajemy również i stylizujemy tytuł H3 w polu treści zamiast w polu tytułu, aby wyświetlał się dokładnie tam, gdzie chcemy.

Link do przycisku

Kontynuuj, przechodząc do ustawień linku i dodaj link do przycisku, który przekieruje odwiedzających do bardziej szczegółowej strony dotyczącej danego slajdu.

Tło gradientowe

Następnie dodaj tło gradientowe, korzystając z następujących ustawień:

• Kolor 1: #aaacff
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: góra
• Pozycja startowa: 30%
• Pozycja końcowa: 30%

Nawigacja

Następnie zmodyfikuj ustawienia tekstu.

• Niestandardowy kolor strzałek: #f4f4f4
• Kolor niestandardowy Dot Nav: #000000

Ustawienia tekstu

I zmień kolor tekstu w ustawieniach tekstu slajdu.

• Kolor tekstu: ciemny

Przycisk

Na koniec zmodyfikuj przycisk, aby wyglądał dokładnie tak, jak chcesz.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,8vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #aaacff
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 10px

Klonuj slajd tyle razy, ile potrzeba

Po zakończeniu tworzenia i dostosowywania pierwszego slajdu możesz sklonować go tyle razy, ile chcesz. Będziesz musiał wprowadzić kilka ręcznych modyfikacji do każdego z duplikatów.

Zmień zawartość w polu zawartości

Pierwszą rzeczą, którą musisz zmienić, jest zawartość pola treści. Obejmuje to używany obraz/ilustrację. Obie ilustracje, które zostały użyte w tym samouczku, można znaleźć, przechodząc do postu Pakiet układu graficznego programu Illustrator i pobierając obrazy na jego końcu.

Zmień łącze

Zmień również link do przycisku.

Modyfikuj tło gradientowe

Możesz także dostosować paletę kolorów każdego zduplikowanego slajdu, zmieniając pierwszy kolor gradientu.

• Kolor 1: #ffccaa

Zmień kolor tła przycisku

Użyj tego samego koloru, aby zmienić kolor tła przycisku. Powtórz te kroki dla każdego utworzonego duplikatu i gotowe!

• Kolor tła przycisku: #ffccaa

Pobierz sekcję mobilną instruktażową ZA DARMO

Aby położyć ręce na bezpłatnej sekcji instrukcji mobilnej, najpierw musisz ją pobrać 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!

Zapowiedź

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

Statyczny

GIF

Końcowe przemyślenia

W tym poście pokazaliśmy, jak korzystać z modułu suwaka Divi, aby stworzyć wspaniały mobilny przewodnik. Chociaż początkowo został zaprojektowany z myślą o rozmiarach ekranów mobilnych, wygląda równie dobrze na tablecie i komputerze stacjonarnym. Możesz użyć tego podejścia do tworzenia wszelkiego rodzaju sekcji slajdów w swojej witrynie i bezproblemowej interakcji z odwiedzającymi. Mamy nadzieję, że ten samouczek zainspiruje Cię do kreatywności z modułem suwaka Divi. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!