Как использовать опцию пользовательского CSS в редакторе писем?
Опция Пользовательский CSS в редакторе писем GetResponse позволяет добавлять собственный CSS-код для персонализации внешнего вида и стиля сообщений сверх стандартных инструментов дизайна. Она дает больше гибкости для тонкой настройки стилей, отступов и визуальных эффектов, отражающих идентичность вашего бренда.
Опция Пользовательский CSS доступна в планах Marketer, Creator и MAX (Enterprise). Если вы не видите эту опцию в своем аккаунте, рекомендуется выполнить обновление тарифа, чтобы получить доступ к расширенным возможностям настройки.
Что такое пользовательский CSS и как он работает
Пользовательский CSS позволяет задавать собственные правила стилей, которые применяются ко всему сообщению или к отдельным его элементам. Когда вы добавляете код в элемент пользовательского CSS, эти стили загружаются после стандартных стилей редактора (то есть имеют приоритет над ними).
Вы можете использовать его, чтобы:
- Настраивать цвета, шрифты и отступы.
- Переопределять стандартные стили блоков или кнопок.
- Добавлять простые визуальные эффекты, например эффекты наведения для ссылок или скругленные углы у изображений.
Почтовые клиенты (например, Gmail, Outlook или Apple Mail) по-разному интерпретируют CSS. Некоторые свойства CSS могут отображаться не так, как ожидается.
Стили, созданные с помощью пользовательского CSS, не отображаются в предварительном просмотре сообщения.
Как добавить пользовательский CSS ко всему сообщению
Чтобы добавить пользовательский CSS ко всему сообщению:
- Откройте письмо в редакторе сообщений.
- Нажмите Стиль сообщения в панели справа.
- Разверните раздел Пользовательский CSS.
- В появившемся окне редактора вставьте или введите свой CSS-код.
- Нажмите на значок глаза рядом с кодом, чтобы просмотреть стили пользовательского CSS.
Как добавить пользовательский CSS к элементам сообщения
Вы можете выбрать любой элемент в редакторе сообщений — например, секцию, кнопку, текстовый блок или изображение — и добавить пользовательский CSS только к этому элементу. Для этого:
- Откройте письмо в редакторе сообщений.
- Нажмите на нужный элемент в сообщении.
- Включите переключатель Добавить пользовательский CSS в панели справа.
- В появившемся окне редактора вставьте или введите свой CSS-код.
- Нажмите на значок глаза рядом с кодом, чтобы просмотреть стили пользовательского CSS.
Когда вы кликаете внутри редактора и вводите точку (.), вы увидите уникальный ID элемента, например: .elem-image-abcdef1234 { }.
Вы можете использовать этот ID для применения собственных стилей.
Помните, что разные элементы могут требовать разных селекторов. Например, если вы стилизуете кнопку и хотите изменить текст внутри нее, лучше нацелиться непосредственно на текст, например так:
.elem-text-216196qwerty span { }
Советы
- Используйте inline-безопасные свойства (например, цвета, рамки и отступы) для лучшей совместимости.
- Не используйте JavaScript или внешние файлы — они не поддерживаются в электронных письмах.
Поддержка и ограничения
Опция Пользовательский CSS предназначена для пользователей, знакомых с HTML и CSS. Обратите внимание, что команда Customer Success GetResponse не оказывает помощь в написании или отладке пользовательского кода.
Рекомендуем протестировать сообщение на нескольких устройствах и в разных почтовых клиентах, чтобы убедиться, что стили отображаются корректно.
Чем пользовательский CSS отличается от блока пользовательского кода
| Функция | Пользовательский CSS | Блок пользовательского кода |
|---|---|---|
| Назначение | Добавляет CSS-стили ко всему сообщению или его элементам | Вставляет пользовательский HTML напрямую в макет сообщения |
| Область применения | Влияет на все сообщение или выбранные элементы | Влияет только на выбранный блок |
| Допустимый контент | Только CSS | HTML и inline-CSS |
| Сценарий использования | Настройки стилей и дизайна | Встраивание пользовательских элементов (например, таймеров обратного отсчёта, пикселей отслеживания) |
