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

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

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

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

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

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

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

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

• при необходимости легко перемещать объекты в письме;
• скрывать полосы при отображении на мобильных устройствах;
• задавать полосам разные цвета и другие параметры.

2. Для баннеров в промописьме подобраны картинки со свободным местом для текста. Рекомендованный размер картинок: ширина - 600px, высота примерно такая же.

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

• шрифт: Playfair Display
• цвет шрифта: #737788
• размер шрифта: 37px.

6. Расположите текст на баннере, опираясь на этот пример, или — на свое усмотрение.

7. Голубая обводка, которую можно увидеть на баннере, добавляется всему контейнеру в панели редактирования контейнера. Цвет: #acd4e7, ширина - 7px.

Разделитель

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

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

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

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

 

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

 

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

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

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

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

 

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

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

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

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

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

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

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

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