Как загрузить HTML-шаблон
Загрузить HTML-код можно в шаблон или в рассылку. Если вы хотите добавить код в шаблон, перейдите в раздел Контент и выберите нужный шаблон (или нажмите на синюю кнопку «Создать Email»).
Если вы хотите добавить код при создании письма, перейдите в раздел Рассылки, нажмите на синюю кнопку «Создать выпуск» и выберите тип выпуска «Email» (или откройте нужное письмо).
Готовую вёрстку с картинками можно загрузить в два шага:
- На шаге «Письмо» нажмите «Открыть галерею» — откроется галерея шаблонов.
- Слева выберите вкладку «Загрузить HTML» и загрузите ZIP-архив с HTML-файлом в кодировке UTF-8 и картинками (изображения могут быть в отдельной папке). Папки с картинками добавятся в раздел Рассылки → Файлы, и ссылки на картинки проставятся автоматически.
Также можно просто скопировать код и проставить все ссылки вручную:
- На шаге «Письмо» нажмите «В HTML-редактор» — откроется пустой HTML-шаблон. Скопируйте туда ваш код.
- Откройте в соседней вкладке браузера страницу Рассылки → Файлы, нажмите на плюсик и загрузите картинки шаблона.
- Скопируйте ссылку на первую картинку: нажмите на три точки напротив нужного файла и выберите «Скопировать ссылку на файл».
- Вставьте ссылку в код шаблона. Для этого нажмите на любой элемент в письме рядом с тем местом, где должно быть изображение, — в коде подсветится строчка, где он прописан, и недалеко будет строчка с картинкой.
- По очереди скопируйте ссылки для каждой картинки и добавьте их в код шаблона.
«Как создать и отправить HTML-письмо для грамотной email-рассылки?»
Email-маркетинг — это один из самых эффективных видов интернет-продвижения. Благодаря нему повышается лояльность, возрастает объем как новых, так и повторных продаж, а также поддерживается постоянная связь с аудиторией. Очень часто, просматривая почту в своём личном ящике, мы встречаем красивые интерактивные письма, прямо из которых можно совершить какой-либо заказ или иной целевой переход.
С таким письмом действительно хочется ознакомиться, оно яркое, стильное и визуально приятное, в отличие от сухого текста на белом фоне. Давайте разбрёмся, как создать HTML-письмо самому.
Реализация интерактивного письма
Путём несложных вычислений, было выявлено, что такие письма реализуются, как и обычные веб-страницы, с использованием HTML и CSS. Следственно, чтобы создать такое письмо, необходимо сделать маленькую узкую страничку со всеми необходимыми ссылками. То есть, для начала, можно вообще закрыть почту и погрузиться в фотошоп и редактор кодов, а вернуться только тогда, когда во вкладке браузера будет отображаться готовый мини-сайт.
С чего начать и как создать?
В интернете существует множество шаблонов, которые позволяют создать HTML-письмо, просто изменяя их под свои нужды. Важно знать, что в письме нет места для прикрепления графических файлов, ссылки на которые будут использоваться в самой структуре. Следственно, все картинки, которые необходимо встроить в тело интерактивного письма, должны быть загружены в сторонние файловые сервисы, предоставляющие прямую ссылку на этот файл, например imgur. Прямая ссылка — та, у которой в конце указан формат файла.
Создание HTML-письма по шаблону
Давайте создадим простенькое интерактивное письмо c шапкой, заголовками и кнопкой перехода. Предлагаю Вам свой шаблон, можете скачать его по ссылке и видоизменить под вашу стилистику.
Для того, чтобы посмотреть письмо вживую, нажмите на картинку выше и оно откроется в новой вкладке.
Как отправить HTML-письмо?
Отправка интерактивного письма, пожалуй, — самый неординарный этап процесса. Давайте разберёмся как вставить html в письмо. Итак, будем действовать на примере mail.ru. Заходим в свой ящик, нажимаем «написать письмо», пишем в форму какое-то слово, затем выделяем его и нажимаем «просмотреть код элемента». 
В открывшемся коде, перед нами сразу предстанет строчка body , кликнув по котрой правой клавишей, необходимо выбрать пункт «Edit As 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-редакторе
Создание письма в конструкторе разделяется на два пути: его можно собрать с помощью редактируемых блоков либо через редактор кода. Второй вариант отлично подойдет для тех случаев, когда есть готовое письмо в формате кода, и его нужно запустить в рассылку.
Как создать письмо в HTML-редакторе, рассказываем на примере Cheapsender.
Шаг 1: Проходим регистрацию в Cheapsender
Если у вас еще нет аккаунта в нашем сервисе, то давайте его зарегистрируем:
- Открываем официальную страницу сервиса и на первом экране нажимаем «Попробовать бесплатно». Обратите внимание, что после регистрации учетной записи будет предоставлено 100 бесплатных писем для рассылки. Таким образом, вы сможете протестировать как сам сервис, так и формат своего письма.
- На отобразившейся странице вводим свои данные и нажимаем «Зарегистрироваться».
- После этого нужно будет активировать аккаунт – на почту должно прийти письмо, в котором достаточно кликнуть по кнопке «Подтвердить».
В результате мы попадаем в свой личный кабинет, а это значит, что аккаунт активирован. Теперь можно переходить к следующему шагу – созданию письма.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Шаг 2: Копируем содержимое HTML-файла
Перед тем как начать создавать шаблон письма, давайте разберемся, как скопировать код из готового HTML-файла. Первоначально у нас есть файл, который можно открыть в браузере:
Этот файл содержит код, который нужно вставить в редактор шаблонов на Cheapsender. Чтобы его посмотреть и скопировать, необходимо кликнуть правой кнопкой мыши по файлу и выбрать «Открыть с помощью» → «Блокнот». Если в отобразившемся списке нет блокнота, то нажмите «Выбрать другое приложение». Затем найдите в списке блокнот либо другой текстовый редактор.
В результате перед нами отображается HTML-код письма. Все, что от нас требуется – выделить его полностью и скопировать. Для быстрого выделения можете воспользоваться комбинацией клавиш «CTRL+A».
Содержимое скопировано, теперь его можно перенести в конструктор и запустить рассылку. Обо всем этом поговорим далее.
Шаг 3: Создаем шаблон письма в конструкторе
Возвращаемся в свой личный кабинет, доступ к которому мы получили на первом шаге, и выполняем следующие действия:
- Первым шагом переходим в раздел «Шаблоны».
- В этом разделе будут содержаться все шаблоны писем, которые вы создадите, их может быть несколько. Это удобно, так как рассылка не всегда предполагает один вариант письма – разная целевая аудитория, другая сфера и прочие аспекты. Первоначально шаблонов нет, их нужно создать – давайте к этому и приступим: нажимаем на «Создать шаблон».
- Здесь предлагаются два варианта создания шаблона, нас интересует второй – «Создание шаблона в HTML-редакторе».
- В отобразившемся окне от нас потребуется лишь вставить код файла, который мы успешно скопировали на предыдущем шаге – просто используем комбинацию клавиш «CTRL+V». Получаем весь код в конструкторе:
- Чтобы убедиться в том, что код добавился корректно, мы можем воспользоваться эмулятором письма – для этого достаточно кликнуть по кнопкам в верхней центральной части. Вот, например, как выглядит добавленное письмо в мобильной версии:
- После проверки письма на разных устройствах нажимаем на крестик для выхода из эмулятора.
- Осталось дать название шаблону и нажать на кнопку «Сохранить и выйти».
Важно: обратите внимание на то, что изображения в письме должны быть загружены на стороннем сервисе. В противном случае они попросту не будут отображаться.
Вот пример кода:
В поле src указывается ссылка на то место (файлообменник, сайт), в котором находится изображение.
В последующем все созданные письма можно будет отредактировать. Это будет полезно, когда один блок письма потерял актуальность или же вы используете чужой шаблон, но хотите его кастомизировать под свои нужды.
Шаг 4: Отправляем шаблон подписчикам
В заключительном шаге хотелось бы еще рассказать о том, что делать с созданным письмом. Конечно же, отправлять его в рассылку. Сделать в Cheapsender это довольно просто:
- Нажимаем в личном кабинете «Создать рассылку».
- Выбираем созданный нами шаблон.
- Указываем тему письма и нажимаем «Продолжить».
- Теперь нужно добавить клиентскую базу – сделать вы это можете вручную либо путем загрузки файла в формате CSV, TXT или XLSX.
После добавления контактов вы можете запустить тестовую рассылку. Напоминаем, что после регистрации доступно 100 бесплатных писем для отправки, с помощью которых вы сможете оценить сервис, а также проверить работу своего письма.
Выводы
Чтобы создать письмо в HTML-редакторе Cheapsender, достаточно скопировать весь код из файла и вставить его в редактор шаблонов. При необходимости это письмо можно отредактировать. Аналогичным образом вы можете создать несколько шаблонов, каждый из которых будет направлен в отдельную рассылку.