Для успешного создания шаблона для блочного редактора нужно знать и понимать составляющие шаблона:
- Фон – обертка для всего письма
- Заголовок, тело и подвал
- Рамка – группировка блоков и/или разделение на несколько столбцов
- Блок – для содержимого, например текста, картинки или разделителя.
Фон
Создание шаблона начинается с создания первой таблицы – фона. В этой таблице можно задать стили для всего письма, например цвет фона или картинку для фона.
P.S. Рекомендуется копировать код с этой страницы для правильных имен классов.
Эта таблица должна делиться на три строки с классами mld-header, mld-body mld-body-1, mld-footer, чтобы блочный редактор мог их распознать.
Внутри каждой строки нужно добавить таблицу с фиксированной шириной:
|
|
|
|
|
Как видно из примера выше, нужно задать фиксированную ширину. Мы рекомендуем использовать 600px для лучшего восприятия. В этих таблицах можно задать другие стили, например рамки, тени и скругление. Единственное, что можно задать в ячейке – это фон.
Если с этим закончили, то пора начать добавлять содержание нашему письму.
Содержание
Для добавления содержания понадобятся рамки и блоки.
- Рамка – группировка блоков и/или разделение на несколько столбцов
- Блок – для содержимого, например текста, картинки или разделителя.
Рамка
|
Все рамки шириной в 100%.
В ячейке можно задать отступ, но такие опции как тени, фон и т.д. задаются во внутренних таблицах.
Рамка с двумя колонками
Для создания нескольких колонок нужно разделить контейнер во внутренней ячейке.
|
Рамку можно разделить максимум на 4 колонки. Как и упоминалось, рамки содержат блоки, и постройка шаблона начинается именно здесь.
Блоки
Здесь будут показаны только самые важные блоки:
- Текст
- Картинка
- Кнопка
- Разделитель
- Соцсети
У каждого блока есть свой класс на внешней таблице.
Текстовый блок и блок с заголовком – самые используемые. Они могут содержать один или более тегов span и p. Если нужен блок заголовка, то смените класс mld-block-text на mld-block-title.
|
Блок картинки тоже используется довольно часто, и содержит тег img.
|
Блок кнопки немного сложнее текстового блока или блока с картинкой. Стили кнопки задаются во внутренней таблице, а выравнивание одновременно во внешней и внутренней ячейке. Высота задается отступом на внутренней ячейке.
Блок-разделитель нужен для создания больших промежутков между блоками или рамками. Их можно превратить в линию, задав верхнюю границу внутренней таблице, и добавление разрывов происходит через задание отступов во внешней таблице.
|
Блок соцсетей имеет две цели. Одна – для ссылки на профиль в соцсети, другая – для размещения поста о кампании в соцсети. Единственное различие – название класса.
Обратите внимание, что внутренний блок не занимает 100% ширины. Можно добавить свои картинки, но если они должны потом редактироваться в блочном редакторе, то нужно использовать стандартные иконки от Mailigen.
P.S. Рекомендуется делать этот блок через редактор.
|
Как видно, ссылка на стандартные иконки заканчиваются на /style-2/youtube.png. Нужный стиль можно посмотреть по следующей таблице:
Style 1 | Style 2 | Style 3 | Style 4 |
![]() |
![]() |
![]() |
![]() |
Встроенный стиль
Можно задать стиль «по умолчанию» для каждого блока или рамки. Нужно задать нужный стиль внутри встроенного стиля со специальным ID.
Классы стилей текста
- mld-def-paragraph – простой текст
- mld-def-heading1 - заголовок 1
- mld-def-heading2 - заголовок 2
- mld-def-custom – свой стиль текста
- mld-def-link – – ссылка в простом тексте
- mld-def-link-heading1 - ссылка в заголовке 1
- mld-def-link-heading2 - ссылка в заголовке 2
- mld-def-link-custom - свой стиль ссылки
- mld-def-block-button-text - текст кнопки
Обратите внимание:
Если не задан свой стиль текста, то ему присваивается стиль просто текста.
Если не заданы стили ссылки в заголовке 1/2 или свой стиль ссылки, то им автоматически присваивается стиль ссылки.
Классы для стандартных блоков и рамок:
- mld-def-block и mld-def-block-outer - для всех блоков
- mld-def-block-title и mld-def-block-title-outer - для блоков заголовка
- mld-def-block-text и mld-def-block-text-outer - для текстовых блоков
- mld-def-block-image и mld-def-block-image-outer - для блоков с картинкой
- mld-def-block-button и mld-def-block-button-outer - для блока кнопки, mld-def-block-button для стиля самой кнопки.
- mld-def-block-divider - для блока-разделителя
- mld-def-block-container и mld-def-block-container-outer - для рамок
- mld-def-block-share и mld-def-block-share-outer - для поста в соцсети
- mld-def-block-follow и mld-def-block-follow-outer - для ссылок на профиль в соцсети
Например
Другие стили
Чтобы сделать шаблон отзывчивым или спрятать элементы нужно добавить встроенный стиль в head:
Классы mobile100 и mobilesplit будут добавлены автоматически, но если нужно что-то скрыть, то добавьте класс mld-mobile-hide.
Не забудьте использовать поля персонализации в коде!
И помните
- Используйте широко распространенные шрифты, например Arial
- Старайтесь удержать шаблон в пределе 100 Кб
- Избегайте HTML5 и CSS3 из-за недостаточной поддержки
- Не используйте Flash или JavaScript во избежание попадания в спам
- Проверяйте код на валидность
- Оптимизируйте изображения для более быстрой загрузки