Принципы разметки и генерация классов

Разметка email-шаблонов – зачастую трудоемкий процесс, требующий внимательности и понимания тонкостей работы с HTML и CSS. Однако, благодаря концепции, основанной на атрибуте em, эта задача может быть значительно упрощена и автоматизирована.

В этой статье мы подробно рассмотрим ключевые элементы этой концепции: em=»atom», em=»block» и em=»group», а также то, как они работают в связке с классами, генерируемыми редактором.

Что такое em=«» и зачем он нужен?

Это система разметки, позволяющая структурировать email-шаблон таким образом, чтобы редактор мог корректно интерпретировать структуру, управлять стилями и обеспечивать целостность верстки.

Его основная цель – предоставить гибкий и предсказуемый способ добавления, удаления и объединения стилей, сохраняя при этом контроль над внешним видом шаблона.

Редактор базируется на трех ключевых типах элементов, определяемых атрибутом em:

• em=»atom» – Элементы: Это базовые строительные блоки шаблона, такие как контейнеры для текста, изображений и других компонентов.

В коде это выглядит следующим образом:

<table cellpadding="0" cellspacing="0" border="0" width="100%" em="atom">
   <tr><td>
     <img src="" width="600" border="0" alt="" style="display: block; width: 100%; max-width: 600px;">
    </td></tr>
</table>

• em=»block» – Блоки: Представляют собой структурные элементы, которые позволяют организовывать контент в логические группы. Блок может быть строкой таблицы с атрибутом, однако, важно отметить, что блоки не обязательно должны быть строками, пользователь может самостоятельно назначать любые подходящие теги блоками. Внутри таблицы, сужающей контент блоки обычно применяются к строкам, сужающим контент.

Пример кода:

<tr em="block" class="em-structure">
  <td align="center" style="padding: 30px 40px;">
    <table border="0" cellspacing="0" cellpadding="0" class="em-mob-width-100perc">...</table>
  </td>
</tr>

• em=»group» – Группы: Объединяют блоки, формируя более крупные структурные единицы. Например, группа может представлять собой секцию шаблона с определенным набором блоков.

В коде это обычно строка таблицы, добавляемая полосой на всю ширину рабочей области:

<tr em="group">
			<td align="center">
				<!--[if (gte mso 9)|(IE)]>
				<table cellpadding="0" cellspacing="0" border="0" width="600"><tr><td>
				<![endif]-->
				<table cellpadding="0" cellspacing="0" width="100%" border="0" style="max-width: 600px; min-width: 600px; width: 600px;">...
				</table>
				<!--[if (gte mso 9)|(IE)]>
				</td></tr></table>
				<![endif]-->
			</td>
		</tr>

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

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

Редактор поддерживает импорт писем из Stripo, Sandsay, Beefree, Chamaileon, Mindbox, Unlayer, Postcards, Topol, Sender, Letteros, MakeMail и Emailify.

Стили и классы в письме

Блок стилей <style em=»styles»> используется для определения стилей, которые будут динамически изменяться редактором.

Когда добавляются стили к элементам с атрибутами em, редактор генерирует классы, используя префикс, свойства и значения стилей. Эти классы применяются к соответствующим элементами и при этом происходит объединение стилей, что позволяет избежать конфликтов и упростить управление внешним видом шаблона в мобильной версии писем.

P.S. Чтобы определенные стили всегда оставались неизменными, их следует разместить в блоке <style> без атрибута em .

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

Когда редактор определяет элементы с атрибутом em и добавляет к ним стили, он автоматически генерирует классы, которые позволяют управлять внешним видом этих элементов.

Структура классов обычно состоит из префикса, свойства и значения стиля.

Например, для элемента с автоматической высотой, будет создан класс:

.em-mob-height-auto {
   height: auto!important;
}

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

• em-mob-wrap: используется для переноса колонок на мобильных устройствах.

• em-mob-wrap-cancel: отменяет перенос колонок на мобильных устройствах.

• em-mob-padding: задает отступы на мобильных устройствах (значение может быть в пикселях «px» или в процентах «perc»).

• em-mob-width: задает ширину элемента на мобильных устройствах.

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

.em-font-Manrope-SemiBold {
    font-weight: 600!important;
}
.em-font-Manrope-Regular {
    font-weight: 400!important;
}

Атрибуты делают структуру шаблона понятнее, автоматически создают CSS-классы и позволяет легко управлять стилями. Благодаря этому, можно создавать адаптивные email-шаблоны, которые хорошо выглядят на телефонах, планшетах и компьютерах.