How-To. Как создать письмо к 1 сентября

0
60

How-To. Как создать письмо к 1 сентября

Ищете вдохновение для создания email-рассылки ко Дню знаний?

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

Как просто создать рассылку ко Дню знаний?

В качестве примера мы взяли письмо интернет-магазина детских товаров. Вот так должно выглядеть наше письмо в конце:

How-To. Как создать письмо к 1 сентября

Рассмотрим создание каждого элемента письма отдельно. Для создания письма вы выбрали шаблон “Проморассылка”:

How-To. Как создать письмо к 1 сентября

Хедер

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

How-To. Как создать письмо к 1 сентября

How-To. Как создать письмо к 1 сентября

Нажимаем на логотип, слева в меню выбираем “Заменить”:

How-To. Как создать письмо к 1 сентября

Картинку можно загрузить двумя способами: или с компьютера, или дать ссылку на внешний ресурс:

How-To. Как создать письмо к 1 сентября

Загрузив картинку, задаем ширину 240 px:

How-To. Как создать письмо к 1 сентября

Отступы ставим 0 все, кроме Сверху — 10:

How-To. Как создать письмо к 1 сентября

Теперь работаем с блоком “Меню”. Добавляем блок под логотип:

How-To. Как создать письмо к 1 сентября

Выставляем стиль текста:

  • Шрифт: Helvetica

  • Кегль: 14 px

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

  • Цвет: #333333.

Отступы оставляем сверху и снизу — 10:

How-To. Как создать письмо к 1 сентября

Не забываем назвать каждый Пункт и задать ему нужную ссылку:

How-To. Как создать письмо к 1 сентября

С полосой Хэдер мы закончили. Переходим к полосе “Контент”.

Контент

“Контент” — это полоса, в которой содержится вся основная информация письма. Мы будем делать все в одной полосе, чтобы не удлинять код.

Для начала удалим все ненужные нам полосы, оставив только одну:

How-To. Как создать письмо к 1 сентября

Добавляем структуру с одним контейнером и в неё вставим блок “Картинка”. В этот раз воспользуемся ссылкой из внешнего источника и вставим туда GIF-изображение. Ширину его уменьшим до 120 px, чтобы оно было небольшое:

How-To. Как создать письмо к 1 сентября

Добавляем новую структуру “Баннер”:

How-To. Как создать письмо к 1 сентября

How-To. Как создать письмо к 1 сентября

Добавляем в баннер изображение по аналогии с логотипом.

Перейдем к структуре баннера и уберем все отступы, чтобы его размер был пропорционален письму:

How-To. Как создать письмо к 1 сентября

Чтобы наш Баннер был кликабельнее и красивее, добавим на него текст:

How-To. Как создать письмо к 1 сентября

Пишем то, что пожелает Ваша творческая душа :)

В нашем случае это “Back To School В МАГАЗИН”.

Выставляем стиль текста:

  • Шрифт: Helvetica

  • Кегль: Back to School — 40 px, В МАГАЗИН — 20 px

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

  • Цвет: #000000.

How-To. Как создать письмо к 1 сентября

Не забываем задать баннеру нужную ссылку и Альтернативный текст:

How-To. Как создать письмо к 1 сентября

Теперь нужно добавить разделитель.

Идем в блоки и выбираем “Разделитель”, перетаскиваем его под баннер.

Задаем ему толщину линии — 2, цвет — #cccccc:

How-To. Как создать письмо к 1 сентября

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

How-To. Как создать письмо к 1 сентября

У нас получился разделитель, который пропорционален баннеру:

How-To. Как создать письмо к 1 сентября

Добавляем блок “Текст”:

How-To. Как создать письмо к 1 сентября

Пишем надпись, у нас это “ВЫ ГОТОВЫ?”, и задаем такие параметры:

  • Шрифт: Helvetica

  • Кегль: 48 px

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

  • Цвет: #e06666

Обязательно центрируем текст для десктопа, и для мобильной версии:

How-To. Как создать письмо к 1 сентября

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

How-To. Как создать письмо к 1 сентября

How-To. Как создать письмо к 1 сентября

Далее выставляем нужные нам параметры текста:

  • Шрифт: Helvetica

  • Кегль: 18 px

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

  • Цвет: #333333

И опять центрируем.

Добавляем структуру, состоящую из трех контейнеров и загружаем в нее изображения.

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

How-To. Как создать письмо к 1 сентября

How-To. Как создать письмо к 1 сентября

Теперь включим Rollover, чтобы при наведении на контейнер картинка менялась:

How-To. Как создать письмо к 1 сентября

Получается такой эффект:

How-To. Как создать письмо к 1 сентября

Добавляем блок “Кнопка” под изображение рубашки:

How-To. Как создать письмо к 1 сентября

Редактируем кнопку:

How-To. Как создать письмо к 1 сентября

Указываем нужную ссылку.

Обязательно прописываем текст кнопки названием товара.

Цвет кнопки задаем #ffffff

  • Цвет текста #333333

  • Шрифт Helvetica

  • Кегль 14 px

  • Начертание — жирный.

Закругление — 8.

Выставляем толщину границ — 2, цвет #333333

Внутренние отступы — по 5

Внешние отступы Слева, Справа и Снизу — 10, Сверху — 0.

How-To. Как создать письмо к 1 сентября

Теперь просто дублируем кнопку, переносим под каждое изображение и задаем ей нужное название:

 

How-To. Как создать письмо к 1 сентября

Выделяем нужный нам контейнер и переходим к структуре, задаем обводку — 2 px, цвет #333333:

How-To. Как создать письмо к 1 сентября

Так делаем с каждым контейнером.

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

How-To. Как создать письмо к 1 сентября

Итог:

How-To. Как создать письмо к 1 сентября

Теперь закидываем структуру с одним контейнером и в неё добавляем блок “Кнопка”.

Включаем Цвет кнопки по наведению:

How-To. Как создать письмо к 1 сентября

Настройки кнопки выглядят так:

How-To. Как создать письмо к 1 сентября

How-To. Как создать письмо к 1 сентября

Мы сделали кнопку, которая при наведении меняет цвет.

Теперь нам нужно вернутся к кнопкам, которые мы создавали ранее, и задать им новые настройки, так как функция “Изменение цвета” сработала и на них:

How-To. Как создать письмо к 1 сентября

Получаем красивые кнопочки :)

Опять работаем с блоком “Меню”.

Перетягиваем его под структуру с кнопкой и в настройках выбираем тип меню “Иконки и ссылки”:

How-To. Как создать письмо к 1 сентября

По умолчанию подтягивается 3 пункта, но мы добавим еще два. И в каждый загрузим нужную нам иконку, после чего подпишем каждый пункт. В нашем случае иконки получились маленькими, поэтому мы задали им размер 50.

А стиль текста у нас получился:

  • Шрифт: Helvetica

  • Кегль: 14 px

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

  • Цвет: #333333.

Отступы оставляем Сверху и Снизу по 10:

How-To. Как создать письмо к 1 сентября

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

Вот, что получилось:

How-To. Как создать письмо к 1 сентября

Пришло время снова добавить разделитель ;)

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

После необходимо перейти к структуре и снова убрать отступы слева и справа:

How-To. Как создать письмо к 1 сентября

Блок с промокодом

Создаем часть письма с промокодом.

Добавляем блок “Текст”, выставляем настройки:

  • Шрифт: Helvetica

  • Кегль: 20 px

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

  • Цвет: #333333.

“-40%” выделяем цветом, которым выше мы писали “ARE YOU READY?” и ставим кегль — 30 px. Центрируем текст.

Добавляем структуру из трех контейнеров.

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

Маленький лайфхак, как сделать левый и правый пустыми:

How-To. Как создать письмо к 1 сентября

Теперь работаем с центральным контейнером.

В нем пишем промокод на скидку.

Текст:

  • Шрифт: Helvetica

  • Кегль: 26 px

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

  • Цвет: #333333.

Обязательно центрируем текст.

Отступы везде задаем по 10:

How-To. Как создать письмо к 1 сентября

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

Толщина — 2, обводка, выполненная пунктиром, цвет — #3d85c6. Закругление выставляем 0:

How-To. Как создать письмо к 1 сентября

Получаем вот такой блок:

How-To. Как создать письмо к 1 сентября

Снова добавляем структуру с одним контейнером и в неё закидываем блок “Текст” и пишем текст такого плана:

“Скопируйте этот промокод и укажите его в поле «Дополнительная информация» при заказе”

Настройки этого текста:

  • Шрифт: Helvetica

  • Кегль: 12 px

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

  • Цвет: #cccccc

Дублируем разделитель и перетягиваем его под текст.

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

Наша структура с промокодом готова:

How-To. Как создать письмо к 1 сентября

Блок с видео

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

Слева кидаем блок “Видео”, после чего добавляем в поле “Ссылка на видео” ссылку:

How-To. Как создать письмо к 1 сентября

У нас автоматически подтянется видео.

В правый контейнер мы добавляем блок “Изображение” и закидываем туда картинку:

How-To. Как создать письмо к 1 сентября

По размеру видим, что изображение нужно немного подрезать, для этого нажимаем на кнопку редактирования картинки и задаём нужные параметры:

How-To. Как создать письмо к 1 сентября

How-To. Как создать письмо к 1 сентября

Потом переходим к структуре и убираем отступы слева и справа. Видно, что контейнеры стали немного неравны:

How-To. Как создать письмо к 1 сентября

Поэтому контейнеру с видео зададим размер 284. И таким образом у нас получаются одинаковые контейнеры:

How-To. Как создать письмо к 1 сентября

С полосой Контента мы закончили. Переходим к полосе “Футер” и заканчиваем ею письмо :).

Футер

Добавляем новую полосу и выставляем в её настройках “Футер”:

How-To. Как создать письмо к 1 сентября

Закидываем в неё структуру из двух контейнеров.

В левой части мы пишем контакты:

  • Шрифт: Helvetica

  • Кегль: 14 px

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

  • Цвет: #333333

Снова центрируем.

В правый контейнер добавляем блок “Соц. сети” и обязательно для каждой соц сети задаем ссылку:

How-To. Как создать письмо к 1 сентября

Вниз добавляем структуру с одним контейнером, кидаем туда блок “Текст” и пишем примерно такой текст:

Вы получили это письмо на адрес %EMAIL% так подписались на рассылку на сайте SchoolShop.com. Вы пропустите много интересного, если нажмете на кнопку отписаться.

Выделяем слово отписаться и задаем ему ссылку:

How-To. Как создать письмо к 1 сентября

How-To. Как создать письмо к 1 сентября

Теперь поработаем с фоном.

Выделяем полосу Хедер и задаем ей Цвет фона полосы: #ffffff

То же самое проделываем с Футером.

Теперь выделяем полосу контент, задаем Цвет фона контента — #ffffff и добавляем картинку в фоне, после чего включаем “Повторять картинку” и “Выровнять по центру”:

How-To. Как создать письмо к 1 сентября

Письмо готово!

How-To. Как создать письмо к 1 сентября

Зарегистрироваться

Получить бесплатный шаблон письма

 

Как видите, редактор eSputnik дает массу возможностей для создания писем. Вам нужно только немного времени и креатива!

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

Присоединяйтесь и создавайте красивые письма вместе с нами! :) До новых встреч!

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here