Jak zmienić zawartość po najechaniu kursorem, aby utworzyć unikalne CTA w Divi (3 sposoby)

Wbudowane opcje najechania Divi ułatwiają zmianę zawartości dowolnego modułu po najechaniu. Po najechaniu myszą możemy zmieniać obrazy tła, kolory, a nawet tekst. To otwiera drzwi do kreatywnych sposobów na przyciągnięcie uwagi użytkowników i zwiększenie tych wezwań do działania w celu uzyskania lepszych konwersji.

Dzisiaj pokażemy Ci, jak zmienić zawartość po najechaniu myszą w Divi, aby uzyskać wyjątkowe wezwania do działania. Pokażemy sprytne sposoby zmiany tekstu przycisku (i ikon) po najechaniu myszą. Pokażemy, jak elegancko zmienić tytuł i tekst przycisku w module wezwania do działania po najechaniu myszą. Dodamy nawet niestandardowe CSS, aby dodać unikalne efekty przejścia (takie jak przełączanie i przerzucanie ikony przycisku).

Sprawdź to!

zapowiedź

Oto krótkie spojrzenie na trzy projekty, które dziś będziemy tworzyć.

#1 Jak zmienić zawartość po najechaniu na przyciski

#2 Jak zmienić tło i treść w modułach tekstowych

#3 Jak zmienić treść po najechaniu na wiele elementów za pomocą modułu wezwania do działania

Pobierz układ 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 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 wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj zainstalowany motyw Divi (lub wtyczkę Divi Builder, jeśli nie używasz motywu Divi).
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Załaduj gotowy układ strony docelowej Cake Maker na stronę. Będziemy używać tego układu do naszych projektów. Możesz załadować układ, wybierając "Wybierz gotowy układ" po wyświetleniu monitu o wdrożeniu Divi Builder. Możesz też wybrać ikonę „Załaduj z biblioteki” plus z menu ustawień w Divi Builder. Aby uzyskać więcej informacji o tym, jak załadować gotowy układ na swoją stronę, obejrzyj nasz film.

Następnie możesz rozpocząć projektowanie w Divi.

#1 Jak zmienić zawartość po najechaniu na przyciski

Po załadowaniu gotowego układu strony docelowej Cake Maker na swoją stronę, znajdź główny przycisk CTA w górnym nagłówku strony i otwórz ustawienia projektu modułu przycisków.

Zmiana tekstu przycisku po najechaniu kursorem

Na karcie treści zaktualizuj tekst przycisku w następujący sposób:

Tekst przycisku: „Kup teraz”

Następnie wdróż opcję najechania na tekst przycisku i wprowadź tekst przycisku zastępowania pod zakładką najechania w następujący sposób:

Tekst przycisku (najechanie): „Chodźmy”

Tekst pod tekstem przycisku najechania zastąpi domyślny tekst przycisku po najechaniu na przycisk.

Szerokość przycisku

Jednak przycisk jest inline-block więc szerokość przycisku/linku będzie się zmieniać w zależności od ilości treści (liter lub spacji), które zawiera przycisk. Nie działa to dobrze w przypadku tego efektu najechania, ponieważ przy mniejszym tekście zastępczym przycisk zmniejszy się i spowoduje podskakiwanie lub zakłócenia po najechaniu na krawędź przycisku. Aby to naprawić, musimy nadać przyciskowi ustaloną szerokość. Jest to łatwe dzięki pojedynczemu fragmentowi kodu CSS. Dodaj następujący kod CSS do głównego elementu modułu przycisku.

width: 200px;

Oto wynik.

Dodatkowe zmiany i efekty najechania kursorem

Oprócz zmiany treści po najechaniu myszą, możemy również urozmaicić nasz przycisk za pomocą różnych kombinacji efektów najechania.

W tej chwili ikona przycisku to strzałka w prawo, która jest wdrażana po najechaniu myszą. Działa to naprawdę dobrze z tekstem przycisku „Let's Go”.

Odwracanie ikony przycisku po najechaniu kursorem

Ale możesz również dodać fajny efekt najechania kursorem na ikonę przycisku. Aby to zrobić, najpierw spraw, aby ikona pojawiała się zawsze (nie tylko po najechaniu kursorem), aktualizując następujące elementy:

Pokaż tylko ikonę po najechaniu na przycisk: NIE

Następnie dodaj klasę CSS do modułu przycisku w następujący sposób:

Klasa CSS: flip-button-ikona

Następnie otwórz ustawienia strony i dodaj następujący niestandardowy kod CSS.

.flip-button-icon:after {
  transition: transform 500ms;
}
.flip-button-icon:hover:after {
  transform: rotateX(360deg);
}

Oto wynik.

Zmiana ikony przycisku po najechaniu kursorem

Możesz także całkowicie zmienić ikonę przycisku po najechaniu myszą. Wszystko, czego naprawdę potrzebujesz, to mały fragment CSS, aby zastąpić zawartość pseudoelementu :after, w którym znajduje się ikona.

Zanim dodamy css, najpierw wybierzmy inną ikonę przycisku do wyświetlenia, następnie możemy zmienić ją na strzałkę w prawo za pomocą CSS.

Zaktualizuj ikonę przycisku ikoną koszyka, ponieważ nasze wezwanie do działania to „Pokaż teraz”.

Następnie przejdź do zakładki Zaawansowane i zaktualizuj bieżącą właściwość przekształcenia CSS o 180 stopni zamiast 360 stopni. I dodaj nowy kod Unicode dla treści, która wyświetla strzałkę w lewo („\23”).

Nowy fragment kodu będzie wyglądał tak:

.flip-button-icon:hover:after {
  transform: rotateY(180deg);
  content: "\23"; 
}

Ponieważ będziemy również obracać ikonę o 180 stopni, po najechaniu na przycisk pojawi się strzałka w prawo, która zastąpi ikonę koszyka.

Ostateczny wynik

To jest efekt końcowy.

#2 Jak zmienić tło i treść w modułach tekstowych

W przypadku tego następnego projektu przejdź w dół układu strony do sekcji „Moje usługi”. Tam otwórz ustawienia wiersza dla górnego wiersza z dwoma modułami tekstowymi.

Aktualizuj ustawienia kolumny

W ustawieniach wiersza otwórz ustawienia dla kolumny 1 i dodaj obraz tła po najechaniu myszą na kolumnę.

Zastąpi to domyślnie białe tło.

Dodaj również gradient nad obrazem tła po najechaniu myszą.

Kolor lewego gradientu tła: rgba (255,255,255,0)
Prawy gradient tła: rgba (46.41.142.0,75)
Pozycja startowa: 30%
Umieść gradient nad obrazem tła: TAK

Zapewni to ładną nakładkę, która sprawi, że tekst zastępujący po najechaniu kursorem będzie bardziej czytelny.

Następnie usuń niestandardowe wypełnienie kolumny, przywracając je do ustawień domyślnych.

Dostosuj moduł tekstowy w kolumnie 1

Po zaktualizowaniu kolumny zapisz ustawienia i otwórz ustawienia modułu tekstowego dla modułu tekstowego w kolumnie 1. Następnie zaktualizuj zawartość treści modułu tekstowego po najechaniu kursorem na następujące:

<h3>Custom Cakes</h3>
<a href="#">Order Now</a>

To dobry sposób na dodanie wezwania do działania z linkiem po najechaniu myszą.

Następnie zaktualizuj tło w następujący sposób:

Kolor tła: #ffffff;
Kolor tła (najechanie): rgba(255,255,255,0);

Dodaje to ładny element przejściowy, aby stopniowo odsłaniać obraz tła w kolumnie.

Następnie zaktualizuj następujące ustawienia projektu:

Wysokość: 260px

Padding: 30px u góry, 30px w lewo, 30px w prawo
Dopełnienie (najechanie): 90px top

Stworzy to ładny efekt przejścia, który stopniowo obniża tekst po najechaniu kursorem na moduł tekstowy.

Następnie zaktualizuj kolory tekstu na biały w następujący sposób:

Kolor tekstu linku: #ffffff
Kolor tekstu nagłówka 3 (najechanie): #ffffff

Aby spowolnić przejście efektów najechania kursorem, zaktualizuj czas trwania przejścia w następujący sposób:

Czas trwania przejścia: 500 ms

Ostateczny wynik

Teraz sprawdź efekt końcowy.

#3 Jak zmienić treść po najechaniu na wiele elementów za pomocą modułu wezwania do działania

W następnym projekcie użyjemy modułu wezwania do działania, który zmienia wiele elementów treści po najechaniu myszą. Aby to zrobić, przejdź na dół strony do sekcji Popularne kolekcje.

Dodaj nowy moduł wezwania do działania

Następnie dodaj nowy moduł wezwania do działania pod przyciskiem „Kup teraz” w górnym wierszu sekcji specjalności.

Zaktualizuj CTA, zmieniając zawartość po najechaniu kursorem

Następnie zaktualizuj treść wezwania do działania w następujący sposób:

Tytuł: „Oferta Specjalna”
Tytuł (najechanie): „10% zniżki”
Tekst przycisku: „Kup teraz”
Tekst przycisku (najechanie kursorem): „Zdobądź ofertę”
Treść: „Niestandardowe babeczki”
URL linku przycisku: #

Zapisz na razie ustawienie.

Kopiuj i wklej style przycisków układu

Zamierzamy zrobić skok w projektowaniu przycisku dla naszego CTA. Aby to zrobić, otwórz ustawienia przycisków dla modułu przycisków nad modułem CTA dostarczonym z gotowym układem. Następnie kliknij ikonę potrójnej kropki w grupie opcji przycisku i wybierz „kopiuj style przycisków”.

Następnie otwórz menu innych opcji w projektowanym przez nas module wezwania do działania i wybierz „Wklej style przycisków”.

Następnie otwórz ustawienia modułu wezwania do działania i zaktualizuj dopełnienie przycisków:

Wypełnienie przycisków: 15px góra, 15px dół, 40px po lewej, 40px po prawej

Aktualizuj style tekstu

Następnie zaktualizuj projekt tekstu tytułu i treści.

Poziom nagłówka tytułu: H4
Czcionka tytułu: Pacifico
Rozmiar tekstu tytułu: 9vw
Wysokość wiersza tytułu: 1,3 em
Czcionka ciała: Open Sans
Waga czcionki ciała: pogrubiona
Rozmiar tekstu ciała: 18px
Odstępy między literami: 1px

Ustawienia końcowe

Następnie zaktualizuj dopełnienie.

Dopełnienie: 0px w lewo, 0px w prawo

Następnie nadaj modułowi niestandardową klasę CSS.

Klasa CSS: fade-cta-title

Ustaw przycisk CTA na pełną szerokość, dodając następujący niestandardowy kod CSS do pola wejściowego CSS przycisku promocyjnego.

I zaktualizuj czas przejścia.

Czas trwania przejścia: 800ms

Na koniec zaktualizuj kolor tła, aby był domyślnie przezroczysty i zmieniał kolor po najechaniu myszą.

Kolor tła: brak (usuń)
Kolor tła (najechanie): rgba (247,78,72,0.86)

Następnie usuń dwa moduły w rzędzie nad naszym modułem Call to Action, aby zastąpił oryginalne cta z układu.

Dotychczasowy wynik

Oto dotychczasowy wynik. Zwróć uwagę, jak tekst tytułu i tekst przycisku zmieniają się po najechaniu kursorem na moduł wezwania do działania.

Łagodzenie zmiany treści za pomocą animacji

Jeśli chcemy złagodzić przejście dużego tytułu w CTA, możemy dodać prostą animację za pomocą CSS. Ponieważ dodaliśmy już klasę CSS do modułu, wszystko, co musimy zrobić, to otworzyć modalne ustawienia strony i dodać następujący niestandardowy CSS:

.fade-cta-title:hover .et_pb_module_header {
  animation-name: fadeinout;
  animation-duration: 800ms;
}

@keyframes fadeinout {
  from {opacity: 0;}
  to {opacity: 1;}
}

Ostateczny wynik

Sprawdźmy teraz efekt końcowy.

I oto jest na telefonie komórkowym.

Końcowe przemyślenia

W tym samouczku pokazaliśmy 3 przykłady, jak skutecznie zmieniać zawartość po najechaniu myszą w Divi. Wbudowane opcje najechania na zawartość naprawdę ułatwiają ten proces. Za pomocą kilku fragmentów kodu CSS możesz dodać unikalne przejścia, aby wyróżnić projekt. Mamy nadzieję, że pozwoli to zwiększyć liczbę wezwań do działania we własnej witrynie, aby uzyskać więcej konwersji i zaangażowania.

Chcieć więcej? Mamy mnóstwo świetnych postów, które pomogą przenieść CTA na wyższy poziom.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!