Jak stworzyć przyciągające wzrok CTA w Divi za pomocą kilku prostych efektów najechania?

Subtelne interakcje i efekty najechania mogą być przydatne do tworzenia przyciągającego wzrok CTA (wezwania do działania). Sztuką jest użycie efektów, które sprawiają, że CTA jest bardziej atrakcyjne i intuicyjne, aby użytkownicy byli bardziej skłonni do działania. A ponieważ ostatecznym celem większości CTA jest kliknięcie linku lub przycisku, ważne jest, aby zoptymalizować CTA w taki sposób, aby te elementy, które można kliknąć, znalazły się na pierwszym planie.

W tym samouczku pokażę, jak używać Divi do optymalizacji widoczności CTA przy użyciu wielu efektów najechania. Pokażę ci, jak dodać tła podziału sekcji po najechaniu kursorem, aby ustawić swoje CTA dla lepszego kontrastu i czytelności. Pokażę ci, jak powiększyć i przenieść CTA na środek strony po najechaniu kursorem, aby stało się głównym celem. Te efekty najechania kursorem będą przydatne, aby wyróżnić każde wezwanie do działania i, miejmy nadzieję, poprawić wrażenia użytkownika.

Zacznijmy.

zapowiedź

Oto rzut oka na przyciągające wzrok efekty najechania CTA, które zbudujemy w tym samouczku.

Pobierz przyciągający wzrok układ CTA Hover Effects 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!

Subskrybuj nasz kanał YouTube

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ąć, będziesz potrzebować:

1. Zainstalowany i aktywny motyw Divi
2. Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
3. Obraz tła do użycia w kompilacji projektu. W tym samouczku użyję jednego z Pakietu Układu Weterynarza.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Implementacja przyciągających wzrok efektów CTA Hover w Divi

W tym przykładzie projektu zaczniemy od modułu wezwania do działania, który jest wyrównany do lewej lub do prawej. Następnie przeniesiemy moduł na środek strony i skalujemy (lub powiększamy) go po najechaniu na wiersz. Aby wezwanie do działania wyróżniało się jeszcze bardziej w stanie najechania wiersza, umieścimy je, dodając separatory sekcji, które zamkną się za modułem, aby uzyskać lepszy kontrast.

Oto jak to zrobić.

Tworzenie sekcji i wiersza

Najpierw utwórz zwykłą sekcję z jednokolumnowym rzędem.

Przed dodaniem modułu otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Dodaj obrazek tła z centralnym punktem obrazu po prawej stronie tak, aby był widoczny podczas dodawania naszego modułu po lewej stronie.

• Maksymalna szerokość: 1080px
• Wyrównanie sekcji: środek

To na razie zajmuje się sekcją. Później wrócimy do ustawień sekcji, aby dodać efekty najechania separatorem sekcji.

Następnie otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• szerokość: 100%
• maksymalna szerokość: 100%
• Wypełnienie: 5% góra, 5% dół, 35% prawo

Właściwe wypełnienie jest kluczem do tego projektu, ponieważ przesuwa zawartość w lewo. Wrócimy później, aby dodać nasze opcje najechania, aby później przenieść zawartość wiersza z powrotem do środka.

Dodawanie modułu wezwania do działania

Teraz jesteśmy gotowi do zbudowania modułu Call to Action, który będzie głównym celem naszego przyciągającego wzrok CTA.

Śmiało i dodaj moduł wezwania do działania w jednym wierszu kolumny.

Następnie zaktualizuj ustawienia modułu wezwania do działania w następujący sposób:

Zadowolony

• Tytuł: Zniżka za pierwszą wizytę
• Przycisk: Umów się na wizytę
• URL linku przycisku: #

Projekt

• Kolor tła: #ffffff
• Kolor tekstu: ciemny
• Czcionka tytułu: Nunito
• Grubość czcionki tytułu: pogrubiona
• Rozmiar tekstu tytułu: 36px

• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #154c87
• Szerokość obramowania przycisku: 0px
• Maksymalna szerokość: 500px
• Wyrównanie modułu: środek
• Zaokrąglone rogi: 10px

Kluczową cechą tego projektu jest maksymalna szerokość 500px. Dzięki temu moduł nie zmieni szerokości za każdym razem, gdy dostosujemy odpowiednie wypełnienie wiersza po najechaniu myszą.

• Cień pudełka: patrz zrzut ekranu
• Pozycja pionowa cienia pudełka: 30px
• Siła rozmycia cieni w pudełku: 100px
• Siła rozprzestrzeniania się cieni w pudełku: -30px

Skalowanie i centrowanie wezwania do działania po najechaniu na wiersz

Teraz jesteśmy gotowi, aby rozpocząć dodawanie naszych przyciągających wzrok efektów najechania CTA. W tym momencie chcemy osiągnąć dwie rzeczy, gdy najedziemy kursorem na rząd. Najpierw chcemy przenieść CTA na środek. A potem chcemy zwiększyć skalę modułu (powiększyć), aby był jeszcze bardziej widoczny.

Aby to zrobić, otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Dopełnienie (najechanie): 0% w prawo

Następnie dostosuj wyściółkę do wyświetlacza mobilnego:

• Wypełnienie (tablet): 0% racja
• Wypełnienie (telefon): 5% w lewo, 5% w prawo

Aby powiększyć CTA, dodaj następującą właściwość transformacji do wiersza po najechaniu myszą:

• Skala transformacji (najechanie): 110%

Mimo że właściwość skali transformacji jest stosowana do wiersza, dotyczy to również pośrednio wszystkich elementów podrzędnych w wierszu, w tym modułu. Dlatego moduł przeskaluje się do 110% po najechaniu na wiersz.

Inscenizacja CTA w trybie Hover za pomocą dzielników sekcji

Na koniec jesteśmy gotowi do dodania dzielników sekcji, aby ustawić cta po najechaniu kursorem na sekcję/wiersz. Kluczem jest tutaj upewnienie się, że sekcja i rząd mają tę samą wysokość i szerokość, aby użytkownik jednocześnie najeżdżał na sekcję i rząd bez żadnych przerw. Tak więc musimy usunąć wszelkie dopełnienie sekcji. Następnie musimy utworzyć przegrodę górną i dolną, która zwiększa wysokość po najechaniu na sekcję.

Oto co robić.

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

Padding: 0px na górze, 0px na dole

• Styl Top Divider (desktop): patrz zrzut ekranu
• Styl Top Divider (tablet i telefon): brak
• Kolor górnego dzielnika: rgba (21,76,135,0,61)
• Wysokość górnej przegrody (domyślnie): 0%
• Wysokość górnej przegrody (uniesienie): 120%
• Top Divider Flip: poziomy

• Styl przegrody dolnej (komputer): patrz zrzut ekranu
• Styl przegrody dolnej (tablet i telefon): brak
• Kolor dolnej przegrody: rgba (21,76,135,0,61)
• Wysokość dolnej przegrody (domyślnie): 0%
• Wysokość dolnej przegrody (najechanie): 120%
• Klapka dolnej przegrody: pozioma

Aby upewnić się, że separatory nie są wyświetlane poza sekcją, zaktualizuj opcję przepełnienia pionowego i poziomego na ukryte.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Sprawdźmy teraz efekt końcowy.

Ostateczny wynik

A oto projekt na tablecie i telefonie.

Zmiana pozycji CTA

Jeśli chcesz zmienić początkową pozycję modułu wezwania do działania przed stanem najechania kursorem, możesz łatwo zaktualizować odstępy między wierszami.

Z prawej strony

Załóżmy, że chcesz rozpocząć moduł po prawej stronie przed najechaniem myszą. Po prostu zaktualizuj ustawienia wiersza w następujący sposób:

• Wyściółka: 35% w lewo
• Dopełnienie (najechanie): 0% w lewo

Będziesz chciał zaktualizować obraz, aby miał lewy punkt skupienia. Następnie oto wynik.

Z dołu

Lub, jeśli chcesz, możesz mieć wyskakujące okienko CTA u dołu wiersza. Aby to zrobić, musisz dodać do sekcji stałą wysokość, a następnie obniżyć moduł z górną wyściółką.

Otwórz ustawienia sekcji i nadaj sekcji maksymalną wysokość i ustaw przepełnienie na ukryte.

• Maksymalna wysokość (komputer stacjonarny): 415px
• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Następnie otwórz ustawienia wiersza i zaktualizuj dopełnienie, aby wypchnąć moduł częściowo z widoku poniżej sekcji. Następnie wyjmij górną wyściółkę po najechaniu, aby ją przywrócić.

• Wypełnienie (pulpit): 25% na górze, 5% na dole
• Wypełnienie (uniesienie): 5% góry

Oto wynik…

Końcowe przemyślenia

Divi sprawia, że ​​dodawanie wszelkiego rodzaju efektów najechania do projektów stron internetowych jest zabawne i łatwe. Najlepsze efekty najechania to te, które są celowe i faktycznie poprawiają wrażenia użytkownika. Kilka prostych efektów najechania omówionych w tym poście powinno pomóc w stworzeniu przyciągających wzrok CTA, które świetnie wyglądają, poprawiają wrażenia użytkownika i, miejmy nadzieję, prowadzą do większej liczby konwersji.

Aby uzyskać więcej pomysłów, zapoznaj się z naszym postem na temat 3 sposobów wykorzystania opcji najechania kursorem, aby wyróżnić wezwania do działania w Divi, oraz naszego postu na temat tworzenia wsuwanych wezwania do działania.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!