Как создавать редактируемые шаблоны в MailChimp

Материал основан на переводе официальной документации 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.

3 ошибки в SMM которые вы возможно допускаете и как их избежать

Влияние персонализации поисковой выдачи на SEO

CTR или CTOR? Какие метрики использовать в email маркетинге

Как применять SEO для генерации лидов

Получай лучшие статьи по
интернет-маркетингу на
свою почту