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

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

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

Совсем скоро придет май, а вместе с ним - Международный день матери, который отмечается в 2018 году 13 мая (в России - 25 ноября). Наверняка вы уже планируете отправлять поздравительную рассылку, поэтому самое время приступить к ее созданию.

Для вас мы подготовили пошаговое руководство по созданию промописьма ко Дню матери в новом адаптивном редакторе eSputnik. У нас на сайте уже есть примеры таких инструкций в разделе How to. Если вы уже знакомы с ними - прекрасно, если нет — советуем ознакомиться, чтобы более детально разобраться с работой редактора.

Подготовка к созданию письма. Основы

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

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

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

  1. Письмо структурно поделено на 5 полос.

Создание письма ко Дню мамы

Это нужно для того, чтобы:

  • при необходимости легко перемещать объекты в письме;
  • скрывать полосы при отображении на мобильных устройствах;
  • задавать полосам разные цвета и другие параметры.
  1. Для баннеров в промописьме подобраны картинки со свободным местом для текста. Рекомендованный размер картинок: ширина - 600px, высота примерно такая же.

  2. Для подложки была выбрана картинка с прозрачным фоном - сердечки в трех цветах. Ширина такой картинки 600px, высота 45px. Она же используется в качестве разделителей.

Фон для письма ко Дню мамы

  1. Основные цвета, которые использовались в дизайне проморассылки ко Дню матери:

Дизайн для письма к Международному дню мамы

  1. Основные шрифты, которые использовались в письме:
  • Noticia Text: меню, кнопка, текст над картинкой с заголовком;
  • Playfair Display: баннеры Step 1 и т.д.

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

После изучения основных моментов создания промописьма можно смело приступать к работе и учиться новому. Итак, начнем! 

Полоса 1. Логотип и меню письма

В предыдущих наших статьях, например в статье “Создаем письмо к Пасхе”, был детально описан процесс добавления логотипа, а также работа с блоком меню. Эта часть письма состоит из двух поочередно размещенных структур: в верхней находится картинка, в нижней - блок “Меню”. Если у вас возникнут вопросы, перейдите в раздел сайта “Адаптивный редактор”, там собраны инструкции по работе со всеми блоками редактора.

 

Дизайн для письма к Международному дню мамы

Полоса 2. Основной баннер

Все промописьмо объединено идеей: “Как сделать счастливой свою маму в 3 шага”. Поэтому традиционно начали письмо с баннера, где размещен основной посыл: красивая цитата и семейная фотография мамочки и ребенка

Баннер для письма к Международному дню матери

Чтобы создать эту часть письма:

  1. Добавьте в письмо структуру.
  2. В структуру перетащите блоки “Картинка” и “Текст”.
  3. Задайте структуре следующие отступы.

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

  1. Добавьте фоновую картинку (подложку для структуры). Включите повторение картинки.

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

  1. Загрузите свой вариант фотографии мамы и ребенка в блок “Картинка”. Задайте ей размер, в моем варианте письма размер картинки составляет 387px. Вы можете также воспользоваться банком картинок для поиска необходимого изображения, затем сделать ее черно-белой и добавить рамочку. Как это сделать можно увидеть на гифке ниже.
  1. Выровняйте добавленную картинку по центру, такое же выравнивание поставьте и для мобильной версии письма.


Создание письма ко Дню мамы

Следующий этап создания главного баннера — добавление заголовка на картинку.

Добавление заголовка на картинку

Создание баннера для письма ко Дню матери

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

  1. Откройте картинку для редактирования во встроенном фоторедакторе.

Создание баннера для письма ко Дню матери

  1. В открывшемся фоторедакторе выберите пункт “Текст”.

Создание баннера онлайн для письма ко Дню матери

  1. После нажатия на пункт “Текст” откроется панель работы с этим элементом. В ней нажмите “Добавить текст” и переместите на отведенное для текста место.

Создание баннера онлайн для письма ко Дню матери

  1. Начните набирать текст, кликнув в редактируемое поле, или вставьте свой текст через комбинацию Ctrl +V.

Дизайн письма ко Дню мамочки

  1. Установите тип шрифта для текста из выпадающего меню. Там вы найдете очень много декоративных шрифтов.

Онлайн редактирование фото для письма ко Дню матери

  1. Чтобы задать некоторым словам другой цвет, как на примере, нужно еще раз добавить текст, вписать туда слово или фразу, задать другой цвет или шрифт.

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

Онлайн редактирование фото для письма ко Дню матери

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

С картинкой мы справились. Дальше нужно добавить нашу декоративную фразу над картинкой.

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

Элементы для создания баннера

  1. Для блока “Текст” установите отступы как на картинке ниже.

Создания промо ко Дню мамы

  1. Впишите текст и задайте ему форматирование с помощью панели для форматирования текста:

Создания промо ко Дню мамы

  • Шрифт: Noticia Text
  • Размер шрифта:30px
  • Цвет шрифта: #6e7883
  • Заливка текста: #f0f8ff
  • Текстовый интервал:

Создания промо ко Дню мамы

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

Полоса 3. Создание баннера “Step 1”

Следующие 3 полосы в письме будут состоять из блоков “Баннер” и разделителей в виде картинок.

Основное отличие блока “Баннер” от блока “Картинка” в том, что его в любое время можно отредактировать: изменить существующий текст на новый, поменять размер, шрифт текста, сменить фильтр и так далее. После сохранения - баннер превращается в цельную картинку, что гарантирует отображение на почтовых клиентах в 99% случаев.

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


Пошаговое создание промописьма ко Дню мамы
 

  1. Перетащите в структуру блок “Баннер”.

Пошаговое создание промописьма ко Дню мамы

  1. Добавьте картинку одним из предложенных способов:

  • загрузите подготовленную картинку;
  • выберите из банка картинок, вбивая в поиске запрос на интересующую тематику;
  • добавьте ссылку на картинку из внешнего ресурса.

Пошаговое создание промописьма ко Дню мамы

  1. Выберите формат баннера. Для дизайна промописьма ко Дню мамы нам необходим квадратный баннер.

Пошаговое создание промописьма ко Дню мамы

  1. Добавьте на баннер текст с помощью кнопки с условной отметкой в виде буквы “Т”. После нажатия на нее на баннере нужно нарисовать разметку для текста.

Работа с блоком "Баннер"

 

На баннер можно добавлять столько текстовых блоков, сколько необходимо для дизайна. В нашем случае 2. Удаляется текст с помощью кнопки “Delete”.

  1. Впишите необходимый текст и задайте ему форматирование:

Для фразы “Step…”:

  • шрифт: Playfair Display - курсив.
  • цвет шрифта: #737788
  • размер шрифта: 45px

Для основной заглавной фразы:

  • шрифт: Playfair Display
  • цвет шрифта: #737788
  • размер шрифта: 37px.
  1. Расположите текст на баннере, опираясь на этот пример, или — на свое усмотрение.
  1. Голубая обводка, которую можно увидеть на баннере, добавляется всему контейнеру в панели редактирования контейнера. Цвет: #acd4e7, ширина - 7px.

Работа с блоком "Баннер"

Разделитель

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

Создание элементов дизайна письма ко Дню мамочки

Чтобы создать такой элемент:

  1. Перетащите структуру под баннер Step 1 и отключите отступы структуры.

Создание элементов дизайна письма ко Дню мамы

  1. Перетащите туда блок “Картинка” из вкладки “Блоки” или нажмите на значок картинки в структуре, затем загрузите туда картинку-разделитель с сердечками:

Создание дизайна письма ко Дню мамочки

 

Полоса 4. Создание баннера “Step 2”

Создание элементов дизайна письма ко Дню матери

 

Эта полоса создана точно так же как предыдущая. Чтобы упростить себе задачу, скопируйте 3-ю полосу и отредактируйте ее следующим образом:

Интересный баннер ко дню мамы

  1. Нажмите на баннер и замените картинку.

Онлайн создание баннера

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

Интересный баннер ко дню мамы

  1. Дальше останется только заменить цвет обводки контейнера на розовый. Цвет - #f0daed, ширина - 7px.

Создание интересного баннера ко дню мамы

 

Полоса 5. Создание баннера “Step 3” и кнопки

Нужно повторить действия по аналогии с 4 полосой, затем добавить блок “Кнопка”.

  1. Скопируйте полосу. Проделайте те же действия по замене картинки.

  2. Переместите текст вверх картинки и отредактируйте.

  3. Измените цвет обводки контейнера на голубой.

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

  1. Теперь добавьте в контейнер блок “Кнопка”. Его нужно перетащить именно в контейнер под баннер, чтобы он был внутри обводки.

Как создать письмо ко дню мамы

  1. Задайте кнопке параметры как на картинке:

Классная кнопка в баннере

Классная кнопка в баннере

Классная кнопка в баннере

На этом создание письма завершено. Надеюсь, вам понравились новые возможности блока “Баннер”, и вы обязательно будете использовать его при создании самых красивых и продающих писем не только ко Дню матери, а и по другим поводам. Вы можете просмотртеь много идей писем ко Дню матери в наших примерах, а также прочесть обзорную статью "10 идей для создания email рассылки ко Дню матери".

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

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