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

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

How-To: Как сделать письмо к 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. Фон пункта оставляем прозрачным (transparent), так как мы зададим цвет фона для всего контейнера.
  6. Выбираем необходимый цвет для шрифта (цвет ссылки), у нас это: #333333.
  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.

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

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

Фон

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Завершаем

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

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

Наш результат:

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


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

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

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

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

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

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

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

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

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

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

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

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