Как создать пользовательские шаблоны Mailchimp, которые действительно работают идеально

Создание каждого письма с нуля занимает слишком много времени, поэтому наличие многоразового, проверенного и надежного шаблона электронного письма может значительно повысить эффективность вашего рабочего процесса. Однако создание собственного шаблона само по себе может стать настоящим приключением — даже для Mailchimp, второго по популярности поставщика услуг электронной почты (ESP) согласно нашему отчету о состоянии поставщиков услуг электронной почты.

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

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

Именно поэтому мы сотрудничали с Mailchimp и другими экспертами при написании этой статьи, чтобы ваши шаблоны Mailchimp действительно работали идеально.

## Разница между готовыми шаблонами Mailchimp и пользовательскими шаблонами

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

Так зачем создавать пользовательский шаблон?

Шаблоны Mailchimp легко редактируются, чтобы любой бренд мог использовать их со своими фирменными цветами и стилем. Это может усложнить контроль за их использованием и обеспечение единообразия фирменного стиля от письма к письму. Создание пользовательского шаблона гарантирует, что многие стили, которые вы встраиваете в шаблон, не будут изменены.

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

## Как закодировать пользовательский шаблон Mailchimp

Готовы создать собственный шаблон электронного письма для Mailchimp? Читайте дальше, чтобы узнать советы и хитрости, которые помогут сделать это правильно.

### Подумайте о своих целях и конечных пользователях

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

Джулз Джозеф, консультант по email-маркетингу и мотиватор в маркетинге, говорит:

«Спросите себя: «Чего мы пытаемся достичь с помощью этого?»

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

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

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

Например, промо-шаблон должен быть сфокусирован на основной цели и призыве к действию (CTA), тогда как информационный бюллетень может иметь несколько различных CTA.

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

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

Спасибо, Джулз, за совет! Как только вы определитесь с целями вашего шаблона, можно приступать к созданию.

### Встраивайте CSS-стили

Одна из первых вещей, о которых стоит упомянуть, — Mailchimp автоматически встраивает ваши CSS-стили при сохранении шаблона на платформе. Поэтому, начиная разработку, вам может быть проще встроить все стили и ограничить раздувание кода.

### Создавайте строки из модулей

Структурируя код, подумайте о блоках, которые вы хотите сделать редактируемыми, особенно о тех, которые вы хотите иметь возможность переставлять. Эти блоки должны находиться в строках, например:

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

### Учитывайте ограничения кнопок

Существует множество способов кодирования кнопки. Однако в пользовательском шаблоне Mailchimp будет работать только кнопка с отступами. Это связано с тем, что многие стили, применяемые к якорным тегам редактируемых кнопок, удаляются автоматически. Формат VML-кода и любые спаны, которые вы размещаете внутри якорного тега, также могут быть изменены.

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

### Используйте изображения точного размера для редактируемых заполнителей

Как и кнопки, изображения теряют часть кода при редактировании. На этот раз удаляются HTML-атрибуты, определяющие ширину и высоту. Outlook полагается на них, и среда редактирования Mailchimp также будет отображать фактический размер изображения, пока вы не вернёте эти атрибуты обратно с помощью редактора.

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

Я рекомендую использовать изображения в 1x для любых заполнителей, которые вы кодируете в своём шаблоне. Затем, когда шаблон используется для кампании, замените заполнитель на изображение 2x (ретина-изображение), указав ширину и высоту на вкладке настроек редактора изображений.

### Применяйте язык шаблонов Mailchimp

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

Для высоконастраиваемых шаблонов, которые могут использоваться несколькими брендами, можно сделать редактируемыми CSS-стили. Для этого следуйте руководству Mailchimp по редактируемым стилям.

В рамках этого руководства мы рассмотрим, как создать шаблон, который ограничивает редактируемость только контентом. Для этого нужно добавить следующий язык к HTML-элементам в шаблоне:

**mc:edit** используется для предоставления действия по редактированию контента для определённого элемента в шаблоне. Убедитесь, что вы используете уникальное имя для каждого экземпляра этого тега в вашем шаблоне.

**mc:hideable** используется для предоставления действия скрытия/показа для определённого элемента в шаблоне.

**mc:label** — необязательный тег, используемый для именования редактируемого раздела в приложении.

**mc:repeatable** используется для предоставления действия дублирования для определённого элемента в шаблоне.

**mc:variant** используется для предоставления возможности переключения между дискретными блоками HTML.

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

### Включайте теги слияния Mailchimp

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

***|MC_PREVIEW_TEXT|*** Добавьте этот тег слияния для предварительного текста в вашу сборку, чтобы во время настройки кампании контент, добавленный в поле предварительного текста, был вставлен в письмо. Хак с предварительным текстом, который мы обычно добавляем в письма Litmus для создания пробела после предварительного текста, не работает в Mailchimp. Не волнуйтесь. Mailchimp задокументировал идеальный способ сделать это для пользовательских шаблонов.

***|UNSUB|***

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

***|UPDATE_PROFILE|***

Дайте подписчикам возможность обновить свою информацию или управлять своими предпочтениями.

***|ARCHIVE|*** Добавьте этот тег слияния к ссылке «просмотреть онлайн», чтобы предоставить людям возможность просмотреть ваше письмо в веб-браузере.

## Как добавить шаблон в Mailchimp

Теперь, когда ваш шаблон закодирован, вы готовы приступить к работе.

Перейдите в раздел «Кампании > Шаблоны электронных писем» и нажмите кнопку «Создать шаблон», чтобы импортировать ваш шаблон.

Самый простой способ добавить шаблон в Mailchimp — загрузить zip-архив с вашим HTML и изображениями, так как Mailchimp сам управляет путями к изображениям.

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

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

## Убедитесь, что ваш шаблон работает в Mailchimp

Существует множество распространённых ошибок в HTML, поэтому рекомендуется проверить, как выглядит опыт редактирования в Mailchimp, прежде чем передавать шаблон вашей команде, клиентам или другим пользователям. Для этого перейдите в раздел «Создать» в главном меню, затем выберите «письмо» и остановитесь на «обычной кампании».

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

Нажав «Создать письмо», вы сможете выбрать шаблон, который хотите использовать. Найдите свой пользовательский шаблон на вкладке «Сохранённые шаблоны».

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

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

**На заметку**: Иногда перестановка блоков контента не работает, поэтому если вы не видите значок со стрелками вверх и вниз при клике на блок, попробуйте дублировать блок, который хотите переставить. Вы можете удалить ненужный дополнительный блок после того, как перетащите нужный блок на новое место.

## Не забывайте тестировать рендеринг писем

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

Именно благодаря такому тестированию я выявлял проблемы с моими шаблонами и обнаруживал некоторые особенности Mailchimp в удалении кода. Вы можете легко протестировать как в редакторе кампаний, так и в редакторе шаблонов, перейдя в раздел «Предпросмотр» и отправив тестовое письмо на свой почтовый ящик или на адрес тестирования Litmus для тщательного автоматизированного предварительного тестирования.

Litmus и Mailchimp также интегрируются несколькими способами, чтобы помочь вам тестировать ваши письма максимально тщательно и эффективно. Перейдите в режим предварительного просмотра и выберите вкладку «Входящие», чтобы запустить тестирование писем с помощью Litmus в Mailchimp. С планами Litmus Plus или Enterprise вы получаете доступ к дополнительным возможностям тестирования и интеграциям, экономящим время, включая возможность тестирования важных элементов перед отправкой с помощью расширения Litmus для Chrome и синхронизации писем между Litmus и Mailchimp.

## Готовые пользовательские шаблоны

Если вы ищете редактируемые шаблоны Mailchimp, которые можно использовать сразу, мы вам поможем.

### Бесплатный шаблон Mailchimp от Litmus

Чтобы помочь вам начать, мы создали пользовательский шаблон Mailchimp, оптимизированный для тёмного режима. Он содержит повторяемые строки, блок переменного контента и кнопку, совместимую с Mailchimp.

Загрузите бесплатный шаблон Mailchimp от Litmus (файл .zip). Затем изучите код, чтобы увидеть, как мы применили код шаблонов Mailchimp, чтобы сделать мини-версию наших бесплатных шаблонов писем Subscriber Love редактируемой в Mailchimp.

### Шаблоны электронных писем от партнёров Mailchimp

Для ещё большего выбора ознакомьтесь с Mailchimp Marketplace, где представлены красивые шаблоны писем, созданные партнёрами-поставщиками услуг Mailchimp.

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

## Ваш идеальный пользовательский шаблон Mailchimp уже близко

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