8 opóźnionych animacji przycisków dla niestandardowego CTA nagłówka Divi

Dodanie opóźnionych animacji przycisków do dowolnego CTA może być skutecznym sposobem na zwrócenie uwagi odwiedzających, a tym samym zwiększyć prawdopodobieństwo kliknięcia. W tym samouczku pokażemy, jak używać Divi do tworzenia animacji 8 opóźnionych przycisków dla niestandardowego nagłówka CTA. Aby to zrobić, połączymy ustawienia animacji w sposób, którego być może nigdy nie brałeś pod uwagę. Dodatkowo te animacje można zastosować do prawie każdego przycisku CTA w witrynie.

Zacznijmy.

zapowiedź

Oto rzut oka na 8 opóźnionych animacji przycisków, które dodamy do niestandardowego nagłówka CTA w Divi:

Pobierz układ animacji 8 opóźnionych przycisków nagłówka ZA DARMO

Aby położyć swoje ręce na 8 opóźnionych animacjach przycisków z tego samouczka, musisz najpierw pobrać je 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!

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?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz zainstalować i aktywować motyw Divi. Upewnij się, że masz najnowszą wersję Divi.

Będziesz musiał pobrać pakiet Second Theme Builder Pack, ponieważ będziemy używać niestandardowego nagłówka w szablonie strony 404 z tego pakietu w tym samouczku.

Po tym jesteś gotowy do pracy.

Importowanie szablonu z drugiego pakietu Theme Builder Pack

Z pulpitu WordPress przejdź do Divi> Theme Builder. W kreatorze motywów wybierz ikonę przenoszenia w prawym górnym rogu strony. W wyskakującym okienku przenośności wybierz zakładkę importu, wybierz plik theme-builder-pack-2-404-page-template.json i kliknij przycisk importu. (Ten plik importu będzie znajdował się w folderze Second Theme Builder Pack)

Możesz również wybrać opcję importowania globalnego nagłówka i stopki jako układów statycznych.

Po zaimportowaniu szablonu kliknij ikonę, aby edytować niestandardowy obszar nagłówka.

Spowoduje to przejście do edytora układu szablonu treści, w którym dodamy opóźnione animacje do przycisku na gotowym nagłówku.

8 opóźnionych animacji przycisków dla Twojego niestandardowego nagłówka CTA

8 opóźnionych animacji przycisków poniżej zawiera unikalną kombinację wbudowanych opcji animacji Divi i właściwości Perspektywa CSS. Właściwość Perspektywa dodaje efekt 3D, gdy animacja przycisku zawiera efekt odwracania lub składania. W przypadku większości z tych animacji dodamy animację zarówno do przycisku, jak i do jego kolumny nadrzędnej, aby uzyskać bardziej złożony ruch.

Tutaj są…

#1 Rozwijane odbicie

Ustawienia przycisków:

Rozwijana animacja przycisku opóźnionego odbijania jest prosta i skuteczna. Aby go zbudować, otwórz ustawienia modułu przycisków i zaktualizuj następujące elementy:

• Styl animacji: odbicie
• Kierunek animacji: w dół
• Czas trwania animacji: 1100 ms
• Opóźnienie animacji: 1500 ms
• Początkowe krycie animacji: 100%

#2 3D Pionowe Odwracanie

Aby zbudować animację 3D przycisku opóźnionego odwracania w pionie, musisz najpierw dodać właściwość Perspektywa do kolumny nadrzędnej przycisku (kolumna 2).

Ustawienia kolumny

Aby dodać perspektywę do kolumny, otwórz ustawienia wiersza, a następnie kliknij, aby edytować ustawienia kolumny 2. Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do głównego elementu:

perspective: 150px

Ustawienia przycisków:

• Styl animacji: Odwróć
• Kierunek animacji: Centrum
• Czas trwania animacji: 1500 ms
• Opóźnienie animacji: 1000 ms
• Intensywność animacji: 400%
• Początkowe krycie animacji: 100%

#3 Odbicie w poziomie 3D

Animacja przycisku opóźnionego odwracania w poziomie 3D jest podobna do odwracania w pionie. Jedyną prawdziwą różnicą jest kierunek animacji.

Ustawienia kolumny:

Najpierw upewnij się, że dodałeś perspektywę do kolumny 2, dodając następujący niestandardowy kod CSS do głównego elementu:

perspective: 150px

Ustawienia przycisków:

Otwórz ustawienia modułu przycisków i zaktualizuj następujące elementy:

• Wyrównanie przycisków: środek

Daje to pewność, że odwrócenie w poziomie jest wyśrodkowane z właściwością perspektywy macierzystej.

• Styl animacji: składanie
• Kierunek animacji: Centrum
• Czas trwania animacji: 1000 ms
• Opóźnienie animacji: 2000 ms
• Intensywność animacji: 400%
• Początkowe krycie animacji: 100%
• Krzywa prędkości animacji: liniowa

#4 Rozwijane odbicie + 3D pionowe przerzucanie

Ta opóźniona animacja przycisku jest realizowana przez połączenie animacji odbicia (dodana do kolumny) i animacji odwrócenia (dodana do przycisku).

Oto jak to zbudować.

Ustawienia kolumny:

Otwórz ustawienia wiersza i zaktualizuj ustawienia kolumny 2, wpisując:

• Styl animacji: odbicie
• Kierunek animacji: w dół
• Opóźnienie animacji: 2000 ms
• Początkowe krycie animacji: 100%

Następnie dodaj perspektywę css do głównego elementu w następujący sposób:

perspective: 150px;

Ustawienia przycisków:

Po wprowadzeniu ustawień kolumny zaktualizuj ustawienia modułu przycisków w następujący sposób:

• Styl animacji: Odwróć
• Kierunek animacji: Centrum
• Czas trwania animacji: 1500 ms
• Opóźnienie animacji: 1000 ms
• Intensywność animacji: 400%
• Początkowe krycie animacji: 100%

Sztuczka polega na tym, aby opóźnić rozpoczęcie przewracania po zakończeniu animacji kolumny.

#5 Swoop down (przesuń w dół + obróć)

Aby uzyskać animację „swoop down” dla następnej, musimy połączyć animację slajdu (dodana do kolumny) i animację rolki (dodaną do przycisku).

Zróbmy to.

Ustawienia kolumny:

Otwórz ustawienia wiersza i zaktualizuj ustawienia kolumny 2 w następujący sposób:

• Styl animacji: slajd
• Kierunek animacji: w dół
• Opóźnienie animacji: 1000 ms
• Początkowe krycie animacji: 100%

Następnie dodaj następujący niestandardowy css do głównego elementu:

perspective: 150px

Ustawienia przycisków:

Następnie zaktualizuj ustawienia przycisków w następujący sposób:

• Styl animacji: rolka
• Kierunek animacji: w dół
• Czas trwania animacji: 1500 ms
• Opóźnienie animacji: 1000 ms
• Początkowe krycie animacji: 100%

#6 Powiększ (powiększenie + skala transformacji)

Ta opóźniona animacja przycisku jest wyjątkowa, ponieważ polega na skalowaniu przycisku za pomocą skali transformacji. Następnie do przycisku dodajemy animację powiększenia.

Oto jak to zrobić.

Ustawienia przycisków:

Otwórz ustawienia modułu przycisków i zaktualizuj następujące elementy:

• Skala transformacji: 175%
• Styl animacji: Zoom
• Kierunek animacji: Centrum
• Czas trwania animacji: 1500 ms
• Opóźnienie animacji: 1000 ms
• Początkowe krycie animacji: 100%

#7 Puls (przybliżenie + pomniejszenie)

Ta animacja opóźnionego impulsu jest tworzona przez połączenie animacji pomniejszania (dodana do kolumny) i animacji powiększania (dodana do przycisku).

Zróbmy to.

Ustawienia kolumny:

Otwórz ustawienia wiersza i zaktualizuj ustawienia dla kolumny 2 w następujący sposób:

• Styl animacji: Zoom
• Kierunek animacji: Centrum
• Czas trwania animacji: 1000 ms
• Opóźnienie animacji: 2000 ms
• Intensywność animacji: -100%
• Początkowe krycie animacji: 100%

Zauważ, że dodaliśmy ujemną wartość (-100%) dla intensywności animacji. Powoduje to, że kolumna ma odwrotny efekt, który zmniejszy kolumnę/przycisk (lub pomniejszy).

Ustawienia przycisków:

Następnie zaktualizuj ustawienia przycisków w następujący sposób:

• Styl animacji: Zoom
• Kierunek animacji: Centrum
• Czas trwania animacji: 1500 ms
• Opóźnienie animacji: 1000 ms
• Intensywność animacji: 50%
• Początkowe krycie animacji: 100%

Zwróć uwagę, że opóźnienie animacji jest ustawione na 1000 ms przed animacją kolumny, tak aby przycisk powiększał się przed pomniejszeniem.

#8 Spirala (przesuń w lewo + obrót)

Ta ostateczna animacja opóźnionego przycisku łączy animację slajdu (dodana do kolumny) i animację odwracania o 720 stopni (dodaną do przycisku).

Oto jak to zrobić.

Ustawienia kolumny:

Najpierw otwórz ustawienia wiersza i zaktualizuj ustawienia dla kolumny 2 w następujący sposób:

• Styl animacji: slajd
• Kierunek animacji: w lewo
• Czas trwania animacji: 2000 ms
• Opóźnienie animacji: 2000 ms
• Intensywność animacji: 100%
• Początkowe krycie animacji: 100%

Ustawienia przycisków:

Następnie zaktualizuj ustawienia modułu przycisków w następujący sposób:

• Styl animacji: Odwróć
• Kierunek animacji: Centrum
• Czas trwania animacji: 2000 ms
• Opóźnienie animacji: 2000 ms
• Intensywność animacji: 800%
• Początkowe krycie animacji: 100%

Zwróć uwagę, że intensywność animacji jest ustawiona na 800%. Spowoduje to trzykrotne przekręcenie przycisku w celu uzyskania efektu wirowania.

Ostateczne rezultaty

Przyjrzyjmy się jeszcze raz animacjom 8 opóźnionych przycisków.

Końcowe przemyślenia

Mam nadzieję, że te 8 opóźnionych animacji przycisków pomoże zwiększyć konwersje w przypadku wezwania do działania w niestandardowych nagłówkach. Możesz również wykorzystać te przykłady do inspiracji i odkrywać dodatkowe projekty i aplikacje na własną stronę internetową!

Masz ulubionego?

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!