Создать письмо в редакторе кода

В новом редакторе Unisender продвинутые пользователи, которые хорошо знают HTML и CSS, могут переключиться на редактор кода и сверстать письмо самостоятельно.

Режим кода также подойдет для работы с письмами, скачанными из другого сервиса или полученными от верстальщика. Загрузите готовый код и продолжите работу любым удобным способом. Редактор автоматически распознает блоки в письме, поэтому вы сможете редактировать макет, не погружаясь в код.

Рассказываем, как работать с редактором в режиме кода и загрузить готовый HTML-код.

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

В личном кабинете нажмите «Создать рассылку» — «Email».

Кнопка для создания рассылки из навигации сервиса.

Выберите «Перейти на новую версию».

Выберите новую версию редактора.

При необходимости вы можете сохранить выбор, чтобы каждый раз не выбирать версию редактора, а сразу переходить к созданию письма

На первом этапе создания рассылки нажмите «Письмо с нуля».

На этапе «Дизайн письма» нажмите «Письмо с нуля».

Откроется новый редактор писем. Чтобы переключиться на режим кода, кликните в левом углу экрана на иконку «Режим кода».

Иконка для перехода в режим кода.

Как работать в режиме кода

В новом редакторе нет строгих ограничений и требований к верстке, если она соответствует общепринятым правилам верстки писем, приведенным в статье «Как сверстать письмо: инструкция для чайников».

В режиме кода в левой части экрана находится визуальный редактор письма, справа — редактор кода и мини-карта.

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

Визуальный редактор

Отображает результат верстки в реальном времени. Любые изменения, внесенные в код, мгновенно отображаются в визуальном редакторе. Поэтому вы сразу видите, как эти изменения влияют на внешний вид письма.

Пример изменений, вносимых в код, и их отображение в визуальном редакторе.

 

При необходимости вы можете отменить изменения, кликнув в правом углу редактора кнопку «Отменить» или воспользовавшись сочетаниями клавиш Ctrl/⌘ + Z.

Как отменить выполненное действие.

В режиме кода вы также можете отредактировать письмо в визуальном редакторе. Например, изменить текст или картинку. Кликните на нужный элемент и выполните соответствующее действие. Все внесенные изменения автоматически отразятся в коде.

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

Мини-карта кода

Предоставляет общий обзор исходного кода. С ее помощью можно быстро переходить к различным разделам, прокручивая или перетаскивая затемненную область в нужное место.

Как использовать мини-карту.

Редактор кода

Основная рабочая область для написания и редактирования кода. Для комфортной и эффективной работы в редактор встроены следующие инструменты:

  • Подсветка синтаксиса, которая помогает различать разные элементы кода и делает его более читаемым.
  • Подсказки и автодополнения, которые ускоряют процесс написания кода. Редактор будет предлагать варианты для дополнения вашего кода на основе контекста и доступных опций. Например, при работе с CSS предложит список доступных цветов или закроет тег </table> при создании таблиц в HTML.
  • Преобразование сокращений в полноценный код. Вам не придется вручную полностью набирать код. Пропишите нужное сокращение, нажмите клавишу Tab, чтобы редактор самостоятельно дописал остальной код. Например, сокращение «fsz20» для CSS редактор преобразует в полную запись «font-size: 20px».
  • Автоматическое исправление ошибок в коде. Если вы забыли закрыть тег или написали его неправильно, редактор исправит эту ошибку, чтобы избежать проблем с версткой и предотвратить поломку письма.

Пример подсказок редактора при редактировании CSS стилей.

В редакторе кода можно переключаться между десктопной и мобильной версиями письма, чтобы посмотреть, как оно будет выглядеть на различных устройствах.

Для перехода к мобильной версии, кликните на иконку телефона в левой части редактора или с помощью специальных ползунков измените ширину области предпросмотра.

Чтобы вернуться к десктопной версии, кликните на иконку компьютера.

Как переключаться с десктопной версии на мобильную и наоборот.

Как загрузить готовый код

Чтобы загрузить в сервис готовый код, очистите окно редактора, скопируйте HTML-код и вставить его в рабочую область. Внешний вид письма вы сможете проверить в визуальном редакторе.

Как добавить в сервис свой HTML-код.

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

Как переключиться на блочный редактор и добавить в письмо новые элементы.

Также вы можете импортировать письмо в формате eml, html, zip-архив.

Как импортировать письмо

 

Если у вас нет времени разбираться или что-то не получается, можно заказать дизайн шаблона письма у специалистов Unisender. В результате вы получите готовый шаблон, который будет соответствовать вашему корпоративному стилю и пожеланиям.

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

Новый конструктор писем: основные возможности и особенности
Как импортировать письмо
Как создать и отправить рассылку в новом редакторе
Как сверстать письмо: инструкция для чайников

Вы нашли ответ?

0
0