Jak dostosować suwak Divi, aby zmieniać określone elementy przy każdym slajdzie?

Wszyscy wiemy, że suwaki są wspaniałe, jeśli chodzi o maksymalizację tej głównej części strony po przewinięciu. Oni są świetni! Użytkownicy są mile widziani z wieloma wezwaniami do działania i ważnymi funkcjami, które pojawiają się w widoku bez konieczności przewijania strony. Czasami jednak zbyt duża zmiana w projekcie i treści ze slajdu na slajd może rozpraszać lub przytłaczać odwiedzających. Dlatego w tym samouczku pokażę, jak dostosować suwak Divi, aby zmieniać tylko określone elementy przy każdym przejściu slajdów. Dzięki temu możesz zachować spójność podstawowej zawartości i elementów projektu suwaka, podczas gdy zmieniasz tylko określony element (np. pojedyncze słowo lub przycisk) przy każdym slajdzie. Odwiedzający będą mogli łatwo przetworzyć zmianę i jasno zrozumieć wezwanie do działania.

Zanurzmy się!

Podgląd suwaka Divi

Hear to zapowiedź projektu i funkcjonalności suwaka Divi, który zbudujemy w dzisiejszym samouczku.

Zwróć uwagę, jak zmienia to tylko jedno słowo w tekście głównym na każdym slajdzie.

Zwróć uwagę, że w tym przykładzie zarówno słowo tekstu podstawowego, jak i kolory przycisków i kropki zmieniają się z każdym slajdem.

Wyjaśnienie podstawowej koncepcji

Domyślnie suwak Divi animuje tekst opisu przy każdym przejściu do nowego slajdu, który zanika i nieznacznie przesuwa zawartość w górę na miejsce.

Ale za pomocą jednej prostej linii niestandardowego CSS możemy wyłączyć animację tekstu w górę. A jeśli powielimy slajd, pozbędziemy się tła i zmienimy tylko jeden z elementów (np. jedno słowo w tekście głównym), zobaczysz tylko jedno słowo zmieniające się z każdym slajdem.

Możesz użyć tej koncepcji, aby zmienić tylko określony tekst, przyciski lub kolory, zachowując pozostałe elementy projektu na każdym slajdzie.

Pierwsze kroki

Subskrybuj nasz kanał YouTube

W tym samouczku wszystko, czego potrzebujesz, to zainstalowany i aktywny motyw Divi. Będziemy budować nasz suwak Divi od podstaw za pomocą konstruktora Divi na froncie.

Aby rozpocząć, utwórz nową stronę i nadaj jej tytuł. Następnie kliknij, aby użyć Divi Builder i wybierz opcję „Buduj od podstaw”. Następnie kliknij przycisk „Buduj na interfejsie”.

Teraz jesteś gotowy do rozpoczęcia projektowania.

Konfigurowanie zawartości suwaka Divi

W tym przykładzie użyję modułu suwaka o pełnej szerokości, ale ten samouczek dotyczy również zwykłych modułów suwaka. Zacznijmy od dodania do strony sekcji o pełnej szerokości z modułem suwaka pełnej szerokości.

Abyśmy mogli zobaczyć zmiany zawartości naszego suwaka, tymczasowo dodajmy najpierw ciemny kolor tła do sekcji o pełnej szerokości. Otwórz ustawienia sekcji i nadaj mu czarny kolor tła (#222222).

Nie będziesz mógł tego jeszcze zobaczyć, ponieważ domyślny kolor tła suwaka to zasłania. W dalszej części samouczka wrócimy, aby dokończyć projektowanie tła sekcji.

Przejdźmy teraz do ustawień suwaka pełnej szerokości i usuń jeden z domyślnych slajdów, pozostawiając tylko jeden. Następnie otwórz ustawienia slajdów.

Zaktualizuj ustawienia slajdu w następujący sposób:

Nagłówek: „Witryny, które dają więcej…”
Tekst przycisku: „Rozpocznij”

W sekcji Treść dodaj następujący kod html:

Business<span style="color: #EE164D;">.</span>

(Spowoduje to dodanie niestandardowego koloru do kropki (lub kropki) po słowie).

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

Zapisz ustawienia.

Teraz zduplikuj slajd dwukrotnie, aby mieć łącznie trzy slajdy.

Otwórz ustawienia drugiego slajdu. W sekcji Treść zamień tylko słowo „Biznes” na „Pieniądze”, zachowując pozostałą część kodu HTML, nagłówka i tekstu przycisku. Chcemy zmienić tylko to jedno słowo na każdym slajdzie. Następnie zapisz ustawienia.

Następnie otwórz ustawienia trzeciego slajdu. W sekcji Treść zamień słowo „Biznes” na „Sukces” i zapisz ustawienia.

Wszystko gotowe! To dba o zawartość naszego slidera.

Optymalizacja animacji tekstu opisu

Po umieszczeniu zawartości suwaka musimy wyłączyć animację, aby nasz tekst nie przeskakiwał przy każdym slajdzie. Aby to zrobić, przejdź do ustawień suwaka pełnej szerokości i dodaj następujący niestandardowy kod CSS w obszarze Opis slajdu:

animation-name: none;

W tym przykładzie sensowne jest automatyczne zautomatyzowanie animacji suwaka i zwiększenie szybkości animacji, aby użytkownicy mogli szybciej zobaczyć zmianę słowa na każdym slajdzie. Aby to zrobić, przejdź do zakładki projekt i zaktualizuj następujące elementy:

Automatyczna animacja: WŁĄCZONA
Szybkość automatycznej animacji (w ms): 3000

Teraz sprawdź dotychczasowy wynik. Powinieneś zobaczyć tylko jedno słowo w treści każdej zmiany suwaka bez animacji w górę.

Projektowanie suwaka

Z naszą zawartością i funkcjonalnością możemy rozpocząć stylizację naszego suwaka pięknym, eleganckim designem.

Otwórz ustawienia suwaka pełnej szerokości i zaktualizuj następujące elementy:

Orientacja tekstu: lewa
Czcionka tytułu: Lato
Grubość czcionki tytułu: lekka
Rozmiar tekstu tytułu: 32px
Cień tekstu tytułu: patrz zrzut ekranu
Siła rozmycia cieni w tekście tytułu: 0em (w zasadzie usuwa domyślny cień tekstu)

Czcionka ciała: Lato
Rozmiar tekstu ciała: 5vw (komputer), 50px (tablet), 40px (smartfon)
Wysokość linii ciała: 1,6 em
Cień tekstu podstawowego: zobacz zrzut ekranu
Siła rozmycia cienia tekstu podstawowego: 0em (w zasadzie usuwa domyślny cień tekstu)

Rozmiar tekstu przycisku: 16px
Kolor tła przycisku: #ee164d
Szerokość obramowania przycisku: 8px
Kolor obramowania przycisku: #ee164d
Promień obramowania przycisku: 0px
Odstępy między przyciskami: 1px
Czcionka przycisku: Lato
Wyrównanie przycisków: w prawo

Szerokość: 70% (komputer), 100% (tablet), 100% (smartfon)
Wyrównanie modułu: środek

Niestandardowe wypełnienie (komputer): 19vw góra, 8vw dół
Niestandardowa wyściółka (tablet): góra 19vw, dół 4vw. 0px w lewo, 0px w prawo
Niestandardowe wypełnienie (smartfon): 30vw na górze, 4vw na dole, 0px po lewej, 0px po prawej

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: -190px
Pozycja pionowa cienia pudełka: 60px
Kolor cienia pudełka: rgba (0,16,17,0.7)

I na koniec wyłączmy nasze elementy suwaka, abyśmy nie widzieli strzałek ani kontrolek suwaka.

To dba o nasz projekt suwaka Divi!

Dostosowywanie stylów przekrojów

Reszta projektu zostanie dodana do naszej sekcji, w tym nasz obraz tła, który posłuży jako statyczne tło dla wszystkich naszych slajdów. Dodanie obrazu tła do sekcji jest lepsze w tym przypadku, ponieważ nie zobaczysz żadnych drobnych przejść z jednego obrazu do drugiego, tak jak w przypadku dodania obrazu tła do modułu suwaka.

Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Obraz tła: [wstaw obraz około 1920 na 800 pikseli]
Kolor lewego gradientu tła: rgba (0,16,17,0.45)
Prawy kolor gradientu tła: rgba (0,16,17,0.92)
Pozycja startowa: 34%
Pozycja końcowa: 0%
Umieść gradient nad obrazem tła: TAK

Następnie nadaj swojej sekcji prawą ramkę w następujący sposób:

Szerokość prawej krawędzi: 5vw
Kolor prawego obramowania: #001011

I na koniec, daj przekrój cień, aby pomóc zrównoważyć ramy projektu.

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: -200px
Pozycja pionowa cienia pudełka: -150px
Kolor cienia pudełka: rgba (0,16,17,0.74)

Otóż ​​to!

Ostateczny projekt suwaka Divi

Oto ostateczny projekt niestandardowego suwaka Divi.

A oto funkcjonalność zjeżdżalni. Zwróć uwagę, że z każdym slajdem zmienia się tylko jedno słowo.

Ostateczny projekt na urządzeniu mobilnym

Tablet

Smartfon

Eksperymentuj ze zmianą innych elementów

Możesz eksperymentować ze zmianą innych elementów na każdym slajdzie, aby uzyskać bardziej kreatywne projekty i funkcjonalność. Na przykład możesz nadać każdemu z przycisków slajdów inny kolor na każdym slajdzie, a także dopasować kolor okresu do nowego koloru przycisku na każdym slajdzie.

Oto jak by to wyglądało.

Możesz nawet zbadać zmianę koloru cienia pola slajdu lub innego elementu projektu. Możliwości są niezliczone!

Końcowe przemyślenia

Ta niestandardowa konstrukcja i funkcjonalność suwaka Divi stanowi dobrą alternatywę dla tradycyjnych suwaków. Rdzeń projektu się nie zmienia, co dodatkowo podkreśla ważny aspekt CTA, który zmienia się z każdym slajdem. Wygląda na to, że może to być coś, co możesz przetestować, aby sprawdzić, czy może to zwiększyć konwersje!

Daj mi znać, co myślisz w komentarzach poniżej.

Pozdrawiam!