В преддверии Черной пятницы каждый электронный почтовый ящик засыпается десятками писем с рекламными акциями и заманчивыми предложениями о скидках. Многие из них так и остаются непрочитанными, поэтому маркетологи из года в год соревнуются в оригинальности, придумывают новые подходы и пишут уникальные цепляющие темы писем, чтобы заинтересовать подписчика. Мы уже рассказывали, как написать письмо к Black friday и подготовили для вас более 100 вдохновляющих тем, а в этой статье расскажем, как в редакторе eSputnik создать привлекательное письмо и произвести wow-эффект, когда подписчик уже открыл емейл.
Как оформить email-рассылку к Black Friday
Для примера используем письмо от Designmodo – сервиса, который занимается созданием фреймворков и предлагает множество полезных инструментов для дизайнеров и веб-разработчиков. Добавим некоторые собственные идеи и в результате получим эффектное письмо к Черной пятнице:
Письмо к Black Friday
# 000000 Friday
Именно так назывался бы знаменитый день распродаж согласно цветовой модели RGB. Мы же выберем для фона нашего письма два оттенка черного, чтобы добиться контрастности. При оформлении письма к Черной пятнице также будем использовать вариации цветов, которые применяются на сайте Designmodo для каждого сервиса, и добавим близкий к ним по цветовому кругу ярко-розовый.
Цвета приложений на сайте 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,
Письмо от Designmodo
и, изменив некоторые детали, получили результат:
Письмо, сделанное в редакторе eSputnik
Вот так просто, с помощью инструментов редактора eSputnik, можно создавать яркие впечатляющие письма за короткое время. Используйте свое воображение, креативные идеи и эффективные механики, чтобы в Черную пятницу ваше письмо было самым ярким из всех.
