Структура и содержимое письма

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

Скопировано

Содержание

1. Блоки и структура письма
2. Настройка блока и колонок
3. Элементы письма
4. Изображения
5. Текст и заголовки
6. Переменные
7. Ссылки с переменными
8. Сохранённые блоки
9. Мобильная версия

Блоки и структура письма

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

Чтобы добавить блок:

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

На вкладке «Блоки» доступны:

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

Готовый общий блок уже содержит элементы. Его можно добавить целиком, затем заменить тексты, изображения и ссылки. Пустой блок удобен, когда структуру и содержимое нужно собрать самостоятельно.

Настройка блока и колонок

Выберите блок на холсте, чтобы открыть его параметры справа. Набор настроек зависит от структуры, но обычно включает фон, рамку, скругление, внутренние и внешние отступы.

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

Если в блоке несколько колонок, откройте настройки колонок. В них можно:

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

Часть параметров доступна прямо на холсте. Между колонками появляется регулятор расстояния, а на границах выбранного блока — элементы управления отступами. Так результат изменения можно оценить сразу.

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

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

Элементы письма

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

В конструкторе доступны элементы:

• «Картинка» — изображение со ссылкой и альтернативным текстом;
• «Текст» — абзацы и форматированный текст;
• «Заголовок» — заголовок выбранного уровня;
• «Кнопка» — кнопка со ссылкой;
• «Отступ» — свободное пространство заданной высоты;
• «Список UL» — маркированный список;
• «Список OL» — нумерованный список;
• «Разделитель» — линия между частями письма;
• «Соцсети» — набор ссылок на социальные сети;
• «Таблица» — табличное содержимое;
• «Таймер» — обратный отсчёт до выбранной даты и времени;
• «Видео» — обложка видео со ссылкой на просмотр;
• «Товар» — карточки товаров или услуг.

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

Элемент «Товар» и источники товарных данных описаны отдельно в статье «Добавление товаров в письмо».

Изображения

Добавьте элемент «Картинка» и выберите его на холсте. В настройках изображения можно:

• загрузить или заменить файл;
• указать альтернативный текст и title;
• добавить ссылку при щелчке;
• настроить ширину и высоту;
• выбрать выравнивание;
• настроить рамку, скругление и тень;
• задать отступы и видимость.

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

Кнопка загрузки или замены открывает «Центр изображений». В нём можно:

• загрузить изображение с компьютера;
• вставить изображение из буфера обмена;
• добавить изображение по URL;
• найти изображение в фотостоке;
• выбрать GIF.

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

Текст и заголовки

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

Для текста и заголовков доступны:

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

Локальные настройки изменяют выбранный элемент. Базовый шрифт, размеры, цвета и оформление новых текстов и заголовков задаются в «Стилях контента» — это помогает выдержать единый корпоративный стиль. Глобальные и локальные стили подробно описаны в статье «Оформление, код, импорт и экспорт письма».

Переменные

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

Чтобы вставить переменную в текст:

1. Выберите текстовый элемент.
2. Поставьте курсор в нужное место либо выделите текст-заглушку, который нужно заменить.
3. Нажмите «{ } Переменные».
4. Найдите переменную через поиск или откройте нужную группу.
5. Выберите переменную.

Если перед выбором переменной был выделен текст, переменная заменит выделенный фрагмент. Так можно сначала написать понятную заглушку, например «Имя клиента», а затем заменить её нужной переменной.

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

Важно!

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

Ссылки с переменными

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

1. Выберите текст, кнопку или картинку.
2. Откройте настройки ссылки.
3. Выберите тип ссылки «Другое».
4. Вставьте переменную через кнопку «{ }» или введите её без изменений.
5. Проверьте, что перед переменной не добавился http:// или https://.

Тип «Другое» нужен для адресов, которые целиком формируются переменной: редактор не дописывает к ним протокол как к обычному URL.

Важно!

В маркетинговом email-письме должна быть ссылка на отписку. Проверьте не только наличие переменной, но и то, что ссылка назначена кликабельному тексту, кнопке или изображению.

Сохранённые блоки

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

1. Выберите блок на холсте.
2. Нажмите действие «Сохранить в блоки» на панели блока.
3. Укажите название.
4. Сохраните блок.

После этого он появится в разделе «Сохранённые блоки» на вкладке «Блоки». Добавленный из библиотеки блок остаётся редактируемым: текст, изображения, ссылки и оформление можно изменить для конкретного письма.

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

Мобильная версия

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

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

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

Мобильные настройки применяйте к конкретному элементу после его выбора. Затем вернитесь в десктопный вид и убедитесь, что изменения не нарушили основную версию письма.