Следующая статья поможет вам: Фоновые изображения электронной почты: руководство (с примерами)
Пару месяцев назад я получил электронное письмо от Академия HubSpot о различных доступных курсах. Я запомнил эту часть письма именно потому, что мне понравилось использование фонового изображения. Я большой поклонник того, как компании находят отличные способы максимизировать содержимое своей электронной почты — и один из способов сделать это — использовать фоновое изображение.
Вместо изображения, используемого в качестве звезды электронной почты, фоновые изображения являются чем-то вроде вспомогательных символов. Они, как правило, могут быть многоуровневыми, поэтому вы можете добавлять мультимедиа поверх них. Применение HTML к фоновым изображениям имеет решающее значение, потому что они позволяют вашему изображению — и содержимому поверх него — вписаться в представление читателя электронной почты.
Ознакомьтесь с этим письмом, которое я получил от JetBlue, ниже. Их фоновые изображения представляют собой простые высококачественные фотографии пункта назначения с подписью, гиперссылкой и текстом с подробным описанием пункта назначения. Все эти факторы являются составляющими отличного фонового изображения.
Note текст под фоновыми изображениями часто является предложением или эксклюзивом. Их здорово использовать таким образом, потому что изображение увлекает читателя, а предложение побуждает их щелкнуть, повышая этот драгоценный CTR для вас.
Теперь мы рассмотрим, как создать фоновое изображение электронной почты с помощью маркетинговых инструментов HubSpot.
1. Создайте новый модуль электронной почты.
На панели инструментов HubSpot перейдите на вкладку «Маркетинг», затем наведите указатель мыши на «Файлы и шаблоны» и нажмите «Инструменты дизайна». Это перенесет вас в пространство, где вы сможете создавать новые модули, такие как кнопки CTA или новые дополнения к вашему веб-сайту.
Оттуда нажмите «Файл»> «Новый файл»> «Модуль» во всплывающем окне.
После выбора «Модуль» должно открыться всплывающее окно. Все, что вам нужно сделать в этом всплывающем окне, это установить флажок с надписью «Шаблоны электронной почты» в разделе
Убедитесь, что это локальный файл, и назовите его соответствующим образом. На изображении ниже я назвал файл «Фоновое изображение по электронной почте». Затем нажмите оранжевую кнопку «Создать».
2. Создайте и назовите редактируемые поля.
Редактируемые поля — это компоненты вашей электронной почты, которые вы можете обновлять и изменять после создания модуля. Мы собираемся создать форматированный текст, чтобы вы могли редактировать текст своих писем и изображения. Для этого посмотрите на правую панель инструментов в разделе «Поля».
Нажмите команду «Добавить поле» и введите в строке поиска «Изображение» и назовите его «Фоновое изображение». Затем введите «Rich text» и назовите его «Content». Эти имена помогут вам отметить, с чем вы работаете (это действительно помогает).
Теперь ваша панель инструментов должна выглядеть так.
Чтобы сэкономить время, давайте настроим поля прямо сейчас. Отредактируйте поле «Фоновое изображение» и добавьте свое изображение. Я использовал стоковое фото, которое сохранил в файловом менеджере HubSpot. Вы сможете найти все фотографии, которые вы загрузили в HubSpot, щелкнув пространство изображений.
После того, как вы добавили свое изображение, пришло время добавить текст вашего электронного письма. В редакторе расширенного текста вы можете добавить CTA, различные шрифты и по-настоящему оживить его своим брендом. Я пошел очень просто.
Хороший совет, на который стоит обратить внимание: убедитесь, что ваш текст белый, когда вы закончите; оно будет лучше смотреться на изображении, если оно темное. Я выделил свой текст, потому что он уже был белым.
3. Создайте исходный код модуля.
Вам понадобится код. Направляйтесь сюда для примера кода для создания фонового изображения. Получив код, скопируйте и вставьте его в раздел HTML и HubL. Это то, что позволяет модулю и текстовым полям, которые вы создали, действительно отображаться.
Важно отметить, что в приведенном выше примере кода используются имена модулей «контент» и «фоновое изображение». Если вы дадите своим текстовым полям и полям модуля другое имя, вам потребуется обновить исходный код модуля, чтобы отразить эти изменения, что потребует некоторого знакомства с HTML и HubL.
После добавления кода модуля при открытии «Предварительного просмотра» вы сможете увидеть свой текст и фоновое изображение.
В коде есть разделы, где вы можете вставить свой логотип и социальные ссылки на свой контент.
Они находятся в строках 24-30. Эти записи, а именно строки 24, 26, 28 и 30, состоят из двух частей — ссылок и изображений. Ссылки, по которым вы хотите, чтобы посетители переходили, когда они нажимают на вашу социальную сеть, должны быть заключены в кавычки там, где вы видите
Например, если бы мы хотели, чтобы посетители попадали на нашу домашнюю страницу, когда они нажимали на наш логотип, мы бы отредактировали href в строке 24 следующим образом: https://www.hubspot.com“>.
Чтобы определить свой логотип и дать каждой платформе социальных сетей значок, на который пользователи могут щелкнуть, вам также необходимо указать URL-адрес источника изображения. В каждой из этих строк вы должны увидеть HTML-код, который выглядит примерно так:
Замените «#» URL-адресом любого изображения, которое вы хотели бы использовать. Если вы не хотите включать логотип и значки социальных сетей, вы можете безопасно удалить строки 22–31 из примера кода.
4. Предварительный просмотр и публикация.
Ваше фоновое изображение должно выглядеть примерно так. Я уверен, что он выглядит более нарядным, чем мой, но это общая идея.
Это шаблон для электронных писем с фоновым изображением, который не только экономит время на создание писем, но и делает их единообразными. Когда клиенты открывают ваши электронные письма, они должны знать, от кого они получают сообщение и почему. Фоновые изображения электронной почты — это шанс добавить индивидуальности корпоративным электронным письмам.
Когда я получаю электронные письма от Академии HubSpot, я знаю, благодаря фоновым изображениям и брендингу, что просматриваю электронное письмо от HubSpot.
Когда я получаю электронные письма от JetBlue, фоновые изображения и шрифты являются четким индикатором бренда компании. Фоновые изображения электронной почты улучшают вашу маркетинговую стратегию. Дайте им попробовать ваше следующее электронное письмо сегодня.