Привет, маркетологи и немаркетологи! На связи Лилит из enKod’а 👩🏽💻
Создание email-писем стало гораздо проще – теперь вёрстка не требует глубоких знаний в HTML и CSS. Если хотите научиться не только создавать красивые макеты писем для рассылки, но и сами письма, – эта статья для вас. Расскажу, как можно использовать Figma для вёрстки email-писем в enKod.
Выбор Figma
«Вот бы письма можно было так же красиво и быстро верстать в платформе, как их макеты в Figma» – подумала я однажды. Поискала и нашла способ. Если тоже не хотите тратить кучу времени на вёрстку, но хотите уникальный дизайн – welcome =)
Figma — это инструмент для дизайна интерфейсов и прототипирования, который набрал такую популярность благодаря простоте, доступности и возможности работы в команде онлайн. Но далеко не все знают, сколько возможностей дают плагины Figma.
Например, Ampier Email Generator, Emailify HTML Email Builder, Marka Email Generator и многие другие плагины позволяют создавать письма прямо в Figma. Изучим подробнее этапы вёрстки с помощью плагина Ampier Email Generator.
Плагины Figma для вёрстки email-писем
Этапы вёрстки писем через плагин Figma – Ampier
Рассмотрим вёрстку простого письма через плагин Ampier на примере рассылки enKod.
Этап 1. Установка плагина
Чтобы установить плагин Ampier в Figma, нужно (смотри скрин ниже):
- Открыть список всех доступных плагинов и ввести в строке поиска Ampier.
- Нажать на плагин в результате выдачи и в открывшемся окне нажать Run.
- Готово, плагин отобразится рядом с панелью инструментов, в правой части.
Установка плагина Ampier
Этап 2. Создание письма
Можно создавать пустое письмо, а можно на основе простого шаблона. Я выберу первый вариант, чтобы показать, как можно добавлять в письмо самые разные элементы.
Создание письма
После выбора создания письма на экране появится пустое письмо с темой по умолчанию. Её можно изменить в свойствах письма:
Изменение темы письма
Советую также прочитать нашу статью о том, как правильно нужно создавать дизайн письма. Особенно полезно будет для тех, у кого пока небольшой опыт в этом =)
Этап 3. Дизайн письма
Самая интересная часть – собственно, вёрстка. Создаём письмо так, чтобы были все необходимые элементы — хедер, тело и футер, а между ними – воздух. Что для этого нужно сделать:
- Во вкладке «Блоки» выбрать нужный элемент и двойным щелчком перенести на письмо.
- Редактировать элемент при необходимости.
- Перейти во вкладку «Предпросмотр», чтобы убедиться, что все элементы выглядят так, как вы хотели =)
Например, создадим шапку письма:
Добавление элемента
Предпросмотр
Постепенно добавляя и редактируя все элементы, в итоге получаем такое письмо:
Дизайн письма
Этап 4. Экспорт письма
Дизайн готов, теперь нужно экспортировать письмо в сервис для рассылки, в нашем случае – в платформу enKod.
Есть один нюанс: если у вас пробный доступ Ampier, то число экспортируемых писем будет ограничено до 5.
Итак, как же экспортировать письмо в enKod? Рассмотрим пошагово, что для этого нужно сделать:
- Открыть предпросмотр письма и нажать «Экспорт».
Экспорт письма
- Задать тему письма и при желании текст прехэдера. Их можно будет потом поменять в enKod при настройке отправки.
Экспорт письма
- Разархивировать папку письма, выбрать HTML-файл и открыть его в любом браузере.
Открытие HTML-файла письма
- Открыть код страницы в браузере и скопировать.
Просмотр кода страницы
Копирование кода страницы
- Перейти в платформу enKod и создать новое письмо, выбрав «Редактор Stripo». Это важно для того, чтобы потом можно было редактировать письмо в самой платформе с помощью инструментов Stripo, не вмешиваясь в код =)
Создание письма в enKod
- Открыть HTML-консоль в редакторе Stripo и вставить код, который скопировали.
HTML-консоль в Stripo
Вуаля, наше письмо готово! Причём его также можно редактировать в платформе при необходимости – менять текст, ссылки и т.д.
Готовое письмо в enKod
Заключение
Такой способ позволит вам создавать уникальный дизайн писем, даже если вы не владеете HTML или CSS.
Больше интересного про автоматизацию маркетинга и крутые инструменты рассказываем в нашей полезной рассылке – подпишитесь =)
