В этой статье рассказываем, что такое элемент, какие элементы доступны в редакторе, как их добавлять, редактировать и настраивать.
Что такое элемент и чем он отличается от блока и группы
Структура редактора писем включает три уровня:
- Группа — это самый верхний уровень, объединяющий несколько блоков.
- Блок — средний уровень, включает один или несколько элементов.
- Элемент — наименьшая единица, компонент, который отвечает за наполнение письма контентом. С его помощью можно добавить в макет кнопку, картинку, таймер, текст или иконки социальных сетей.
В редакторе от Unisender для создания письма доступно 13 элементов. В таблице ниже — краткое описание каждого и типичные сценарии использования.
| Элемент | Описание | Когда использовать |
| Картинка | Вставляет изображение из галереи или по URL | Баннер, фото товара, иллюстрация |
| AI картинка | Генерирует изображение с помощью искусственного интеллекта прямо внутри редактора | Если у вас нет нужной картинки, ИИ сгенерирует ее по вашему описанию |
| Текст | Абзац с форматированием | Основной текст письма, описание, условия |
| Заголовок | Текст с увеличенным размером и более заметным стилем | Заголовок раздела, акцентная фраза |
| Кнопка | Кликабельный блок со ссылкой | Призыв к действию: «Купить», «Подробнее» |
| Отступ | Пустое пространство заданной высоты | Добавить отступ между разделами письма |
| Список UL | Маркированный список | Перечисление без порядка: возможности, преимущества |
| Список OL | Нумерованный список | Шаги инструкции, рейтинг, последовательность |
| Разделитель | Горизонтальная линия | Визуально разделить блоки письма |
| Соц. сети | Иконки со ссылками на соцсети | Подвал письма с ссылками на ваши профили |
| Таблица | Сетка с ячейками | Сравнение тарифов, расписание |
| Таймер | Обратный отсчет до нужной даты/времени | Сроки акции, события |
| Видео | Превью видео со ссылкой | Ссылка на видеоплатформу. Важно: большинство почтовых клиентов не воспроизводят видео напрямую. Элемент «Видео» вставляет превью-картинку, само видео откроется в браузере |
Далее подробнее рассмотрим, какие операции и настройки доступны для элементов в новом редакторе.
Операции над элементами
Все элементы можно найти в конструкторе на вкладке «Контент» — «Элементы».
Чтобы добавить элемент в письмо, перейдите на вкладку «Контент» — «Элементы», найдите нужный элемент и перетащите его на рабочую область.
Элемент можно добавить сразу в нужный блок или в любое место на рабочей области. При добавлении элемента вне блока, редактор автоматически создаст блок и поместит в него новый элемент.
При наведении курсора на любой элемент на рабочей области, вы увидите иконки основных операций.
С их помощью блок можно:
- Переместить. Для этого зажмите иконку с точками и перетащите элемент в нужное место.
- Отредактировать. Нажмите на значок карандаша. В правом углу экрана откроется панель настроек элемента.
- Клонировать. Нажмите на иконку копии, чтобы продублировать элемент. Дубль появится сразу под оригиналом.
- Удалить. Нажмите на иконку корзины, чтобы удалить ненужный элемент из письма.
При необходимости вы можете восстановить удаленный элемент, кликнув в правом углу редактора кнопку «Отменить» или воспользовавшись сочетаниями клавиш Ctrl/⌘ + Z.
Настройки элементов
Каждый элемент будет иметь свои индивидуальные параметры. Например, у текста можно изменить шрифт, начертание и цвет, а у картинки — изменить размер, скруглить края или добавить альтернативный текст.
Но если вы кликните на иконку карандаша, то в правой части экрана откроются общие настройки, которые можно применить к элементам любого типа.
Здесь будут доступны следующие параметры:
Выравнивание. Параметр позволяет выровнять элемент по вертикали (верх/центр/низ) или горизонтали (право/центр/лево).
Внутренний отступ. Параметр предназначен для настройки расстояния между элементом и колонкой, в которой он находится. Значения отступов задаются в пикселях. Чтобы настроить каждый отступ по отдельности, кликните на соответствующую иконку.
Отступы также можно изменить прямо на рабочей области с помощью мыши, для этого зажмите левую клавишу и увеличивайте/уменьшайте расстояние.
Размер. С помощью этого параметра можно изменить ширину и высоту элемента. Размеры можно указывать в пикселях (px) или процентах (%).
Фон. Здесь вы можете изменить для элемента цвет фона или добавить фоновое изображение.
Рамка. Параметр позволяет добавить элементу обводку или границу. Для рамки можно настроить толщину, цвет и стиль.
Скругление. Параметр позволяет скруглить края элемента, радиус закругления задается в пикселях. Также можно настроить радиусы для каждого угла по отдельности, кликнув на соответствующую иконку.
Направление и видимость. С помощью этих параметров можно изменить направление элемента (справа налево или слева направо), а также скрыть его на десктопе или мобильном устройстве.
Обратите внимание:
Скругление и процентные размеры могут отображаться по-разному в почтовых клиентах. Перед отправкой рассылки обязательно проверьте письмо в режиме предпросмотра и отправьте тестовое письмо.
