Как создать письмо ко Дню Влюбленных на раз-два

Осталось немного времени для подготовки праздничной email-рассылки ко Дню Валентина. Давайте на примере промописьма цветочного магазина рассмотрим как быстро создать красивый дизайн без обращения к дизайнеру в нашем адаптивном редакторе.

Создание емейл-рассылки ко Дню Влюбленных на раз-два

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

Есть несколько правил и советов которым в процессе нужно следовать:

Пример письма ко Дню Влюбленных, отображение полосы

Пример заголовка письма ко Дню Влюбленных

Заголовок ко Дню Влюбленных. Дизайн заголовка

Письмо, которое мы будем создавать будет выглядеть следующим образом.

Дизайн рассылки ко Дню влюбленных

Основные параметры оформления, которые использовались при создании шаблона.

ШАГ 1. Шапка письма (лого, меню, разделитель)

Скорее всего хедер письма у вас уже есть, мы только добавим к ним больше атрибутики Дня Влюбленных, например, украсим стикерами-сердечками.

  1. Выделяем блок с картинкой-логотипом и нажимаем на “волшебную палочку” рядом. Вам откроется встроенный фоторедактор.

  1. Заходим в блок “Стикеры”, выбираем для добавления сердечек стикеры “Signature”, для стрелочки - “Originals”.

  2. Перетаскиваем мышью три сердечка, изменяем их размер и расположение на свое усмотрение, нажимаем “Применить”. Затем среди стикеров “Originals” выбираем стрелочку и перетаскиваем поверх сердечка, чтобы она пересекла его.

Как сделать такой логотип, наглядно показано в гифке, которая находится ниже.

Чем больше люди откладывают покупку подарка, тем труднее будет найти и получить вовремя прекрасный подарок, заказанный через интернет-магазин. Стимулируйте людей к покупке акциями, купонами, скидочными СМС, приятными бонусами и т.д. Например, при заказе товара в вашем интернет-магазине – бесплатная праздничная упаковка.

Делайте письма, в которые влюбляются!

Начать

ШАГ 2. Заголовки и текст

Вот так будет выглядеть эта часть письма.

Обратите внимание!

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

  1. Сначала выбираем структуры, которые приведены на картинке.

  1. Для структуры с тремя блокам устанавливаем отступы 25px со всех сторон. Для структуры с одним контейнером устанавливаем отступы 10px со всех сторон.

  2. Задаем параметры контейнеру с тремя блоками, указанные на картинке ниже, включая размеры шрифтов.

  1. Вставляем текстовые блоки и вписываем необходимый текст. Под слово Valentine`s перетаскиваем разделитель и устанавливаем параметры указанные на картинке.

  1. Для текстового блока со словом “DAY” - установите отступ сверху 40 px.

ШАГ 3. Баннер и кнопка

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

Перетаскиваем две структуры с одним контейнером:

Баннер

Чтобы создать баннер из картинки, нужно:

  1. Загрузить саму картинку. Лучше если она будет png-формата. Подбирайте изображение, которое по стилю будет подходить к вашему письму и гармонировать с ним. Ширина баннера из примера: 600/547 пикселей.
  2. С помощью встроенного фоторедактора добавить стикеры и текст на картинку. Стикер “Поцелуй” находится в блоке “Originals”. Там же на ваш вкус можно выбрать и другие стикеры. Далее добавляем цену товара на картинку с помощью блока “Текст”.

Кнопка призыва к действию

Переходим на вторую структуру, нажимаем на блок “Кнопка”, в панели редактирования слева задаем следующие параметры:

Обводка, внутренние и внешние отступы для кнопки задаются индивидуально:

В результате у нас должен получиться такой призыв.

ШАГ 4. Карточки товара и CTA

Карточки товара сделаны с помощью структуры с двумя контейнерами, в которых поочередно расположены блоки. Например: картинка - текст - кнопка - картинка.

1) Задайте всей структуре розовый фон: #fbbfd6 и параметры указанные на картинке.

2) Установите цвета для контейнеров: розовый - fbbfd6, серый - #cccccc.

3) Добавьте поочередно все необходимые блоки, например: картинка - текст - кнопка.

4) Загрузите необходимые картинки в блоки, добавьте на них декоративные сердечки с помощью фоторедактора, как было показано для логотипа и баннера.

5) Для текста установите следующие значения:

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

7) Кнопку перехода на сайт можно сделать по аналогии с кнопкой возле баннера. Заменив текст и изменив белый цвет шрифта и обводки на черный.

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

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

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