Следующая статья поможет вам: Как я БЕСПЛАТНО создал собственное электронное письмо в формате HTML в MailChimp
Многие из наших клиентов используют MailChimp для своих маркетинговых рассылок по электронной почте. MailChimp — потрясающий продукт с отличной доставляемостью и множеством полезных функций, включая заранее разработанные макеты и полностью разработанные красочные темы. Вы можете создать эффективную кампанию по электронной почте, не зная ни строчки кода — просто перетаскивайте блоки контента и загружайте изображения. Сделанный.
Но если вы не знаете ни строчки кода, вам может быть сложно отправить идеально адаптированное сообщение своим подписчикам. Одна из услуг Мэрион по электронному маркетингу в Остине и Хьюстоне — индивидуальный дизайн электронных писем. Мы создаем дизайн вашей электронной почты, преобразуем ее в HTML, а затем отправляем вашу уникальную кампанию, используя функцию MailChimp «Создай свой собственный код».
Ну, если вы не используете бесплатную учетную запись MailChimp. Включите грустную музыку.
Обходные пути для пользовательского HTML-кода MailChimp
Недавно у меня было задание по маркетингу электронной почты в Хьюстоне: преобразовать одобренный клиентом макет электронного письма из Photoshop в HTML, а затем использовать бесплатную учетную запись MailChimp клиента для отправки кампании. Но оказывается, что я не смогу написать HTML и вставить его в шаблон Code Your Own. Потому что в бесплатной учетной записи MailChimp у вас есть доступ только к некоторым макетам и темам и вообще нет доступа к среде Code Your Own.
Я не зря использовал модификатор «одобрено клиентом» в предыдущем предложении. На этом этапе было бы сложно вернуться к клиенту и сказать, что мы не можем выполнить обещанное. Они ожидают, что мы отправим дизайн, за который он заплатил, через MailChimp. Завтра.
Я нервно рассматривал варианты. Конечно, срок должен был быть на следующий день, потому что… жизнь. (Напряженная музыка, вероятно, с высокой устойчивой скрипкой и повторяющейся синтезаторной базой, медленно увеличивающейся по громкости.)
Макет включал в себя раздел из трех колонок, который нужно было располагать вертикально на мобильных устройствах, а также пару других особенностей дизайна, не похожих ни на один блок контента в макетах MailChimp. Я просмотрел доступные шаблоны, чтобы увидеть, близки ли они к макету. Кроме логотипа вверху, ни один из них не подошел. Несколько рядов в глубине макета представляют собой трехколоночные конструкции, но они с тем же успехом могут быть и на Юпитере, поскольку предназначены только для платных клиентов.
Использование блока кода
Я с некоторым облегчением обнаружил, что макеты, к которым я мог получить доступ, включают блок кода:
Блок кода позволяет перетащить раздел HTML в электронное письмо, чтобы отобразить контент, который в противном случае был бы невозможен с помощью других блоков. Например, вам может потребоваться отобразить изображение в электронном письме от края до края, то есть в стиле «Плоский дизайн». Вы не можете сделать это с блоком «Изображение», он всегда будет добавлять пространство вокруг ваших изображений. Но с помощью блока кода вы управляете всеми параметрами отображения.
Cue Happier Music: Извините, что испортил напряжение, но я приручил этого зверя с помощью бесплатного макета MailChimp. Вот как я это сделал:
Я предпочитаю начинать с самой сложной проблемы: адаптивного раздела с тремя колонками. Я уже знал, что у MailChimp есть код, который вы можете повторно использовать для этой цели, и он доступен в его раздел поддержки. Единственная проблема заключается в том, что код MailChimp имеет макет из двух столбцов. Будет ли он также отображать три столбца?
Я знал, что буду чувствовать себя намного лучше, если этот кусочек встанет на свои места. Я скопировал HTML и CSS из Адаптивные столбцы: инструкции и открыл его в своем редакторе кода. В версии с двумя столбцами использовалась процентная ширина столбцов (50%). Итак, я скопировал средний столбец и вставил его в код, где он должен быть, а затем изменил ширину на 33%.
Пока все было хорошо, теперь я мог видеть три столбца, в которых ничего не сломалось и не отображалось странно. Я также заметил, что изображениям, использованным в уроке, была присвоена фиксированная ширина, из-за чего столбцы были слишком широкими для сообщения. Изменение ширины этих изображений на 100% (чтобы они заполняли свои контейнеры и не превышали их) помогло, все подошло.
Чтобы проверить это, я вставил свой код в блок кода, а затем воспользовался встроенным средством предварительного просмотра MailChimp, чтобы проверить, располагаются ли столбцы по ширине мобильного устройства. Там все выглядело хорошо, поэтому я отправил его на свою электронную почту и с облегчением увидел, что раздел из трех столбцов ведет себя отзывчиво в реальном электронном письме.
Завершение создания индивидуальной электронной почты Mailchimp
Верхняя часть макета представляла собой плоский дизайн, состоящий из изображений без полей рядом с цветными полями текста без промежутков между ними. Кодовый Блок снова приходит на помощь! Это намного проще, чем адаптивные столбцы.
Загрузите свои изображения в библиотеку MailChimp и скопируйте исходный URL. Сам блок кода предоставляет пример кода для изображений и текста. Единственная проблема — убедиться, что размер вашего изображения уже соответствует размеру макета. Макеты MailChimp имеют ширину 600 пикселей. Даже если изображение большего размера масштабируется в соответствии с шириной вашего предварительного просмотра, оно может превышать ширину макета в почтовых клиентах, что приводит к разного рода проблемам.
Все, что осталось, — это еще одна секция из двух колонок над секцией из трех колонок. Это не была пара 50%-ных столбцов. Я изменил проценты, чтобы они соответствовали макету. Легкий. Тот же код, который я позаимствовал из раздела поддержки, работал правильно.
Подробности
Решение больших проблем уменьшило мой стресс. Конечно, в любом красивом дизайне есть сотня деталей, включая шрифты, размер текста, высоту строк, цвета, ссылки, кнопки и так далее. MailChimp имеет адекватные инструменты для получения правильной информации даже в бесплатной учетной записи.
Я люблю блок кода. Просто… пожалуйста…………. оставайся свободным.
Позвольте WIX помочь вам с вашим интернет-маркетингом сегодня
Если вы ищете компанию по интернет-маркетингу в Хьюстоне, поговорите со стратегом из команды WIX сегодня! У нас почти 40-летний опыт маркетинга в обслуживании предприятий в Техасе, а также успешный опыт традиционного и цифрового маркетинга.
Свяжитесь с нами сегодня запишитесь на бесплатную консультацию и узнайте, как мы можем помочь вашему бизнесу расти уже сегодня!
