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



В платформу Devino Online интегрирован визуальный редактор email-рассылок BeeFree

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


Редактор позволяет собрать даже сложные письма:

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

Примеры писем, созданных в редакторе BeeFree, доступны можно посмотреть здесь

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

Адаптивная верстка поддерживается почтовыми провайдерами Gmail и Mail.ru

В мобильной версии Yandex письмо будет выглядеть аналогично письму в desktop-версии. Полный список поддерживаемых email клиентов.

Базовые настройки

Во вкладке “Настройки” вы можете изменить свойства всего письма:

  • ширина области содержимого: указать ширину письма. Учитывается, когда экран устройства больше указанной ширины. Можно сказать, что это максимальная ширина письма. На устройствах малого размера это значение будет игнорироваться.
  • Цвет фона: фоновый цвет, который будет применяться для всех элементов письма. Изменить цвет фона у конкретного элемента, строки, столбца можно будет в настройках отдельных элементов.
  • Цвет фона области содержимого: фоновый цвет для области содержимого, для которого задается ширина.
  • Шрифт по умолчанию: стандартный шрифт, который будет у любого добавленного в письмо блока. Для отдельного блока шрифт можно будет изменить.
  • Цвет ссылки: цвет всех ссылок в письме, если не изменить его для конкретной ссылки.



Настройки, Строки, Элементы: Как они работают?

Редактор позволяет создавать сложные письма с помощью совместного использования:

- настроек (применяются ко всему письму)

- строк (можно добавлять, удалять, копировать, перемещать)

- элементов (изображения, текст, кнопки и т.д., которые можно добавлять, удалять, копировать, перемещать).


Настройки

Основные настройки всего письма наследуются структурными блоками и отдельными элементами. Например, шрифт, установленный в разделе “Настройки” будет использоваться во всем письме, кроме элементов, где будут заданы индивидуальные параметры.

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


Строки

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

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

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

Например, можно задать цвет фона для конкретной строки, или даже ячейки в строке.


Элементы

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


Работа со строками

Сначала наведите курсор на область, где нет контента письма — слева или справа.

Затем кликните по нужной строке. 

У выделенной строки появятся иконки с параметрами:

- копирование

- удаление

- перемещение. 

В правой панели редактора появятся настройки выделенной строки: цвет фона, отступы и т.д.

Таким образом, вы увидите как общие настройки строки, так и настройки отдельных колонок, если такие есть в строке.

Структура письма

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


Пример колонок для письма:

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

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

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


Desktop vs Mobile

desktopVSmobile.png

Адаптацию верстки поддерживает большинство популярных почтовых клиентов. Если почтовый клиент не поддерживает адаптацию верстки, подписчик увидит обычную версию, как на компьютере. Мобильная верстка, сделанная в редакторе работает в Gmail и Mail.ru. Пользователи Яндекс получат письма с обычной версткой и структурой.


Мобильная адаптация у отдельных блоков

Мобильная адаптация служит для упрощения чтения письма на мобильном устройстве, но иногда она может навредить. Не все элементы необходимо перестраивать. 

Например, горизонтальное меню в шапке письма. Незачем тратить целый экран на просмотр одного лишь меню.

Меню: адаптация верстки vs. классическая верстка

Nav_comparison.jpg

Пример с иллюстрациями/иконками:

Nav_comparison_illust.jpg

Изменение стандартного поведения

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

Do-not-stuck-on-mobile.png

Свойство настраивается в правой панели редактора. По умолчанию адаптивность включена.

Элементы письма

Текстовый блок

Используйте элемент “Текст” для добавления любого текста в письмо



При клике на текстовый блок в теле письма, будут показаны настройки текста в плавающей панели возле текстового блока (1) и в правой панели редактора (2).


Картинки

Добавить изображение в письмо нужно с помощью элемента “картинки”


При клике на добавленный в область письма элемент, в правой панели редактора появятся настройки изображения


Изменить можно:

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

Меню

Если вы хотите добавить простое текстовое меню, воспользуйтесь элементом “Меню” в правой панели редактора.

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

  • Текст
  • Тип ссылки: url, email, звонок, sms
  • Открыть ссылку в новом окне?
  • Title (не обязательно),показывается при наведении курсора на пункт меню

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

 


У меню можно задать:

  • вид: горизонтальное или вертикальное,
  • разделители между пунктами меню.


Пример меню, созданного в редакторе:


00_example.png

Работа с отступами

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



Это делается в правой панели редактора. Раздел Отступы.

Так выглядит строка без отступов:



Так с отступом 20 пикселей с каждой стороны:



Элемент без отступов:



Элемент с одинаковыми отступами с каждой стороны:


Элемент с разными отступами в разных сторон:


или 


Работа с границами

Строкам и ячейкам можно задать границы.


Строка с разными границами для разных сторон


Работа с фоном

Фоном может быть цвет или изображение. Фоновые изображения работают не во всех почтовых клиентах. В большей части версий outlook, Lotus Notes 7 и некоторых экзотических клиентах.


Цвет фона можно задать:

- в ячейке
- в строке
- в контентной части строки
- и строке, и контентной части строки

Фоновые изображения можно задать:

- в контентной части строки
- во всей ширине строки.



По умолчанию фон устанавливается в левый верхний угол контентной части строки:




Фоновое изображение можно вставить в центр строки:




Если фоновое изображение меньше области контента строки, фоновое изображение можно повторить для этих незанятых областей:




Фоновое изображение можно повторить для незанятых областей всей строки.




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


Персонализация письма - добавление макросов

Добавить данные о подписчике можно с помощью элемента Текст. 

Для этого необходимо кликнуть на Дополнительные поля:


В выпадающем списке выбрать нужный столбец из базы подписчиков (макрос):


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