WYSIWYG редактор

Введение

Настройка дизайна писем производится с помощью удобного WYSIWYG-редактора, с которым легко разобраться абсолютно без знаний html-верстки. Письма одинаково хорошо выглядят на всех популярных почтовых клиентах и устройствах. Он включает в себя следующие функции:

вставка картинок и картинок-ссылок;
установка кнопок;
добавление разделителей между блоками;
вставка текстовых блоков;
размещение товаров;

Для работы с редактором перейдите в к редактированию массовой, триггерной или транзакционной кампании на раздел “Шаблон письма” и нажмите кнопку “Редактировать шаблон”:

Кнопка выпадающего меню справа от кнопки редактирования шаблона позволяет сменить редактор на режим работы с html-версткой:

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

Обзор окна визуального редактора

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

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

На панели слева находятся следующие кнопки:

Выход — нажатие на эту кнопку приводит к выходу из визуального редактора обратно на страницу редактирования кампании в раздел “Шаблон письма”.
Компоненты — нажатие на эту кнопку открывает панель выбора компонентов письма. Компоненты — это блоки из которых составляется письмо, такие как: шапка письма, текстовые блоки, блоки с картинками и баннерами, блоки рекомендаций и другие.
Темы — нажатие на эту кнопку открывает панель выбора тем. Темы меняют общий вид письма, такие как: цвет фона, шрифт текстов, размер и цвет шрифта и другие.
Стили — нажатие на эту кнопку открывает панель выбора стилей письма. На панели стилей можно настроить шрифты, отступы, скругления, цвета как для всего тела письма, так и для отдельных компонентов.

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

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

На панели справа отображаются свойства выбранных компонентов письма:

Создание письма в визуальном редакторе

Для добавления новых компонентов в тело письма сперва необходимо открыть меню компонентов в панели слева:

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

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

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

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

Слайдер перемещения — перемещает выбранный компонент на другое место в верстке письма путем зажатия левой кнопки мыши и перемещения курсора. Также компонент можно переместить на уровень выше или ниже стрелками, которые находятся справа от слайдера;
Дублировать — создает копию компонента на уровень ниже;
Сохранить — сохраняет компонент в секцию компонентов;
Удалить — удаляет компонент из тела письма;

Изменение свойств компонентов письма

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

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

Каждому компоненту можно задать собственный стиль отображения. Стили, перечисленные в панели свойств компонентов, связаны со стилями настроенными для письма. Также, есть возможность настроить стиль отображения для каждого компонента в отдельности:

Редактировать можно не только компоненты целиком, но и отдельные части компонентов, такие как изображения в блоках рекомендаций или кнопки, заголовки и текст:

Добавить ссылку в баннер или пункт меню можно в разделе “Остальное” в панели свойств компонентов:

Настройка блоков рекомендаций

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

При нажатии на эту кнопку открывается окно настроек товарного блока:

В этом окне можно выбрать следующие параметры:

Алгоритм подбора товаров — выбор алгоритма, по которому будут подбираться товары в блоке. - Доступны следующие алгоритмы:
- Продуктовая полка
- Популярные товары
- Сопутствующие товары к товарам
- Альтернативы товаров
- Популярные товары из категории
Идентификатор склада — выбор stockId, по которому будут подбираться товары в блок
Количество товаров — задает количество отображаемых в блоке товаров

Посередине окна есть контекстуальная секция, которая меняется в зависимости от выбранного алгоритма. Например, при выборе алгоритма “Товарная полка” в этом меню можно выбрать какие товары отображать в блоке. Или при выборе алгоритма “Сопутствующие товары к товарам” в этом меню можно выбрать товары, к которым необходимо подобрать сопутствующие товары.

Для выбора товаров необходимо нажать на кнопку “Выбрать товары”. Откроется окно, в котором можно найти товары по наименованию товара или его ID, передаваемому в файле товарной базы:

Для добавления товара в блок необходимо нажать на кнопку “+” в левой секции окна выбора товаров. Чтобы удалить товар необходимо нажать на кнопку “-” в правой секции окна. Кнопка “Очистить список” удаляет все добавленные в блок товары. Сохранить выбранные товары можно кнопкой “Применить”.

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

Работа со стилями и темами письма

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

Стили можно настраивать как для всего письма в целом, так и для компонентов письма.

В стилях письма можно изменить ширину тела письма, цвет фона и тела письма, скругление тела письма и шрифт:

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

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