3500
Материал основан на переводе официальной документации MailChimp - https://templates.mailchimp.com/getting-started/template-language/
В этой статье мы расскажем, как создавать редактируемые шаблоны в MailChimp, используя их собственный язык разметки, благодаря которому вы сможете создавать и редактировать письма прямо внутри рассыльщика. И использовать эти шаблоны снова и снова изменяя контент под ваши нужды и при этом не имея знаний в HTML и CSS.
Создание редактируемых областей
Mc:edit
Mc:edit – делает конкретный элемент редактируемым внутри шаблона.
Добавляя mc:edit=”$unique_name” в HTML элемент, вы позволяете этому контенту быть редактируемым внутри стандартного редактора MailChimp.
Имя используемое в mc:edit должно быть уникальным в любом случае.
Mc:edit=”” должно использоваться в диве, ячейке таблицы или любом другом элементе, который можно рассматривать как контейнер.
Mc:edit может быть размещен в <img> элементе. Это позволит приложению менять изображение, загружая его через редактируемую область.
Имя которое вы назначаете для mc:edit используется для создания полей в базе данных для хранения пользовательского контента. Если пользователь сменяет шаблоны после написания контента, он потеряет свой текст в случае того, если пробелы между словами в названии не соответствуют критериям редактирования. Ниже описаны примеры того, как нужно называть редактируемые области в mc:edit.
Mc:edit=”header” – используйте это имя для шапки
Mc:edit=”header_image’ – используйте это имя для того, чтобы сделать изображение в шапке редактируемым
Mc:edit=”sidebar” – используйте это имя для редактирования левой или правой колонки
Mc:edit=”body” – используйте это имя для разметки главного контента в вашем письме
Mc:edit=”footer” – используйте это имя при наименовании подвала вашего письма
Вот несколько вещей которых стоит опасаться при использовании mc:edit при создании редактируемых областей. Не надо вкладывать редактируемые элементы в другой редактируемый элемент. Очень не рекомендуется размещать редактируемые изображения внутри редактируемого контент контейнера. Также помните, что контент добавленный через окно редактирования привязан к названию mc:edit тега. И если вы измените имя после сохранения контента в шаблон, то вы потеряете весь контент.
Mc:hideable
Mc:hideable используется для действия скрытия/раскрытия любого элемента в шаблоне
Syntax: mc:hideable
Используйте mc:hideable для каждого HTML элемента
Избегайте размещения mc:hideable тэга на элементах, у которых уже есть тэг mc:repeatable. Когда элемент скрыт, он не будет виден при отправке письма через Mailchimp. Помните, что вообще нет ограничений в использовании mc:hideable. Совершенно любой элемент может быть скрыт при рассылке.
Нет нужды в добавлении названия для mc:hideable тега. Как пример mc:hideable=”$name”
Если вы редактируете скрываемые секции в редакторе кампаний, используя кнопку удаления в шаблоне, помните, что секция не исчезнет в окне редактора. Секция, которую вы захотите удалить слегка загасится, но останется на своём месте – просто на всякий случай если вы захотите использовать это место. В любом случае, когда вы будете отправлять ваши письма, секция которую вы «удалили» не будет показываться в вашей компании. Вы с легкостью сможете увидеть изменения, кликнув на предпросмотр.
Кнопки удаления и скрытия не несут в себе одинаковый функционал в редактрое шаблонов. По факту, вы не можете удалить что-либо работая в этом редакторе. Если вам нужно сделать подобные изменения, то вам лучше воспользоваться редактором кампаний, вместо редактора шаблонов.
Mc:repeatable
Mc:repeatable используется для действий дубликации конкретных элементов внутри шаблона.
Синтаксис: mc:repeatable
Используйте mc:repeatable для блочных элементов, таких как <div> или <p>, за исключением списков или инлайновых инлайновых элементов как <img>, <a> и <span>.
Mc:repeatable и mc:edit могут быть использованы на одном и том же элементе, но вложение mc:repeatable под mc:edit зарендерит контент, который редактируемый, но не повторяющийся.
Mc:label
Mc:label это опциональный тэг, используемый для наименования редактируемых секций внутри приложения.
Синтаксис: mc:label=”header_image”
Используйте mc:label на любом mc:edit элементе.
Если не указано имя mc:label, то приложение будет использовать имя из mc:edit.
Mc:variant
Mc:variant используется для смены дискретных блоков в HTML.
Mc:variant должен использоваться в связке с mc:repeatable.
Синтаксис: mc:repeatable=”product” mc:variant=””
Используйте mc:vatiant на каждом дискретном HTML элементе, между которыми хотите переключиться
Mc:variant блоки должны быть вложены друг в друга
Mc:variant блоки должны быть смежными в HTML.
<!-- // Begin Module: Left Image with Right Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="image_with_content" mc:variant="content with left image">
<tr>
<td align="center" valign="top">
<img src="/..." mc:edit="left_image" />
</td>
<td valign="top">
<div mc:edit="right_content">
<h4 class="h4">Heading 4</h4>
Lorem ipsum dolor sit amet.
</div>
</td>
</tr>
</table>
<!-- // End Module: Left Image with Right Content \\ -->
<!-- // Begin Module: Right Image with Left Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="image_with_content" mc:variant="content with right image">
<tr>
<td valign="top">
<div mc:edit="left_content">
<h4 class="h4">Heading 4</h4>
Lorem ipsum dolor sit amet.
</div>
</td>
<td align="center" valign="top">
<img src="/..." mc:edit="right_image" />
</td>
</tr>
</table>
<!-- // End Module: Right Image with Left Content \\ -->
Определение редактируемого CSS
Объявление стиля блока. Тут применяется простая структура вне зависимости от стиля элемента. В примере ниже показана стилизация заголовка:
/**
* @tab Page
* @section heading 1
* @style heading 1
*/
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:34px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ text-align:left;
}
Каждый набор правил CSS открывается с блока объявления правила:
**
* @tab Page
* @section heading 1
* @style heading 1
*/
Где @tab определяет вкладку под которой вы можете организовать несколько редактируемых стилей. Лучше всего это использовать для таких групп как header, sidebar или footer.
@section определяет подраздел внутри вкладки. Лучше всего это использовать для узкоспециализирующихся групп, таких как контент тела письма, ссылки в подвале или цвета фона. @section может охватывать стили из разных элементов и областей. @section body, к примеру, может иметь стили для фона таблицы, вместе со стелями текста и ссылок. @section сам по себе опционален, но очень рекомендуется к использованию.
@style позволяет вам добавлять наборы правил для выпадающих меню в окне редактора. Это способствует заметному облегчению применения CSS для любого выбранного текста. @style должен быть использован только в текстовых стилях. Сам по себе @style опционален.
Перед каждым редактируемым CSS значением должно стоять @editable
h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:34px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ text-align:left;
}
@editable нужно использовать для каждого стиля, который будет редактироваться в редакторе кампаний MailChimp.
