20 Фев 2019
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 рх. Если картинка больше - не беда воспользуйтесь редактором и задайте нужные размеры.

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

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

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

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

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

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

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

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

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

Включение эффекта ролловера

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

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

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

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

Разделитель в теле письма

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

Блок "Разделитель"

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

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

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

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

Завершаем

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

Финальное изображение

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

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


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

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

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

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

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

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

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

Вам понравился материал? Оцените:

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 4 средняя оценка: 5 (Рейтинг: 100%)

С этим читают: