Собрать макет с помощью строк

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

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

Формируем структуру шаблона .

Формируем структуру шаблона

Теперь наполним структуру контентом. Для этого переключитесь на блок «Содержимое» и перетащите необходимые элементы (текст, картинки, видео, иконки, стикеры, кнопки и т.д.) в нужные колонки строки.

Как добавить контент в строки

Чтобы перейти к редактированию строки, кликните на область слева или справа от колонок. После этого слева откроется панель редактирования.

количество колонок.

Количество колонок в строке может быть от 1 до 6 .

Чтобы добавить колонку в строку, на панели  настроек  кликните на «Добавить новую» в свойствах строки, а чтобы удалить лишнюю, нажмите на «Удалить».

добавляем колонку.

Высота строки будет меняться по мере наполнения колонок контентом. Ширина колонки регулируется вручную.

Как изменить ширину колонки

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

перемещение контента в колонках.

Перемещаем контент в колонках

Свойства строки

Свойства строки

Цвет фона строки. Позволяет задать цвет фона для всей строки.

Цвет фона контента. Выбираем цвет фона для содержимого строки.

Вертикальное выравнивание. Позволяет выравнивать контент в строках по вертикали.

Вертикальное выравнивание в строках

На скриншоте текст и картинка выравнены по центру. Также можно выбрать выравнивание по верхнему или нижнему краю

Скругленные углы области содержимого. Позволяет создавать строки со скругленными углами. Можно выбрать степень скругления для каждого угла отдельно или для всех одновременно.

Как скруглить углы у строки

Скругление будет заметно, только если фон содержимого отличается от фона строки или добавлена граница к области содержимого

Граница области содержимого. Добавляет границу к содержимому строки.

как добавить границу для строки

В настройках можно выбрать цвет и толщину границы

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

  • Вписать в фон (картинка растянется по всей области).
  • Повторять (если картинка меньше области строки, она будет повторяться).
  • Центр (картинка разместится по центру).
как добавить фон к строке

Картинка применена к области содержимого. Если нужно изменить размер картинки, нажмите на Графические эффекты, чтобы открыть редактор

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

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

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

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

выбираем цвет фона колонок.

Выбор цвета для заливки фона колонок

Используя отступы, можно более точно выровнять элементы в колонке.

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

настраиваем границы колонок.

Настройка границы колонок

Посмотрите подробное видео о том, как сделать письмо в конструкторе.

 

Полезные ссылки

Правила оформления рассылок для отправки через Unisender
Как сохранять элементы письма и использовать их в следующих рассылках
Как адаптировать письмо под мобильные устройства

Вы нашли ответ?

17
7

Мерч для влюбленных
в интернет-маркетинг

UniShop — магазин одежды, аксессуаров и инфопродуктов бренда Unisender.

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

Подробнее
Unisender