Блоки контента

Подробное описание всех типов блоков и их использования

Обзор блоков

Блоки — это базовые элементы контента, которые размещаются внутри колонок контейнеров. Emailist предоставляет широкий набор блоков для создания различных типов email-контента.

Текстовый блок (Text)

Описание

Текстовый блок с полнофункциональным WYSIWYG редактором. Позволяет форматировать текст, добавлять ссылки, списки и другие элементы.

Возможности

  • Форматирование текста: жирный, курсив, подчёркивание
  • Заголовки разных уровней (H1-H6)
  • Списки: маркированные и нумерованные
  • Ссылки с настройкой цвета и стиля
  • Выравнивание: по левому краю, по центру, по правому краю
  • Цвет текста и фона
  • Размер и семейство шрифта
  • Межстрочный интервал

Использование

  1. Добавьте текстовый блок в колонку
  2. Кликните на блок, чтобы начать редактирование
  3. Используйте панель инструментов для форматирования
  4. Настройте стили в правой панели свойств

Изображение (Image)

Описание

Блок для вставки изображений. Поддерживает загрузку, изменение размера и настройку отображения.

Возможности

  • Загрузка изображений с компьютера
  • Загрузка по URL
  • Автоматическая оптимизация изображений
  • Настройка ширины и высоты
  • Альтернативный текст (alt) для доступности
  • Ссылка на изображение (клик по изображению)
  • Выравнивание: по левому краю, по центру, по правому краю
  • Скругление углов

Рекомендации

⚠️ Важно для email:

  • Используйте изображения оптимального размера (не более 1-2 МБ)
  • Всегда указывайте альтернативный текст
  • Учитывайте, что некоторые клиенты блокируют изображения по умолчанию
  • Рекомендуемая ширина для email: 600px или меньше

Кнопка (Button)

Описание

Блок для создания кнопок призыва к действию (CTA). Один из самых важных элементов email-маркетинга.

Возможности

  • Настройка текста кнопки
  • URL ссылки
  • Цвет фона и текста
  • Скругление углов (border-radius)
  • Внутренние отступы (padding)
  • Ширина: автоматическая или фиксированная
  • Выравнивание: по левому краю, по центру, по правому краю
  • Граница (border) с настройкой цвета и толщины

Лучшие практики

  • Используйте контрастные цвета для привлечения внимания
  • Текст кнопки должен быть коротким и понятным
  • Рекомендуемый размер: минимум 44x44px для удобства на мобильных
  • Размещайте кнопку в центре или слева для лучшей видимости

Разделитель (Divider)

Описание

Горизонтальная линия для визуального разделения секций контента.

Настройки

  • Цвет линии
  • Толщина (1px, 2px, 3px и т.д.)
  • Стиль: сплошная, пунктирная, точечная
  • Отступы сверху и снизу
  • Ширина: полная или ограниченная

Отступ (Spacer)

Описание

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

Настройки

  • Высота отступа (в пикселях)
  • Фоновый цвет (обычно прозрачный)

Альтернатива

Вместо блока Spacer можно использовать отступы (padding/margin) у других блоков. Spacer полезен, когда нужно создать одинаковый отступ между разными типами элементов.

Социальные сети (Social)

Описание

Блок для отображения иконок социальных сетей со ссылками на профили.

Возможности

  • Выбор социальных сетей: Facebook, Twitter, Instagram, LinkedIn, YouTube и другие
  • Настройка URL для каждой сети
  • Размер иконок
  • Цвет иконок
  • Расстояние между иконками
  • Выравнивание: по левому краю, по центру, по правому краю

Видео (Video)

Описание

Блок для вставки превью видео. Поскольку большинство email-клиентов не поддерживают встроенное видео, отображается изображение-превью со ссылкой на видео.

Возможности

  • URL видео (YouTube, Vimeo и другие)
  • Загрузка изображения-превью
  • Автоматическое извлечение превью из YouTube/Vimeo
  • Настройка размера превью
  • Кнопка воспроизведения (опционально)

Как это работает

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

HTML блок

Описание

Блок для вставки произвольного HTML кода. Используйте с осторожностью, так как не весь HTML поддерживается в email-клиентах.

Возможности

  • Редактор HTML кода
  • Предпросмотр результата
  • Валидация HTML

⚠️ Предупреждение:

  • Используйте только HTML, совместимый с email
  • Избегайте JavaScript (не работает в email)
  • Используйте inline CSS
  • Тестируйте в разных почтовых клиентах

Меню (Menu)

Описание

Блок для создания навигационного меню с ссылками. Идеально подходит для шапки письма.

Возможности

  • Добавление пунктов меню
  • Настройка URL для каждого пункта
  • Стилизация пунктов меню
  • Разделители между пунктами
  • Выравнивание: по левому краю, по центру, по правому краю
  • Адаптивное меню для мобильных устройств

Работа с блоками

Добавление блока

  1. Перетащите блок из левой панели в нужную колонку
  2. Или кликните на блок в палитре — он добавится в конец активной колонки
  3. Блок автоматически выделится после добавления

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

  1. Кликните на блок, чтобы выделить его
  2. Для текстовых блоков: кликните ещё раз, чтобы начать редактирование текста
  3. Используйте правую панель для настройки свойств
  4. Изменения применяются автоматически

Перемещение блоков

Перетащите блок для изменения его позиции:

  • Вверх/вниз внутри колонки — изменение порядка
  • В другую колонку — перемещение между колонками
  • В другую полосу — перемещение между полосами

Дублирование блока

Выделите блок и нажмите Ctrl+D или кнопку "Дублировать" в правой панели. Полезно для создания похожих элементов.

Удаление блока

Выделите блок и нажмите Delete или кнопку "Удалить". Подтвердите удаление в диалоговом окне.