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

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

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

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

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

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

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

• Высоту и центрирование текста легко регулировать с помощью отступов, вы можете следовать примеру или устанавливать на свое усмотрение. Отступы, которые важны для данного дизайна письма будут указаны.

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

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

• Общий фон письма: #f6f9fa.
• Декоративные шрифты: Lora, Playfair Display или стандартный шрифт Georgia.
• Цвет фона структуры и блоков: #fbbfd6 - розовый основной.
• Цвет в карточках товара: розовый - #fbbfd6 , серый - #cccccc.
• Основной цвет текста: темно-серый: #20261e
• Цвет буквы “V” и разделителей : #e6e6fa

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

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

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

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

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

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

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

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

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

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

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

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

• Шрифт: Playfair Display
• Цвет фона структуры и блоков: #fbbfd6
• Цвет буквы “V” и разделителя : #e6e6fa
• Цвет текста: #20261e

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

• Ширина: 100 px
• Цвет: #e6e6fa

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

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

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

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

• Добавьте в первую структуру блок “Картинка”, отступы 0px.
• Во второй структуре установите отступы: 10px сверху и снизу, перетащите туда блок “Кнопка”.

Баннер

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

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

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

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

• Шрифт: Playfair Display
• Размер шрифта: 17 px
• Цвет обводки и текста: #ffffff

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

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

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

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

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

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

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

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

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

• шрифт - Playfair Display
• размер - 22px
• цвет - #333333

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

• шрифт -Arial
• размер - 18px
• цвет шрифта - #333333
• цвет фона кнопки - #ffffff
• внутренние отступы кнопки и внешний отступы контейнера задайте как на картинке

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

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

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