Как бесплатно создавать красивые шаблоны для email-рассылок без знания HTML

Евгений Невский
Евгений Невский
12-02-2021
1608

Ваши письма для email-кампаний должны быть красивыми и функциональными. Еще они должны отличаться от конкурентов, быть оригинальными, но при этом понятными, цепляющими, передавать ваши ценности, быть лицом вашей компании и т.д.  

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

Используя Stripo вы сможете регулярно обновлять дизайн ваших ваших емейл-рассылок. Хороший повод изменить дизайн писем - смена сезона, поступление нового товара, любой праздник и просто когда хочется чего-то нового. 

Основное преимущество Stripo - вы легко создадите письмо, не владея навыками программирования, не зная принципов верстки и HTML. При этом письмо будет адаптировано под любое устройство. И легко импортируется в ваш сервис рассылок. 

Библиотека Stripo содержит более 300 шаблонов, которые можно взять за основу. Каждый из этих шаблонов можно изменять под ваш вкус и требования - добавлять новые блоки, удалять существующие. Заменять одни элементы на другие - картинки на текст или кнопки и наоборот. 

Если не можете найти готовый шаблон, который устраивает вас на 100%, возьмите тот который примерно напоминает желаемый дизайн и сотворите свой идеальный макет письма.

Как бесплатно создать макет письма в Stripo

После завершения процесса регистрации вы попадаете в свой личный кабинет, где сможете создавать письма. Во вкладке “Шаблоны”, “Подготовленные шаблоны” представлено большое количество вариантов, которые подобрал для вас сервис, руководствуясь вашими ответами при регистрации. 

Но, обратите внимание, здесь очень много шаблонов, которые обозначены специальным значком. Их можно использовать только на платных тарифах. А мы хотим это сделать бесплатно.

stripo-shabloni

Бесплатный тариф предоставляет возможность создать 2 макета письма и скачать их 4 раза. Т.е., каждый шаблон можно скачать по 2 раза. Это удобно, если с первого раза вы что-то забыли, ошиблись. У вас есть шанс внести исправления и скачать шаблон еще раз. 

Или вам надо 2 похожих макета под различные кампании. Подготовили первый макет и скачали. Затем внесли изменения для второго макета, добавили кнопок, таймер, баннер в тот же шаблон, и опять скачали.

Бесплатным тарифом можно пользоваться неограниченное количество времени. Но если вы проводите несколько различных емейл-кампаний, проще перейти на платный тариф. 

На платном тарифе намного интереснее шаблоны и больше возможностей. Минимальная стоимость - 10,42$ в месяц, если внести оплату сразу за год 125$. В этом тарифе можно создать в месяц 15 шаблонов и экспортировать их 300 раз. 

Как отредактировать письмо.

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

После того, как вы перешли в режим редактирования, выберите вкладку “Оформление”. Здесь общие настройки для письма. По умолчанию установлена ширина 600. Можно изменить, но увеличивать не рекомендуется. 

stripo-obschie

Включите “Подчеркивание ссылок” и “Адаптивность письма”. Можете задать “Картинку в фоне” и сделать ее повторяющейся или просто установить цвет фона письма. Также в этом разделе можно установить общие шрифты, интервалы, отступы и прочее. Это будет применимо к новым блокам, которые вы будете добавлять в письмо.

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

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

Если вам нужно добавить ссылки к определенным словам в тексте - выделите нужное слово или словосочетание; в верхней части панели настроек кликните значок “Ссылка”; в открывшемся окошке вставьте вашу ссылку. 

1. Добавить ссылку
2. Предварительный просмотр покажет как ваше письмо отображается на компьютере и в телефоне.
3. Можно добавить эмодзи при необходимости

stripo-dobavit-ssilky

Блок с изображением. Кликните по блоку с изображением на макете, слева появится панель настроек. Загрузите свое изображение, нажав “Заменить” и перетащите картинку в открывшееся поле. Здесь же ее можно отредактировать, нажав на вторую половину кнопки.

stripo-kartinka

Отредактируйте ссылки на изображениях. По умолчанию все ссылки ведут на сайт Stripo. Вставьте свою ссылку или удалите ее, если она вам не нужна. И введите атрибут alt. 

Можно создать эффект ролловер. Т.е. при наведении курсора картинка изменится. Это удобно для рассылок интернет-магазинов.

Редактирование кнопок. Вставьте ссылку и напишите текст кнопки. Установите шрифты, цвет кнопки и текста. Отрегулируйте закругление.

stripo-pravka

Сделайте настройки для просмотра на смартфоне. На панели настроек перейдите во вкладку “Оформление”. Затем кликните вкладку “Адаптивность” и задайте параметры для размера заголовков, текста кнопок и контента в разных блоках.

Как добавить необходимые элементы в письмо. 

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

Например, вам понравился макет, но на нем нет кнопок. Выберите вкладку “Контент” и “Блоки”. Кликните по элементу “Кнопка” и перетащите ее в необходимое место на макете. 

stripo-bloki

Как добавить таймер обратного отсчета

В начале выберите структуру с 1 колонкой и перетащите ее в шаблон на то место, где необходимо разместить таймер. Зайдите в Блоки и перенесите курсором в эту колонку Таймер. Появится окно, где можно выбрать дату и точное время до которого ведется отсчет.

stripo-stryktyra

Выберите цвет цифр и фона таймера. Убедитесь, что включена возможность “Отображать дни”. Будет дополнительно показано количество оставшихся дней, а не только часов и минут. Согласитесь, “2 дня 5 часов” будет восприниматься лучше, чем “53 часа”. Затем включите “Подписи цифр таймера” для отображения названий каждого элемента таймера.

Желательно включить кнопку “Картинка по окончанию таймера”. Это поможет понять, что срок действия акции истек. Для этого загрузите изображение, которое будет показано клиентам после завершения обратного отсчета. Укажите Alt-текст.

Вставьте URL-ссылку, по которой получатели будут перенаправлены на подробное описание вашей акции или предложения. Эта ссылка будет также применена к картинке по окончанию обратного отсчета таймера.

Как создать хедер или футер с помощью Stripo.

Подберите шаблон с хедером и футером, которые вам подходят  и замените все  имеющиеся элементы на свои - логотип, меню, кнопки соцсетей, текст. Если вам понравился шаблон, но хедер или логотип вас не устраивают, сделайте их сами. 

Хедер обычно состоит из логотипа и меню. Добавьте необходимую структуру в письмо. Например вставьте вначале структуру с 1 колонкой для логотипа, затем с 2 или 3 колонками, в зависимости от количества блоков в вашем меню.

stripo-header

Вставьте свой логотип. Он вставляется как обычное изображение. Установите ссылку, которая приведет на ваш сайт. И добавьте Alt-текст.

Футер - составной элемент. Чтобы построить его, вам нужно: перетащить структуру с нужным количеством колонок; ввести текст в эти колонки; отредактировать текст; вставить соответствующую ссылку в опцию отписки; добавить иконки соцсетей. 

stripo-futer

Также футер можно добавить после переноса шаблона в сервис рассылок Estismail. 

Как перенести письмо в сервис рассылок.

Когда письмо готово, необходимо его экспортировать, чтобы потом загрузить в сервис рассылок.

Для этого сверху посредине нажмите зеленую кнопку “Экспорт” и выберете HTML. В открывшемся окне опять нажмите кнопку “Экспорт”.

stripo-eksport

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

В личном кабинете Estismail нажмите на кнопку “Создать новый макет”, затем:

1. Поставьте галочку напротив “Использовать простой текстовый редактор”, 
2. Нажмите “Источник”, 
3. Вставьте скопированный код.

stripo-vstavka-v-estis

 

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

Ваши письма всегда будут красивыми и узнаваемыми!

 

Письма блокируются почтовыми провайдерами, что делать?
Письма блокируются почтовыми провайдерами, что делать?
9 вечных трендов в дизайне email-маркетинга: инструкция по применению
9 вечных трендов в дизайне email-маркетинга: инструкция по применению
Подписаться
Хочу получать новые статьи на почту

Как прогреть IP: пошаговая инструкция по прогреву IP для B2B компаний
Как прогреть IP: пошаговая инструкция по прогреву IP для B2B компаний
Как проверять IP на блеклисты: подборка инструментов с инструкциями
Как проверять IP на блеклисты: подборка инструментов с инструкциями

Начни свой Email Маркетинг с бесплатного тарифа и возможностью использовать максимальные функции сервиса