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

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

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

• когда в рассылках есть однотипные элементы – так вам не придется каждый раз создавать их заново или копировать код из старых писем;

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

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

Типы модулей

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

• сохраненные вами во вкладке "Мои модули",
• предлагаемые системой – “Общие”. Здесь собрано 300+ готовых к редактированию и добавлению шаблонов.

Структурно модули бывают трех видов: контейнеры, структуры, полосы.

Контейнеры

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

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

Структуры

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

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

Полосы

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

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

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

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

1. Выберите подходящую полосу, структуру или контейнер.

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

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

4. Нажав на эту пиктограмму, выберите пункт сохранения блока:

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

   Какая информация доступна для заполнения:

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

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

6. После внесения всех данных нажмите кнопку “Сохранить”.

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

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

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

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

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

3. Кликните на пиктограмму с тремя точками в правом нижнем углу. При нажатии откроется контекстное меню с опциями редактирования и удаления. Удаление происходит в один клик, без запроса на подтверждение.

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

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

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

• Введите в строку поиска название, часть названия или тег в формате #тег, если присваивали модулям метки. Например, так: #custom_icons. Нажмите Enter.

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

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

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

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

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

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

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

• Предзаголовки;

• Хедеры;

• Баннеры;

• Инфомодули;

• Карточки товаров;

• Футеры;

• AMP-песочница.

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

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

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

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

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

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

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

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

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

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

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

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

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