How-To. Как создать письмо к Черной пятнице

В преддверии Черной пятницы каждый электронный почтовый ящик засыпается десятками писем с рекламными акциями и заманчивыми предложениями о скидках. Многие из них так и остаются непрочитанными, поэтому маркетологи из года в год соревнуются в оригинальности, придумывают новые подходы и пишут уникальные цепляющие темы писем, чтобы заинтересовать подписчика. Мы уже рассказывали, как написать письмо к Black friday и подготовили для вас более 100 вдохновляющих тем, а в этой статье расскажем, как в редакторе eSputnik создать привлекательное письмо и произвести wow-эффект, когда подписчик уже открыл емейл.

Как оформить email-рассылку к Black Friday 

Для примера используем письмо от Designmodo – сервиса, который занимается созданием фреймворков и предлагает множество полезных инструментов для дизайнеров и веб-разработчиков. Добавим некоторые собственные идеи и в результате получим эффектное письмо к Черной пятнице:

#000000 Friday

Именно так назывался бы знаменитый день распродаж согласно цветовой модели RGB. Мы же выберем для фона нашего письма два оттенка черного, чтобы добиться контрастности. При оформлении письма к Черной пятнице также будем использовать вариации цветов, которые применяются на сайте Designmodo для каждого сервиса, и добавим близкий к ним по цветовому кругу ярко-розовый. 

Таким образом получим эффектную цветовую гамму, которая отвечает сразу нескольким требованиям:

• сохраняет мистику Черной пятницы благодаря привычному для этого дня фону;

• перекликается с оформлением сайта;

• привлекает внимание благодаря контрастным цветам, хорошо сочетающимся между собой;

• идет в ногу с трендом футуризма, неона и ассоциируется с современными технологиями – именно тем, что предлагается в письме.

Для всех элементов письма будем использовать шрифт Arial, создавая визуальные акценты с помощью смены цвета (#ffffff, #f833ac, #f60bc0, #dddddd), кегля (от 10 до 60 рх), использования жирного и зачеркнутого начертания.

Приступим к созданию рассылки к Черной пятнице. В разделе “Сообщения” нажмите кнопку “Создать Email”, выберите во вкладке “Базовые” пустой шаблон и удалите из него все блоки.

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

Теперь мы задали настроение всему письму и сразу сможем оценить его общий вид при добавлении новых элементов.

Хедер

Шапка нашего письма состоит из трех элементов: лого, ссылка на веб-версию письма и СТА, призывающая перейти к покупкам. Для создания такой шапки открываем в разделе “Контент” меню “Структуры”, выбираем шаблон с тремя контейнерами и перетаскиваем его в письмо:

Чтобы создать контраст, выберем более насыщенный оттенок черного, чем цвет фона письма. Нажмите на полосу и в появившемся меню слева во вкладке “Внешний вид”→ “Цвет фона контента” выставьте соответствующие параметры.

Таким же образом нужно будет настроить цвет фона контента и для следующих полос, чтобы это применялось к каждой структуре.

В меню настроек “Структуры” выставим размеры контейнеров и зададим значения отступов между ними:

По умолчанию в редакторе для каждого контейнера предлагается выбрать тип контента. В нашем случае выбираем для первого – картинку, для второго – текст, для третьего – кнопку:

Логотип

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

Выберем файл с расширением .png и прозрачным фоном, чтобы не перекрывать общий фон письма. Изменяем размер изображения прямо в редакторе: выбираем значение 130 и устанавливаем выравнивание по центру:

 

Выключаем опции “Растянуть по ширине” и “Адаптивность”, а также устанавливаем значение 10 для верхнего отступа:

Ссылка на веб-версию письма

Настроить внешний вид текста можно также в меню слева:

• размер – 14 рх;

• выравнивание – по центру;

• основной цвет шрифта – белый;

• цвет ссылки – ярко-розовый;

• жирное начертание;

• межстрочный интервал – третий пункт;

• отступы: сверху – 10, остальные – 0.

Чтобы сделать часть текста ссылкой, выделите ее курсором и нажмите на панели инструментов  значок “Сделать ссылкой”.

В появившемся слева меню выберите тип “Просмотр в браузере” и вставьте URL страницы: https://esputnik.com/viewInBrowser.

Кнопка

Следуя идее использования мерцающих неоновых цветов, зададим нашей кнопке эффект изменения цвета при наведении.

Для этого снова переходим в меню слева, где также указываем ссылку, на которую ведет СТА и настраиваем другие ее параметры:

• размер шрифта – 14 px;

• цвет кнопки – #f833ac;

• цвет кнопки по наведению – #f60bc0;

• цвет текста – #ffffff;

• цвет фона – transparent;

• закругление – 5;

• выравнивание – по центру;

• общая граница – 0;

• внутренние отступы: справа и слева – 20, сверху и снизу – 10;

• внешние отступы – 0.

Укажите URL страницы, на которую перейдет подписчик, кликнув по кнопке:

В результате получим красивое симметричное расположение всех элементов шапки:

Разделитель

Для легкости восприятия основную частью письма отделим от хедера разделителем. Выберем соответствующий готовый блок во вкладке “Контент” и настроим его внешний вид:

• цвет блока – по умолчанию #110b0b;

• цвет линии – #353334;

• ширина – 100;

• выравнивание – по центру;

• отступы: слева и справа – 10, снизу – 20, сверху – 0, для того чтобы не добавлять лишнего расстояния до хедера;

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

Баннер

Используя привлекательный баннер в начале письма, вы сразу цепляете внимание подписчика. Мы же не просто разместим яркую картинку, а создадим эффект настоящей неоновой вывески, притягательно мерцающей во тьме. В редакторе eSputnik предусмотрена возможность загружать gif-анимацию, которую мы и будем использовать в качестве нашего баннера.

Аналогично загрузке изображения для логотипа добавляем gif-изображение. Размер нашей гифки – 480x280 px, и для того чтобы подстроить изображение под ширину письма, достаточно просто нажать в редакторе кнопку “Растянуть по ширине”. Включаем опцию адаптивности и убираем все отступы. Добавьте ссылку на страницу, куда будет вести баннер: хороший баннер является одним из самых кликабельных элементов в письме.

В результате получаем эффектный баннер, мигающий яркими цветами:

Текст

Добавим основной месседж с помощью блока “Текст”. Перетаскиваем нужный блок в письмо и вставляем наш промотекст.

Так как нам необходимо выровнять весь текст по центру, перейдем в настройки слева и выберем соответствующий пункт:

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

На этой же панели настраиваем внешний вид текста:

• размер шрифта для заголовка – 40 px;

• размер основного шрифта – 16 px;

• цвет основного текста – белый, #ffffff;

• цвет важных слов – #f833ac.
  Если в выпадающем окошке с палитрой нет интересующего вас цвета, нажмите “Ещё цвета” и выберите нужное значение.

Блок с текстом почти готов. Осталось добавить немного свободного пространства. Для этого переходим в меню слева и устанавливаем значения отступов:

Чтобы заинтересованный подписчик сразу мог воспользоваться предложением, разместим под текстом кнопку Call-To-Action. Для контрастности письма будем чередовать цвета и на этот раз сделаем ее белого цвета, а цвет текста будет меняться при наведении с #f833ac на #f60bc0.

Шрифт выбираем крупнее – 18 px, а закругление оставляем такое же, как у предыдущей СТА – 5.

Граница у кнопки отсутствует, для нее выбираем значение 0, так же, как и для внешних отступов блока. Для внутренних выберем одинаковое значение со всех сторон – 15.

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

Наши карточки товара должны иметь следующий вид: слева – изображение, справа – текст и под ним кнопка СТА. Чтобы создать такую структуру, перейдем в готовые модули и выберем подобный вариант:

Этот модуль, помимо изображения, контейнеров для текста и для кнопки, имеет два разделителя. Они нужны для того, чтобы регулировать по высоте правую часть структуры в соответствии с размером картинки. При этом можно не использовать лишние отступы в контейнерах, т. к. в мобильной версии они могут смотреться не очень красиво. Верхний разделитель удаляем и оставляем тот, который находится между текстом и кнопкой. Как работать с разделителем в такой структуре, рассмотрим подробнее ниже.

Отредактируем внешний вид структуры. Перейдем в меню редактора слева и уберем отступ между контейнерами, а для самих контейнеров зададим размер 280.

В контейнер слева загружаем изображение, выбираем опцию “Растянуть по ширине” – так картинка адаптируется под размеры блока.

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

• цвет шрифта – #ffffff;

• размер шрифта: для заголовка – 20 px, основной текст – 16 px;

• цвет фона – #353334;

• выравнивание – по левому краю;

• отступы – 10 с каждой стороны.

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

Для описания старой цены зададим другие значения с помощью панели редактирования текста:

• кегль – 18 px;

• цвет – #dddddd;

• выравнивание – по центру;

• зачеркнутый шрифт.

Чтобы оформить СТА, скопируем кнопку из хедера, вставим ее в нужный блок и немного изменим. Для этого выделите контейнер, наведите на появившиеся три точки справа и используйте кнопки “Дублировать” и “Переместить”.

Далее редактируем следующие параметры:

• размер шрифта – 18 px;

• внутренние отступы – по 20 с каждой стороны;

• внешние отступы: слева и справа – 0, сверху – 10, снизу – 15.

Когда блоки с кнопкой и текстом будут готовы, вернемся к настройкам разделителя: он поможет нам сделать правую и левую части структуры одинаковыми по высоте. Для этого включим опцию “Динамический разделитель” в меню слева, что позволит изменять размер вручную прямо в блоке. В нашем случае устанавливаем размер 43 рх, а также включаем скрытие элемента на мобильных устройствах:

Получили готовую карточку с предложением приобрести продукт по заманчивой цене.

Просто, как Ctrl+C, Ctrl+V

Так как у нас три таких предложения, мы можем копировать готовый модуль и просто изменять в последующих изображения, текст и ценовое значение. Для этого нужно выделить не отдельный контейнер, как мы ранее делали это с кнопкой, а всю структуру.

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

Далее снова следует блок с текстом, в котором мы сообщаем подписчикам, что акционное предложение распространяется и на другие продукты компании, напоминаем им промокод и снова акцентируем внимание на размере выгоды. Кнопка СТА призывает ознакомиться с деталями подробнее.

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

И снова о самом главном

Для тех, кто долистал письмо до конца и вдруг забыл, о чем читал:), повторим основное: волшебное слово промокода и размер скидки. А чтобы подвести подписчика к быстрому принятию решения, установим таймер с обратным отсчетом, который словно будет напоминать: “Поторопись, иначе магия скоро закончится, и возможность воспользоваться выгодным предложением будет упущена”.

Среди множества готовых модулей в eSputnik уже есть баннер, похожий на то, что мы задумали.

Вставляем модуль в письмо, убираем лишний контейнер с кнопкой – вместо него под таймером будет расположено 2 блока “Текст”. Первый будем использовать для уточнения деталей акционного предложения, а во втором разместим яркий текст с размером скидки. Над таймером также будет два блока с текстом: один для призыва к действию, другой для промокода. Приступим к оформлению одной из самых эффектных частей письма.

Так как мы использовали готовый модуль, у него уже имеется свой фоновый цвет, поэтому мы меняем цвет структуры и контейнера:

В блоке с призывом “Use this Coupon Code” используем те же параметры, что и для заголовков в предыдущих блоках с текстом:

• кегль – 40 px;

• цвет – #ffffff;

• выравнивание – по центру.

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

Для текста промокода “BLACK” в следующем блоке выставляем такие значения:

• кегль – 60 px;

• цвет – #f833ac;

• выравнивание – по центру;

• жирный шрифт;

• размеры отступов:

Теперь можем скопировать этот блок и перетянуть его в нижнюю часть структуры, заменив текст на “60% Off”.

Как установить таймер в письме? Всевозможные способы описаны в нашем блоге, мы же выберем весьма простой путь – сервис Sendtric.

Этот сервис – бесплатный, не требует регистрации и не накладывает водяные знаки. Здесь вы можете указать цвет фона и цифр таймера, а также язык и часовой пояс. Итак, выберите желаемые параметры, установите дату окончания акционного предложения и нажмите кнопку Generate.

В окошке у вас появится HTML-код, из которого нужно скопировать часть, содержащую ссылку, – именно ее мы и вставим в письмо. Для этого в нашем модуле заменяем блок с циферблатом на блок “Картинка”:

В меню выбора изображения используйте пункт “Ссылка на внешний ресурс” и вставьте скопированную часть кода.

В настройках для изображения выставляем выравнивание по центру и размер 400:

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

Осталось добавить небольшой уточняющий текст относительно условий акции: “*This offer is for a limited time. It can’t be combined with other offers. Available only for the first selected period”:

• кегль – 12 px;

• цвет – #ffffff;

• выравнивание – по центру;

• значение отступов:

Отделим футер от основного контента с помощью разделителя. Для этого скопируем блок с разделителем, который мы вставили после хедера.

Футер

В футере нашего письма разместим следующие элементы:

• лого компании;

• небольшой дружественный текст;

• ссылку на веб-версию письма;

• ссылку на отписку;

• ссылку, по которой можно изменить свои предпочтения по рассылке;

• ссылки на социальные сети.

Для создания футера выберем структуру с тремя контейнерами. В первом размещаем блоки “Картинка” и “Текст”:

 

Добавляем логотип в блок с картинкой, а в блоке “Текст” вставляем подпись: “This email was created with love for you”. Параметры шрифта будут аналогичны используемым параметрам в хедере:

• цвет шрифта – #ffffff;

• размер – 14 рх;

• межстрочный интервал – четвертый пункт;

• выравнивание – по левому краю;

• отступ сверху – 10, с остальных сторон – 0.

Внесем милую деталь для любимых клиентов – перейдем в раздел эмоджи на панели инструментов вверху и вставим сердечко в конце текста.

Второй контейнер будет состоять из ссылок, поэтому его мы оформляем в виде текстового блока. Шрифт текста ссылок имеет такой же вид, как и ссылка на веб-версию письма в хедере:

• цвет шрифта – #f833ac,

• размер  – 14 рх;

• межстрочный интервал – четвертый пункт;

• выравнивание – по левому краю;

• жирное начертание;

• отступ со всех сторон – 0.

Не забудьте для каждого из этих пунктов проставить значение URL, на которые они будут вести.

В последнем контейнере разместим кнопки соцсетей, используя блок с соответствующим названием:

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

Чтобы добавить новую соцсеть, нажмите на кнопку “+” и в раскрывающемся меню выберите необходимую иконку; чтобы удалить ненужную, нажмите на значок корзины рядом с названием:

У нас есть 6 ссылок на соцсети, поэтому мы разместим в контейнере два блока “Соц. сети” с тремя иконками в каждом. Выбрав нужные иконки, визуально оценим их расположение и установим отступы:

• отступы между иконкам – 20;

• выравнивание – по правому краю;

• отступ снизу для верхнего блока – 10;

• отступ сверху для нижнего блока – 10.

Красивое письмо Black Friday готово. Взяв за референс email-рассылку к Черной пятнице от Designmodo,

и, изменив некоторые детали, получили результат: 

Вот так просто, с помощью инструментов редактора eSputnik, можно создавать яркие впечатляющие письма за короткое время. Используйте свое воображение, креативные идеи и эффективные механики, чтобы в Черную пятницу ваше письмо было самым ярким из всех. Заранее продумайте идею праздничной рассылки, чтобы успеть ее реализовать во всей красе. Подключайте к этому процессу коллег. Например, набросайте несколько идей и предложите им выбрать самый удачный вариант. Сбор мнений можно провести в Google Forms. А мы подскажем, как сделать опрос в Гугл форме.