Мы предлагаем 4 способа создать email шаблон бесплатно. Один из вариантов — воспользуйтесь готовыми шаблонами, разработанными нашими дизайнерами. Следуйте этой пошаговой инструкции и вы сможете создать профессиональный шаблон самостоятельно.
Четыре способа создать email шаблон
- Выбрать готовый шаблон
- Создать шаблон с помощью блочного редактора
- Работа в упрощенном редакторе (рекомендуем использовать HTML-редактор только пользователям, которые разбираются в HTML-коде)
- Импорт шаблона из файла, по ссылке и с помощью вставки кода.
Основные преимущества конструктора
-
нужный блок или элемент макета добавляется просто перетащив его в шаблон письма с помощью мыши
-
легко редактировать каждый элемент, изменяя цвет, стиль, размер и другие параметры
-
вам не нужно обладать специализированными знаниями, уметь работать с html-кодом и т.п. чтобы создать эффективное письмо
Первым шагом мы предлагаем вам ознакомиться с элементами, которые можно использовать для создания письма.
Перейдите в меню «Шаблоны сообщений» и нажмите «Добавить шаблон».
Дальше выберите нужную структуру шаблона.
В примере мы остановимся на шаблоне со структурой «Новости».
Перед вами «Конструктор шаблонов».
На панели слева доступны элементы, которые можно добавлять в письмо, на панели справа – варианты редактирования выбранного элемента. По центру — изначальный шаблон, который вы и будете править, добавляя и редактируя элементы.
Рекомендуем для каждого елемента шаблона (картинка, текст, видео и тд) создать отдельный блок структуры.
Дизайн всего письма настраивается в разделе «Тело Письма» — тут можно задать единый цвет ссылок, единый цвет и тип шрифта, расстояние между строками, ширину письма и его фон, контур.
Группы элементов конструктора писем
Текстовые элементы
Добавление текстового блока
Выберите слева элемент “Текст” и перетащите его в шаблон.
Вы увидите в центре визуальное отображение текста в блоке и параметры для оформления текста справа.
Все правки производятся в редакторе. В шаблоне можно в режиме реального времени видеть, как изменяется текст после правок. Доступные параметры для редактирования текста: цвет текста, шрифт, высота строки, цвет фона, внутренний отступ, высота блока, контур/
Кроме того, в визуальном редакторе текста вы можете добавить гиперссылку, маркированный или нумерованный список, вставить переменные, якори и тд.
Важно! Если вы хотите добавить текст в редактор копипастом (скопировать-вставить), то рекомендуется копировать текст из простого текстового файла (.txt). В противном случае в редактор могут подтянуться стили из вашего Word файла, что может нарушить макет. Скопируйте текст из файла word, вставьте текст в файл txt и снова скопируйте текст уже из текстового файла перед тем, как вставить его в редактор шаблона.
При работе с текстом вы можете: выбрать стиль параграфа, шрифт, его размер, полужирный текст, курсив, выделить другим цветом отдельное слово, добавить список, отступ.
Отдельные параметры есть и для редактирования блока: цвет фона и отступ от краев (равноценный отступ текста от краев блока: сверху, снизу, слева и справа).
Кликните по стрелочке справа от выбора переменных чтобы открыть выпадающее меню, где спрятаны некоторые опции редактирования текстового блока:
Изменим размер и стиль шрифта, добавим фоновый цвет для блока, контур и установим отступ от всех краев 50px. Результат будет вот такой:
Переменные
Добавление переменных происходит внутри текстового блока – меню “Переменные” с выпадающим списком предустановленных переменных.
Если вы хотите использовать переменные, которые доступны для конкретной адресной книги, то сначала создайте новую рассылку в меню Мои Рассылки-Создать email-кампанию.
Структура с элементом «Прехедер»
Прехедер – это текст, который виден подписчикам в почтовом клиенте сразу после темы.
Выбираем нужный элемент в конструкторе (находится в "Добавить структуру - Примеры"), перетаскиваем в шаблон и размещаем над всеми элементами сверху.
По умолчанию блок “Прехедер” состоит из двух элементов в двух колонках: непосредственно прехедер и веб-версия письма.
Чтобы начать редактировать элемент, просто кликните на нем левой кнопкой мыши
Структура с элементом «Футер»
Футер – это то, чем заканчивается письмо – блок с контактами компании (адрес, телефон, сайт) и другой полезной для подписчиков информацией.
Добавьте футер в шаблон, измените текст и установите параметры блока.
Вы можете выбрать внешний вид футера: будет ли он сплошным или разделенный на две колонки.
Как и в любом другом блоке, в футере вы можете изменить текст, добавить данные своей компании и задать фоновый цвет блока вцелом.
Обратите внимание на переменную {{ec_es_email_sender_company}}
в футере — в нее из настроек аккаунта подставляется название компании отправителя из меню «Настройки аккаунта» -> «Юр. лица» -> «Компания»
Блок с элементом «Ссылка отписки»
По умолчанию ссылка отписки добавляется в каждое письмо автоматически, но вы можете использовать свою ссылку.
Элемент “Отказаться от рассылки” находится в выпадающем меню "Переменные".
Вставить ссылку отписки можно в любой блок письма.
Подробнее о кастомизации отписки узнайте из этой статьи.
Если вы не создавали ссылку отписки, тогда в шаблон добавится стандартная ссылка отписки “Отказаться от рассылки”. Что касается параметров редактирования, в этом блоке вы можете изменить: цвет (блока и текста), шрифт (стиль, размер и начертание), положение текста (выравнивание: слева, справа, по центру), отступ текста от краёв блока, высоту строки.
Блок с элементом “Картинка”
Добавление картинки
В левом меню выберите блок «Картинка» и перетащите его с помощью мыши в шаблон письма.
Изображение можно добавить двумя способами: загрузить с компьютера или выбрать из картинок, которые вы ранее загружали в email сервис.
Изображения, ранее загруженные в email-сервис, хранятся в Менеджере Изображений, который находится в меню Рассылки-Шаблоны сообщений:
После загрузки (или выбора в галерее), изображение появится в шаблоне.
Параметры каждого изображения могут быть изменены:
Подпись картинки (Альтернативный текст)
Бывают случаи, когда почтовый клиент не отображает картинки в вашем письме рассылки. Тогда на месте изображения и будет показана указанная вами подпись картинки (альтернативный текст).
Если подписи к картинке нет, отобразится название файла — непонятное для получателя и подозрительное для спам-фильтров.
Поэтому мы рекомендуем для каждой картинки указывать понятную подпись.
Редактирование картинки
Ширина изображения
Каждое изображение, добавленное в шаблон письма, изначально имеет размер 100%.
Можно уменьшать его, изменять размер от 100% до 10%. Однако имейте в виду, что в мобильной версиии все изображения отображаются 100% размера.
Учтитывайте, что изменение ширины картинки тянет за собой связанное изменение высоты, по-этому, лучше менять размеры изображения ДО того, как вставлять ее в редактор шаблона.
Выравнивание
Под выравниванием подразумевается расположение картинки относительно краев блока, в котором она находится.
Картинку можно выровнять по левому краю, по правому краю и по центру.
Отступ от края
Значение этого параметра – равномерный отступ изображения от краев блока: сверху, снизу, справа и слева.
Задать цвет фона
Этот параметр задает фоновый цвет для блока, в котором находится изображение.
Контур
Хотите, чтобы изображение обрамлялось рамкой? Поставьте галочку на «Контур», а затем укажите цвет, тип и ширину рамки. Кликните по свободному полю и изменения сразу же отобразятся в шаблоне.
Ссылка
Используйте эту опцию чтобы добавить в картинку гиперссылку.
Также можно вместо гиперссылки указать контактный номер телефона или имейл-адрес.
Если прикрепить номера телефона, то, кликнув по этому изображению в полученном письме, запустится телефонное приложение, установленное в системе получателя по умолчанию, и пойдет вызов на указанный номер.
Если выбрать вставку «Email», то появится окно для автозаполнения темы письма
Когда получатель кликнет по такому изображению, запустится его почтовое приложение и откроется окно с новым письмом с уже заполненными полями адреса получателя и с темой, указанными вами в конструкторе шаблона:
Важно! Всегда указывайте полную ссылку на страницу, начиная с http://
Блок с элементом «Кнопка»
Выбираем нужный элемент в левой панели конструктора и перетаскиваем его в шаблон.
Укажите ссылку на страницу, куда должна вести кнопка, и текст, который получатель будет видеть на кнопке.
Вы можете выбрать стиль кнопки, изменить ее ширину, высоту, цвет, выравнивание относительно краев блока, степень скругления углов кнопки, расположение текста на ней.
Яркий призыв к действию, оформленный в красивом стиле — дополнительный шанс, что получатель заметит кнопку и захочет её нажать, перейти на ваш сайт.
Поэтому обращайте внимание и на параметры текста.
Кроме того, как и с картинкой, клик получателя по кнопке может запускать вызов по указанному вами номеру телефона или отправку письма (при этом можно указать тему такого письма для ее автозаполнения в почтовом приложении получателя).
Редактирование параметров блока заключается в выборе фонового цвета и указания отступа внутренних элементов от края блока.
Блок с элементом «Разделитель»
Этот элемент можно использовать в случае, когда нужно визуально отделить в шаблоне два блока друг от друга.
Разделить блоки можно отступом или линией.
Если выбрать отступ, то ему можно задать цвет, и тогда блоки с элементами будут разделены цветным блоком:
Можно также использовать разделитель-линию, стиль которой можно выбрать из выпадающего списка
Блок с элементом «Видео»
Чтобы добавить видео, перетащите соответствующий блок в шаблон и укажите youtube ссылку на ролик в формате https://youtu.be/GcaZtTDT65w
В шаблоне автоматически отобразится скриншот превью, при клике на который пользователь попадет на страницу просмотра видео.
Вы можете менять расположение и размер предпросмотра, устанавливать фон, отступы внутри блока.
Блок «Соцсети»
Перетащите соответствующий блок в нужную часть шаблона и приступайте к его редактированию.
Вы можете выбрать внешний вид иконок, добавить или удалить иконки, задать ссылки и т.п.
Можно вставить только иконки соцсетей, можно добавить текст-подпись (название соцсети или любой другой текст), можно оставить только текст.
Обратите внимание на выбор типов ссылок:
Follow-ссылка: требует указать адрес страницы или ID профиля, на которые сможет подписаться получатель письма после перехода по ссылке.
Шаринг письма: кликнув по ссылке получатель распостранит веб-версию письма.
Шаринг ссылки: требует указания url страницы, которую получатель письма распостронит в своей ленте новостей после клика.
Оплата
Элемент Оплата используется для предоставления опции оплаты в письме
Выберите этот элемент в левой панели конструктора и кликните по нему.
Появятся две опции оплаты: Яндекс.Касса и QIWI
При вставке этих вариантов оплаты, нужно указать сумму и некоторые данные товара
и перейти в меню «Рассылки» -> «Настройки сервиса» -> «Другие настройки» для подключения этих методов оплаты к вашему аккаунту:
Обновлено: 24.11.2020
Регистрация через соцсети
Войти через Facebook Войти через Google