Блочный редактор шаблонов: Создание шаблонов для блочного редактора

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

• Фон – обертка для всего письма
• Заголовок, тело и подвал
• Рамка – группировка блоков и/или разделение на несколько столбцов
• Блок – для содержимого, например текста, картинки или разделителя.

Фон

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

P.S. Рекомендуется копировать код с этой страницы для правильных имен классов.

<!-- BACKGROUND --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: #f8f8f8;"> <tr class="mld-header"> <td align="center" valign="top">&nbsp;</td> </tr> </table>

Эта таблица должна делиться на три строки с классами mld-header, mld-body mld-body-1, mld-footer, чтобы блочный редактор мог их распознать.

Внутри каждой строки нужно добавить таблицу с фиксированной шириной:

<!-- BACKGROUND --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: #f8f8f8;"> <tr class="mld-header"> <td align="center" valign="top"><!-- LAOYUT HEADER --> <table border="0" cellpadding="0" cellspacing="0" style="width: 600px;"> <tr> <td align="center" class="mld-part" valign="top">&nbsp;</td> </tr> </table> </td> </tr> <tr class="mld-body mld-body-1"> <td align="center" valign="top"><!-- LAOYUT BODY --> <table border="0" cellpadding="0" cellspacing="0" style="width: 600px;"> <tr> <td align="center" class="mld-part" style="background-color: #ffffff;" valign="top">&nbsp;</td> </tr> </table> </td> </tr> <tr class="mld-footer"> <td align="center" valign="top"><!-- LAOYUT FOOTER --> <table border="0" cellpadding="0" cellspacing="0" style="width: 600px;"> <tr> <td align="center" class="mld-part" valign="top">&nbsp;</td> </tr> </table> </td> </tr> </table>

Как видно из примера выше, нужно задать фиксированную ширину. Мы рекомендуем использовать 600px для лучшего восприятия. В этих таблицах можно задать другие стили, например рамки, тени и скругление. Единственное, что можно задать в ячейке – это фон.

Если с этим закончили, то пора начать добавлять содержание нашему письму.

Содержание

Для добавления содержания понадобятся рамки и блоки.

• Рамка – группировка блоков и/или разделение на несколько столбцов
• Блок – для содержимого, например текста, картинки или разделителя.

Рамка

<!-- OUTER FRAME TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-container" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER FRAME TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" valign="top"><!-- Block comes here --></td> </tr> </table> </td> </tr> </table>

Все рамки шириной в 100%.
В ячейке можно задать отступ, но такие опции как тени, фон и т.д. задаются во внутренних таблицах.

Рамка с двумя колонками

Для создания нескольких колонок нужно разделить контейнер во внутренней ячейке.

<!-- OUTER FRAME TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-container" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER FRAME TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" style="width: 300px;" valign="top"><!-- OUTER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-image" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="Image" data-widget="image" height="100" src="image.jpg" style="display: block; border: none;" width="100" /></span></span></span></span></span></span></span></span></span></span></td> </tr> </table> </td> </tr> </table> </td> <td align="left" class="mld-element-content" style="width: 300px;" valign="top"><!-- OUTER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-text" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"> <p style="font-size: 14px; color: #000000 font-family: Arial, Helvetica, sans-serif; line-height: 150%; margin: 0;">Hello world</p> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table>

Рамку можно разделить максимум на 4 колонки. Как и упоминалось, рамки содержат блоки, и постройка шаблона начинается именно здесь.

Блоки

Здесь будут показаны только самые важные блоки:

• Текст
• Картинка
• Кнопка
• Разделитель
• Соцсети

У каждого блока есть свой класс на внешней таблице.

Текстовый блок и блок с заголовком – самые используемые. Они могут содержать один или более тегов span и p. Если нужен блок заголовка, то смените класс mld-block-text на mld-block-title.

<!-- OUTER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-text" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"> <p style="font-size: 30px; color: #000000 font-family: Arial, Helvetica, sans-serif; line-height: 150%; margin: 0; font-weight: bold;">Hello world</p> <p style="font-size: 14px; color: #000000 font-family: Arial, Helvetica, sans-serif; line-height: 150%; margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt urna et sapien mollis, nec tincidunt ligula scelerisque.</p> </td> </tr> </table> </td> </tr> </table>

Блок картинки тоже используется довольно часто, и содержит тег img.

<!-- OUTER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-image" style="width: 100%;"> <tr> <td align="left" style="padding: 0px 0px 0px 0px;" valign="top"><!-- INNER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;"> <tr> <td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="Image" data-widget="image" height="100" src="image.jpg" style="display: block; border: none;" width="100" /></span></span></span></span></span></span></span></span></span></span></td> </tr> </table> </td> </tr> </table>

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

<!-- BBUTTON BLOCK OUTTER --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-button" style="width: 100%;"> <tr> <td align="left" style="padding: 15px 20px 15px 20px;" valign="top"><!-- BBUTTON BLOCK INNER --> <table align="left" border="0" cellpadding="0" cellspacing="0" style=" width:200px; overflow: hidden; border-collapse: separate; background-color: #000000; border-radius: 5px;"> <tr> <td align="center" class="mld-element-content" style="padding:5px 0px 5px 0px;" valign="middle"><a href="#" style="display: block; color: #ffffff; font-family: Arial; font-size: 15px; line-height: 150%; text-align: center; text-decoration:none; font-weight: bold;" target="_blank">Click Me! </a></td> </tr> </table> </td> </tr> </table>

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

<!-- OUTER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-divider" style="width: 100%;"> <tr> <td align="left" style="padding: 15px 0px 15px 0px;" valign="top"><!-- INNER BLOCK TABLE --> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-top: 1px solid #000000;"> <tr> <td align="left" class="mld-element-content" style="padding: 15px 20px 15px 20px;" valign="top">&nbsp;</td> </tr> </table> </td> </tr> </table>

Блок соцсетей имеет две цели. Одна – для ссылки на профиль в соцсети, другая – для размещения поста о кампании в соцсети. Единственное различие – название класса.

Обратите внимание, что внутренний блок не занимает 100% ширины. Можно добавить свои картинки, но если они должны потом редактироваться в блочном редакторе, то нужно использовать стандартные иконки от Mailigen.

P.S. Рекомендуется делать этот блок через редактор.

<!-- BLOCK --> <table border="0" cellpadding="0" cellspacing="0" class="mld-element mld-block mld-block-follow" style="width: 100%;"> <tr> <td align="center" style="padding: 15px 20px 15px 20px;" valign="top"><!-- TEXT --> <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" class="mld-element-content" style="padding: 0px 5px 0px 0px;" valign="top"><a href="#" target="_blank"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="FB" border="0" data-widget="image" height="32" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/facebook.png" style="display: block; border: none;" width="32" /></span></span></span></span></span></span></span></span></span></span> </a></td> <td align="center" class="mld-element-content" style="padding: 0px 5px 0px 0px;" valign="top"><a href="#" target="_blank"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="YT" border="0" data-widget="image" height="32" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/youtube.png" style="display: block; border: none;" width="32" /></span></span></span></span></span></span></span></span></span></span> </a></td> <td align="center" class="mld-element-content" style="padding: 0px 5px 0px 0px;" valign="top"><a href="#" target="_blank"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="TW" border="0" data-widget="image" height="32" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/twitter.png" style="display: block; border: none;" width="32" /></span></span></span></span></span></span></span></span></span></span> </a></td> <td align="center" class="mld-element-content" style="padding: 0px 0px 0px 0px;" valign="top"><a href="#" target="_blank"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><span contenteditable="false" tabindex="-1"><img alt="IN" border="0" data-widget="image" height="32" src="https://admin.mailigen.com/assets/images/social-buttons/style-2/linkedin.png" style="display: block; border: none;" width="32" /></span></span></span></span></span></span></span></span></span></span> </a></td> </tr> </table> </td> </tr> </table>

Как видно, ссылка на стандартные иконки заканчиваются на /style-2/youtube.png. Нужный стиль можно посмотреть по следующей таблице:

Style 1	Style 2	Style 3	Style 4

Встроенный стиль

Можно задать стиль «по умолчанию» для каждого блока или рамки. Нужно задать нужный стиль внутри встроенного стиля со специальным ID.

<!-- Default style--> <style id="mld-def-styles" media="screen" type="text/css"> </style>

Классы стилей текста

• 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 - для ссылок на профиль в соцсети

Например

<!-- Default style--> <style id="mld-def-styles" media="screen" type="text/css">/* Paragraph style */ .mld-def-paragraph { line-height: 1.5; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #393838; } /* Text block style */ .mld-def-block-text { padding: 5px 20px 15px 20px; background-color: #e5e5e5; } /* Button style */ .mld-def-block-button { padding: 10px 0px 10px 0px; width: 150px; overflow: hidden; border-collapse: separate; background-color: #ec2027; border-radius: 5px; } .mld-def-block-button-text { display: block; color: #ffffff; font-family: Arial; font-size: 16px; line-height: 150%; text-align: center; text-decoration: none; font-weight: bold; } </style>

Другие стили

Чтобы сделать шаблон отзывчивым или спрятать элементы нужно добавить встроенный стиль в head:

<style media="screen" type="text/css">/* Media Query for mobile */ @media screen and (max-device-width: 600px), screen and (max-width: 600px) { .mobile100{width:100% !important; height:auto !important;} .mobilesplit{width:100%!important; float:left !important;} .mld-mobile-hide {display: none !important;} } @media screen and (max-device-width: 500px), screen and (max-width: 500px) { .mobile1001{width:100% !important; height:auto !important;} } @media screen and (max-device-width: 400px), screen and (max-width: 400px) { .mobile1002{width:100% !important; height:auto !important;} } </style>

Классы mobile100 и mobilesplit будут добавлены автоматически, но если нужно что-то скрыть, то добавьте класс mld-mobile-hide.

Не забудьте использовать поля персонализации в коде!

И помните

• Используйте широко распространенные шрифты, например Arial
• Старайтесь удержать шаблон в пределе 100 Кб
• Избегайте HTML5 и CSS3 из-за недостаточной поддержки
• Не используйте Flash или JavaScript во избежание попадания в спам
• Проверяйте код на валидность
• Оптимизируйте изображения для более быстрой загрузки

---

Мы приготовили пример шаблона! :)