Как загрузить HTML-шаблон
Загрузить HTML-код можно в шаблон или в рассылку. Если вы хотите добавить код в шаблон, перейдите в раздел Контент и выберите нужный шаблон (или нажмите на синюю кнопку «Создать Email»).
Если вы хотите добавить код при создании письма, перейдите в раздел Рассылки, нажмите на синюю кнопку «Создать выпуск» и выберите тип выпуска «Email» (или откройте нужное письмо).
Готовую вёрстку с картинками можно загрузить в два шага:
- На шаге «Письмо» нажмите «Открыть галерею» — откроется галерея шаблонов.
- Слева выберите вкладку «Загрузить HTML» и загрузите ZIP-архив с HTML-файлом в кодировке UTF-8 и картинками (изображения могут быть в отдельной папке). Папки с картинками добавятся в раздел Рассылки → Файлы, и ссылки на картинки проставятся автоматически.
Также можно просто скопировать код и проставить все ссылки вручную:
- На шаге «Письмо» нажмите «В HTML-редактор» — откроется пустой HTML-шаблон. Скопируйте туда ваш код.
- Откройте в соседней вкладке браузера страницу Рассылки → Файлы, нажмите на плюсик и загрузите картинки шаблона.
- Скопируйте ссылку на первую картинку: нажмите на три точки напротив нужного файла и выберите «Скопировать ссылку на файл».
- Вставьте ссылку в код шаблона. Для этого нажмите на любой элемент в письме рядом с тем местом, где должно быть изображение, — в коде подсветится строчка, где он прописан, и недалеко будет строчка с картинкой.
- По очереди скопируйте ссылки для каждой картинки и добавьте их в код шаблона.
Создать письмо на основе вашего HTML-шаблона
Помимо создания письма в конструкторе, Unisender позволяет загрузить ваш HTML-шаблон и отправить его. Вы можете просто вставить код или изменить его в редакторе. Этот способ подойдет вам, если вы хотите добавить HTML-письмо и немного изменить его содержание, например обновить текст.
Важно
Этот редактор корректирует ваш код: добавляет пропущенные теги, табуляции. Если вы хотите вставить код без изменений, воспользуйтесь другим способом.
На главной странице личного кабинета нажмите «Создать рассылку» — «Email».
Далее перейдите на вкладку «Письмо с нуля» и выберите « HTML-редактор ».
В HTML-редакторе есть три способа загрузить готовый HTML-шаблон.
- Скопировать и вставить HTML-код.
- Загрузить письмо из веб-страницы.
- Загрузить письмо из файла.
Рассмотрим эти способы подробнее.
Как скопировать HTML-код письма
Важно
Способ с копированием кода подходит, если картинки находятся не у вас на компьютере, а в облаке. В самом коде должны быть прописаны абсолютные ссылки на картинки. Иначе вам придётся загружать их в письмо вручную.
Нажмите на панели инструментов кнопку «Источник», чтобы перейти к редактору кода.
В открывшемся окне полностью выделите и удалите имеющийся код.
Затем найдите на компьютере файл с HTML-шаблоном, который нам нужно будет перенести, и откройте его в любом редакторе, например в «Блокноте». Выделите и скопируйте весь код.
Вернитесь в HTML-редактор Unisender и вставьте в него скопированный код. Н ажмите на «Источник» ещё раз, чтобы переключиться в режим визуального просмотра.
Готово. Шаблон загружен.
Как загрузить письмо из веб-страницы
Нажмите на панели инструментов кнопку «Загрузка из web-страницы». Это работает так же, как загрузка с компьютера, только по ссылке находится файл с письмом. Подойдет, если макет письма загружен , к примеру, в Dropbox.
Введите ссылку на страницу.
Выберите , как прикреплять изображения в письме:
- Загружать как прикреплённые файлы. Картинки автоматически подгрузятся в файловый менеджер Unisender. Ссылки на картинки будут вести на файловый менеджер.
- Оставлять ссылками. Ссылки на картинки не изменятся.
Нажмите кнопку «Загрузить».
Готово. Шаблон загружен.
Как загрузить письмо из файла
Для загрузки подойдут файлы формата rar, zip, 7z или html.
Важно
Если изображения находятся в отдельной папке, нужно добавить папку с изображениями и HTML-файл в архив.
Путь к изображениям должен быть относительным. Например:
Чтобы создать архив средствами Windows, выделите файл и папку с картинками, нажмите правой кнопкой мыши, выберите «Отправить» — «Сжатая ZIP-папка».
Архив создан. Теперь можно загрузить его в Unisender.
Найдите на панели инструментов кнопку «Загрузка из файла» и кликните на неё.
Нажмите кнопку «Выберите файл».
Убедитесь, что отображается имя нужного файла и затем нажмите «Загрузить».
Готово. Шаблон загружен.
Как создать шаблон письма в конструкторе
Рассмотрим, как вы сможете создать профессиональный шаблон в блочном конструкторе самостоятельно.
Основные преимущества блочного редактора:
- нужный блок или элемент макета легко добавить в шаблон письма, просто перетащив его с помощью мыши;
- легко редактировать каждый элемент, изменяя цвет, стиль, размер и другие параметры;
- вам не нужно обладать специальными знаниями, уметь работать с HTML-кодом и т.п. чтобы создать эффективное письмо.
Содержание
Перейдите в меню Шаблоны и нажмите Добавить шаблон.
Дальше выберите нужную структуру шаблона.
В примере мы остановимся на шаблоне со структурой Новости.
Перед вами Конструктор шаблонов.
На панели слева доступны элементы, которые вы можете добавлять в письмо.
По центру — изначальный шаблон, который вы и будете править, добавляя и редактируя элементы.
На панели справа находятся варианты редактирования выбранного элемента.
Дизайн всего письма настраивается в разделе «Тело письма» — тут вы можете задать ширину контента, фон письма, фоновую картинку, фон контейнера, цвет текста и ссылок, шрифт и размер шрифта, высоту строки, а также контур.
Рекомендуем для каждого элемента шаблона (картинка, текст, видео и так далее) создать отдельный блок структуры.
Блок с элементом Текст
Добавление текстового блока
Выберите слева элемент Текст и перетащите его в шаблон.
В центре вы увидите визуальное отображение текста в блоке и параметры для оформления текста справа.
Все правки производятся в редакторе. В шаблоне вы можете в режиме реального времени видеть, как меняется текст после правок. Доступные параметры для редактирования текста: цвет текста, шрифт, высота строки, цвет фона, фоновая картинка, внутренний отступ, высота блока, контур и возможность скрыть блок на мобильном.
Обратите внимание: если вы хотите добавить текст в редактор копипастом (скопировать-вставить), то рекомендуем копировать текст из простого текстового файла (.txt). В противном случае в редактор могут подтянуться стили из вашего Word файла, что может нарушить макет. Скопируйте текст из файла Word, вставьте текст в файл .txt и снова скопируйте текст уже из текстового файла перед тем, как вставить его в редактор шаблона.
При работе с текстом вы можете выбрать стиль параграфа, шрифт, его размер, полужирный текст, курсив, выделить другим цветом отдельное слово, добавить список, отступ.
Отдельные параметры есть и для редактирования блока: цвет фона и отступ от краев (равноценный отступ текста от краев блока: сверху, снизу, слева и справа).
Нажмите по стрелочке справа от выбора переменных, чтобы открыть выпадающее меню, где спрятаны некоторые опции редактирования текстового блока:
Переменные
Добавление переменных происходит внутри текстового блока – меню Переменные с выпадающим списком предустановленных переменных.
Если вы хотите использовать переменные, которые доступны для конкретной адресной книги, то сначала создайте новую рассылку в меню Мои рассылки > Создать email кампанию.
Структура с элементом Прехедер
Прехедер – это текст, который виден подписчикам в почтовом клиенте сразу после темы.
Чтобы добавить этот элемент, перейдите в раздел Добавить новый раздел > вкладка Примеры, выберите Предзаголовок. Перетащите его в шаблон и разместите над всеми элементами сверху.
По умолчанию блок Прехедер состоит из двух элементов в двух колонках: непосредственно прехедер и веб-версия письма.
Чтобы начать редактировать элемент, нажмите по нему левой кнопкой мыши.
Структура с элементом Футер
Футер – это то, чем заканчивается письмо: блок с контактами компании (адрес, телефон, сайт) и другой полезной для подписчиков информацией.
Чтобы добавить этот элемент, перейдите в раздел Добавить новый раздел > вкладка Примеры и выберите Футер.
Вы можете выбрать внешний вид футера: будет ли он сплошным или разделенный на две колонки.
Как и в любом другом блоке, в футере вы можете изменить текст, добавить данные своей компании и задать фоновый цвет блока в целом.
В переменную > в футере подставляется название компании отправителя. Чтобы отредактировать это значение, перейдите в раздел Настройки учетной записи > вкладка Информация о компании и измените информацию в поле Компания.
Блок с элементом Ссылка отписки
По умолчанию ссылка отписки добавляется в каждое письмо автоматически, но вы можете использовать свою ссылку.
Чтобы добавить этот элемент, кликните по текстовому элементу и откройте вкладку Переменные. Выберите Нажмите здесь, чтобы покинуть список рассылки в выпадающем меню.
Вставить ссылку отписки вы можете в любой блок письма.
Подробнее о кастомизации отписки вы можете узнать из статьи Как настроить страницу отписки.
Если вы не создавали ссылку отписки, тогда в шаблон добавится стандартная ссылка отписки Отказаться от рассылки. В этом блоке вы можете изменить цвет (блока и текста), шрифт (стиль, размер и начертание), положение текста (выравнивание: слева, справа, по центру), отступ текста от краев блока, высоту строки, контур, а также скрыть блок на мобильном.
Блок с элементом Картинка
Добавление картинки
В левом меню выберите блок Картинка и перетащите его с помощью мыши в шаблон письма.
Изображение вы можете добавить двумя способами: загрузить с компьютера или выбрать из картинок, которые вы ранее загружали в email сервис.
Изображения, ранее загруженные в email сервис, хранятся в Менеджере изображений, который находится в меню Рассылки > Шаблоны.
После загрузки (или выбора в галерее) изображение появится в шаблоне.
Редактирование картинки
Вы можете изменить параметры каждого изображения в правой панели редактирования блока.
Бывают случаи, когда почтовый клиент не отображает картинки в вашем письме. Тогда на месте изображения и будет показана указанная вами подпись картинки (альтернативный текст).
Если подписи к картинке нет, отобразится название файла — непонятное для получателя и подозрительное для спам-фильтров.
Поэтому мы рекомендуем для каждой картинки указывать понятную подпись.
Каждое изображение, добавленное в шаблон письма, изначально имеет размер 100%.
Вы можете уменьшать его, изменять размер от 100% до 10%. Однако имейте в виду, что в мобильной версии все изображения отображаются 100% размера.
Учитывайте, что изменение ширины картинки тянет за собой связанное изменение высоты, поэтому лучше менять размеры изображения ДО того, как вставлять его в редактор шаблона.
Под выравниванием подразумевается расположение картинки относительно краев блока, в котором она находится.
Картинку вы можете выровнять по левому краю, правому краю и центру.
Используйте эту опцию, чтобы добавить в картинку гиперссылку.
Также вы можете вместо гиперссылки указать контактный номер телефона или email адрес.
Если прикрепить номер телефона, то, кликнув по этому изображению в полученном письме, запустится телефонное приложение, установленное в системе получателя по умолчанию, и пойдет вызов на указанный номер.
Если выбрать вставку Email, то появится окно для автозаполнения темы письма.
Когда получатель кликнет по такому изображению, запустится его почтовое приложение и откроется окно с новым письмом с уже заполненными полями адреса получателя и с темой, указанными вами в конструкторе шаблона.
Нужно указывать полную ссылку на страницу, начиная с http://.
Блок с элементом Кнопка
Выберите элемент Кнопка в левой панели конструктора и перетащите его в шаблон.
Укажите ссылку на страницу, куда должна вести кнопка, и текст, который получатель будет видеть на кнопке.
Вы можете выбрать стиль кнопки, изменить ее ширину, высоту, цвет, выравнивание относительно краев блока, степень скругления углов кнопки, расположение текста на ней.
Яркий призыв к действию, оформленный в красивом стиле — дополнительный шанс, что получатель заметит кнопку и захочет её нажать и перейти на ваш сайт.
Поэтому обращайте внимание и на параметры текста.
Кроме того, как и с картинкой, клик получателя по кнопке может запускать вызов по указанному вами номеру телефона или отправку письма. Также вы можете указать тему такого письма для ее автозаполнения в почтовом приложении получателя.
Редактирование параметров блока заключается в выборе фонового цвета и указания отступа внутренних элементов от края блока.
Блок с элементом Разделитель
Этот элемент вы можете использовать в случае, когда нужно визуально отделить в шаблоне два блока друг от друга.
Разделить блоки вы можете отступом или линией.
Если выбрать отступ, то ему вы можете задать цвет, и тогда блоки с элементами будут разделены цветным блоком.
Вы можете также использовать разделитель-линию, стиль которой вы можете выбрать из выпадающего списка.
Блок с элементом Видео
Чтобы добавить видео, перетащите соответствующий блок в шаблон.
Укажите YouTube ссылку на ролик в формате https://youtu.be/GcaZtTDT65w.
В шаблоне автоматически отобразится скриншот превью, при клике на который пользователь попадает на страницу просмотра видео.
Вы можете менять расположение и размер предпросмотра, устанавливать фон, отступы внутри блока.
Блок с элементом Соцсети
Перетащите соответствующий блок в нужную часть шаблона и приступайте к его редактированию.
Вы можете выбрать внешний вид иконок, добавить или удалить иконки, задать ссылки и так далее.
Вы можете выбрать, как будут отображаться кнопки соцсетей: в виде иконки, иконки и текста или просто текста.
При добавлении ссылки выберите ее тип:
- Ссылка на профиль — укажите адрес страницы или ID профиля, на которые сможет подписаться получатель письма после перехода по ссылке.
- Поделиться письмом — кликнув по ссылке получатель распространит веб-версию письма.
- Поделиться ссылкой — требует указания url страницы, которую получатель письма распространит в своей ленте новостей после клика.
Блок с элементом Оплата
Элемент Оплата используют, чтобы принимать платежи в письме.
Выберите этот элемент в левой панели конструктора и нажмите по нему. В правой панели введите название товара, выберите платежную систему, минимальную или конкретную цену и введите суму.
Выберите, в какую воронку CRM будут автоматически передаваться данные и на какой этап воронки добавлять сделку, в зависимости от статуса платежа.
Настройте внешний вид кнопки.
Скрыть на мобильном
Вы также можете скрывать отдельные блоки для мобильных устройств.
Для этого выберите нужный блок и справа в настройках блока активируйте Скрыть блок на мобильном.
Опция работает не во всех почтовых сервисах. К примеру, она работает для gmail.com.
Как сделать HTML-письмо для рассылки без верстальщика: бесплатные инструменты для маркетолога
Собрали ссылки на бесплатные инструменты, чтобы делать красивые HTML-письма для email-рассылок без верстальщика и Adobe Photoshop. Рассмотрим:
- Визуальные редакторы для email-рассылок
- Онлайн-редакторы изображений
- Дизайн: таймеры, персонализированные картинки, генераторы «гифок», коллекции иконок, emojis ?
- Технические инструменты: удаление фона фотографии, оптимизация веса письма
Визуальные редакторы для email-рассылок
Главный инструмент для создания email-рассылки — визуальный редактор HTML-писем. Чтобы собрать рассылку, достаточно выбрать фон, добавить изображения, текст и проставить ссылки. В большинстве редакторов есть готовые шаблоны писем — можно использовать, если нет своего дизайна. Если свой дизайн есть, его можно перенести в редактор в виде блоков или готового HTML-кода. Если своего дизайна нет и шаблоны визуального редактора не подходят, поищите вдохновение на сайте Really Good Emails, где хранятся сотни примеров email-рассылок.
Stripo
Stripo — бесплатный онлайн email-редактор для создания адаптивных шаблонов. Адаптивный шаблон изменяется в зависимости от устройства читателя и одинаково хорошо выглядит на экране мобильного телефона или компьютера. У Stripo дружелюбный интерфейс, чат поддержки внутри системы, можно создавать AMP-письма (письма с динамическим контентом можно отправлять и через Mindbox). Есть приятные бонусы вроде интерактивного таймера внутри письма. В бесплатном тарифе ограниченное количество хранимых шаблонов и лимит на отправку тестовых писем в сутки.
Полученное письмо можно экспортировать в один из многих рассыльщиков (Mailchimp, eSputnik, GetResponse и т.д.) или получить архив с готовым HTML-файлом и изображениями, который можно загрузить куда угодно.
Интерфейс визуального редактора Stripo
BEE
BEE — бесплатный визуальный редактор адаптивных писем из Калифорнии. Меньше возможностей, чем у Stripo — нет поддержки технологии AMP и чата внутри системы, зато меньше ограничений: создавать рассылки и отправлять тестовые письма можно в любых количествах. Много бесплатных шаблонов, с которых можно начать дизайн письма.
Интерфейс визуального редактора BEE
EmailMaker
EmailMaker — блочный редактор писем, созданный агентством Email Soldiers. Позволяет загрузить код письма без предварительной разметки: в 90% случаев EmailMaker понимает, где какие блоки, и автоматически преобразует их в drag-and-drop-элементы, которые можно переиспользовать. Поддерживает все типы верстки, AMP-рассылки и табличную адаптивность, что важно для нормального отображения писем в «Яндекс.Почте».
В отличие от других редакторов код, с которым работает пользователь, — это и есть код письма, поэтому его можно копировать в любой рассыльщик. В будущем появится возможность экспортировать код автоматически — эту и другие фичи можно посмотреть в публичном роадмапе.
Бесплатный тестовый аккаунт ограничен десятью письмами, самая дорогая подписка без ограничений обойдется в 8 тысяч рублей в месяц.
Интерфейс визуального редактора EmailMaker
Tilda
Tilda Publishing — набор инструментов для создания контента в интернете. С их помощью можно собрать сайт, лендинг-страницу, интернет-магазин и рассылку. Создание электронных рассылок требует платного тарифа Tilda Personal (6000 рублей/год), но можно воспользоваться бесплатной версией на 2 недели. В сравнении с Stripo или BEE интерфейс не очень удобный, а настроек — мало. Не поддерживает AMP-технологию.
Собранное HTML-письмо можно экспортировать в виде кода. Вопреки ожиданиям, рассылки в Tilda — скорее приятное дополнение к конструктору посадочных страниц, нежели самостоятельное решение.
Интерфейс визуального редактора рассылок Tilda
Редакторы изображений
Canva
Canva — бесплатный графический редактор фотографий и иллюстраций. Есть стоковые архивы изображений, готовые шаблоны, инструменты для редактирования. Целиком Photoshop заменить не сможет — с нуля нарисовать что-то не получится, но подготовить нужные картинки для рассылки — легко.
Платная версия дает доступ к дополнительным изображениям и некоторым функциям, вроде конвертации статичной картинки в GIF-анимацию.
Интерфейс Canva очень удобный: создать коллаж можно за пару секунд
Fotor
Fotor — простой онлайн-фоторедактор, бесплатный и не требует регистрации. Пожалуй, закрывает большинство задач по редактированию изображений — от обрезки и коррекции, до наложения текста или рамки.
Скриншот редактора Fotor
Спецэффекты: таймеры и персонализированные картинки, emoji — всё для «вау-эффекта»
Таймеры для акций и персонализированные картинки
Motionmail
Motionmail позволяет генерировать и вставлять в письма таймеры. Регистрация бесплатная, количество таймеров не ограничено. Любой из часовых поясов, несколько дизайнов. Генерируете таймер и вставляете в письмо. Единственный минус — жуткий копирайт Powered by Motionmail на бесплатной версии.
Интерфейс создания таймера в Motionmail
Таймер, сгенерированный в бесплатной версии Motionmail:
Sendtric
Sendtric — еще один генератор таймеров. В отличие от Motionmail, в бесплатной версии настроек дизайна меньше, зато генерируется таймер без регистрации и уродливых копирайтов. Зашли на главную, указали настройки таймера, сгенерировали — и готово. Есть ограничение: счетчик ограничен 30 днями, но для краткосрочных акций этого хватит.
Создать таймер в Sendtric можно прямо на главной странице
Таймер, сгенерированный в бесплатной версии Sendtric
NiftyImages
NiftyImages — позволяет не только генерировать таймеры, но и персонализированные изображения. Например, можно добавить обращение по имени прямо в изображении. Достаточно на месте имени подставить переменную, которая отвечает за вывод имени читателя.
Бесплатный тарифный план ограничен 10 тысячами использований, поэтому без платной подписки запаса хватит разве что на триггерную рассылку. Зато можно грузить свои варианты изображений, если не хватит встроенных шаблонов.
Генераторы «гифок»
Gifius
Gifius — создание GIF-анимации из статичных фотографий. Бесплатный и очень простой: загружаете фотографии, выбираете последовательность кадров и размер.
Сохраняете получившуюся GIF-анимацию.
«Гифка», собранная в Gifius из двух кадров: менеджеры Mindbox на награждении Tagline 2019
ezGIF
ezGIF — расширенный инструмент для создания GIF-анимации. Можно конвертировать видео в GIF, нанести текст, отредактировать анимацию покадрово, наложить фильтры или изменить скорость.
Интерфейс в ezGIF выглядит не очень, зато много полезных функций
Иконки для писем
Flaticon — гигантский сток с иконками на любой вкус. Может пригодиться не только в рассылках, но и при работе с презентациями, сложными визуальными картами и так далее. Огромный выбор даже среди бесплатных коллекций. Неплохая и полностью бесплатная альтернатива Flaticon — The Noun Project.
Даже бесплатных коллекций иконок на Flaticon вполне достаточно
Emojis
? emojipedia
Emojipedia — сборник всех эмоджи во вселенной. Найдите понравившийся эмоджи и скопируйте в текст письма или тему. Можно также посмотреть, как эмоджи будет выглядеть на всех популярных устройствах ?
Emojipedia дает возможность просмотреть отображение эмоджи на разных устройствах
Технические инструменты: удаление фона на картинке, оптимизация веса письма
Remove.bg
Remove.bg — инструмент для удаления фона изображения. Помогает, если у вас есть фото модели, которую нужно поместить на однотонный фон. Справляется даже со сложными изображениями, например, где есть «засветы». Есть клиент для Mac и Windows. Бесплатная версия ограничивает разрешение обработанных картинок, но для email-рассылок его хватает.
Исходное изображение
То же изображение, но обработанное в Remove.bg
HTML Optimizer
HTML Optimizer убирает лишние отступы, пробелы и прочую «мишуру», которая занимает место в HTML-коде. Вставляете код, запускаете обработку, получаете «очищенный» код. При этом письмо для читателя никак не меняется — только грузится быстрее.
В некоторых случаях оптимизация кода экономит до ~20% от исходного веса. Почему это полезно? Если ваше письмо тяжелее 102Кб, оно «обрежется» в Gmail. Оптимизация веса — один из способов, как этого избежать. Важно добавить, что в визуальном редакторе рассылок Stripo есть встроенная функция оптимизации кода.