Jak stylować przyciski (wezwanie do działania)

Przycisk, czyli wezwanie do działania ("CTA - call to action"), jest silnym elementem w e-mailu, dzięki któremu skierujesz czytelnika do działania. Powinien być wyrazisty, zrozumiały i przyciągać uwagę na pierwszy rzut oka.

Edytor w Leadhubu umożliwia dowolne stylowanie — zarówno poprzez zaokrąglenie rogów, jak i ustawienie tła całego przycisku.

Zawsze sprawdź, jak przycisk będzie wyświetlał się na telefonach komórkowych oraz w trybie dark mode. Pamiętaj, że wszystkie elementy muszą być dobrze czytelne również w trybie ciemnym, który staje się coraz popularniejszy.

Jak ostylować przycisk?

Tło

Opcje tła, które można ustawić dla przycisku:

przezroczyste tło
proste kolorowe tło
gradient kolorów
obraz

Klasyka — proste kolorowe tło. Wybierz kolor przycisku i czcionki.

Przycisk, a tym samym ogólne wrażenie z e-maila, możesz jednak bardziej ożywić, stosując gradient kolorów na przycisku lub wstawiając obraz jako jego tło.

W przypadku gradientu kolorów wybierz kolory, z których chcesz go utworzyć.

Następnie ustaw proporcje kolorów, kąt przejścia oraz kolor zastępczy. Zostanie on wyświetlony w przypadku, gdy któryś z klientów pocztowych nie będzie w stanie wyświetlić zdefiniowanego przez Ciebie gradientu kolorów.

Z obrazem w tle możesz poeksperymentować i dostosować jego pozycję oraz powtarzanie tak, aby tekst był czytelny, a jednocześnie przycisk wyglądał interesująco.

Zaokrąglenie rogów

Zaokrągla rogi przycisku dokładnie tak, jak chcesz.

„Efekt hover" na przycisku

Efekt hover to drobny element wizualny, który może zwiększyć współczynnik kliknięć i zaangażowanie czytelników.

Łatwo ustawisz, aby wygląd przycisku po najechaniu kursorem myszy uległ zmianie — na przykład kolor, rozmiar lub styl czcionki.

Jak ustawić efekt hover na przycisku?

Efekt hover można aktywować na dowolnym elemencie „Przycisk".

Po zaznaczeniu checkboxa "Efekt hover" pojawią się opcje, jak ostylować przycisk z tym efektem:

W przycisku możesz łatwo ustawić zmianę rozmiaru, koloru oraz fontu tekstu po najechaniu kursorem myszy. Do wyboru masz proste kolorowe tło, warianty przezroczyste, gradienty kolorów, a nawet własny obraz, który wyświetli się przy efekcie hover. Możesz też edytować obramowanie lub zaokrąglenie rogów.