Екатерина Ярышева

Email-маркетолог

How-To: Как сделать письмо к 8 марта?

Женский день — традиционный инфоповод для рассылок, и хочется, чтобы ваше письмо предстало перед подписчиками во всей красе. Необязательно быть дизайнером, чтобы создать красивую рассылку. Как? Рассмотрим пошагово, как сделать email на 8 марта в нашем онлайн-редакторе сообщений. Дополнительные графические программы нам не понадобятся.

Какие возможности доступны в онлайн-редакторе:

  • Любые игры с фонами: отдельно задаем фон ко всему письму, фон к отдельной полосе, фон к структуре, фон контейнера, заливаем фон цветом или подставляем картинку.
  • Редактирование картинки на месте: изменение размеров, добавление фильтра, подписи, рамок, стикеров, фигур.

Редактор изображений

  • Создание полноценного баннера прямо в письме.
  • Придание интерактивности карточкам товара или другим элементам при помощи ролловера.
  • Добавление видео в один клик.

Создаём письмо к 8 марта

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

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

Эскиз письма

В преддверии праздника мы решили сделать вот такое письмо. Расскажем подробнее о создании каждого его элемента:

Письмо к 8 Марта

Делаем красивый баннер на 8 марта

Чтобы сделать баннер для письма, воспользуемся встроенными инструментами в системе eSputnik.

Для начала добавим в полосу письма блок “баннер”:

Блок с баннером

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

Несколько способов загрузки картинки

В зависимости от картинки и баннера, который мы хотим получить, — после загрузки выставляем соответствующий форм-фактор (ориентацию). У нас он горизонтальный.

Выставление ориентации

Все отступы в самой структуре выставляем 0.

Приступаем к креативной части

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

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

Баннер

Лайфхак: если у вас нет подготовленного изображения в нужном формате — замените блок “баннер” на “картинка” и нарисуйте черный прямоугольник в редакторе.

Инструмент для рисования в редакторе изображений

Добавление фигур к картинке в редакторе

Вставка фигур в редакторе

Переходим к месседжу:

Пример скидки

  • Шрифт: Lora
  • Размер шрифта: 39рх

Оформление праздничного баннера


Women`s Day

  • Шрифт: Lobster
  • Размер шрифта: 48рх

SALE

  • Шрифт: Playball
  • Размер шрифта: 98рх
  • Цвет: #FF007A

Витрина нашего письма — блок с товарами

Для этого блока используем структуру с 2 контейнерами.

Выбор структуры с двумя контейнерами

Правая и левые части должны быть одинаковыми, для этого:

1) удалим отступы между контейнерами.

2) выровняем ширину контейнеров.

Ширина контейнера

Вот что получается:

Отступы между двумя контейнерами

Ширина блока с карточками товара соответствует ширине письма, поэтому в настройках структуры убираем все отступы.

Убираем отступы

Начнем блок с карточки товара, чтобы потом верно определить размер картинки.

По классике жанра карточка товара состоит из:

  1. Названия.
  2. Описания.
  3. Цены.
  4. Кнопки с призывом к действию.

Карточка товара

1. Название товара со ссылкой

Есть разные способы сделать подобную визуализацию названия товара. Сегодня мы воспользуемся блоком “Меню”:

Блок с меню

Вставляем блок и переходим к его редактированию.

Тип меню: иконки и ссылки.

Выравнивание: выбираем отображение “сначала картинка, потом текст”.

Тип меню

Задаём настройки блока:

  1. Верхний и нижний отступ внутри блока: 10 px.
  2. В Пункте 1 прописываем Название нашего товара.
  3. Добавляем изображение с расширением png.
  4. Ниже ставим ссылку на товар, чтобы название было кликабельным.
  5. Выбираем необходимый цвет для шрифта (цвет ссылки), у нас это: #333333.
  6. Фон пункта оставляем прозрачным (transparent), так как мы зададим цвет фона для всего контейнера.
  7. Чтобы удалить ненужные пункты в “Меню” нажимаем на корзину.
Настройки блока

Стиль текста задаем в соответствующем поле. Выбираем Lucida Sans Unicode, 18 кегль:

Настройка стиля для текста

Возвращаемся в начало, к блоку “Меню”, и редактируем размер изображения:

Редактирование размера изображения

Нужный размер можно задать вручную или при помощи “+” и ”-” (шаг в 1рх):

Корректировка размеров изображения

В этом макете высота и ширина изображения 32рх. Переходим к следующему блоку. Добавим описание товара.

2. Информация о товаре

Добавляем под названием товара блок “текст”:

Добавление текстового блока

Пишем/копируем нужный текст. Настройки форматирования задаем следующие:

  • Цвет текста: #333333
  • Цвет фона: transparent
  • Выравнивание: по левому краю.
  • Интервал между строками: пункт 3.

Отступы:

  • слева: 20px
  • справа: 10px
  • сверху: 0px
  • снизу: 10px

Верхний отступ не задаем, так как нижнего отступа, который мы выставили в блоке “Меню”, будет достаточно.

Отступы для блока с меню

3. Цена

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

Настройка стиля старой цены

  • Шрифт: Lucida Sans Unicode
  • Кегль: 20
  • Начертание шрифта: зачеркнутый
  • Цвет: #696969

Цвет для шрифта


Через пробел пишем новую цену и задаем красный цвет. Начертание: полужирный.

4. Кнопка

Завершаем карточку товара кнопкой с призывом “ BUY NOW”. Для этого добавим блок с кнопкой.

Блок с кнопкой

А далее идем по настройкам:

Настройка блока с кнопкой

  1. Указываем ссылку на страницу с товаром.

  2. Прописываем призыв к действию.

  3. Стиль текста:

  • Шрифт: Lucida Sans Unicode.
  • Кегль:16
  1. Цвет кнопки: #e8e8ea

  2. Цвет текста: #010101. Для большей контрастности на общем фоне карточки товара.

  3. Цвет фона: не задаем (transparent).

  4. У нашей кнопки острые углы, поэтому закругление не задаем.

  5. Выравнивание: по центру. Пункт “Растянуть по ширине” пропускаем.

  6. В пункте “Граница” мы задаем толщину линии и ее цвет. В “Еще” можно задать разную толщину для каждой и сторон, но нам это не понадобится. Толщина границы кнопки ставим: 1рх, цвет: #333333.

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

Внутренние и внешние отступы кнопки

Рассылка к 8 марта — фон письма

Можно было задать фон для каждого блока отдельно, но это времязатратно. Лучше добавить фон сразу ко всему контейнеру. Выделим его и открывшихся настройках зададим цвет фона контейнера: #B0AFB0.

Фон контейнера

Фотография товара

ТТеперь, когда нам понятно какого размера у нас будет карточка товара, — добавим фото товара.

Наша картинка 300*270 рх. Если картинка больше — не беда, воспользуйтесь редактором и задайте нужные размеры.

Кнопка редактирования размеров картинки

Привести картинку можно к нужным размерам используя инструмент “Размер” и “Обрезка”.

Встроенные инструменты изменения размера изображений

Обратите внимание, что при указании размера можно сохранять пропорциональное соотношение сторон картинки, а можно задать свои.

Редактор изображений в eSputnik

Эффект ролловера

Ролловер добавит жизни нашему письму за счет интерактивности. Интерактивность — тренд 2021 года, так как пользователь сможет взаимодействовать с контентом. Ролловер-эффект в письме позволяет рассмотреть товар с разных сторон, показать несколько товаров в категории, при наведении курсора мышки изображение меняется с одного на другое. Этот эффект можно протестировать прямо в письме:

Эффект ролловера в шаблоне письма

Для создания этого эффекта в контейнер добавляем блок “картинка”. После корректировки ее размеров включаем эффект Rollover с помощью ползунка и загружаем второе изображение.

Включение эффекта ролловера в письме

Важно!

Всегда добавляйте к изображениям ссылки и Alt-текст. В случае если картинка не отобразится, пользователь сможет узнать, что же за ней кроется и подгрузить её.

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

Оформление с разделителями

“Воздух” для легкости восприятия добавим при помощи динамического разделителя.

Отступ в теле письма

Добавляем в нужном месте новую структуру с блоком “разделитель”.

Структура с блоком "Разделитель"

Ползунком переключаем на динамический разделитель:

Переключение на динамический разделитель в редакторе

Ширина разделителя регулируется в теле самого письма:

Настройка высоты разделителя

Завершаем

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

Финальное изображение в письме

Дизайн рассылки к 8 марта готов:

Готовое письмо

Лайфхак — используйте готовые шаблоны!

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

Чтобы найти готовые шаблоны:

1. Перейдите в Cообщения -> Сообщения.

Cообщения -> Сообщения

2. Нажмите “Создать email”.

Создать email

3. Откройте вкладку “Тематические шаблоны”. В строку поиска введите ключевое словосочетание “Women`s day”. Выберите любой понравившийся шаблон, отредактируйте его в соответствии со своими нуждами и запускайте рассылку.

Тематические шаблоны
 


Делайте свои письма более живыми!

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

1. Протестируйте в своих письмах ролловер. Они станут более живыми и динамичными. А покупатели смогут взаимодействовать с товаром.

2. Добавляйте фон письма и фон контента. Как профессионально и просто добавить фон, мы рассказали в видео.

3. Вдохновляйтесь идеями. Создать профессиональную рассылку вместе с eSputnik легко, а идеи для рассылки к 8 марта можно почерпнуть из существующих примеров, или покреативить самим.

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

Перейти к простому созданию рассылок

4.6 из 5 на основе 20 оценок

Екатерина Ярышева

Email-маркетолог

В интернет-маркетинге с 2015 года. Специализируется на создании текстового контента; разработке стратегий, запуске и автоматизации email-маркетинга. Имеет опыт работы с b2b и b2c проектами.

Комментарии 0