Панель Контент () содержит две вкладки: Элементы и Блоки.

На вкладке Элементы представлены все элементы, которые можно добавлять в письмо.

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

После добавления элемент можно настроить и отредактировать.

Описания элементов см. в отдельной статье.

Вкладка Блоки позволяет добавить в письмо блок.

Вы можете перетащить блок в требуемое место, либо кликнуть на блок, чтобы добавить его в конец письма.

Вы можете добавить пустой блок (), ранее сохранённый блок () или один из преднастроенных общих блоков (). Чтобы отобразить на панели настроек общие блоки, в области редактирования письма наведите курсор мыши на ранее добавленный блок и нажмите Добавить блок → Добавить общий блок.

При помощи кнопки Добавить блок вы также можете добавить пустой или сохранённый блок.

Подробнее о блоках см. в отдельной статье.

Панель Стили () позволяет настроить оформление контента вашего письма.

На вкладке Стили письма доступны общие настройки оформления для всего письма:

• Ширина письма. Задаёт максимальную ширину содержимого письма в пикселях, т.е. ограничивает возможную ширину блоков и элементов.
• Адаптировать письмо в моб. устройствах. Если данная опция включена, то при просмотре письма на мобильном устройстве элементы, не помещающиеся на экран, будут отображаться друг под другом. Подробнее об адаптации под мобильные устройства см. ниже.
• Цвет фона письма. Позволяет выбрать цвет фона либо фоновое изображение для всего письма. Вы можете выбрать цвет при помощи виджета палитры или ввести hex-код. Чтобы сбросить выбор, нажмите иконку крестика.

На вкладке Стили контента вы можете настроить оформление контента (например, цвета, отступы, скругление, шрифт) по типам. Цвета настраиваются отдельно для контента обычных и контрастных блоков.

Доступны настройки для следующих типов контента:

• блоки;
• текст;
• заголовки;
• ссылки;
• кнопки;
• карточки.

На панели Обсуждение () вы можете оставлять комментарии и отвечать на комментарии других пользователей.

Комментарий можно привязать к конкретному месту в письме ().

Панель Оптимизация () позволяет произвести следующие проверки:

• Проверка ссылок выявит пустые, битые или недоступные ссылки, а также оценит безопасность страниц, на которые ссылки ведут.
• Проверка изображений покажет линейные размеры, объём и время загрузки каждого изображения, а также проверит доступность изображений, размещённых на веб-хостинге.
• Проверка кода валидирует HTML-код письма и выведет список ошибок синтаксиса, устаревших тегов и других проблем, которые могут привести к некорректному отображению письма в различных почтовых клиентах.

Если проверка выявит ошибку или проблему, кликните по ней, чтобы перейти к соответствующему изображению или ссылке в вашем письме.

На панели Настройки () вы можете задать название и описание письма, которые будут отображаться в списке шаблонов сообщений.

Также вы можете настроить возможность использования данного письма в качестве шаблона для будущих писем.

Адаптивная вёрстка обеспечивает корректное отображение писем на экранах разных размеров. Для этого используются медиазапросы — специальные команды, которые меняют значения атрибутов вёрстки в зависимости от размера экрана.

Большинство почтовых клиентов, таких как Mail.ru, Gmail, Outlook и Yahoo, обрабатывают медиазапросы корректно, но «Яндекс Почта» пока их не поддерживает.

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

Блочный редактор автоматически создаёт адаптивную вёрстку для ваших писем, если на вкладке Стили включён переключатель Адаптировать письмо в моб. устройствах.

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

При переходе к мобильной версии область сузится до стандартной ширины мобильных экранов (425 пикселей) и вы увидите, как ваше письмо будет отображаться на телефоне.

Чтобы настроить внешний вид компонента в мобильной версии, кликните на него и измените нужные параметры на вкладке Блок панели настроек.

В мобильной версии настройки компонентов будут подсвечиваться фиолетовым. Внесённые изменения будут применяться только к мобильной версии письма и не затронут версию для ПК.

Так вы сможете отрегулировать размер изображений в мобильной версии письма, чтобы они отображались корректно — не были слишком большими и помещались в один экран. Задайте нужный размер на панели настроек.

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

Скрыть компонент в определённой версии письма можно с помощью параметра Видимость и направление. Доступны следующие значения:

• Всегда. Компонент будет отображаться и на мобильных устройствах, и на ПК.
• Десктоп. Компонент будет доступен только для получателей, которые откроют письмо на компьютере.
• На мобильном. Компонент будет отображаться только на мобильных устройствах. При этом на рабочей области редактора появится иконка, информирующая, что компонент будет отображаться только в мобильной версии.

В мобильной версии вы также можете добавить в письмо новые элементы и блоки из вкладки Контент, а затем настроить их видимость.

Таким образом, у вас получится две версии письма, которые будут отображаться по-разному на экранах различных размеров.

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

При необходимости вы можете отключить автоматический перенос колонок, тогда в мобильной версии письма компоненты не будут переноситься. Для этого нажмите на нужный блок, перейдите в его настройках на вкладку Структура и выключите параметр Переносить колонки друг под друга.