Екатерина Кораблева

Ведущий специалист по Email-маркетингу в eSputnik

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

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

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

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

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

Промописьмо ко Дню матери

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

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

Шаблон для редактирования

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

Праздничный шаблон

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

Нужна помощь с версткой писем?

Хедер

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

Удаление блока соц.сетей

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

Замена лого

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

 

Выровнять по левому краю

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

Изменение по ширине

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

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

Редактирование телефона и времени работы

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

Сделать номер телефона ссылкой

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

Добавить номер телефона

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

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

Контент

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

Редактировать меню в письме

Баннеры

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

Заменить баннер в письме

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

Вставьте путь к картинке

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

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

Банк фото в редакторе

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

Выберите опцию "Редактировать"

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

Интерфейс инструмента редактирования баннера

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

  • Шрифт: Permanent Marker

  • Цвет: #000000

Добавление текста на баннер

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

Сохранение настроек в баннере

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

Задайте общие настройки оформления фона контента

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

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

Текст

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

Настройки цвета текста и ссылок

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

  • Шрифт: Arial

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

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

Редактирование текста

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

Задайте настройки для выравнивания текста

Картинки

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

Замените картинки в письме

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

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

Включение эффекта rollover для картинки

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

Добавьте фото для rollover

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

Добавьте ссылки и альтернативный текст

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

Замените картинки в следующем блоке

Кнопки

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

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

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

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

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

  • Шрифт: Arial

  • Кегль: 20px

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

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

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

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

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

Общий вид письма с обновленными кнопками

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

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

По желанию можно настроить скрытие блоков на мобильном

Заголовок

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

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

Настройка скрытия блоков на мобильном

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

  • Шрифт: Arial

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

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

  • Цвет: #000000

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

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

Выровняйте все карточки товаров

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

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

Готовые модули карточек товаров

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

Как выбрать "Скопировать" и "Переместить"

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

Переименуйте на "Купить" и переместите

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

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

Переименуйте название товара

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

  • Шрифт: Arial

  • Кегль: 14px

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

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

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

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

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

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

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

Last post

Футер

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

Стандартный вид футера в шаблоне

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

Добавьте почту

  • Шрифт: Arial

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

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

  • Кегль email: 14px

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

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

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

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

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

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

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

Выберите иконки подходящие дизайну сайта

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

Удалите иконку Youtube

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

Добавьте иконку Pinterest

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

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

Готовый футер письма

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

5.0 из 5 на основе 3 оценок

Екатерина Кораблева

Ведущий специалист по Email-маркетингу в eSputnik

Комментарии 0