В этой статье мы собрали девять идей, как сделать ваши рассылки заметнее среди писем конкурентов и повысить вовлечённость получателей.
В первой части расскажем о том, как добавить скрытый прехедер и сделать гифку из фотографий товара, создать динамический аватар отправителя, а также анимированные фон и кнопки.
При загрузке гифок в редактор Unisender рекомендуем не выбирать файлы большого размера, так как вы можете получить ошибку. Чтобы сжать картинки без потери качества, используйте онлайн-сервисы, например iloveimg.
#1. Динамический аватар в подписи
Возможно, вы используете подпись с фото в рассылках, но есть способ сделать ее более заметной — создать динамический аватар в виде гифки. Например, так выглядит аватар в письм Skyeng.
Как сделать в редакторе
Вам нужна гифка, которую вы будете использовать как аватарку. Если такой гифки нет, запишите видео и сделайте из него гифку. Разберём на примере такого видео:
Сделать гифку из видео можно с помощью одного из онлайн-конвертеров, например cloudconvert. Откройте этот сервис и нажмите «Select file», затем выберите файл на компьютере.
Кликните «Convert».
Дождитесь окончания конвертации и нажмите «Download».
Готово, гифка скачана. Теперь обрежьте её, чтобы сделать круглой. Для этого также есть много онлайн-инструментов, например OnlineGIFTools.
Кликните на квадрат слева, чтобы загрузить картинку, затем укажите нужные настройки в блоке ниже.
Выберите «Crop a Circle», чтобы сделать изображение круглым, а не прямоугольным.
В поле слева задайте область для обрезки и убедитесь, что в поле справа вы получили нужный результат.
Чтобы скачать GIF, кликните «Save as...», затем «Download».
Аватарка готова. Теперь зайдите в редактор Unisender и перетащите с панели справа на письмо элемент «Картинка».
Вставьте гифку, которую вы уже скачали. Аватар готов.
#2. Анимированный фон
Чаще всего гифки добавляют в рассылки как отдельные блоки, однако их можно использовать и в качестве фона. Поверх фона можно разместить текст, кнопки или другие картинки.
Вот как Headspace использует фоновые анимации в своих письмах:
В рассылке Adobe фон и вовсе выглядит как несколько слоёв. Так с помощью одной картинки можно создать визуальную глубину.
Как сделать в редакторе
Добавьте блоки, где будут размещаться текст и кнопка на анимированном фоне. Отредактируйте и настройте свойства элементов.
Теперь выделите блок, далее на панели справа в поле «Фон» добавьте нужную гифку.
Загрузите гифку и вставьте её. Проверьте, как выглядит текст на фоне гифки. Если нужно, измените свойства текста.
Некоторые почтовые клиенты могут не отображать фоновые изображения (например, MS Outlook). Чтобы текст письма остался читабельным, если фон не отобразится, дополнительно к фоновому изображению укажите цвет фона контента в свойствах строки. Желательно, чтобы цвет фона соответствовал цветовой гамме изображения.
Чтобы задать цвет фона для блока, выделите его, затем в правой панели настроек укажите нужный цвет фона контента.
#3. Демонстрация брендов или товаров в гифке
Если вы хотите показать в письме товары или услуги, вы можете не размещать их все отдельно, а уместить в одну анимацию.
Например, так Lamoda показывает бренды, на которые распространяется скидка.
А так HBO Max демонстрирует фильмы и сериалы, которые доступны для просмотра на сайте.
Письмо подтверждения подписки HBO Max
Как сделать в редакторе
Вам понадобится гифка. Если готовой гифки нет, создайте её из статичных картинок. Также гифки можно найти через встроенный поиск в «Центре изображений» в самом редакторе. Чтобы найти гифку нажмите на изображение, выберите «GIF» и вбейте в поиск нужную тематику.
Далее рассмотрим, как создать гифку в онлайн-сервисе Ezgif.
Зайдите на сайт, кликните «Choose files» и выберите все картинки, из которых вы хотите сделать гифку. Затем кликните «Upload and make a GIF!».
Разместите картинки в нужном порядке и установите задержку в секундах, в поле «Delay».
Задайте остальные настройки или оставьте значения по умолчанию. Обратите внимание на поле «Loop count». Если оставить его пустым, гифка будет проигрываться бесконечно.
Пролистайте вниз, проверьте, что GIF выглядит правильно и кликните «Save».
Теперь откройте редактор Unisender. На вкладке «Блоки» выберите один и перетащите на письмо.
В левую колонку добавьте элемент «Картинка», в правую — элементы «Текст» и «Кнопка».
Выделите блок на панели слева в настройках задайте нужный цвет фона контента.
Далее в каждом блоке также укажите цвет фона.
Перейдём к редактированию кнопки. Выделите кнопку и в настройках, в поле «Сайт» вставьте ссылку, которая будет открываться по клику на кнопку.
Задайте все остальные свойства кнопки.
Далее добавьте гифку и настройте текст — шрифт, размер, цвет, начертание.
Сохраните письмо и отправьте тестовое себе на почту для проверки.
#4. Добавить прехедер
Прехедер — это часть письма, которая отображается в вашем почтовом ящике сразу после темы. Даже если вы не указываете прехедер специально, почтовые сервисы будут автоматически отображать первый текст из письма, делая его прехедером. Если вы не хотите, чтобы текст прехедера был виден внутри письма, вы можете сделать невидимый прехедер в виде блока с HTML-кодом. В самом письме он не будет отображаться, зато будет виден в списке писем.
Так выглядит прехедер в письме Aliexpress:
А так — в письме Google.
Как сделать в редакторе
В редакторе Unisender текст для прехедера можно добавить вручную или сгенерировать с помощью нейросети.
Чтобы добавить прехедер вручную, заполните поле «Прехедер», расположенный над рабочей областью редактора.
Чтобы прехедер вашего письма стал более цепляющим, можно использовать AI-ассистента. Для этого создайте письмо, затем найдите иконку AI-ассистента в правом углу редактора и активируйте ее. Система предложит оптимальные варианты для вовлечения аудитории.
Далее выберите роль «Генератор темы и прехедера». Ассистент проанализирует контент письма и предложит несколько вариантов на выбор.
Чтобы выбрать понравившийся вариант, нажмите на него. Текст автоматически добавится в нужное поле.
#5. Анимированная кнопка
Сделайте кнопку с анимацией, чтобы привлечь внимание подписчика. Это может быть кнопка с эффектом подсвечивания, изменением градиента цветов или, например, анимированная иконка.
Письмо GeekBrains с анимированной кнопкой
Как сделать в редакторе
Чтобы добавить анимированную кнопку в письмо, понадобится кнопка в виде гифки. Если у вас нет такой кнопки, можно создать её онлайн, например с помощью инструментов TextDrom.
Так выглядит сайт.
В меню слева выберите нужный вариант, далее задайте текст, шрифт, цвета и остальные параметры. После того как вы отредактируете текст, кликните «Сохранить».
Теперь перейдите в редактор Unisender. Перетащите на письмо элемент «Картинка».
Вставьте в картинку гифку с кнопкой, которую вы создали до этого.
Добавьте фон и остальные блоки, если требуется.
Сохраните письмо в редакторе и отправьте тест себе на почту. Так выглядит письмо с анимированной кнопкой из примера:
8 идей, как сделать письмо более кликабельным и запоминающимся. Часть 2
