Оформление, код, импорт и экспорт письма

Скопировать ссылку на статью

Скопировано

Содержание

1. Стили письма
2. Стили контента
3. Оформление отдельного блока или элемента
4. Видимость элементов
5. Исходный код письма
6. Импорт и экспорт
7. Перенос письма из прежнего редактора
8. Проверка письма

Стили письма

Общие настройки оформления открываются по значку кисти на правой панели. Сначала задайте параметры всего письма, затем базовые стили контента. Это уменьшит количество одинаковых изменений в отдельных блоках.

На вкладке «Стили письма» настраиваются:

• ширина письма;
• адаптация для мобильных устройств;
• цвет фона;
• фоновое изображение.

Ширина определяет рабочую область содержимого. После её изменения проверьте полноширинные изображения, многоколоночные блоки и карточки товаров.

При включённой адаптации конструктор перестраивает письмо для мобильных устройств. Точный результат зависит и от настроек отдельных блоков и элементов, поэтому после общих настроек обязательно проверьте мобильный вид.

Фоновый цвет применяется к письму целиком. Фоновое изображение выбирается через кнопку загрузки изображения; учитывайте, что почтовые клиенты могут отображать фон по-разному, поэтому сохраняйте достаточный контраст текста и без него.

Стили контента

Вкладка «Стили контента» задаёт базовое оформление создаваемых блоков и элементов. Эти параметры удобно использовать как корпоративный стиль шаблона.

Настройки сгруппированы по типам содержимого:

• блоки — фон, скругление и отступы;
• текст — шрифт, размер, межстрочный интервал, цвет, фон и отступы;
• заголовки — шрифт, размер, цвет, начертание, фон и отступы;
• ссылки — цвет, фон и подчёркивание;
• кнопки — шрифт, цвета, выравнивание, рамка, скругление и внутренние отступы;
• карточки — базовые и контрастные цвета, рамка и скругление.

Сначала настройте часто повторяющиеся параметры: основной шрифт, цвета текста и ссылок, оформление кнопок. После этого добавляйте содержимое — новые элементы получат заданную основу.

Оформление отдельного блока или элемента

Чтобы изменить только один объект, выберите его на холсте. Справа откроются контекстные параметры. Они дополняют или переопределяют общие стили для выбранного блока или элемента.

Для текста и заголовков обычно доступны шрифт, размер, межстрочный интервал, начертание, цвет, фон и выравнивание. Для блоков, колонок и контейнеров — фон, изображение фона, отступы, рамка, скругление и тень.

Используйте локальное оформление для смысловых акцентов. Если одинаковое изменение приходится повторять во многих местах, перенесите его в «Стили контента»: так письмо будет проще поддерживать.

Примечание

Изменение глобального стиля не обязано перезаписывать уже заданное локальное значение. Если отдельный элемент выглядит иначе, проверьте его контекстные настройки.

Видимость элементов

Настройка «Видимость» позволяет показывать элемент только в нужной версии письма. Например, можно подготовить отдельное изображение или кнопку для мобильного вида.

Для выбранного элемента можно:

• скрыть его на мобильных устройствах;
• показывать его только на мобильных устройствах.

Если один смысловой фрагмент создан отдельно для десктопа и смартфона, настройте видимость обеих версий и проверьте результат в каждом режиме. Не оставляйте две одинаковые версии одновременно видимыми: получатель увидит дублирующееся содержимое.

Исходный код письма

Иконка </> на верхней панели открывает исходный код письма. Панель кода можно расположить слева, справа или под холстом.

Код и визуальный холст связаны: применённые изменения HTML и CSS отражаются на письме. Ручное редактирование полезно для точечной доработки готовой вёрстки, но требует проверки результата.

После изменения кода:

1. Примените изменения в панели кода.
2. Проверьте блок на визуальном холсте.
3. Откройте десктопный и мобильный виды.
4. Проверьте переменные, ссылки и дальнейшее редактирование элементов.
5. Нажмите «Применить» в окне конструктора, чтобы сохранить письмо в рассылке.

Важно!

Некорректная структура HTML или CSS может изменить внешний вид сразу нескольких блоков и усложнить их редактирование в конструкторе. Перед большим изменением экспортируйте текущую вёрстку.

Импорт и экспорт

Действия импорта и экспорта находятся на верхней панели конструктора.

Импорт позволяет загрузить готовую вёрстку. Конструктор принимает HTML, EML и ZIP-архивы с вёрсткой и изображениями.

1. Нажмите кнопку с тремя точками и выберите «Импортировать».
2. Выберите файл.
3. Дождитесь загрузки и преобразования письма.
4. Проверьте результат на холсте.

Кнопка «Экспорт» сохраняет текущую вёрстку в файл. Используйте её перед ручным редактированием кода, для переноса письма или для сохранения резервной копии.

Импорт заменяет содержимое рабочей области данными из файла. Если текущее письмо нужно сохранить, сначала экспортируйте его или примените изменения в рассылке.

Перенос письма из прежнего редактора

Для переноса шаблона используйте экспорт из прежнего редактора и импорт в конструктор:

1. Откройте письмо в прежнем редакторе.
2. Экспортируйте его в файл.
3. Откройте письмо в конструкторе.
4. Импортируйте файл.
5. Проверьте структуру, изображения, отступы, ссылки и переменные.

Экспорт переносит не только разметку, но и связанные с ней стили. Простое копирование HTML может дать другой результат, если CSS остался в прежнем редакторе.

Если вёрстка переносится вручную:

1. Скопируйте HTML из прежнего редактора.
2. Отдельно скопируйте содержимое вкладки CSS прежнего редактора.
3. Откройте исходный код в конструкторе.
4. Вставьте CSS внутрь тега <style> после существующих правил и перед закрывающим </style>.
5. Примените изменения и проверьте письмо на холсте.

Старый и текущий редакторы используют разную внутреннюю структуру. Даже после корректного импорта отдельные отступы, сложные таблицы, внешние стили или пользовательский код могут потребовать ручной настройки.

Проверка письма

Перед сохранением и отправкой проверьте:

• общий фон, ширину и базовые стили;
• локальные переопределения в отдельных элементах;
• десктопную и мобильную видимость;
• изображения и альтернативные тексты;
• все обычные и динамические ссылки;
• переменные;
• блоки, изменённые через исходный код;
• отступы и стили после импорта;
• ссылку на отписку.

После проверки нажмите «Применить», вернитесь к рассылке и завершите её настройки.