# Блочный редактор
На данный момент, кроме обычного редактора, вы можете использовать блочный редактор в нашей системе, собирать ваши письма с анимированной или простой картинкой, добавлять блоки в массовые рассылки, составлять письмо из разных блоков, чтобы оно соответствовало стилистике вашего сайта или задуманной стилистике писем.
# Создание нового шаблона
Попасть в «блочный редактор» можно при создании письма, триггерного, массового или транзакционного, в системе при создании письма вы выбираете, где будете его создавать.
При выборе создания письма в блочном редакторе, мы видим форму, с обязательными полями для заполнения.
Обязательные поля отмечены знаком «*», остальное вы сможете заполнить после создания письма, поля которые являются обязательными, после создания письма будет возможность изменить.
# Шаблон по умолчанию
По умолчанию в письме вы видите несколько данных, в виде обязательных переменных для почтового сервиса (кнопка отписки от рассылки и возможность открытия письма в браузере) и начало контента в письме, которое можно редактировать
Не советуем удалять нижнюю часть контента, она является важной, для того, чтобы ваши рассылки не попадали в бан у почтовых клиентов, ссылка «отписаться от рассылки должна быть видимой и кликабельной.
# Верхняя панель инструментов
В верхней панели редактора располагаются вспомогательные инструменты, благодаря которым вы можете:
- Возвращаться к предыдущим изменениям
- Переходить в режим предварительного просмотра
- Отправить тестовое письмо себе на почту
- Открывать письмо в верстке HTML и вносить изменения в код
- Вносить изменения в «прехедере», где можно поменять тему письма и заполнить текст превью, пустотой или нужным вам текстом
- Сохранить шаблон письма
- Закрыть редактор
Далее, приступая к наполнению письма, в редакторе существует два раздела, оформление и контент.
# Оформление письма
# Общие настройки
В разделе "Оформление" вы можете поработать над общими настройками письма, задать ширину, отступы, цвет фона, добавить картинку в фон письма.
# Полосы
Также в части оформления доступна визуальная составляющая полос: хедера, контента, футера и инфообласти, в каждой из полос в этом разделе вы можете задать цвет, размер текста, цвет фона контента, расцветку ссылок.
Полоса "Хэдер":
Шапка письма, здесь обычно размещают логотип, контакты и ссылки на основные разделы сайта: каталог, распродажа, новинки. Можно сделать эту часть минимальной, чтобы пользователь сразу переходил к основному содержанию.
Полоса "Контент":
Полоса, в которой содержится вся основная информация письма.
Полоса "Футер":
Самая нижняя часть письма, где хранятся такие элементы, как ссылки на социальные сети, юридическая информация, контакты и прочее.
Обратите внимание
Один из важнейших атрибутов – кнопка отписки, которая была принята на законодательном уровне для обладателей официального сертификата соответствия GDPR. Он предполагает то, что каждый пользователь вправе отписаться от рассылки максимально просто, без каких-либо усилий.
Полоса "Инфообласть":
Включает в себя содержание контента, в которой обычно содержится ссылка на открытие письма в браузере, если нет добавленного прехедера.
Мы видим эту часть в основном тексте письма, после темы, чтобы сделать ее не видимой, при заполнении прехедера, нужно заполнить поле пустотой.
# Заголовки
Раздел позволяет редактировать размер и шрифт заголовков в письме.
# Кнопка
Раздел позволяет обозначить правила показа кнопки, стиль, цвет, отступы, добавить подсвечивание кнопки при наведении на нее, отступы и границы кнопки.
# Адаптивность
Раздел позволяет задать размеры всем полосам и редактировать адаптивность верстки письма под разные почтовые редакторы, например размер текста в контенте или увеличение всех кнопок на всю ширину.
# Контент письма
В разделе "Контент" есть три основные части. Благодаря этому разделу вы и будете собирать письмо по блокам, добавлять составляющие, ссылки в разделы, дополнять визуальную часть каждому из блоков.
# Структуры
Структуру хранят в себе разные варианты блоков, в которые можно добавлять контент в виде: кнопок, текста, картинок.
Для того, чтобы использовать любую из структур, нужно вытянуть ее в нужную область в письме.
После чего пополнять контентом каждую из областей, на выбор инструмента, который вы хотите отображать.
Сама структура также может быть изменена по вашим требованиям, нажав на структуру в левой части редактора вы уведите панель настроек.
Панель позволяет задать размеры каждого контейнера, задать отступы, выбрать фон в виде картинки, либо просто задать ему цвет, также имеется настройка возможного скрытия элемента(для отображения показа на десктопе или мобильной версии).
Как только вы вытянули в область письма нужную структуру, необходимо определить что будет хранить в себе каждый из элементов структуры.
Это может быть картинка, текст или кнопка.
Добавляя любой контент, по нажатию на элемент, слева появляется окно настройки, которое позволяет произвести разные настройки с добавленным вами контентом.
Подробнее настройки картинки, текста и кнопки будут показаны в следующем разделе.
# Блоки
Раздел блоков включает в себя возможность построения письма по нужным вам модулям.
Доступные блоки в редакторе:
Картинка: добавление картинки в любую часть письма (например картинка рекомендуемого товара)
Текст: добавление элемента текста
Кнопка: добавление кнопки в любую часть письма
Разделитель: позволяет разделить контент письма
Видео: возможность добавления видеоролика в тело письма (в виде ссылки)
Соцсети: возможность добавления иконок социальных сетей в письмо (с ссылками на них)
Баннер: возможность добавление баннера в рассылку
Меню: размещение пунктов меню
HTML: возможность добавления сущности в письмо с помощью верстки в HTML
Отписка от рассылки: обязательный блок, позволяющий клиенту отписаться от рассылки, ссылка на отписку должна быть видимой
Товарные рекомендации: блок, который позволяет показать рекомендации в виде карточек товаров внутри письма. По разным алгоритмам, например «Популярные товары».
NPS: возможность добавления в письмо индекса потребительской лояльности
При добавлении каждого из блоков, в левой части экрана вы будете видеть возможность настройки данного блока.
В каждой из настроек у блока есть возможность его скрывать, добавлять изменения размера и управлять ссылками.
# Редактирование контента блоков
Картинка:
- Редактирование картинки во внутреннем редакторе, где можно добавить текст на картинку, рамку, изменить в размере, добавить на картинку стикеры, фигуры или рисунок, изменить углы, добавить фон (см. рисунок 1)
- Добавить Эффект Rollover, который по нажатию позволяет отобразить в письме другую картинку (которую вы выберете)
- Ссылка: добавить ссылку, которая будет вести к определенной странице при нажатии на картинку
- Альтернативный текст: дает возможность на месте картинки добавить текст, работает в случае, если почтовые сервисы блокируют ваши картинки, клиент в этом случае вместо картинки увидит текст, с посылом о том, что вы хотели передать ему картинкой.
- Сделать картинку адаптивной и растянуть ее по ширине. Важные параметры, которые позволяют поработать над отображением картинки на разных устройствах.
- Задать картинке размер
- При необходимости добавить анкорную ссылку*
- При необходимости скрыть элемент для показа, на мобильном устройстве или на десктопе (необходима, если к примеру при открытии письма на мобильном устройстве вы не хотите отображать картинку).
- При необходимости включить/выключить элемент в верстке HTML
Анкор ссылки
Это текст, к которому прикреплена ссылка, ведущая на сторонний ресурс, другую страницу сайта или отдельный блок текста на той же веб-странице.
Рисунок 1
Текст:
- Настроить цвет, задать фон, добавить анкорную ссылку.
- Задать выравнивание текста для мобильной версии или общее выравнивание.
- Скрыть элемент для показа на мобильном устройстве или на десктопе.
- При необходимости включить/выключить элемент в верстке HTML.
Кнопка:
- Задать ссылку, создать наименование кнопки, выбрать шрифт и размер кнопки, сделать текст выделенным или курсивным.
- Задать цвет кнопки и цвет текста.
- Задать цвет фона вокруг кнопки.
- Выбрать размер закругления кнопки.
- Задать выравнивание кнопки, отдельно можно задать выравнивание для мобильной версии письма.
- При необходимости включить/выключить возможность фиксированной высоты.
- При необходимости включить/выключить возможность отображения кнопки с иконкой и подобрать изображение иконки для кнопки.
- Растянуть по ширине.
- Задать границы и отступы.
- Добавить анкорную ссылку.
- При необходимости скрыть кнопку для показа на мобильной версии или десктопе.
- При необходимости включить/выключить элемент в верстке HTML
Разделитель:
- Разделитель можно сделать динамическим, эта настройка позволяет разделителю добавлять размер
- Также для разделителя можно добавить цвет, по умолчанию данный блок прозрачный.
Видео:
- Добавить ссылку на видео с ресурса youtube или vimeo
- Добавить альтернативный текст*
- Добавить собственное изображение (для отображения при открытии письма)
- Задать иконку для кнопки «play»
- Задать отступы
- При необходимости скрыть элемент для отображения на десктопе или мобильном устройстве
Альтернативный текст
Дает возможность на месте видео добавить текст, работает в случае, если почтовые сервисы блокируют ваши картинки и видео, клиент в этом случае вместо видео увидит текст, с посылом о том, что вы хотели передать ему видеоконтентом.
Соцсети:
- Задать цвет фона блока
- Выбрать иконки для отображения
- Задать ссылки для иконок
- При необходимости скрыть на мобильном устройстве или десктопе
- Поработать с выравниванием, по центру блока или по краям
Баннер:
- Редактировать картинку во внутреннем редакторе, задать ей размер или добавить рамку, текст, стикеры.
- Выбрать форм-фактор для отображения в письме (вертикальный, квадратный, горизонтальный)
- Задать высоту баннеру
- Определить фильтр при необходимости
- Добавить ссылку для перехода по клику на баннер
- Добавить альтернативный текст или дополнительное изображение
- При необходимости, скрыть элемент для отображения на десктопе или мобильном устройстве
Меню:
- Определить тип меню, из доступных их три: ссылки, иконки, иконки и ссылки.
- Добавить разделитель между пунктами, задать разделителю цвет
- Выбрать шрифт и размер шрифта, добавить выделение или наклон шрифта, определить цвет
- Добавить отступы
- В каждом пункте отдельно добавить ссылку, которая будет вести на нужный раздел (например пункт каталог, со ссылкой на раздел сайта, где расположен каталог)
- Определить цвет текста и цвет фона пункта меню
- При необходимости скрыть элемент для отображения на десктоп или мобильном устройстве (это может быть один элемент из меню, например «Каталог»).
- При необходимости добавить еще пункты меню, по умолчанию, при добавлении блока, добавляется три пункта, после добавления информации обо всех трех пунктах, в левом меню вы увидите кнопку «добавить еще пункт».
Отписка от рассылки:
- При редактировании вы можете задать цвет тексту, цвет ссылкам
- Определить размер отступов
- Задать цвет фону данного блока
- Выровнять текст по центру или краям
- При необходимости скрыть элемент блока в мобильной версии или на десктопе(что не рекомендуется делать)
Товарные рекомендации:
Обратите внимание
Перед тем, как добавить блок товарных рекомендаций в письмо, нужно убедиться, что на вашем тарифе этот инструмент доступен.
- Первым шагом в настройках предлагается выбрать блок для показа в письме, блок должен быть создан в разделе «товарные рекомендации» в системе. Подробнее о возможностях и создании блоков в этом разделе
- Далее необходимо определить сетку карточек для отображения возможные варианты: 3х1; 3х2; 3х3; 3х4; 3х5
- Настройка «добавлять данные из цепочек к блоку» относится к настройкам триггерных шаблонов писем и исключает товары, которые уже есть в блоках рекомендаций. Например, при добавлении блока товаров, которые уже есть в корзине у клиента, во втором блоке «Популярные», этот же товар отображаться не будет. Также эта настройка относится к показу алгоритма «Похожих» товаров и обращает внимание на переменную товара в блоке, чтобы выдать похожие на него товары в рекомендациях.
- Настройка «исключать уже показанные товары» позволяет исключить одинаковые товары из блоков, если их например три, даже если по алгоритмам товары будут пересекаться, в блоке каждый товар покажется только один раз. Эта настройка работает в том числе и в массовых рассылках.
Состав карточки товара в блоках рекомендаций:
Фотография: в настройках можно задать размер
Название: можно задать длину названия, количество строк в названии, задать шрифт и его размер, выровнять и задать интервалы
Бренд: настройка отображения названия бренда, также можно задавать шрифт и размер шрифта, выравнивать текст по нужной вам стороне
Старая цена: изменение шрифта, размера шрифта, выравнивание, цвет
Цена: изменение шрифта, размера шрифта, выравнивание, цвет
Кнопка: возможность задать кнопке цвет, редактировать текст, цвет текста, необходимый шрифт, задать кнопке закругление, выравнивание текста внутри кнопки, добавление границ и отступов
Каждый пункт из состава карточки товара можно исключать из блока.
NPS:
Обратите внимание
Перед тем, как добавить блок NPS в письмо, нужно убедиться, что на вашем тарифе этот инструмент доступен.
В настройках данного блока, для его корректного отображения в письме, необходимо выбрать канал получения оценки и категорию для оценки, для этого данная настройка должна быть уже осуществлена в разделе NPS в сервисе.
Подробнее о настройке NPS можно почитать в соответствующем разделе
# Модули
Personal: хранит в себе модули, которые вы сохраняли в каких-либо письмах, их можно использовать в любой из рассылок.
Сохранить модуль можно, нажав на три точки в элементе письма.
Пример использования: сохранить созданный "блок NPS" и использовать его во всех письмах.
Public: хранит в себе публичные варианты прехедеров.
Прехедер - это текст, который располагается сразу после темы письма. Обычно это логичное продолжение заголовка, которое также рассказывает о содержании письма или призывает к действию. Хороший прехедер усиливает заголовок и даёт подписчику дополнительную мотивацию открыть письмо.
В системе доступно три варианта прехедера:
1 вариант: с иконками соцсетей и ссылкой на открытие письма в браузере
2 вариант: с названием вашего логотипа или иного наименования, которое вы хотите разместить в прехедер
3 вариант: кажется пустым, но на самом деле содержит в себе текст, который по цвету в письме выводится белым, если использовать стандартные настройки и не менять цвет текста, в теле письма его будет не видно, но после темы в почтовом сервисе клиента, он будет отображаться.
Обратите внимание
Данный блок с прехедером должен отображаться в самом верху письма, перед его основным содержанием, иначе после темы его видно в почтовом сервисе не будет.
# Редактирование текста в письме
При редактировании текста, в любом месте письма, в верхней панели вы видите инструменты работы с текстом.
В панели доступно:
- Выбор форматирования текста: обычный, или заголовок (который включает в себя несколько вариантов размеров)
- Выбор шрифта
- Выбор размера шрифта
- Выделение, наклон, подчеркнутый или зачеркнутый текст
- Нажимая на три точки вы можете сделать подстрочный или надстрочный индекс (см. рисунок 2)
- Определить цвет текста
- Определить цвет заливки текста
- Настроить выравнивание текста
- Создать маркированный список
- Удалить или добавить переносы строк
- Добавить ссылку в текст
- Персонализация: включает в себя возможность добавить персонализированный атрибут, например подтянуть в письмо email пользователя или Имя
- Вставка эмоджи
- Три точки включают в себя возможность вставить символы или таблицу (см. рисунки 3 и 4)
Рисунок 2
Рисунок 3
Рисунок 4
# Готовое письмо:
На основном поле вы будете видеть весь контент, который добавили в письмо.
Рядом с каждой добавляемой сущностью и рядом с каждой полосой контента будут доступны инструменты (которые скрываются за тремя точками и раскрываются при наведении):
- Сохранить как модуль (для использования например шапки письма в каждом из писем)
- Переместить (позволяет переместить контент в любую часть письма)
- Дублировать (создает дубль выбранной области)
- Удалить (удаляет из письма выбранный объект)