Обзор интерфейса

При входе в Letteros вы попадаете в рабочую область: интерфейс продуман так, чтобы все нужные инструменты были под рукой и логично сгруппированы.

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

Навигация по главной странице Letteros:

Письма — список всех писем. 

Шаблоны — список всех шаблонов.

Медиа — хранилище загруженных изображений и файлов.

Архив — отправленные в архив письма, шаблоны или медиа.

Корзина — все перемещенные в архив файлы и папки.

Письма 

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

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

• просмотреть превью;

• просмотреть веб‑версию;

• перейти к редактированию;

• скопировать, переместить или скачать письмо

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

Шаблоны

Раздел «Шаблоны» — это библиотека, где хранятся все шаблоны, блоки и заготовки, используемые в письмах. Он устроен аналогично, но предназначен для работы с базовыми макетами и мастер‑шаблонами. 

При наведении на карточку шаблона появляются быстрые действия: 

• просмотреть превью;

• перейти к редактированию;

• скопировать, переместить или скачать шаблон

Как и в разделе «Письма», при выборе шаблона (клик по карточке) справа также появляется дополнительное меню с кнопками управления — такими как переименовать, переместить, загрузить, копировать, отправить в архив или удалить.

Медиа

Раздел «Медиа» —  это хранилище всех изображений и файлов, загруженных в ваши письма и шаблоны. При наведении на изображение доступно превью, можно быстро просмотреть файл без открытия письма.

Быстрые действия:

• загрузить изображение;

• папка;

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

В отличие от писем и шаблонов, для медиафайлов нет кнопки «Редактировать», так как редактирование выполняется непосредственно внутри конструктора при вставке изображения в письмо.

Архив и корзина

Оба раздела — «Архив» и «Корзина» — предназначены для хранения неактивных писем, шаблонов и медиафайлов. Интерфейс у них одинаковый и помогает быстро восстановить или удалить элементы окончательно.

В раздел «Архив» попадают все письма, шаблоны и файлы, которые были перемещены вручную. Это удобный способ скрыть неактуальные материалы, сохранив возможность вернуть их в рабочую область в будущем.

В раздел «Корзина» автоматически попадают все удалённые письма, шаблоны и медиафайлы.

При наведении на элемент отображается превью — можно просмотреть содержимое, не открывая письмо. 

В верхней панели справа находятся кнопки:

• Очистить корзину / архив — удалить все содержимое.

• Переключатель отображения — выбрать, что показывать: Письма, Шаблоны или Медиа.

При выделении одного или нескольких элементов становятся доступны действия:

• Восстановить — вернуть письмо или шаблон в рабочую область;

• Удалить — окончательно удалить элемент.

Фильтры, сортировка и поиск

Фильтры — позволяют быстро переключаться между типами элементов. В зависимости от раздела это могут быть:

• «Все / Письма / Папки» — для писем,

•  «Все / Шаблоны / Папки» — для шаблонов,

• «Все / Медиа / Папки» — для медиа.

Сортировка — изменяет порядок отображения элементов по названию или дате.

Вид списка — можно выбрать отображение карточками (по умолчанию) или списком.

Поиск — строка поиска по названию элемента, доступна во всех разделах.

Кнопка «Создать» и варианты создания

Нажав «Создать», вы увидите следующие опции:

— Письмо по готовому шаблону: выберите блоки из библиотеки шаблонов, подставьте контент и адаптируйте под свой бренд.

— Кастомное письмо: начните с пустого холста, собирая письмо с помощью кода.

— Загрузить письмо / шаблон: удобно, если шаблон или письмо уже сверстаны вне платформы.

— Папка: создайте папку и организуйте письма и шаблоны по категориям.

На страницах «Письма», «Шаблоны» и «Медиа» доступны кнопки создания прямо над списком — рядом со строкой поиска. Здесь можно отфильтровать, отсортировать и создать новый элемент без необходимости нажимать кнопку «Создать».

Редактор: интерфейс создания письма

Редактор — основное рабочее пространство, где создаются и редактируются рассылки. 

Перейти в редактор можно, нажав на кнопку «Редактировать» при наведении на письмо.

Интерфейс редактора

После перехода в редактор открывается страница с визуальным конструктором письма. Здесь вы можете добавлять блоки, настраивать цвета, шрифты, изображения и ссылки, а также сразу видеть, как письмо будет выглядеть у получателя.

Ниже мы подробно рассмотрим интерфейс редактора, его основные панели и инструменты, чтобы вы могли уверенно работать с письмами и быстро находить нужные функции.           

Верхняя панель

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

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

«Добавить» — быстрый доступ к вставке новых элементов и структур. Блоки в библиотеке разбиты на категории (текстовые блоки, кнопки, разделители, подвал и т. д.), поэтому нужный элемент легко найти и вставить в письмо за пару кликов. 

«Отменить, Вернуть изменения» — позволяют шаг назад или вперёд в истории действий. 

«История версий» — кнопка с изображением часов. Позволяет открыть список ранее сохранённых версий и при необходимости вернуться к одной из них.

«Сохранить» — фиксирует текущую версию письма. Рекомендуем нажимать перед выходом, чтобы не потерять изменения.

Кнопка экспорта — позволяет экспортировать шаблон в удобном для вас формате.

Кнопка выхода — направляет на главную страницу сайта. 

В центральной части панели расположены глобальные настройки письма: выбор цвета или фонового изображения, настройка цвета ссылок, а также вспомогательные инструменты — типограф, проверка орфографии и проверка ссылок.

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

Боковая панель

Боковая панель — это набор кнопок, которые появляются рядом с любым блоком и позволяют быстро управлять его содержимым и расположением.

Иконка со стрелками: отвечает за перемещение блока. Потяните за неё, чтобы переместить элемент мышкой в нужное место, или используйте стрелки вверх и вниз для смещения блока на одну позицию.

Кнопка «+» — добавляет новый блок сразу под текущим.

Иконка с двойными листами: создаёт точную копию текущего блока.

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

Иконка с корзиной — удаляет блок.

Текстовый блок: создание и редактирование

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

1. В верхнем меню нажмите «Добавить» — откроется список доступных модулей.

2. В разделе «Текстовые блоки» выберите подходящий вариант текста.

3. Добавить блок можно двумя способами:

• Нажмите «+» на нужном элементе — он появится в письме.

• Перетащите блок на холст письма с помощью drag-and-drop, зажав левую кнопку мыши.

Управление текстом

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

Стиль текста — выбирает семантический формат для строки или абзаца. 

Выбор шрифта — переключает семейство шрифтов для выделенного текста. 

Размер текста — регулирует размер букв в выделении. 

Форматирование — стандартные акценты для выделения важных слов или фраз.

Нижний/верхний индекс — нужны для химических формул, степеней, сносок и т.п. 

Цвет текста — меняет основной цвет выделенного текста. 

Выделение (фон текста) — подсветка слова или фразы цветом, удобно для акцентирования ключевых моментов. 

Очистить стили — сбрасывает форматирование выделенного текста к базовому стилю.

Эмодзи — добавляет эмодзи в текст. 

Межстрочное расстояние — управляет расстоянием между строками в абзаце. Увеличение межстрочного интервала улучшает читаемость, особенно на мобильных устройствах.

Добавление ссылки — вставляет или редактирует URL для выделенного текста.

AI-генерация по промпту — генерация текста на основе краткого запроса (prompt). Быстро предлагает варианты формулировок, заголовков или вариантов CTA. 

Выравнивание — определяет горизонтальное расположение абзаца.

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

💡Практические советы при работе с текстом:

1. Всегда выделяйте фрагмент текста перед применением стиля — иначе изменение применено не будет. 

2. Используйте не более 2 шрифтов в письме. Смешение разных шрифтов выглядит неаккуратно и может некорректно отображаться в почтовых клиентах.

3. Иногда визуально текст выглядит иначе, чем в редакторе — особенно если использованы разные размеры и цвета. Проверьте, как письмо выглядит на светлом и тёмном фоне, а также в мобильной версии

Блок с изображением

Сверху — минимальный набор кнопок:

«Обновить изображение» — заменить текущую картинку на новую.

«Ссылка» — вставить или изменить гиперссылку.

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

Меню изображения

Дважды кликнув по изображению, вы откроете расширенное меню с настройками.

Здесь вы можете: 

• Заменить изображение — загрузить файл с компьютера или вставить ссылку. Поддерживаются форматы JPG, PNG, GIF, WEBP и APNG (до 32 МБ).

• Посмотреть параметры — размер изображения, ширину (можно изменить вручную), текст для Alt — описание картинки для случаев, когда она не загрузится.

• Настроить ссылку — вставить URL, отключить UTM-метки или сделать изображение неактивным при клике, установив соответствующую галочку.

Если изображение вставляется по ссылке, можно выбрать опцию «Не пересохранять изображение на CDN», чтобы использовать оригинальный источник.

Редактор изображения

Нажав «Редактировать» в меню изображения, вы перейдёте во встроенный редактор — это инструмент для базовой обработки изображений без сторонних сервисов.

Здесь можно:

• обрезать изображение под нужное соотношение сторон.

• настроить яркость, насыщенность и контраст, чтобы улучшить восприятие картинки.

• добавить скругления для мягких краёв.

• удалить фон, если нужно сделать изображение прозрачным.

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

Следующий раздел — Личный кабинет и настройки проекта