Marketing Creatio
PDF

Как сформировать шаблон

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

  • Определите свойства шаблона: ширину, цвет фона, расположение шаблона на странице. Подробнее >>> 

  • Добавьте в шаблон блоки контента и настройте их параметры. Подробнее >>> 

  • Добавьте в блоки контент (текст, изображения и т.д.). Подробнее >>> 

  • Настройте для рассылки предзаголовок. Подробнее >>> 

Содержание

Как определить свойства шаблона email-сообщения

Как работать с блоками контента

Как сформировать содержимое шаблона

Как настроить предзаголовок для рассылки

Как определить свойства шаблона email-сообщения

Нажмите кнопку btn_com_folder_filter.png в правом верхнем углу окна, чтобы задать ширину, цвет фона и расположение шаблона на странице (Рис. 1).

Рис. 1 — Настройка свойств шаблона

scr_section_email_content_designer_gear_menu.png 

Чтобы определить цвет фона шаблона, кликните по кнопке btn_content_designer_add_background.png и выберите необходимый оттенок на диаграмме или укажите точный код необходимого цвета. Затем нажмите [Применить].

Чтобы задать ширину шаблона email-сообщения, введите в поле [Ширина] значение в пикселях — от 300 px до 1350 px. Обратите внимание, что здесь вы указываете максимальное значение, для экранов меньшего размера шаблон будет адаптироваться автоматически.

На заметку

Самая популярная ширина для компьютеров — 600 px, а для мобильных устройств — 320 px для вертикального просмотра и 480 px для горизонтального. Высота шаблона при этом не ограничена и зависит от объема контента.

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

Как работать с блоками контента

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

Рис. 2 — Определение свойств шаблона и формирование его структуры

gif_section_email_create_template_bulk.gif 

На заметку

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

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

На заметку

Если вы не нашли в библиотеке подходящий блок, его можно создать в справочнике [Библиотека блоков контента]. Подробно об этом читайте в статье Как создать и настроить блок контента.

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

В результате в шаблон email-сообщения будет добавлен новый блок.

На заметку

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

Кнопки управления блоком появятся при нажатии кнопки btn_marketing_plans_detail_menu.png на правой границе блока.

Чтобы скопировать блок, уже добавленный в шаблон, нажмите на кнопку btn_marketing_plans_detail_menu00007.png на правой границе блока и в появившемся справа меню нажмите кнопку btn_chapter_content_designer_element_menu_copy.png.

Чтобы изменить расположение блока на странице шаблона:

1.Нажмите кнопку btn_marketing_plans_detail_menu00008.png на правой границе блока.

2.В меню управления блоком, которое появится справа, нажмите кнопку btn_chapter_content_designer_element_menu_drag.png и, удерживая ее, перетащите блок в нужное положение на странице шаблона.

В результате блок будет помещен в указанную позицию.

Чтобы отредактировать набор и пропорции элементов в блоке:

1.Нажмите кнопку btn_marketing_plans_detail_menu00009.png на правой границе блока.

2.В меню управления блоком, которое появится справа, нажмите кнопку btn_content_designer_edit_block.png.

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

На заметку

Все внесенные изменения будут актуальны только для текущего шаблона. Чтобы изменения применились на уровне библиотеки, редактирование блока необходимо выполнить в справочнике [Библиотека блоков контента]. Подробнее об этом читайте в статье Как создать и настроить блок контента.

Чтобы удалить блок со страницы шаблона:

1.Нажмите кнопку btn_marketing_plans_detail_menu00010.png на правой границе блока.

2.В меню управления блоком, которое появится справа, нажмите кнопку btn_chapter_content_designer_element_menu_delete.png.

В результате блок будет удален со страницы шаблона.

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

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

  • высоту;

  • выравнивание;

  • отступы;

  • скругление углов;

  • фон, в том числе фоновое изображение;

  • границы.

Эти параметры определяются на вкладке [Стиль] панели настройки блока. Чтобы ее открыть, нажмите кнопку btn_marketing_plans_detail_menu00011.png на правой границе блока.

На заметку

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

Как сформировать содержимое шаблона

После формирования структуры шаблона добавьте в него содержимое (Рис. 3). Каждый элемент контента имеет панель настройки, позволяющую управлять его наполнением. Чтобы отобразить панель, щелкните мышью по элементу.

Рис. 3 — Формирование содержимого шаблона

gif_section_email_create_template_bulk_content.gif 

Как работать с текстом

Используйте панель инструментов элемента (Рис. 4), чтобы отформатировать текст, например, изменить размер шрифта, выделить необходимые слова, задать междустрочный и межсимвольный интервалы, произвольный цвет, вставить гиперссылку и т. д.

Рис. 4 — Панель инструментов текстового элемента

chapter_content_text_element_toolbar.png 

По нажатию кнопки btn_chapter_content_designer_edit_block_html.png вы можете перейти в расширенный режим редактирования, в котором можно работать с HTML-кодом текста.

По умолчанию в дизайнере контента используется шрифт Open Sans. Вы можете изменить шрифт по умолчанию, указав его название в системной настройке “Шрифт CKEditor по умолчанию” (код “CKEditorDefaultFont”).

Вы можете также изменить набор шрифтов, который используется в дизайнере контента. Для этого необходимо в системной настройке “Список шрифтов для CKEditor” (код “CKEditorFontsList”) указать названия тех шрифтов, которые вы планируете использовать в письмах, и они появятся в выпадающем списке на панели инструментов текстового элемента.

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

Как работать с изображениями

Чтобы добавить новое изображение:

1.Выделите соответствующий элемент в рабочей области дизайнера контента.

2.На открывшейся панели настройки изображения:

чтобы загрузить изображение с компьютера, нажмите кнопку btn_content_designer_add_image.png;

чтобы загрузить изображение из интернета, очистите поле загрузки изображения, нажав на кнопку btn_com_quick_filter_cancel.png, которая появляется в правой части поля при наведении курсора мышки, укажите URL-адрес изображения и нажмите клавишу ENTER.

В результате в шаблон будет загружено изображение. Его размер автоматически масштабируется относительно размера блока контента. Вы можете изменить размеры изображения. Для этого в полях [Ширина] и [Высота] на панели настройки изображения укажите желаемые размеры в пикселях. Обратите внимание, что при такой настройке изображение может непропорционально растянуться или сжаться. Чтобы вернуться к автоматическому масштабированию, удалите значения из полей [Ширина] и [Высота] и нажмите клавишу ENTER.

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

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

Вы можете настроить разные изображения для показа на компьютерах и мобильных устройствах. Для этого установите признак [Использовать другое изображение для мобильных устройств] и в появившемся поле (Рис. 5) загрузите новое изображение.

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

chapter_content_designer_add_image_for_mobile.png 

Если необходимо, чтобы по щелчку на изображение пользователь переходил на определенную страницу, например, если изображение является баннером, укажите URL-адрес нужной страницы в поле [Ссылка] на панели настроек изображения.

На заметку

При добавлении ссылки на посадочную страницу (лендинг) для существующих контактов — адресатов вашей рассылки можно настроить автоматическое заполнение полей формы данными (например, ФИО, email, телефон), которые доступны в bpm’online. Это облегчит вашим клиентам процесс регистрации, исключит ошибки при заполнении полей веб-формы вручную и позволит вам избежать появления дублей лидов и контактов в системе. Подробное описание настройки приведено в статье “Как настроить автозаполнение веб-формы лендинга”.

Как работать с HTML-элементами

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

Чтобы отредактировать наполнение HTML-элемента непосредственно в рабочей области дизайнера, нажмите кнопку btn_chapter_content_designer_htlm_element_edit.png панели инструментов элемента и в открывшемся окне внесите необходимые изменения.

Чтобы очистить наполнение HTML-элемента, выделите необходимый HTML-элемент и нажмите кнопку btn_chapter_content_designer_htlm_element_delete.png на появившейся панели инструментов.

На заметку

При использовании HTML-элементов в шаблоне сообщения необходимо придерживаться правил адаптивной верстки. Это обеспечит корректное отображение созданного вами email-сообщения в почтовых клиентах получателей. Подробную информацию вы найдете в статье Рекомендации по адаптивной верстке email-сообщения.

НА ЗАМЕТКУ

[HTML-элемент] предназначен для реализации пользовательского HTML-кода. Для использования данного элемента необходимы знания в области web-дизайна и HTML-верстки. Ваш код будет добавлен в шаблон без каких-либо дополнительных проверок на ошибки. При использовании HTML-элемента рекомендуется проверять результаты вне дизайнера контента, например, путем отправки тестового письма. Если вы не знакомы с HTML-версткой, пожалуйста, используйте готовые блоки при создании шаблонов.

Как настроить предзаголовок для рассылки

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

Для настройки предзаголовка достаточно ввести необходимый текст в поле [Предзаголовок] дизайнера контента (Рис. 6). Добавить в предзаголовок макрос, например, имя получателя, можно по кнопке btn_email_template_macro.png.

Рис. 6 — Настройка предзаголовка рассылки

gif_section_email_create_template_bulk_preheader.gif 

На заметку

Больше информации о предзаголовках email-сообщений доступно в статье “Рекомендации по подготовке рассылок”.

Валидация шаблонов при сохранении

При сохранении шаблон рассылки проходит проверку по следующим параметрам:

  • Наличие ссылки отписки. Если в шаблоне эта ссылка отсутствует, то при сохранении система предложит автоматически добавить стандартный футер отписки.

  • Наличие правил динамического контента, для которых не настроены условия фильтрации. Если рассылка с таким правилом будет сохранена, то блок, к которому оно применено, отправится всем получателям. При сохранении система уведомит о наличии такого правила и предложит настроить для него условия фильтрации.

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

Теги, которые не поддерживаются в HTML5

Приведенные ниже теги недоступны в HTML5, большая часть их функций перенесена в CSS:

Устаревший тег

Чем заменить в HTML5

<acronym>

<abbr>

<applet>

<embed> или <object>

<basefont>

Задается в CSS. Подробнее >>> 

<big>

Задается в CSS. Подробнее >>> 

<center>

Задается в CSS. Подробнее >>> 

<dir>

<ul>

<font>

Задается в CSS. Подробнее >>> 

<frame>

Нет данных

<frameset>

Нет данных

<isindex>

<form> или <input> Подробнее >>> 

<noframes>

Нет данных

<strike>

<del> или <s>

<tt>

Задается в CSS. Подробнее >>> 

<u>

Задается в CSS через text-decoration-line:underline Подробнее >>> 

Смотрите также

Как сформировать шаблон

Как настроить динамический контент рассылок

Рекомендации по адаптивной верстке email-сообщения

Как персонализировать письма

Рекомендации по подготовке рассылок

Был ли данный материал полезен?

Как можно улучшить эту статью?