Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

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

Вы здесь:

В UniSender есть два вида шаблонов:

  • Шаблоны в старом конструкторе.
  • Шаблоны в HTML-редакторе.

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

Здесь рассмотрим, как создать письмо на базе шаблона в HTML-редакторе.

Как выбрать шаблон
Как заменить картинки
Как создать ссылки
Как отредактировать текст

Как выбрать шаблон

На главной странице Личного кабинета нажимаем «Создать рассылку» или заходим через меню «Рассылки» — «Создать рассылку» — «Email».

Создание Email-рассылки

Открывается страница с шаблонами. Нас интересуют шаблоны с пометкой «HTML </>».

Выбираем понравившийся и нажимаем «Использовать».

HTML шаблоны

Шаблон открывается в редакторе.

HTML-редактор

Как заменить картинки

Начнём с замены логотипа на свой.

Кликаем на картинку, на панели инструментов нажимаем «Изображение».

Кнопка Изображение

Открывается окно «Свойства изображения».

Чтобы загрузить свою картинку, нажимаем «Выбор на сервере».

Выбор картинки на сервере

Открывается менеджер файлов. Чтобы загрузить свои изображения, кликаем на иконку с дискетой.

Загрузка файла в менеджер

Нажимаем «Выбрать файлы для загрузки» и выбираем картинку на компьютере.

Выбор файла для загрузки

Картинка загружена. Чтобы добавить её в письмо, кликаем на неё дважды.

Добавляем картинку в письмо

Далее редактируем alt-текст и нажимаем «OK».

Альтернативный текст изображения

В итоге наша картинка в письме выглядит так.

Добавленная картинка

Теперь перейдём к меню в верхней части письма.

Здесь нам нужно создать ссылку для каждого пункта меню. Выделяем текст и нажимаем на панели инструментов «Вставить/Редактировать ссылку» или нажимаем Ctrl+L.

Редактирование ссылки

Открывается новое окно, куда можно ввести параметры ссылки.

Вводим отображаемый текст и вставляем саму ссылку.

Редактирование ссылки

Ссылка добавлена.

Добавленная ссылка

Если хотим изменить какие-то стили, например, цвет текста, кликаем дважды на ссылку, переходим на вкладку «Дополнительно», находим поле «Стиль» и добавляем там нужные стили. Например, меняем цвет ссылки на чёрный с помощью стиля color: #000000;

Изменение стилей ссылки

Аналогично прописываем остальные ссылки и меняем для них цвет текста.

Отредактированные ссылки

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

Находим текст, который мы хотим отредактировать, выделяем его.

Текст

Вверху на панели инструментов можно менять форматирование текста, например, шрифт, размер, цвет текста.

Инструменты для редактирования текста

Меняем шрифт на Tahoma, размер на 20, цвет на тёмно-синий.

Форматирование изменилось, но текст прописан курсивом.

Изменённый текст

Если хотим убрать курсив, нужно зайти в код письма. Для этого нажимаем на панели инструментов кнопку «Источник».

Кнопка Источник

Для поиска нужной части кода нажимаем Ctrl+F и вводим текст, который мы ищем.

Поиск кода

В найденной строке курсив задаётся стилем font-style: italic;

Кусок кода с нужным стилем

Выделяем эту часть кода и удаляем.

Код после удаления стиля

Чтобы вернуться к визуальному отображению письма, нажимаем ещё раз на «Источник».

Так выглядит изменённый текст:

Изменённый текст

Остальные картинки и текст меняем по такому же алгоритму.

Готовое письмо выглядит так:Готовое письмо

Полезные ссылки

Как отредактировать письмо в HTML-редакторе
Как вставить свой HTML-код

Оцените, на сколько вам показалась полезной статья «Как создать письмо на основе HTML-шаблона»
(0)