Использование готового HTML-кода для загрузки собственных блоков в конструктор Mindbox

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

Это позволяет:

• Использовать свой бренд-дизайн, если не хватает стандартной галереи блоков
• Сократить количество правок в HTML-верстке
• Быстрее собирать типовые рассылки благодаря переиспользованию блоков

Загруженные блоки отображаются в отдельной вкладке блоков «Мастер-шаблон»:

Этапы подготовки и загрузки версткиЭтапы подготовки и загрузки верстки

Загрузка блоков состоит из 4 этапов:

1. Подготовка HTML-верстки
2. Разметка блоков письма
3. Разметка элементов и их настроек
4. Загрузка готовых блоков в конструктор Mindbox

Подготовка HTML-версткиПодготовка HTML-верстки

1. Соберите структуру письма.

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

2. Проверьте верстку в почтовых клиентах.

   Если в подготовленной верстке есть ошибки отображения, они сохранятся и в загруженных блоках. Отправьте тестовое письмо с подготовленной версткой на разные почтовики (Gmail, Yandex Mail, MailRU, Outlook) и проверьте, что все элементы отображаются корректно.

Разметка блоков письмаРазметка блоков письма

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

Примеры блоков:

• Шапка, которая размещается в начале письма и содержит в себе информацию о компании;
• Баннер с информацией об акции или важным сообщением;
• Товарный блок с подборкой товаров, рекомендациями или напоминанием клиенту о продуктах в избранном;
• Подвал (футер), содержащий юридическую информацию, ссылку на отписку, контакты и ссылки на социальные сети.

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

Разметка элементов и их настроекРазметка элементов и их настроек

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

Элементы позволяют управлять контентом блоков и настраивать их в конструкторе:

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

Элементы и их возможные настройки:

Элемент	Какие настройки можно добавить
Текст	Содержимое текста Стили текста (шрифт, размер, цвет, начертание, межстрочный интервал) Отступы и выравнивание в блоке
Картинка	Выбор картинки Ссылка клика по картинке Размер картинки Обводка Скругления углов Отступы и выравнивание в блоке
Кнопка	Текст кнопки Стили текста кнопки (шрифт, размер, цвет, начертание, межстрочный интервал) Ссылка клика по кнопке Стили кнопки (цвет фона, обводка, скругления углов) Размер кнопки Отступы и выравнивание в блоке
Иконка (например, соцсети)	Выбор иконки Ссылка по клику на иконку Размер иконки Отступы и выравнивание в блоке

Загрузка готовых блоков в конструктор MindboxЗагрузка готовых блоков в конструктор Mindbox

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

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

Блок — это «этаж» верстки, самостоятельный кусок письма. Примеры блоков: шапка письма, карточка товара, футер, баннеры.

Элемент — это составляющие части блока: картинки, тексты, кнопки и иконки.