Jak używać wielu suwaków do prezentowania usług za pomocą automatycznej animacji?
Opublikowany: 2019-07-26Większość firm będzie musiała prezentować usługi na swojej stronie swoim odwiedzającym. Jednym ze sposobów zaprezentowania usług w części strony widocznej na ekranie jest użycie suwaka. Pozwala to wyróżnić każdą usługę po kolei, ale wadą jest to, że użytkownik będzie musiał nawigować tam iz powrotem, aby znaleźć potrzebną usługę. Lepszym doświadczeniem użytkownika może być utrzymywanie tych usług widocznych dla użytkownika przez cały czas.
W tym samouczku pokażę, jak prezentować usługi za pomocą suwaka, jednocześnie utrzymując przez cały czas widoczność każdej usługi dla użytkownika. W tym celu użyjemy wielu suwaków i automatycznej animacji, aby każda usługa była wyróżniana jeden po drugim z określonym projektem slajdu. Zrobimy to za pomocą wbudowanych opcji projektowych Divi.
Zacznijmy.
zapowiedź
Oto krótkie spojrzenie na projekt za pomocą wielu suwaków, aby zaprezentować usługi jeden po drugim.
Pobierz usługi prezentacji z układem wielu suwaków ZA DARMO
Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go 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 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.
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!
Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.
Przejdźmy do samouczka, dobrze?
Subskrybuj nasz kanał YouTube
Czego potrzebujesz, aby zacząć
Aby rozpocząć, będziesz potrzebować:
- Zainstalowany i aktywny motyw Divi
- Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
- Obrazy, które mają być wykorzystane do pozorowanych treści
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Tworzenie usług prezentacji z wieloma projektami suwaków w Divi
Utwórz sekcję i wiersz 1
Aby rozpocząć, utwórz zwykłą sekcję z jednym wierszem kolumny.
Następnie przed dodaniem jakichkolwiek modułów otwórz ustawienia sekcji i dodaj ciemny obraz tła (lub kolor tła).
Następnie otwórz ustawienia wiersza i zaktualizuj następujące elementy:
Maksymalna szerokość: 80%
Dodaj tekst nagłówka za pomocą modułu tekstowego
Aby dodać tekst nagłówka do projektu, użyjmy modułu tekstowego. Śmiało i dodaj moduł tekstowy do wiersza.
Następnie zaktualizuj treść modułu tekstowego za pomocą następującego kodu HTML:
<h1>How can we help?</h1>
Następnie zaktualizuj ustawienia projektu w następujący sposób:
Czcionka nagłówka: Montserrat
Kolor tekstu nagłówka: #ffffff
Rozmiar tekstu nagłówka: 6vw
Wyściółka: 5% góra, 5% dół
Dodaj drugi wiersz
Następnie dodaj kolejny wiersz z układem trzech kolumn.
Następnie zaktualizuj ustawienia wiersza z maksymalną szerokością 80%.
Maksymalna szerokość: 80%
Dodaj suwak do kolumny 1
Teraz jesteśmy gotowi, aby rozpocząć dodawanie naszych suwaków do każdej z naszych kolumn. Zacznij od dodania modułu suwaka do kolumny 1.
Usuń drugi domyślny slajd, aby pozostał tylko jeden slajd.
Następnie zaktualizuj następujące elementy:
Pokaż strzałki: NIE
Pokaż kontrolki: NIE
Kolor tła: rgba(0,0,0,0)
Wyrównanie tekstu: do lewej
Czcionka tytułu: Montserrat
Grubość czcionki tytułu: pół pogrubiona
Kolor tła przycisku: #38b3cb
Szerokość obramowania przycisku: 0px
Następnie ustaw opcje automatycznej animacji w następujący sposób:
Automatyczna animacja: WŁĄCZONA
Automatyczna prędkość animacji: 3000
Kontynuuj Automatyczne przesuwanie po najechaniu: WŁ
Domyślnie Divi doda subtelną animację zanikania między slajdami. Chcemy to wyłączyć, aby nie było zauważalnej zmiany między slajdami. Aby to zrobić, dodaj następujący niestandardowy kod CSS do opisu slajdu:
animation: none !important;
To zajmuje się ustawieniami suwaka. Teraz musimy zaktualizować nasze indywidualne slajdy.
Tworzenie slajdów dla Slidera 1
Będziemy używać trzech suwaków z jednym suwakiem w każdej z trzech kolumn. Aby uzyskać czas wyświetlania slajdów, aby wyróżnić każdą usługę jeden po drugim, musimy mieć trzy slajdy dla każdego suwaka. Następnie możemy wybrać jeden ze slajdów, który będzie przeznaczony do zaprezentowania lub wyróżnienia usługi.
Zacznijmy od stworzenia trzech slajdów dla Slidera 1.
Otwórz ustawienia dla pojedynczego slajdu. Następnie dostosuj treść tekstu podstawowego, aby zawierała tylko krótkie zdanie.
Teraz zapisz poszczególne ustawienia slajdu i zduplikuj slajd 2 razy, aby mieć łącznie trzy slajdy. Pamiętaj, że w przypadku tego projektu musisz mieć taką samą liczbę slajdów, jak suwaki/kolumny.
Kopiowanie i wklejanie suwaka do każdej pozostałej kolumny
Mając nasze trzy slajdy na Slider 1, możemy skopiować moduł slidera i wkleić go do kolumny 2 i kolumny 3.
Teraz powinieneś mieć ten sam suwak w każdej kolumnie. Każdy suwak ma trzy identyczne slajdy, które są ustawione na automatyczne przejście co 3000 ms. A ponieważ wyłączyliśmy animację zanikania, nie widać przejść między slajdami. Jeśli jednak zmienimy projekt jednego ze zjeżdżalni, będziemy mogli zobaczyć różnicę, gdy suwak przesunie się do tego slajdu. Dzięki temu możemy zmienić wygląd jednego slajdu w każdym sliderze w celu zaprezentowania (lub wyróżnienia) usługi za pomocą automatycznej animacji.
Aktualizowanie każdego suwaka za pomocą slajdu prezentacji
W tym celu zmienimy wygląd pierwszego slajdu w suwaku 1, drugiego slajdu w suwaku 2 i trzeciego slajdu w suwaku 3. Spowoduje to automatyczne podświetlenie każdej usługi (co 3000ms) zaczynając od lewej kolumny i kończąc na trzecia kolumna po prawej. Następnie będzie nadal powtarzać tę automatyczną animację.
Zaktualizuj Slider 1 Prezentacja slajdu
Zacznij od otwarcia ustawień dla suwaka 1, a następnie otwórz ustawienia dla pierwszego pojedynczego slajdu.
Aby wyróżnić usługę, zaktualizujemy slajd o kolor tła (pasujący do przycisku) i obraz tła, który zostanie zmieszany z kolorem tła za pomocą trybu wielokrotnego mieszania.
Aby to zrobić dodaj zaktualizuj następujące elementy:
Kolor tła: #00b2ca
Obraz tła: [prześlij wybrany obraz]
Mieszanie obrazu tła: mnożenie
Następnie zaktualizuj styl przycisku dla tego slajdu w następujący sposób:
Kolor tekstu przycisku: #00b2ca
Kolor tła przycisku: #ffffff
Zapisz ustawienia.
Teraz, po dodaniu nowego projektu do pierwszego slajdu, zobaczysz, że pierwszy slajd podświetla usługę, gdy suwak dotrze do pierwszego slajdu.
Zaktualizuj Slider 2 Prezentacja slajdu
W przypadku suwaka 2 chcemy, aby drugi slajd był naszym slajdem prezentacyjnym, aby pojawił się natychmiast po slajdzie prezentacji w suwaku 1.
Otwórz ustawienia modułu suwaka dla suwaka w kolumnie 2 i zmień kolor tła przycisku.
Kolor tła przycisku: #1d4e89
Następnie otwórz indywidualne ustawienia slajdu dla drugiego slajdu i zaktualizuj następujące elementy:
Kolor tła: #1d4e89
Obraz tła: [prześlij wybrany obraz]
Mieszanie obrazu tła: miękkie światło (lub mnożenie, aby uzyskać ciemniejszy efekt)
Następnie zaktualizuj styl przycisku slajdu.
Kolor tekstu przycisku: #1d4e89
Kolor tła przycisku: #ffffff
Zaktualizuj Slider 3 Prezentacja slajdu
W przypadku suwaka 3 (w kolumnie 3) musimy zaktualizować trzeci slajd jako nasz slajd pokazowy, aby pojawił się natychmiast po drugim slajdzie pokazowym.
Najpierw zmień kolor przycisku suwaka 3 w następujący sposób:
Kolor tła przycisku: #ef476f
Następnie otwórz ustawienia trzeciego slajdu i zaktualizuj następujące elementy:
Kolor tła: #ef476f
Obraz tła [wstaw wybrany obraz]
Mieszanie obrazu tła: mnożenie
Następnie zaktualizuj styl przycisku dla slajdu w następujący sposób:
Kolor tekstu przycisku: #ef476f
Kolor tła przycisku: #ffffff
Ostateczny wynik
Sprawdźmy efekt końcowy.
A oto jak projekt układa się na tablecie i telefonie.
Końcowe przemyślenia
Pokazywanie usług za pomocą wielu suwaków z automatyczną animacją wydaje się nieco trudne. Ale w rzeczywistości jest to całkiem proste, gdy zrozumiesz tę koncepcję.
Ponieważ każdy suwak reprezentuje jedną usługę, warto zachować tę samą zawartość i upewnić się, że adres URL przycisku jest taki sam dla każdego slajdu.
Istnieje również wiele innych sposobów korzystania z tej konfiguracji. Na przykład możesz ustawić czas trwania automatycznej animacji na różne prędkości, aby usługi były podświetlane sporadycznie. Możesz nawet dodać różne usługi na każdym slajdzie suwaków, aby wyświetlić więcej usług.
Osobiście podoba mi się obecna konfiguracja, ponieważ pokazuje postęp i może być wykorzystana do pokazania odwiedzającym procesu. Ale chciałbym usłyszeć twoje przemyślenia i pomysły.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!