Стилизация

Настройка внешнего вида элементов email-шаблона

Основы стилизации в email

⚠️ Важно: Ограничения email-клиентов

Email-клиенты имеют ограниченную поддержку CSS. Emailist автоматически генерирует совместимый код, но важно понимать ограничения:

  • Используется только inline CSS (внешние стили не поддерживаются)
  • Многие современные CSS свойства не работают (flexbox, grid, position: fixed и т.д.)
  • Используются таблицы для layout вместо div
  • Некоторые свойства работают по-разному в разных клиентах

Цвета

Выбор цвета

Emailist предоставляет несколько способов выбора цвета:

  • Цветовая палитра — выбор из предустановленных цветов
  • Пипетка — выбор цвета из изображения или экрана
  • HEX код — ввод цвета в формате #RRGGBB
  • RGB/RGBA — ввод в формате rgb() или rgba()

Где применяются цвета

  • Фон документа — цвет фона всего письма
  • Фон полосы — цвет фона отдельной секции
  • Фон контейнера — цвет фона контейнера
  • Фон блока — цвет фона блока контента
  • Цвет текста — цвет текста в блоках
  • Цвет границ — цвет границ элементов
  • Цвет ссылок — цвет текстовых ссылок

Рекомендации по цветам

  • Используйте контрастные цвета для текста и фона (минимум 4.5:1 для обычного текста)
  • Придерживайтесь цветовой схемы вашего бренда
  • Избегайте слишком ярких или неоновых цветов
  • Учитывайте, что некоторые пользователи могут видеть цвета иначе (дальтонизм)

Типографика

Шрифты

Emailist поддерживает использование веб-безопасных шрифтов и веб-шрифтов:

  • Системные шрифты — Arial, Helvetica, Times New Roman, Georgia, Verdana
  • Google Fonts — встроенная поддержка популярных шрифтов
  • Кастомные шрифты — можно указать любой веб-шрифт через @font-face

💡 Совет: Используйте веб-безопасные шрифты как fallback на случай, если кастомный шрифт не загрузится.

Размеры шрифта

Рекомендуемые размеры для email:

  • Заголовки: 24-32px
  • Подзаголовки: 18-24px
  • Основной текст: 14-16px
  • Мелкий текст: 12-14px

Используйте пиксели (px) вместо em или rem для лучшей совместимости.

Межстрочный интервал

Line-height (межстрочный интервал) влияет на читаемость текста:

  • Для основного текста: 1.5-1.6
  • Для заголовков: 1.2-1.3
  • Для мелкого текста: 1.4-1.5

Отступы и интервалы

Padding (Внутренние отступы)

Отступы внутри элемента от его границы до контента. Можно задавать отдельно для каждой стороны:

  • Padding Top — отступ сверху
  • Padding Right — отступ справа
  • Padding Bottom — отступ снизу
  • Padding Left — отступ слева

Margin (Внешние отступы)

Отступы между элементами. Позволяют контролировать расстояние между блоками, контейнерами и полосами.

⚠️ Ограничение: В email margin работает не всегда стабильно. Рекомендуется использовать padding или блоки Spacer.

Рекомендации по отступам

  • Используйте достаточные отступы для читаемости (минимум 10-20px)
  • Соблюдайте единообразие отступов по всему шаблону
  • Учитывайте мобильные устройства — отступы должны быть достаточными для удобного нажатия

Границы и скругления

Границы (Border)

Настройки границ элементов:

  • Толщина (1px, 2px, 3px и т.д.)
  • Стиль: сплошная, пунктирная, точечная
  • Цвет
  • Отдельные границы для каждой стороны (опционально)

Скругление углов (Border-radius)

Скругление углов элементов. Поддерживается в большинстве современных email-клиентов:

  • Единое значение для всех углов
  • Отдельные значения для каждого угла
  • Рекомендуемые значения: 4px, 8px, 12px, 16px

⚠️ Ограничение: Outlook (особенно старые версии) не поддерживает border-radius. Используйте с осторожностью.

Выравнивание

Горизонтальное выравнивание

Выравнивание контента по горизонтали:

  • По левому краю — стандартное выравнивание для большинства случаев
  • По центру — для заголовков, кнопок, изображений
  • По правому краю — для специальных случаев (например, дата, контакты)

Адаптивность и мобильные устройства

Мобильные стили

Emailist позволяет настраивать отдельные стили для мобильных устройств:

  • Размеры шрифтов для мобильных
  • Отступы для мобильных
  • Скрытие/показ элементов на мобильных
  • Изменение ширины элементов

Предпросмотр

Всегда проверяйте шаблон в режиме мобильного предпросмотра:

  1. Нажмите кнопку "Предпросмотр"
  2. Переключитесь на режим "Mobile"
  3. Проверьте читаемость и удобство использования
  4. Убедитесь, что все элементы корректно отображаются

Лучшие практики стилизации

  • •
    Соблюдайте единообразие — используйте одинаковые цвета, шрифты и отступы по всему шаблону
  • •
    Тестируйте в разных клиентах — стили могут отображаться по-разному в Gmail, Outlook, Apple Mail и других
  • •
    Используйте контраст — убедитесь, что текст хорошо читается на фоне
  • •
    Не перегружайте — слишком много цветов и стилей может отвлекать от контента
  • •
    Помните о доступности — используйте достаточный контраст и размеры шрифтов