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

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

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

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

Типы модулей

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

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

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

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

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

  изображение

  текст

  кнопка

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

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

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

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

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

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

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

• название ‒ сделайте его максимально содержательным;
• описание ‒ раскройте назначение блока или добавьте другие полезные сведения;
• категория ‒ в выпадающем списке выберите тип модуля;
• теги ‒ добавьте метки для поиска, разделяя пробелом. Слова в теге соединяйте нижним подчеркиванием;
• идентификатор ‒ нужен для динамических писем. Измените, если возникнет необходимость.

6. Сохраняем.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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