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

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

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

💡 ㅤРедактор поддерживает импорт писем из Stripo, Sandsay, Beefree, Chamaileon, Mindbox, Unlayer, Postcards, Topol, Sender, Letteros, MakeMail и Emailify. Также при добавлении верстки стороннего редактора, сервис предложит конвертировать письмо, адаптируя его под структуру сервиса.

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

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

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>), так и начинаться с таблицы (тег <table>). В зависимости от того, с какого тега начинается блок, ему можно присвоить атрибут блока.

В редакторе атрибут блока присваивается строке (тег <tr>):

<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>) письма:

<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>

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

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

💡 ㅤЧтобы стили всегда оставались неизменными, их следует разместить в блоке <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: задает ширину элемента на мобильных устройствах.