Создание рассылки в блочном редакторе

if_youtube_683948.png Видеоурок: как создать рассылку в визуальном редакторе

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

Создание нового письма

Чтобы создать рассылку в блочном редакторе, сделайте следующее:

  1. Перейдите в раздел Рассылки. Для создания новой рассылки нажмите круглую синюю кнопку «+».
  2. Заполните название, имя отправителя, email и тему письма.
  3. Из вариантов «Тип содержимого» выберите вариант «адаптивное письмо в блочном редакторе».
  4. Составьте нужную структуру письма из секций: добавляйте секции, делите секции на колонки. Задайте общие настройки оформления письма: текст фона или фоновое изображение, цвет текста, кнопок и т.д.
    Затем добавьте в секции контент: текст, картинки, ссылки и кнопки.

Принцип работы с редактором

Секции можно удалять, добавлять, изменять и переставлять местами. В секции можно комбинировать разные типы контента: текст, картинки, ссылки и кнопки.

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

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

Контент секции

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

Типы контента:

  • Картинка (для добавления картинки в письмо)
  • Кнопка (для добавления кнопки в письмо)
  • Текст (для добавления абзаца текста с форматированием. В текстовом блоке можно добавить заголовки, подзаголовки и ссылки)
  • Разделитель (для добавления отступа между контентом)
  • Блок социальных кнопок “Поделиться” (для добавления в письмо кнопок социальных сетей).

Контент добавляется методом drag-n-drop (перетаскиванием). Чтобы вставить в секцию контент, нажмите и удерживайте нужный тип контента с панели слева и перетащите его в нужную секцию.

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

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

Общие настройки оформления письма

Для письма можно задать следующие общие настройки:

  • Цвет фона / фоновое изображение
  • Цвет контента
  • Цвет ссылок
  • Цвет кнопки
  • Цвет текста кнопки
  • Цвет границы кнопки

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

Настройки оформления секции

У секции есть следующие настройки:

  • Цвет фона / фоновое изображение
  • Цвет контента / фоновое изображение контента
  • Скругление углов
  • Количество колонок
  • Размеры колонок
  • Отступы
  • Персонализация.

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

Добавление изображения

Чтобы добавить картинку в письмо, сделайте следующее:

  1. Выберите или добавьте секцию, в которой будет размещена картинка.
  2. На панели слева выберите тип контента: “Картинка”. Удерживая, перетащите его в нужную секцию письма.
  3. Нажмите кнопку Загрузить изображение и выберите изображение со своего компьютера.
  4. Если вы хотите, чтобы клик по картинке переводил подписчика на сайт, то на панели инструментов над картинкой нажмите кнопку добавить/редактировать ссылку и укажите страницу сайта, на которую следует переводить подписчика. Ссылку указывайте полностью. Пример: http://site.ru.

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

Добавление кнопки

Чтобы добавить кнопку в шаблон, сделайте следующее::

  1. Выберите или добавьте секцию, в которой будет размещена кнопка.
  2. На панели слева выберите тип контента “Кнопка” и удерживая, перетащите его в нужную секцию письма.
  3. В настройках блока на панели слева установите цвет кнопки, цвет текста кнопки, положение кнопки и выравнивание. Для более точного управления положением кнопки в шаблоне можно задать отступы. В поле “Ссылка” укажите страницу, на которую должна вести кнопка. Ссылку указывайте полностью. Пример: http://site.ru.
  4. Измените текст кнопки: кликните на кнопку и введите новый текст. Текст кнопки можно персонализировать.

Добавление текста

Чтобы добавить текст в шаблон,  выберите на панели слева тип контента “Текст” и перетащите в его нужную секцию шаблона.

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

Для форматирования текста используйте панель инструментов, которая появляется при клике на текст. Вы можете настроить шрифт, размер, цвет текста.

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

Добавление ссылки

Чтобы добавить ссылку в шаблон, выделите в текстовом блоке фразу, которую нужно сделать ссылкой, и нажмите кнопку “Вставить / Редактировать ссылку” на панели инструментов над текстом. В всплывающем окне введите адрес ссылки и сохраните изменения.

Добавление отступа

Чтобы отделить элементы письма, на панели слева выберите тип контента “Разделитель” и перетащите его в нужное место шаблона.

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

Добавление фоновой картинки на все письмо

Чтобы добавить фон, перейдите к общим настройкам письма на панели слева.

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

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

Если вы хотите, чтобы текст и кнопки размещались прямо на фоновом изображении без подложки, в настройках каждой секции установите прозрачный цвет контента (для сброса цвета нажмите крестик в поле Цвет контента).

Добавление блока соцсетей

Чтобы добавить кнопки социальных сетей, на панели слева выберите тип контента “Поделиться” и перетащите его в нужное место шаблона. В настройках секции на панели слева отметьте те соцсети, которые нужно вывести в письме. Варианты: Facebook, Twitter, ВКонтакте.

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0
Еще есть вопросы? Отправить запрос