Библиотека блоков (Модули)

Письмо, созданное в нашем редакторе, состоит из блоков с определенными стилями оформления. “Модули” – это уникальный набор инструментов для организации работы с элементами, повторяющимися в разных письмах.

Найти их можно во вкладке “Контент” слева. Здесь будут отображаться сохраненные блоки, которые при перетаскивании непосредственно в редактор можно изменить.

Пример email-сообщения, составленного из модулей:

Библиотека модулей eSputnik

Типы модулей

В библиотеке хранятся готовые блоки:

  • сохраненные вами во вкладке «Мои модули»,
  • предлагаемые системой – «Специальные».

Во второй вкладке собраны 300+ готовых к редактированию и добавлению шаблонов. Используйте их, чтобы каждый раз не создавать или не копировать из старых рассылок однотипные элементы.

Сохраненные модули

Структурно модули бывают трех видов:

  • Контейнеры
    Минимальная единица, которую можно сохранить как модуль. При наведении мышкой в сообщении они подсвечиваются голубой рамкой. Контейнер может содержать один или несколько базовых блоков из меню “Блоки” слева. Располагаются эти блоки строго друг под другом, например, так:

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

Контейнер

  • Структуры
    Эта категория отвечает за взаимное размещение контейнеров горизонтально. Их также может быть 1 и больше внутри структуры. При наведении курсора она выделяется серой рамкой. Примерами могут быть: две колонки текста, четыре ячейки и т.д. Чтобы создать структуру, зайдите в одноименный раздел слева, выберите подходящий вариант и перетяните его в нужное место сообщения:

Структуры

  • Полосы
    Высшая по иерархии конструкция из трех. Полосы вмещают одну или несколько структур, расположенных друг под другом. При наведении мышки имеют также серую рамку, но выходят за пределы контентной части. Это позволяет устанавливать фон для самого письма.

Полоса c фоном

Как работать с модулями

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

Чтобы сохранить блок:

  1. Выбираем подходящую полосу, структуру или контейнер.
  2. Настраиваем содержимое: вставляем изображение, кнопку, ссылки, текст...
  3. Выделяем весь элемент, кликнув на соответствующий лейбл вверху слева или справа.
  4. Нажимаем пиктограмму сохранения:
    Сохранить модуль
  5. Заполняем необходимые поля в появившемся слева меню. Это не обязательно, но в дальнейшем упростит поиск, ориентирование в библиотеке и работу с модулем вам и коллегам.
    Какая информация доступна для заполнения:
    Информация о модуле
  • название ‒ сделайте его максимально содержательным;
  • описание ‒ раскройте назначение блока или добавьте другие полезные сведения;
  • категория ‒ в выпадающем списке выберите тип модуля;
  • теги ‒ добавьте метки для поиска, разделяя пробелом. Слова в теге соединяйте нижним подчеркиванием;
  • идентификатор ‒ нужен для динамических писем. Измените, если возникнет необходимость.
  1. Сохраняем.

Сохранить модуль

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

  • увеличенное изображение модуля в готовом виде,
  • название,
  • описание,
  • теги,
  • идентификатор (если его не меняли при сохранении, он соответствует структурному типу модуля: контейнер/структура/полоса).

Идентификатор (тип) модуля

Чтобы отредактировать или удалить блок:

1. Заходим в раздел модулей.

2. Наводим курсор на нужный блок.

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

Редактирование и удаление

4. Изменяем информацию: доступны те же поля, что и при добавлении в библиотеку.

5. Обновляем или сохраняем как новый блок.

Сохранение и обновление

Чтобы найти нужный блок:

  • Вводим в строку поиска название, часть названия или тег в формате #тег, если присваивали модулям метки. Например, так: #custom_icons. Жмем Enter.
  • Группируем по категории. Для этого нажимаем на пиктограмму фильтра. В пункте “Группировать по” выбираем категорию, и далее в списке отмечаем саму категорию или несколько категорий для фильтрации. По умолчанию отмечены все. Можно убрать ненужные, сняв галочки, или очистить все, кликнув на соответствующую кнопку. Проставлять галочки также можно руками или выбрать все с помощью кнопки.

Фильтр по категориям

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

  • Группируем по тегу. В пункте “Группировать по” выбираем “Тег”. В списке или плитке отобразятся блоки, объединенные под своими метками.

Группировка по тегам

Под одной меткой собраны те модули, у которых одинаковый тег или все теги. Если меток несколько, но совпадают не все, модуль выведется отдельно со своим подзаголовком (его теги через запятую). Блоки без тегов и все остальные будут в разделе “Другие”.

Важно! 

Не забывайте очищать фильтр и строку поиска, иначе будете видеть только результаты выдачи.

Предзаготовленные модули

Использование блоков из библиотеки значительно сокращает время на верстку. Если вы пока не создавали свои, недостаточно опытны в работе с редактором или письмо нужно сделать срочно, выберите что-то из предлагаемого системой. Для этого зайдите во вкладку "Специальные". Здесь находятся более 300 готовых модулей, которые можно добавить в сообщение.

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

  • Предзаголовки
  • Хедеры
  • Баннеры
  • Инфомодули
  • Карточки товаров
  • Футеры
  • AMP-песочница

В каждой категории представлено несколько вариантов и кнопка, чтобы подгрузить больше. Идентификатор в превью при наведении курсора подскажет структурный тип модуля: stripe ‒ полоса, structure ‒ структура, container ‒ контейнер.

Идентификатор системного модуля

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

Библиотека модулей

Обратите внимание: названия системных модулей – на латинице. Поиск на русском языке не даст результатов.

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

Примеры использования сохраненных блоков

Обязательные для каждого письма элементы: хедер, футер, кнопки СТА, карточки товаров, соцсети – стоит сохранить в личной библиотеке, чтобы облегчить рутинную работу. Из сохраненных блоков быстро создается готовое письмо.

  • Шапка или хедер
    Можно создать в нескольких вариантах и выбирать подходящий в зависимости от типа письма. Например: для промописем – с иконками соцсетей и лого, для триггеров – только с логотипом:

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

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


Использование готового футера

Создаем или копируем блок отписки → сохраняем в личную библиотеку → вставляем в следующие письма.

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

Во многих случаях. Например, для:

  • Разных отправителей. Когда в аккаунте есть несколько отправителей (создаются письма от лица компании, от менеджеров, от руководителя).
  • Разных типов писем. Триггеры и промописьма имеют разную структуру и, соответственно, блоки.
  • Отдельных блоков. Соцсети, в частности, могут быть в одних письмах в шапке, а в других – в подвале.
  • Автоматических писем. Например: транзакционных (статусы заказа), брошенных корзин и просмотров и т. д. Чтобы не копировать отдельно переменные, а взять уже готовый блок из системы.
  • Разных сегментов. Например, если есть региональное или другое географическое разделение, в письме можно использовать адреса и контакты представительств.

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

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email