Тип компонента Медиа-баннер

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

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

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

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

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

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

Медиа-баннер подходит, если нужно:

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

Практически баннер может вести:

• в каталог
• в подборку товаров
• на контентную страницу
• на промо-экран
• на внешний ресурс, если это предусмотрено сценарием

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

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

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

1. Как создать медиа-баннер

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

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

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

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

ID

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

Тип

Для этого документа тип всегда будет Медиа-баннер.

Он определяет:

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

Код

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

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

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

Это рабочее имя баннера в Omnis.

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

• Главный баннер акции
• Баннер весенней распродажи
• Баннер входа в каталог
• Баннер категории обувь

Приоритет

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

Активирован

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

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

3. Все поля самого медиа-баннера

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

Изображение

Это главная визуальная основа баннера.

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

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

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

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

URL

Это адрес перехода по баннеру.

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

Практически баннер можно направить:

• на внутреннюю страницу приложения
• на каталог
• на подборку
• на контентную страницу
• на внешний адрес, если это допустимо в вашем сценарии

Полезная рекомендация:

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

Alt

Это текстовое описание изображения.

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

Например:

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

Надпись

Это короткий текст, который отображается отдельно над самим баннером.

В интерфейсе mini app этот текст выводится как верхняя подпись перед баннерным блоком.

Хорошие примеры:

• Спецпредложение
• Новая коллекция
• Только сейчас

Заголовок

Это основной акцентный текст внутри баннера.

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

Например:

• Скидки до 40%
• Новая коллекция уже в каталоге
• Перейти к подборке

Подзаголовок

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

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

Например:

• Выберите новые модели в разделе каталога
• Только ограниченное время
• Собрали самые популярные товары сезона

Надпись на кнопке

Если поле заполнено, внутри баннера появляется кнопка.

Примеры:

• Смотреть
• Открыть каталог
• Подробнее
• Перейти

Важно понимать:

• кнопка работает как часть баннера
• логика перехода все равно завязана на URL

Кнопка закрытия

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

Это полезно, если баннер:

• рекламный
• временный
• может мешать при повторных посещениях

Одноразовый

Этот переключатель имеет смысл прежде всего вместе с Кнопкой закрытия.

Практически его поведение такое:

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

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

• временных акций
• приветственных баннеров
• разовых информационных сообщений

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

4. Как баннер реально выглядит у клиента

У Медиа-баннера есть важная особенность: его внешний вид зависит не только от текста и изображения, но и от некоторых настраиваемых свойств.

На практике баннер обычно состоит из:

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

Надпись над баннером

Поле Надпись выводится отдельно над баннерным блоком.

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

Заголовок и подзаголовок внутри баннера

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

Кнопка

Если заполнено поле Надпись на кнопке, клиент видит визуальный призыв к действию.

Закрытие

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

5. Важная особенность: два режима отображения изображения

У этого компонента есть важный нюанс, который особенно полезно понимать заранее.

Режим 1. Обычное изображение

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

Это подходит, если:

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

Режим 2. Фоновый баннер

Если для баннера задается высота через настраиваемое свойство height-banner, изображение начинает использоваться как фон баннера.

Это полезно, если нужен классический баннерный вид:

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

Именно в этом режиме особенно важны свойства:

• image-fill
• bg-pos-banner
• height-banner

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

Как и у других компонентов, у Медиа-баннера работают и общие свойства блока.

Чаще всего здесь используют:

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

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

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

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

7. Собственные настраиваемые свойства медиа-баннера

У Медиа-баннера есть свой набор собственных настраиваемых свойств. Ниже они сгруппированы по смыслу.

Геометрия и общий вид баннера

• height-banner - высота баннера
• round-banner - скругление углов баннера
• border-banner - рамка баннера
• bg-banner - фоновый цвет баннера

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

Для border-banner в редакторе теперь доступны готовые пресеты рамок: системное значение, отсутствие рамки, тонкие, плотные и пунктирные варианты.

Работа с изображением

• image-fill - режим заполнения изображения внутри баннера
• bg-pos-banner - положение фонового изображения

Практически это влияет на то:

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

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

В редакторе для image-fill доступны готовые варианты вроде cover, contain, 55% 55%, 75% 75%, 100% auto, auto 100%, а для bg-pos-banner - базовые позиции фона (center, center top, left bottom и другие).

Надпись над баннером

• color-label - цвет верхней надписи
• weight-label - насыщенность шрифта верхней надписи
• size-label - размер шрифта верхней надписи

Это полезно, если у вас используется короткий промо-лейбл вроде Новинка или Только сейчас.

Базовый цвет баннера

• color-basic - общий базовый цвет текста баннера

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

Заголовок

• text-align-title - выравнивание заголовка
• color-title - цвет заголовка
• weight-title - насыщенность шрифта заголовка
• size-title - размер заголовка

Это основные свойства для главной фразы баннера.

Подзаголовок

• text-align-subtitle - выравнивание подзаголовка
• color-subtitle - цвет подзаголовка
• weight-subtitle - насыщенность шрифта подзаголовка
• size-subtitle - размер подзаголовка

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

Кнопка действия

• bg-btn - фон кнопки
• color-text-btn - цвет текста кнопки
• width-btn - ширина кнопки
• round-btn - скругление кнопки
• height-btn - высота кнопки
• text-align-btn - выравнивание текста кнопки
• text-size-btn - размер текста кнопки
• padding-x-btn - горизонтальные внутренние отступы кнопки
• weight-btn - насыщенность шрифта кнопки

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

Для всех полей text-align-* в редакторе теперь есть готовый набор значений: initial, start, center, end, left, right, justify.

8. Как безопасно настраивать кастомные свойства

Чтобы баннер не “сломался” визуально, удобнее придерживаться такого порядка:

1. Сначала заполните изображение и основные текстовые поля.
2. Проверьте баннер в базовом виде.
3. Только потом меняйте геометрию, фон и кнопку.
4. Изменяйте по одному параметру и сразу проверяйте результат.

Особенно осторожно стоит менять:

• height-banner
• image-fill
• bg-pos-banner
• размеры текста
• размеры кнопки

Именно эти настройки сильнее всего влияют на итоговый вид.

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

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

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

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

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

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

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

Не перегружайте баннер слишком длинным текстом

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

Не используйте слишком сложное изображение под длинный текст

Если фон слишком пестрый, текст и кнопка теряют читаемость.

Проверяйте баннер на телефоне, а не только в карточке компонента

Именно на маленьком экране становится видно:

• хорошо ли читается заголовок
• не съехала ли кнопка
• не теряется ли изображение

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

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

Осмысленно заполняйте URL

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

Итог

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

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

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

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