Создаем проморассылку ко Дню матери

День матери – один из самых добрых и светлых праздников, которые отмечает весь мир в мае. Не ленитесь поздравить своих подписчиков накануне этого дня (особенно бизнесы, нацеленные на мамочек) или напомните им подготовить подарок своим матерям. Если ваши товары или услуги подходят под концепцию праздника, такая коммуникация просто необходима.

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

Как создать письмо ко Дню матери

Милые поздравления и ненавязчивые продажи – вот что нужно для магазина женской косметики. С этой миссией отлично должно справиться красивое и нежное письмо.

Рассмотрим создание письма по шагам.

Чтобы создать такое промописьмо на День матери 2021, как у нас в примере, заходите в раздел “Шаблоны”, выбирайте категорию “Базовые” и наиболее подходящий прототип письма – “Промописьмо с новой коллекцией”. В нем есть все, что нужно: баннер, карточки товаров, блоки с текстом и кнопки – идеальный баланс элементов с учетом лучших практик email-маркетологов. Процесс преобразования такого образца пройдет гораздо легче, чем разработка письма с нуля.

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

Для тех, кто отправляет так много писем, что попробовал все наши 500+ шаблонов, мы сделали подборку и с другими источниками:)

Хедер

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

Далее нужно заменить логотип. Здесь все также интуитивно понятно. Нажмите на логотип и на панели выберите кнопку “Заменить”. В шаблоне сохранено изображение размером 300×150, желательно залить картинку в таком разрешении.

Дополнительно выровняйте лого по левому краю.

Также мы уменьшили размеры логотипа в письме и задали свои настройки в размерах. Указали ширину – 150px, а высоту – 75px.

Информацию с номером телефона и часами работы магазина необходимо исправить на свою.

Это очень просто: нажмите на блок, чтобы открыть редактор, и замените текст на тот, который вам нужен. Мы не будем менять оформление, изменим только контент.

Хорошо, когда прямо из письма можно позвонить на указанный в нем номер телефона. Для этого выделите его и нажмите на кнопку “Сделать ссылкой”.

В открывшихся слева настройках ссылки выберите тип “Телефон” и вставьте корректный номер телефона в специальное поле.

Теперь, если кто-то нажмет на номер телефона в письме с мобильного, он без проблем сможет с вами связаться.

На этом работа с полосой “Хедер” заканчивается и вы можете приступить к следующей полосе.

Контент

Сверху над баннером есть удобное навигационное меню, как на сайте. Замените названия стандартных блоков на те, которые нужны вам, и удалите все ненужное. Не забудьте проставить ссылки.

Баннеры

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

Ее можно загрузить с компьютера, а также по ссылке. Для этого нажмите кнопку “Адрес” и вставьте путь к картинке.

Если у вас нет готового баннера и вы хотите создать его в редакторе, воспользуйтесь специальным блоком “Баннер”. Более подробно мы писали о нем в этой статье.

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

После того как вы добавите картинку, ее нужно отредактировать. Как насчет праздничной надписи? Для начала кликайте “Редактировать”.

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

Мы сделали праздничную надпись стандартным рукописным шрифтом Permanent Marker через функцию “Текст” → “Добавить текст”. Если вам необходимо использовать кастомный шрифт, прочтите инструкцию и добавьте его в аккаунт для дальнейшей работы. Также мы отцентровали надпись, сменили цвет и немного увеличили размер на свой вкус.

• Шрифт: Permanent Marker

• Цвет: #000000

Получилось достаточно симпатично, но в то же время минималистично. Не забудьте сохранить изменения нажатием на кнопки “Применить” и “Сохранить”.

Теперь приступайте к редактированию остальной части полосы контента. Сначала давайте изменим цвет фона полосы “Контент” на оттенок из баннера – #eef1f8. Для этого выберите вкладку “Оформление” в левой части интерфейса редактора. 

Благодаря такому трюку письмо будет смотреться цельно и стильно – в лучших традициях Pinterest;)

Проверьте, чтобы хедер и футер остались в белом оттенке #ffffff. Тогда письмо будет выглядеть аккуратно поделенным на важные полосы.

Текст

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

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

• Шрифт: Arial

• Кегль: для всего текста – 20px

• Начертание шрифта: обычный

В меню слева нужно поработать над отступами и выравниванием текста. Выравнивание необходимо задать по центру, интервал сделать небольшим, а отступы по краям – по 40px, а сверху и снизу – по 15px.

Картинки

В целом, письмо выглядит очень сочным и по-инстаграмному красивым. Результат будет именно таким, если у вас есть немного качественных фото. Как менять картинки, вы уже запомнили;)

Заменяйте все изображения в первом блоке с картинками. Следите за тем, чтобы разрешение у всех было одинаковым (лучше всего – 1200×800, как в шаблоне), тогда они лягут красиво и письмо будет смотреться аккуратно.

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

При наведении курсора на изображение картинки будут меняться, создастся интересное ощущение интерактивного письма.

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

Проделайте такие же действия и со следующим блоком, меняя картинки, добавляя ссылки и текст.

Кнопки

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

Обязательно пропишите текст кнопки, например нейтральный “Смотреть”.

Осталось изменить стиль кнопок на подобный тому, что на сайте. У нас он следующий:

• Цвет кнопки: #333344

• Цвет текста: #ffffff

• Шрифт: Arial

• Кегль: 20px

• Закругление: 2

• Толщина границ: 1

• Цвет границ: #ffffff

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

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

Заголовки “Новая кампания” нужно заменить более релевантными, наши – “Новинки” и “Подарки”.

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

Заголовок

Приступайте к следующему блоку с товарами.

Нужно написать красивый заголовок. Мы выбрали такой текст: “ВСЕ САМОЕ ЛУЧШЕЕ ДЛЯ ИДЕАЛЬНОГО ПРАЗДНИКА”.

Отредактируйте оформление текста по следующим параметрам:

• Шрифт: Arial

• Кегль: для всего текста – 28px

• Начертание шрифта: обычный

• Цвет: #000000

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

Далее поменяйте картинки в карточках товаров на те, которые вам нужны. После этого нелишним будет проверить размер каждого контейнера с товаром. Для этого кликните по структуре с карточками товаров и нажмите кнопку “Уравнять” (=).

Теперь все карточки товаров будут одинакового размера.

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

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

В карточке товара переименуйте кнопку на “Купить”.

Скопируйте еще раз и переместите в оставшиеся пустые карточки товаров.

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

Оформление текста в карточке товара:

• Шрифт: Arial

• Кегль: 14px

• Цвет текста: #333344

• Цвет ссылки: #333344

• Выравнивание: по центру

• Подчеркивание ссылок: включено

Дальше меняйте цену на актуальную, цвет текста – #9eb28f

В старой цене цвет текста сделайте более контрастным – #333344

Оставшиеся блоки удалите: они вам не пригодятся. Оставьте только футер и приступайте к редактированию финального блока.

Футер

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

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

• Шрифт: Arial

• Кегль “Наши контакты”: 16px

• Начертание шрифта:  жирный

• Кегль email: 14px

• Начертание шрифта: обычный

• Цвет текста: #333344

• Цвет ссылки: #333344

• Выравнивание: по центру

Тоже самое сделайте и с текстом в блоке “Связаться с нами”.

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

Мы выбрали черные иконки без обводки.

Теперь проставьте правильные ссылки для каждой сети. У нас, например, последней идет иконка YouTube, но она нам не нужна. Удаляются соцсети все там же слева.

Нам вместо YouTube нужна Pinterest. Для добавления другой иконки надо нажать на значок “+” и выбрать интересующую.

Вставляем ссылку на Pinterest в специальное поле – и готово! Поступите аналогично с теми соцсетями, которые вам нужно добавить или убрать.

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

Вот и все! Как оказалось, делать рассылки ко Дню матери достаточно просто. Перед отправкой советуем проверить ссылки, протестировать вид письма в мобильной и десктопной версии, а также придумать классную тему. Ну а если вам не хватает времени на email-маркетинг даже с такой подробной инструкцией, всегда можно обратиться в агентство eSputnik. Мы с радостью применим лучшие практики для вашего проекта;)