Создание дизайна письма к Пасхе в адаптивном редакторе еспутника

Создание промописьма к Пасхе на примере обувного магазина

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

Оформить поздравительное письмо к пасхе сложнее чем, к примеру, письма на 8 марта или день влюбленных, потому что с Пасхой возникает более узкий круг ассоциаций: весна, зайцы, яйца, куличи. И будьте уверены - эти атрибуты будут использованы множеством компаний по максимуму. Действительно, далеко от зайцев не убежишь, но ведь и атрибутику писем можно использовать по-разному, а как именно раскрыто в этой статье.

Само собой, оформление будет зависеть от вашего товарного предложения. Но как отличиться и быть круче конкурентов? Кажется, что на дизайн уйдет очень много времени и трудозатрат, но как бы не так! Давайте я на примере покажу, как легко создать красивое письмо в нашем редакторе.

Промописьмо к Пасхе на примере обувного магазина

Для вас я подготовила пасхальное промописьмо на примере обувного магазина. Идея письма: оповестить о скидке на весенне-летнюю коллекцию. Советы по оформлению, которым нужно следовать в процессе подготовки промописьма, следующие:

  • Если вы планируете использовать заливки, подставлять картинки в фон, то лучше все подготовленные фото товаров и другие картинки сделать в формате png (с прозрачным фоном). Если нет, можно использовать формат jpeg, главное, чтобы фон был белый.
  • Чтобы промописьмо выглядело корректно в мобильной версии, необходимо отключить адаптивность всех структур и картинок.
  • Шрифты и их размеры подбирайте в соответствии с вашей идеей оформления промо, или не стесняйтесь использовать те, которые использованы в примере.
  • Разделяйте составляющие письма на разные полосы, например: логотип и меню в одной полосе, баннер в другой полосе и карточки товара — в третьей. Так будет удобнее менять положение контентных единиц в рассылке или удалять лишние части.
  • Сложные части письма создавайте в отдельных структурах.

Карточки товаров к Пасхе

  • Центрирование текстов и  картинок легко корректируется с помощью отступов и возможности мобильного центрирования: справа, слева, по центру.  При создании своего промописьма регулируйте отступы разных объектов для визуального улучшения.

Промописмьо к Пасхе

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

  • Общий фон письма:  #fff9f9 - бледно розовый, ближе к белому.
  • Декоративные шрифты: Lora или стандартный шрифт Georgia. Шрифт на кнопках товаров, ценах и меню - Open Sans или Tahoma
  • Цвет фона структуры и блоков: #ffffff (белый основной).
  • Цвет шрифта на кнопка и основного шрифта: #333333
  • Цвет основной кнопки и декоративных элементов письма:  #fb9dcf (розовый), #bcd52f - салатовый.

Дизайн письма к Пасхе

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

ШАГ 1. Шапка письма (лого, меню)

Дизайн логотипа в пасхальном промо

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

Логотип

  1. Добавьте двойную структуру из вкладки “Структуры”. Затем задайте ей следующие параметры:

email-рассылка к Пасхе

  1. Отключите адаптивность структуры для корректного отображения на мобильных телефонах.

Адаптивность промописем

 

  1.  Добавьте в ячейки структур две картинки. Логотип выровняйте по левому краю и добавьте ему отступ сверху 40px; яйцо выровняйте по правому краю и задайте картинке размер 110 px.

пасхальный дизайн письма

  1. Чтобы превратить пасхальное яйцо в “веселого мексиканца” , выделите картинку, нажмите на “ВОЛШЕБНУЮ ПАЛОЧКУ”, после чего откроется фоторедактор.

Фоторедактор онлайн

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

оформление промописьма к Пасхальным праздникам

 

  1. После сохранения отключите адаптивность для картинки с помощью кнопки “Адаптивная картинка”.

Меню

  1. Перетащите под структуру с логотипом еще одну такую же структуру, задайте ей цвет: #333333, установите отступы справа и слева по 20px.

Структура письма

  1. Перетащите в структуру блок “Меню”, задайте контейнеру отступы сверху и снизу по 10px. В панели редактирования “Меню” установите следующие основные параметры и значения.

Работа с блоками в промописьмах

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

ШАГ 2. Баннер

Картинку для баннера я подыскала заранее на бесплатном фотостоке. Затем во встроенном фоторедакторе я добавила на нее текст и превратила таким образом в симпатичный баннер. Основное требование к картинке, чтобы при добавлении текста на нее он был читаемым.

Пасхальный баннер

Чтобы создать такой баннер:

  1. Перетащите в письмо структуру с одним отделением.
  2. Отключите отступы для структуры.
  3. Добавьте в нее блок “Картинка”.
  4. Затем загрузите подготовленную картинку, установите ширину 600 px и отредактируйте с помощью фоторедактора.
  • Чтобы добавите текст на картинку, нажмите на “Волшебую палочку”, как при создании дизайна пасхального яйца.

Создание баннера для промо онлайн

  • После открытия фоторедактора, найдите пункт “Текст”. Для добавления текста нажмите “Добавить текст”.
  • В выпадающем окне  найдите и установите шрифт Rochester.
  • После добавления текста на картинке появится поле для ввода, нажмите на него один раз и набирайте необходимый призыв.

Пошаговое руководство создания письма

У вас будет возможность менять размер каждого такого пункта. К примеру, чтобы добавить несколько призывов, необходимо нажать “Добавить текст” еще раз, затем: написать текст, задать размер и разместить в правильном положении. Если следовать примеру, то у вас будет 4 текста разного размера.

Пошаговое руководство создания письма

  1. Добавьте и разместите тексты как в примере и сохраните изменения.

ШАГ 3. Заголовок и карточки товаров

В этой части мы разберем:

  • как добавить заголовок
  • как создать два разных блока с карточками товаров и оформить их
  • как поставить разделитель между структурами

Дизайн товаров в email-рассылке к Пасхе

Заголовок

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

Дизайн товаров в email-рассылке к Пасхе

  1. Добавьте в структуру блок “Текст”. Задайте блоку выравнивание по центру. Для текста установите следующие параметры:
  • Цвет шрифта: #333333
  • Размер шрифта: 24px
  • Тип шрифта: Lora или Tahoma

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

В примере письма есть два типа блоков с товарами. В первом блоке представлено 2 товара, во втором - один товар по центру.

Создаем карточку с двумя товарами

Дизайн товаров в email-рассылке к Пасхе

  1. Добавьте в письмо структуру на три отдела. Установите параметры структуры в соответствии с картинкой ниже: отступы со всех сторон — 20px, отступы между контейнерами —  0px. Размеры контейнеров будут зависеть от размера ваших картинок. С помощью “+” или “-” размер контейнеров можно легко изменять. Отключите адаптивность структуры с помощью кнопки “Адаптивность”.

Дизайн товаров впроморассылке к Пасхе

  1. Накидайте блоки в структуру по примеру ниже.

Создание карточки товаров для письма к Пасхе

  1. Добавьте картинки и необходимый текст. Размер картинок подбирается индивидуально, основная задача, чтобы центральная картинка располагалась симметрично контейнерам с товарами. Для текста с ценами задайте следующие параметры:
  • Шрифт: Open Sans
  • Цвет: #333333
  • Размеры: зачеркнутый шрифт - 20px, основной - 28px.
  1. Для кнопок установите следующее форматирование: Общую границу 2px и цвет  #333333; внутренние отступы: сверху и снизу 5рх, справа и слева 30рх. Внешние отступы все по 5 рх. А также задайте стиль тексту, как в примере.

Пасхальный дизайн письма

Создаем блок с одной карточкой товара

 

оформление товаров в email-рассылке к Пасхе

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

Карточки товаров в промо к Пасхе

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

Карточки товаров в промо к Пасхе

Разделитель  между блоками с товарами

Разделитель в письме представлен в виде одной картинки, добавленной в одиночную структуру, со следующими параметрами:

  • размер - 600рх
  • выравнивание - по центру
  • адаптивность отключена
  • отступы сверху и снизу по 15рх

Разделитель можно копировать и перетаскивать в любую часть письма, в нашем случае — между карточками товаров.

пОШАГОВОЕ РУКОВОДСТВО СОЗДАНИЯ КАРТОЧЕК ТОВАРОВ ДЛЯ ПИСЬМА К ПАСХЕ

ШАГ 4. Главная кнопка перехода на сайт

Элементы дизайна в промописьмах к Пасхе

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

  1. Для структуры с кнопкой задайте такие отступы:

Элементы дизайна в промописьмах к Пасхе

 

  1. Основные параметры оформления кнопки выглядят следующим образом:

Главные кнопки перехода на сайт в промо к Пасхе

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

Главные кнопки перехода на сайт в промо к Пасхе

  1. Добавьте еще одну структуру с картинкой, уберите отступы структуры и установите размер картинки 600px.

    Вот мы и завершили создание нашей весенней email-рассылки к Пасхе. Надеюсь, вам пригодится полученная информация, и вы вдохновились нашей идеей для создания своего классного пасхального письма. 

    Посмотреть больше примеров писем к празднику Пасха можно в нашей обзорной статье “Примеры писем или о чем писать в письмах к пасхе?”

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

Создание промописьма к Пасхе на примере обувного магазина