Создать шаблон письма

Шаблон — это контент вашей рассылки, именно его увидят получатели. В Creatio вы можете создавать и редактировать как простые шаблоны, которые одинаково отобразятся у всех получателей (статический контент), так и шаблоны, содержимое которых будет отличаться для разных сегментов аудитории рассылки (динамический контент).

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

Дизайнер контента — визуальный редактор, позволяющий создавать и настраивать шаблоны рассылок, которые будут привлекательно выглядеть как на компьютере, так и на мобильных устройствах. Подробнее: Рекомендации по адаптивной верстке email-сообщения.

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

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

Создание шаблона рассылки можно представить в виде нескольких простых шагов:

1. Формирование структуры письма из преднастроенных блоков.
2. Добавление своего контента.
3. Применение стилей и форматирования.

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

Создать новый шаблон 

1. Перейдите в рабочее место Маркетинг и откройте раздел Email.

2. Нажмите Добавить и выберите тип рассылки, которую хотите создать — массовую рассылку или триггерное письмо.

3. На открывшеся странице заполните название новой рассылки.

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

   Рис. 1 — Переход к настройке шаблона рассылки

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

   • Чтобы создать структуру письма, следуйте инструкциям в блоке Настроить шаблон в дизайнере контента.

   • Чтобы использовать ранее настроенную структуру, нажмите Действия → Выбрать из справочника (Рис. 2). В открывшемся окне выберите шаблон структуры.

     Рис. 2 — Добавление в письмо ранее настроенного шаблона

     

6. После того как будет сформирована структура шаблона, добавьте в него наполнение. Подробнее: Настроить шаблон в дизайнере контента

Настроить шаблон в дизайнере контента 

1. Настройте шапку письма (Рис. 3):

   Рис. 3 — Добавление шапки в шаблон

   

1. Перетащите из библиотеки блоков в рабочую область блок “Шапка. Логотип (50%) + Навигация (50%)”.

   1. Кликните по пункту меню для перехода к его настройке.

   2. Для каждого из пунктов меню на панели настройки укажите ссылки для перехода. Чтобы использовать в ссылках url-адреса, удалите префикс “#”. Оставьте префикс для обработки значения как локального якоря.

   3. Чтобы удалить лишние пункты меню, нажмите Меню → . Чтобы добавить пункты меню, нажмите Добавить ссылку.

   4. Установите признак Гамбургер меню, чтобы на мобильных устройствах отобразить меню навигации в виде составного “гамбургера”.

   5. Нажмите , чтобы установить для меню выравнивание по правому краю.

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

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

2. Настройте баннер (Рис. 4):

   Рис. 4 — Добавление баннера

   

   1. Перетащите из библиотеки элементов в рабочую область элемент Блок.

   2. Нажмите Добавить баннер на панели настройки в правой части окна.

   3. Чтобы удалить секцию, на панели настройки блока нажмите справа от Секция #1.

   4. Установите признак в области настройки фона.

   5. Нажмите , выберите цвет фона и нажмите Применить.

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

3. Добавьте изображение в верхнюю часть баннера (Рис. 5):

   Рис. 5 — Добавление изображения

   

   1. Перетащите элемент Картинка из библиотеки в рабочую область шаблона.

   2. Нажмите , чтобы очистить поле на панели настройки элемента.

   3. Загрузите изображение со своего компьютера или укажите URL-адрес изображения или URI данных, содержащий изображение.

   4. При необходимости укажите ширину и высоту изображения в области Размер, px.

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

   5. Настройте отступы.

4. Добавьте заголовок в баннер (Рис. 6):

   Рис. 6 — Добавление заголовка

   

   1. Перетащите элемент Текст из библиотеки в рабочую область шаблона.

   2. На панели настройки элемента в области Шрифт нажмите . В открывшемся окне выберите цвет шрифта и нажмите кнопку Применить.

   3. Замените стандартный текст вашим заголовком.

   4. В поле Размер, px укажите размер шрифта заголовка.

   5. Нажмите , чтобы настроить выравнивание текста.

   6. Настройте отступы.

5. Добавьте подзаголовок в баннер (Рис. 7):

   Рис. 7 — Добавление подзаголовка

   

   1. Перетащите элемент Текст из библиотеки в рабочую область шаблона.

   2. Повторите шаги b-f инструкции по настройке заголовка, но задайте меньший размер шрифта.

6. Добавьте кнопку в баннер (Рис. 8):

   Рис. 8 — Добавление кнопки в баннер

   

   1. Перетащите элемент Кнопка из библиотеки в рабочую область шаблона.

   2. Замените стандартный текст вашим призывом к действию.

   3. В поле Ссылка для перехода укажите URL-адрес, по которому должен выполняться переход.

   4. На панели настройки элемента в области Шрифт нажмите . В открывшемся окне выберите цвет шрифта и нажмите кнопку Применить.

7. Настройте отступы кнопки.

8. В области Фон нажмите . Укажите фон кнопки и нажмите кнопку Применить.

9. Добавьте в баннер фоновое изображение (Рис. 9):

   Рис. 9 — Добавление фонового изображения в баннер

   

   1. Откройте панель настройки баннера, вернувшись к ней по навигационной цепочке.

   2. Нажмите , чтобы очистить поле в области Фон.

   3. Загрузите изображение со своего компьютера или укажите URL-адрес изображения или URI данных, содержащий изображение.

   4. Настройте выравнивание фонового изображения по вертикали кнопками , или и по горизонтали кнопками , или .

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

10. Добавить подзаголовок (Рис. 10):

    Рис. 10 — Добавление подзаголовка

    

    1. Перетащите элемент Блок из библиотеки в рабочую область шаблона.

    2. Перетащите элемент Блок из библиотеки в добавленный блок.

    3. Замените стандартный текст вашим подзаголовком.

    4. Укажите шрифт подзаголовка в области Шрифт.

    5. В поле Размер, px укажите размер шрифта заголовка.

    6. Нажмите , чтобы настроить выравнивание текста по центру.

11. Добавьте блок с описанием особенностей продукта (Рис. 11).

    Рис. 11 — Добавление блока с описанием особенностей продукта

    

    1. Перетащите в рабочую область преднастроенный блок “Список продуктов. 3 колонки: Изображение + Текст + Кнопка”.

    2. Удалите ненужные элементы.

    3. Замените стандартный текст в колонках описанием ваших продуктов.

12. Добавьте заключительный посыл (Рис. 12) аналогично тому, как вы добавляли подзаголовок после баннера на шаге 9.

    Рис. 12 — Добавление заключительного посыла

    

13. Сохраните шаблон.

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

    Рис. 13 — Отображение шаблона на компьютере и мобильном устройстве