Jak korzystać z opcji Własny CSS w edytorze wiadomości?
Opcja Własny CSS w kreatorze e-maili GetResponse umożliwia dodanie własnego kodu CSS w celu personalizacji wyglądu i działania wiadomości poza standardowymi narzędziami projektowymi. Daje większą elastyczność w dostosowywaniu stylów, odstępów oraz efektów wizualnych zgodnych z identyfikacją wizualną marki.
Opcja Własny CSS jest dostępna w planach Marketer, Creator oraz MAX (Enterprise). Jeśli nie widzisz tej opcji na swoim koncie, rozważ zmianę planu na wyższy, aby uzyskać dostęp do zaawansowanych funkcji personalizacji.
Czym jest niestandardowy CSS i jak działa
Własny CSS pozwala definiować własne reguły stylów, które mają zastosowanie do całej wiadomości lub do wybranych jej elementów. Dodany kod jest ładowany po domyślnych stylach edytora, co oznacza, że ma nad nimi priorytet.
Możesz go używać do:
- Dostosowywania kolorów, czcionek i marginesów.
- Nadpisywania domyślnych stylów bloków lub przycisków.
- Dodawania prostych efektów wizualnych, np. efektów hover dla linków lub zaokrąglonych rogów obrazów.
Klienci poczty e-mail (tacy jak Gmail, Outlook czy Apple Mail) interpretują CSS w różny sposób. Niektóre właściwości CSS mogą nie być wyświetlane zgodnie z oczekiwaniami.
Style wygenerowane za pomocą niestandardowego CSS nie są widoczne w podglądzie wiadomości.
Jak dodać własny CSS do całej wiadomości
Aby dodać własny CSS do całej wiadomości:
- Otwórz wiadomość e-mail w edytorze.
- Kliknij Styl wiadomości w panelu po prawej stronie.
- Rozwiń sekcję Własny CSS.
- Wklej lub wpisz kod CSS w oknie edytora.
- Kliknij ikonę oka, aby wyświetlić podgląd stylów.
Jak dodać własny CSS do elementów wiadomości
Możesz zaznaczyć dowolny element w edytorze wiadomości (np. sekcję, przycisk, blok tekstu lub obraz) i dodać własny CSS tylko do tego elementu.
- Otwórz wiadomość e-mail w edytorze.
- Kliknij wybrany element.
- Użyj suwaka Dodaj własny CSS w panelu po prawej stronie.
- Wklej lub wpisz kod CSS.
- Kliknij ikonę oka, aby zobaczyć podgląd.
Po kliknięciu w edytorze i wpisaniu kropki (.) zobaczysz unikalny identyfikator elementu, np.: .elem-image-abcdef1234 { }.
Możesz użyć tego ID do zastosowania własnych stylów.
Pamiętaj, że różne elementy mogą wymagać różnych selektorów. Na przykład, jeśli stylizujesz przycisk i chcesz zmienić tekst wewnątrz niego, najlepiej wskazać tekst bezpośrednio:
.elem-text-216196qwerty span { }
Wskazówki
- Używaj właściwości bezpiecznych dla inline (np. kolory, obramowania, padding), aby zapewnić lepszą kompatybilność.
- Nie dodawaj JavaScriptu ani plików zewnętrznych — nie są one obsługiwane w wiadomościach e-mail.
Wsparcie i ograniczenia
Opcja Własny CSS jest przeznaczona dla użytkowników znających HTML i CSS. Zespół Customer Success nie oferuje wsparcia w zakresie pisania ani debugowania niestandardowego kodu.
Zalecamy testowanie wiadomości na różnych urządzeniach i w różnych klientach poczty e-mail, aby upewnić się, że style są poprawnie wyświetlane.
Czym różni się własny CSS od bloku kodu HTML
| Funkcja | Własny CSS | Kod HTML |
|---|---|---|
| Cel | Dodaje style CSS do całej wiadomości lub wybranych elementów | Wstawia niestandardowy HTML bezpośrednio do układu wiadomości |
| Zakres | Dotyczy całej wiadomości lub wybranych elementów | Dotyczy tylko wybranego bloku |
| Dozwolona zawartość | Tylko CSS | HTML i CSS inline |
| Zastosowanie | Dostosowanie stylów i wyglądu | Osadzanie elementów niestandardowych (np. liczniki czasu, piksele śledzące) |
