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

Опубликовано: 2021-06-22

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

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

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

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

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

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

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

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

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

Как создать собственный шаблон Mailchimp

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

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

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

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

Джулз Джозеф

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

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

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

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

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

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

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

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

Вставьте свой стиль CSS

В первую очередь стоит упомянуть, что Mailchimp автоматически встраивает ваши встроенные стили CSS, когда вы сохраняете свой шаблон на платформе. Так что, когда вы начнете разработку, вам будет проще встроить все свои стили и ограничить раздувание кода.

Создавайте ряды модулей

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

<!--modules that can be re-ordered-->
<!--module 1-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 1-->
<!--module 2-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 2-->

После закрытия родительской таблицы вы не сможете изменить порядок строк после этого момента.

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

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

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

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

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

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

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

Применить язык шаблонов 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 | *
Дайте подписчикам возможность обновлять свою информацию или управлять своими предпочтениями.

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

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

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

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

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

Mailchimp: выберите отправную точку для вашего шаблона

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

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

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

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

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

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

Выберите шаблон в Mailchimp

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

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

Редактирование элемента в вашем шаблоне Mailchimp

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

Перестановка блоков в шаблоне Mailchimp

Не забудьте протестировать рендеринг электронной почты

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

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

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

Получите готовые пользовательские шаблоны

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

Бесплатный шаблон Mailchimp, созданный с помощью Litmus

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

Загрузите наш шаблон Mailchimp →

бесплатный шаблон электронной почты Mailchimp от Litmus

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

Шаблоны писем, созданные партнерами Mailchimp

Чтобы получить еще больше возможностей, посетите Mailchimp Marketplace с красивыми шаблонами электронной почты, разработанными сервисными партнерами Mailchimp.

Шаблоны Mailchimp в Mailchimp Marketplace

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

Ваш идеальный пользовательский шаблон Mailchimp находится в пределах досягаемости

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

изображение электронной почты с зеленой галочкой и смайликом

Убедитесь, что ваш шаблон Mailchimp отлично выглядит

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

Получить бесплатную пробную версию Litmus →