Как создать письмо на основе вашего HTML-шаблона в Unisender
Помимо создания письма в конструкторе, Unisender позволяет загрузить ваш HTML-шаблон и
отправить его. Вы можете просто вставить код или изменить его в редакторе. Этот способ подойдет вам, если вы хотите добавить HTML-письмо и немного изменить его содержание, например обновить текст.
Важно
Этот редактор корректирует ваш код: добавляет пропущенные теги, табуляции. Если вы хотите вставить код без изменений, воспользуйтесь другим способом.
На главной странице личного кабинета нажмите «Создать рассылку» — «Email».
Далее перейдите на вкладку «Письмо с нуля» и выберите «HTML редактор».
Открывается редактор.
В HTML-редакторе есть три способа загрузить готовый HTML-шаблон.
- Скопировать и вставить HTML-код.
- Загрузить письмо из web-страницы.
- Загрузить письмо из файла.
Рассмотрим эти способы подробнее.
Как скопировать HTML-код письма
Важно
Способ с копированием кода подходит, если картинки находятся не у вас на компьютере, а в облаке. В самом коде должны быть прописаны абсолютные ссылки на картинки. Иначе вам придётся загружать их в письмо вручную.
Находим на компьютере файл с HTML-шаблоном, который нам нужно будет перенести, и открываем его в любом редакторе, например в «Блокноте». Выделяем и копируем весь код.
Возвращаемся в HTML-редактор Unisender.
Находим на панели инструментов кнопку «Источник» и нажимаем её.
Открывается код письма.
Выделяем его полностью и удаляем, а затем вставляем код нашего HTML-шаблона, который мы скопировали ранее.
Нажимаем на «Источник» ещё раз, чтобы переключиться в режим визуального просмотра.
Готово. Шаблон загружен.
Как загрузить письмо из веб-страницы
Нажимаем на панели инструментов кнопку «Загрузка из web-страницы». Это работает так же, как загрузка с компьютера, только по ссылке находится файл с письмом.
Вводим ссылку на страницу.
Выбираем, как прикреплять изображения в письме:
- Загружать как прикреплённые файлы. Картинки автоматически подгрузятся в файловый менеджер Unisender. Ссылки на картинки будут вести на файловый менеджер.
- Оставлять ссылками. Ссылки на картинки не изменятся.
Нажимаем кнопку «Загрузить».
Готово. Шаблон загружен.
Как загрузить письмо из файла
Для загрузки подойдут файлы формата rar, zip, 7z или html.
Важно
Если изображения находятся в отдельной папке, нужно добавить папку с изображениями и HTML-файл в архив.
Путь к изображениям должен быть относительным. Например:<img src=»./images/image.jpg»>
Чтобы создать архив средствами Windows, выделите файл и папку с картинками, нажмите правой кнопкой мыши, выберите «Отправить» — «Сжатая ZIP-папка».
Архив создан.
Теперь можем загрузить его в Unisender.
Находим на панели инструментов кнопку «Загрузка из файла» и кликаем на неё.
Нажимаем «Выберите файл».
Убеждаемся, что имя файла отображается и нажимаем «Загрузить».
Готово. Шаблон загружен.
Полезные ссылки
Как вставить ваш HTML-код
Как сделать письмо на основе HTML-шаблона
Добавить пользовательский HTML-код в шаблон письма
Элемент HTML или “Smart block” (Рис. 1) позволяет добавить в шаблон письма пользовательский HTML-код, отметить в нем переменные (текст, цвет шрифта или изображения) и настроить пользовательские макросы для редактирования.
Рис. 1 — Добавление элемента HTML в шаблон письма
Используйте элемент HTML для настройки пользовательских стилей, таких как эллиптическое скругление углов, неоднородные границы, использование нескольких фоновых изображений и т. п. Также при помощи этого элемента вы можете загрузить в систему шаблоны, сверстанные в другом программном обеспечении.
Для этого достаточно добавить весь HTML-код такого шаблона в элемент HTML.
На заметку. Для использования данного элемента необходимы знания в области web-дизайна и HTML-верстки.
Перед добавлением в шаблон ваш код будет проверен на наличие ошибок. Информацию об ошибках и предупреждениях вы сможете просмотреть на валидационной панели. Предупреждения не влияют на валидацию при сохранении. Для сохранения элемента HTML в шаблоне необходимо исправить все обнаруженные ошибки.
Добавить макрос в HTML-код
Вы можете добавить пользовательские макросы в HTML-код элемента HTML. При отправке email-сообщения Creatio заменяет указанные макросы значениями, указанными в настройках элемента HTML. Обновленная функциональность элемента HTML позволяет отметить в коде элемента переменные (текст, цвет шрифта или изображения) и настроить пользовательские макросы для редактирования.
Когда пользователь создает макрос, дизайнер контента генерирует соответствующее поле и сопоставляет значение поля с макросом.
По умолчанию в системе доступны следующие типы макросов:
Новая строка — однострочный макрос. Подробнее >>>
Новый текст — многострочный макрос. Подробнее >>>
Новая картинка — макрос изображения. Подробнее >>>
Новый цвет — макрос подбора цвета. Подробнее >>>
Для настройки:
Выберите элемент HTML в шаблоне письма и кликните Редактировать HTML на панели настройки элемента.
Выделите часть кода, которую необходимо заменить на макрос.
Кликните правой кнопкой мыши на выделенном фрагменте кода. Отобразится контекстное меню макроса.
На заметку. Если кликнуть правой кнопкой мыши без выделения фрагмента кода, то контекстное меню макроса не отобразится.
В меню выберите тип макроса, который необходимо добавить. Вы можете создать новый макрос или добавить в код еще один экземпляр ранее созданного макроса.Если в элементе HTML уже добавлены макросы, то они также отобразятся в контекстном меню.
Укажите заголовок выбранного макроса в области Конструктор макросов справа (Рис. 2).
Рис. 2 — Добавление заголовка макроса
Нажмите Сохранить.
В результате новое поле с указанным заголовком отобразится в области настройки элемента HTML справа (Рис. 3). Изменение значения в этом поле повлечет за собой обновление всех экземпляров макроса в элементе HTML.
Рис. 3 — Новое поле макроса
Удалить макрос из HTML-кода
Выберите элемент HTML, из которого необходимо удалить макрос, и кликните Редактировать HTML на панели его настройки.
В области Конструктор макросов справа кликните рядом с макросом, который необходимо удалить (Рис.
4).Рис. 4 — Удаление поля макроса
Нажмите Сохранить.
В результате в HTML-кое все экземпляры макроса будут заменены текущим значением макроса. Макрос не будет отображаться на панели настройки элемента HTML.
4).Типы макросов
Макрос “Новая строка”
Этот тип макроса используется для добавления короткого однострочного текста (Рис. 5).
Рис. 5 — Настройка макроса “Новая строка”
Все текстовые разделители будут добавлены в значение макроса в исходном виде. Это означает, что некоторые разделители, в частности, пробелы, табуляция и переносы строки, или последовательности таких разделителей будут отображаться как один пробел. Вдобавок, при редактировании поля нажатие кнопки Enter не приводит к появлению нового символа.
В результате текст будет отображаться в одну строку при условии, что пользовательские правила CSS не запрещают такого поведения.
Макрос “Новый текст”
Этот тип макроса используется для добавления длинного многострочного форматированного текста (Рис.
6).
Рис. 6 — Настройка макроса “Новый текст”
При заполнении поля макроса “Новый текст” новые строки преобразовываются в разрывы строк, несколько пробелов заменяются неразрывными пробелами, символы табуляции заменяются четырьмя неразрывными пробелами. При редактировании нажатие кнопки Enter приводит к появлению новой строки.
В результате отображаемый текст сохраняет форматирование исходного текста, добавленного при настройке макроса.
Макрос “Новая картинка”
Этот тип макроса используется, чтобы указать или отредактировать значение атрибута “src” контейнера или значение CSS-свойства “url”.
При создании макроса дизайнер контента создает поле, в котором указывается источник изображения (). Используя это поле, вы можете добавить изображение в шаблон письма. Изображение можно загрузить с компьютера или указать его URL-адрес (Рис. 7).
Рис. 7 — Добавление макроса “Новая картинка”
На заметку. Поле поддерживает URI данных.
Вы можете вставить изображение в кодировке base64 вместо URL.
Изображения в кодировке base64 являются частью HTML-кода сообщения и обычно не фильтруются почтовыми клиентами, которые по умолчанию не позволяют загружать внешние изображения.
Макрос “Новый цвет”
Этот тип макроса используется, чтобы задать или изменить настройки цвета встроенных стилей и используемых элементов (Рис. 8).
Рис. 8 — Настройка макроса “Новый цвет”
При создании макроса дизайнер контента создает поле для подбора цвета. Макрос сгенерирует шестнадцатеричный код цветовой схемы RGB, которому предшествует знак “#“, например, “#0d2e4e”.
Экспорт файлов HTML-кода | Mailchimp
Hinweis
Die Vorlagenoptionen in diesem Artikel sind nur für den klassischen E-Mail-Builder verfügbar. Weitere Informationen zu den Vorlagen im neuen E-Mail-Builder findest du unter Eine E-Mail mit dem neuen Builder gestalten.
Перемещение на странице «Сохраненные шаблоны» (Gespeicherte Vorlagen) в определенной учетной записи, в которой используются HTML-данные, импортированные из HTML-данных, экспортированные в компьютер.
In diesem Artikel erfährst du, wie du eine Vorlage aus deinem Account exportierst.
So exportierst du eine gespeicherte Vorlage:
- Klicke auf Campaigns (Kampagnen) .
Нажмите на Шаблоны электронной почты (E-Mail-Vorlagen) .
Finde die Vorlage, die du exportieren möchtest, indem du die Vorlagenliste durchsuchst oder diesuche verwendest.
- Щелкните в раскрывающемся меню, чтобы открыть меню Schaltfläche Edit (Bearbeiten) und wähle Export as HTML (Als HTML exportieren) .
- Использование функции Drag-and-Drop-Vorlage exportierst, erhältst du eine Warnung, die dich darüber informiert, dass Drag-and-Drop-Vorlagen beim Import zurück nach Mailchimp keine Drag-and-Drop-Funktion umfassen. Нажмите на шаблон экспорта (Vorlage exportieren) , um fortzufahren.
Wenn du die Drag-and-Drop-Funktion für eine Vorlage beibehalten möchtest, sieh dir unser Feature zum Teilen von Vorlagen an.
Нажмите на шаблон экспорта (Vorlage exportieren) , um fortzufahren. Экспортируйте данные в формате HTML-Datei на компьютере, установленном пользователем. Danach kannst du die Vorlage außerhalb von Mailchimp в нем используется HTML-редактор. Die Exportierte Vorlage kann zur Verwendung in Kampagnen auch in einen anderen Mailchimp-Account importiert werden.
Служба технической поддержки
War dieser Artikel hilfreich?
Я
Нейн
Супер! Kannst du uns ein bisschen mehr zu deinen heutigen Erfahrungen sagen?Das Gesuchte войны leicht цу finden.
Ich konnte problemlos einen Hilfeartikel überfliegen, um die benötigten Informationen zu finden.
Die Hilfeartikel sind einfach zu lesen.
Die Hilfeartikel haben mir geholfen, mein Problem zu lösen.
Mailchimp ist einfach zu verwenden.
Я люблю Mailchimp!
Сонстиги.
Bitte entschuldige, dass wir dir nicht besser helfen konnten. Kannst du uns etwas zu deinen heutigen Erfahrungen sagen? Die Hilfeartikel ergeben keinen Sinn.Ich wünschte, es gäbe ein Video, в dem die Vorgehensweise gezeigt wird.
Было ли это в Mailchimp machen möchte, funktioniert nicht so, wie es sollte.
Das Gesuchte войны schwer цу finden.
Ich habe gar nicht gefunden, wonach ich gesucht habe.
Ich benötige den Support, um mein Problem (z. B. ein Accountoder Abrechnungsproblem) zu lösen.
Сонстиги.
Создание пользовательского шаблона электронной почты в формате HTML
Создание пользовательского шаблона электронной почты в формате HTMLКак создать индивидуальный шаблон электронной почты с использованием HTML и CSS в нашем редакторе кода шаблона.
Автор Бен. Обновлено больше недели назад
☝️ Внимание! Это расширенный учебник для тех, кто уже умеет работать с пользовательскими HTML и CSS. Если программирование не является вашей сильной стороной, мы рекомендуем вместо этого использовать наш визуальный редактор шаблонов, для которого у нас есть отдельное руководство.
На странице Шаблоны электронной почты в вашей учетной записи нажмите кнопку + Новый шаблон электронной почты на правой боковой панели:
Затем на следующей странице прокрутите вниз и выберите параметр Создать HTML-шаблон :
Вы Вы попадете на страницу, которая выглядит следующим образом:
Сейчас она очень пуста, но это скоро изменится.
ПРИМЕЧАНИЕ: Если вы уверенный в себе программист, у вас, вероятно, возникнет соблазн пропустить оставшуюся часть этого руководства прямо сейчас (пустой редактор кода соблазнителен, верно?!). Но мы рекомендуем вам продолжать чтение, хотя бы для того, чтобы ознакомиться с нашими рекомендациями, чтобы убедиться, что ваш шаблон действителен и функционален.
2. Вставьте код одного из наших шаблонов по умолчанию в редактор«Но подождите», вы можете подумать. «Я хотел создать свой собственный шаблон !»
Не беспокойтесь: вы по-прежнему сможете сделать его по своему вкусу и настроить по своему усмотрению! 🎨
Рекомендуем выбрать в качестве начальную точку тот, который вам больше всего нравится, и вставить его код в редактор.
Причина, по которой мы предлагаем начать с одного из наших шаблонов в качестве основы, заключается в том, что в шаблоне ConvertKit требуется несколько переменных, а именно:
Все эти элементы должны быть правильно добавлены, чтобы ваш шаблон работал и соответствовал требованиям. Так как наши шаблоны по умолчанию включают все это и являются действительными по умолчанию, зачастую проще всего скопировать один из них и настроить его по своему вкусу оттуда.
ПРИМЕЧАНИЕ: Мы не помешаем вам написать собственный код шаблона с нуля, если вы этого хотите. Вам просто нужно обязательно включить все вышеперечисленные элементы, чтобы он работал правильно. Если у вас возникнут проблемы, у нас есть руководство по устранению неполадок здесь.
3. Дайте вашему шаблону имяНе стесняйтесь давать вашему шаблону узнаваемое имя в этом поле — оно предназначено только для вашего внутреннего пользования, и вы можете изменить его в любое время:
4.
Нажмите Сохранить После добавления кода и имени базового шаблона нажмите красную кнопку Сохранить в правом нижнем углу страницы:
Мы еще не закончили, и этот шаблон не будет использоваться где угодно, пока вы не настроите его. Вам просто нужно сохранить свой шаблон хотя бы один раз, чтобы включить это Предварительный просмотр макета Кнопка на боковой панели:
(Возможность предварительного просмотра полученного макета электронной почты значительно упростит настройку вашего шаблона!)
На данный момент у вас есть действующий, функциональный шаблон электронной почты, который можно настроить.
Внесите все необходимые изменения в HTML и CSS своего шаблона и используйте кнопку Предварительный просмотр макета в любой момент, чтобы увидеть, как он выглядит на данный момент.
ПРИМЕЧАНИЕ: Не забудьте сохранить его снова, когда закончите настройку!
6. [Необязательно] Установите HTML-шаблон в качестве шаблона по умолчанию.