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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цветовое оформление для письма ко Дню Влюленных

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

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

Пример хедера ко Дню Всех Влюбленных

 

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

Создание баннера ко Дню святого Валентина

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

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

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

Как украсить логотип для Дня Влюбленных

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

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

Оформление текста в редакторе для Дня влюбленных

 

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

Как украсить логотип для Дня Влюбленных

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

Оформление письма ко Дню влюбленных

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

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

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

Адаптивный дизайн письма ко Дню влюбленных

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

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

Дизайн письма ко дню влюбленых

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

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

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

Баннер для письма ко Дню Святого Валентина

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

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

Оформление письма к празднику Всех влюбленных

Баннер

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

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

Дизайн баннера к празднику Святого Валентина

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

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

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

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

Как оформить кнопку в письме к празднику

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

Оформление CTA ко Дню Влюбленны

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

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

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

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

Карточки товара в письмо

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

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

Структура карточки товара

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

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

  • шрифт - Playfair Display
  • размер - 22px
  • цвет -  #333333
  1. Для изменения кнопки выделите ее в письме и задайте следующие значения:  

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

Адаптивный дизайн письма ко Дню влюбленных

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

Адаптивный дизайн письма ко Дню влюбленных

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

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

Добавить комментарий

Лена
12:06, 12 февраля 2018

Очень полезно, спасибо!

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