Тип компонента Текстовый блок

Что это за компонент

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

Если говорить совсем просто, это не “одно поле с абзацем”, а полноценный редактор, в котором можно собрать структурированный текстовый материал из разных элементов:

• заголовков
• абзацев
• списков
• цитат
• разделителей
• блоков кода
• предупреждений
• изображений с подписью
• файлов для скачивания

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

Когда использовать именно этот тип

Текстовый блок подходит, если нужно:

• собрать обычную информационную страницу
• сделать длинный материал с несколькими смысловыми секциями
• сочетать текст, изображения и файлы в одном месте
• подготовить понятную страницу для чтения внутри mini app

Как этот блок выглядит в Omnis и в mini app

Рабочая логика простая:

1. В Omnis вы открываете карточку компонента типа Текстовый блок.
2. Внутри текстового редактора собираете материал из блоков.
3. При необходимости настраиваете отступы, цвета и оформление.
4. После сохранения блок размещается на странице.
5. В mini app клиент видит уже готовую оформленную статью или контентный раздел.

1. Как создать текстовый блок

Обычно сценарий такой:

1. Откройте Управление -> CMS -> Компоненты.
2. Нажмите Создать.
3. В окне выбора типа выберите Текстовый блок.
4. Заполните название компонента.
5. При необходимости задайте код.
6. Включите компонент, если он уже готов к работе.
7. Заполните содержимое в редакторе.
8. Сохраните компонент.
9. Разместите его в нужном слоте страницы.

2. Основные поля карточки

У этого типа компонента сверху используются стандартные поля CMS-компонента.

ID

Это внутренний идентификатор записи. В ежедневной работе он нужен редко.

Тип

Для этого документа тип всегда будет Текстовый блок.

Это важно, потому что тип определяет:

• сам редактор содержимого
• набор доступных элементов
• текстовые настраиваемые свойства

Код

Это служебный код компонента.

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

Наименование

Это рабочее название компонента в Omnis.

Для команды лучше использовать понятные названия, например:

• Текст доставки
• Условия оплаты
• О компании
• Инструкция для клиента

Приоритет

Это служебный параметр порядка. Он особенно полезен, если компонент участвует в общей очередности блоков на странице.

Активирован

Этот переключатель помогает:

• включать рабочий блок
• хранить черновики
• временно отключать текстовый материал без удаления карточки

3. Главное поле этого компонента - редактор содержимого

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

В редакторе можно:

• добавлять новые блоки
• менять порядок блоков
• удалять лишние блоки
• редактировать текст прямо в интерфейсе
• комбинировать разные типы элементов в одном материале

Практически это значит, что один Текстовый блок может быть:

• короткой заметкой
• полноценной статьей
• разделом FAQ
• инструкцией
• промо-описанием с иллюстрациями

4. Какие элементы можно добавить внутрь текстового блока

Ниже перечислены основные элементы, которые поддерживает редактор этого компонента.

Заголовок

Заголовок нужен для разделения материала на смысловые части.

Внутри редактора доступны уровни:

• от H1
• до H6

Практически это полезно так:

• большой заголовок для названия раздела
• средние заголовки для внутренних секций
• мелкие заголовки для подпунктов

В mini app заголовки отображаются разным размером и создают четкую структуру страницы.

Обычный абзац

Это основной текстовый элемент.

Он нужен для:

• объяснений
• описаний
• информационных блоков
• длинных текстов

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

Список

Список полезен, когда информацию нужно показать пунктами.

Поддерживаются:

• маркированный список
• нумерованный список

Это особенно удобно для:

• условий доставки
• шагов оформления заказа
• перечня преимуществ
• списка документов

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

Разделитель

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

Его удобно использовать:

• между крупными секциями
• между информационными блоками
• между текстом и вставкой с медиа

Цитата

Цитата подходит для визуального выделения важной мысли.

У нее обычно есть:

• основной текст
• подпись
• выравнивание

Это полезно для:

• акцентных фраз
• отзывов
• цитат основателя
• важных замечаний

Код

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

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

• технических инструкций
• шаблонов
• системных кодов
• примеров команд

Предупреждение

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

Обычно внутри него есть:

• заголовок предупреждения
• основной текст предупреждения

Хорошие примеры использования:

• важные условия доставки
• ограничения по возвратам
• предупреждение о сроках
• важные инструкции перед оплатой

Медиа-объект

Этот элемент позволяет вставить изображение прямо внутрь текста.

Для медиа можно:

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

Это удобно для:

• иллюстраций внутри статьи
• схем
• баннерных вставок
• поясняющих изображений

Файл

Этот элемент позволяет прикрепить файл для скачивания.

Для файла можно:

• выбрать уже загруженный файл
• загрузить новый
• задать подпись или отображаемое имя

Это полезно для:

• прайсов
• договоров
• памяток
• инструкций в PDF
• других материалов для скачивания

5. Что важно знать про медиа-вставку

Медиа-вставка в Текстовом блоке - это не просто картинка.

У нее есть несколько полезных настроек.

Выбор изображения

Пользователь может:

• выбрать уже существующее изображение
• создать и загрузить новое

Формат

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

Ширина и высота

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

Подпись

Подпись отображается под изображением и помогает объяснить, что показано на картинке.

Текст под изображением

Это дополнительное пояснение под медиа-блоком.

Выравнивание

Обычно доступны варианты:

• слева
• по центру
• справа

Практический совет:

если нет уверенности, лучше начинать с более простого варианта:

• выбрать изображение
• добавить подпись
• оставить аккуратное стандартное выравнивание

6. Что важно знать про файловую вставку

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

Обычно внутри нее важны три вещи:

• какой файл выбран
• как он называется
• какая подпись будет видна пользователю

Это особенно полезно, если на странице нужно дать клиенту:

• документ
• бланк
• инструкцию
• PDF-файл

Практический совет:

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

Например:

• Скачать договор
• Памятка по возврату
• Прайс в PDF

7. Как выглядит текстовый блок в mini app

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

Пользователь может увидеть:

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

Также важно:

• ссылки внутри текста остаются кликабельными
• разделители визуально отделяют секции
• цитаты и предупреждения имеют отдельное оформление
• вложенные списки читаются как многоуровневые пункты

8. Общие настраиваемые свойства этого компонента

Помимо содержимого, у Текстового блока действуют и общие настраиваемые свойства компонента.

Их стоит использовать осторожно и только если команде понятен результат.

Чаще всего здесь нужны:

• padding-y - внутренние отступы сверху и снизу
• padding-x - внутренние отступы слева и справа
• margin-y - внешние отступы сверху и снизу
• margin-x - внешние отступы слева и справа

Практически это помогает:

• сделать блок более “воздушным”
• убрать лишнюю тесноту
• точнее вписать текст в страницу

Если не уверены, что менять, лучше оставлять эти значения по умолчанию.

9. Собственные настраиваемые свойства текстового блока

У Текстового блока есть и свой собственный набор свойств, который относится именно к типографике и оформлению текстовых элементов.

Ниже перечислены эти свойства простым человеческим языком.

Основной текст и ссылки

• color-text - основной цвет текста
• color-link - цвет ссылок
• line-height - межстрочный интервал

Эти настройки влияют на общий комфорт чтения всего материала.

Разделитель

• color-delimiter - цвет разделителя
• height-delimiter - толщина разделителя

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

Цитата

• bg-quote - фон блока цитаты
• color-quote - цвет текста цитаты
• border-quote - левая акцентная граница цитаты
• round-quote - скругление блока цитаты
• color-hint-quote - цвет подписи цитаты

Эти свойства полезны, если в контенте часто используются акцентные цитаты или отзывы.

Блок кода

• bg-code - фон блока кода
• round-code - скругление блока кода
• border-code - рамка блока кода
• color-code - цвет текста кода

Если в контенте нет кода, эти свойства можно просто не трогать.

Предупреждение

• bg-warn - фон предупреждения
• round-warn - скругление предупреждения
• border-warn - рамка предупреждения
• color-warn - цвет текста предупреждения

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

Медиа-вставка

• color-media - цвет текста рядом или под медиа
• color-media-label - цвет подписи под изображением

Эти свойства полезны, если изображения сопровождаются поясняющими подписями.

Файловый блок

• bg-file - фон карточки файла
• round-file - скругление карточки файла
• border-file - рамка карточки файла
• color-file-name - цвет имени файла
• color-file-meta - цвет служебной информации о файле, например размера
• color-file-cap - цвет подписи файла

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

Для всех полей border-* в редакторе есть готовые пресеты рамок: initial, none, мягкая 1px, обычная 1px, акцентная 4px, плотная 2px, пунктир.

10. Когда стоит использовать правила для разных дисплеев

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

Чаще всего это полезно для:

• крупных изображений внутри статьи
• длинных информационных страниц
• промо-материалов с несколькими медиа-вставками

Практический подход такой:

1. Сначала настройте аккуратный базовый вид.
2. Только потом добавляйте отдельные правила для разных экранов.
3. Вносите изменения по одному параметру и сразу проверяйте результат.

Если не уверены, этот блок лучше не усложнять без необходимости.

11. Практические рекомендации по работе с этим типом

Не собирайте слишком много разных смыслов в одном блоке без структуры

Если материал длинный, используйте:

• заголовки
• списки
• разделители
• предупреждения

Так страница будет намного легче читаться.

Подписывайте изображения и файлы

Подписи сильно повышают понятность контента для клиента.

Не злоупотребляйте ручной стилизацией

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

Проверяйте материал на реальном экране

Текстовый блок особенно важно смотреть в mini app, потому что именно там становится ясно:

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

Итог

Текстовый блок - один из самых полезных и универсальных компонентов CMS.

Он позволяет собрать в одном месте:

• обычный текст
• структуру из заголовков и списков
• акцентные вставки
• изображения
• файлы

Если компании нужно быстро и аккуратно делать информационные страницы внутри mini app, это один из самых важных типов компонентов в CMS.