Документация / Контент

Баннеры

Все баннеры сайта — это элементы инфоблока «Баннеры». Раздел определяет, в каком блоке главной страницы появится баннер, а поле раздела «Тип баннера» — как он будет выглядеть.

Администрирование›Контент›Информация›Баннеры

Как устроены баннеры

Инфоблок «Баннеры»Хранит все баннеры сайта. Выбран на вкладке «Инфоблоки»

РазделМесто показа, например «Главный баннер». У раздела задан тип баннера

Элемент = баннерКартинка, заголовок, текст, кнопка и ссылка

После установки в инфоблоке уже есть разделы для всех баннерных блоков главной страницы:

Раздел	Символьный код	Тип баннера	Блок на главной
Главный баннер	`main`	Главный баннер	«Главный баннер»
Популярные категории	`popular`	Одинаковая плитка	«Популярные категории»
Преимущества	`features`	Преимущества	«Преимущества»
Двойной баннер на главной	`double_index`	Двойной баннер	«Двойной баннер»
Баннер на всю ширину на главной посреди страницы	`index_full`	Одиночный баннер	«Одиночный баннер»
О нашем магазине	`about`	Одиночный баннер (слева картинка — справа текст)	«О компании»

Не меняйте символьные коды разделов

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

Блок появится на главной, только если он включён в «Главная страница» → «Блоки страницы». Там же меняется порядок блоков.

Типы баннеров

Внешний вид баннеров задаётся у раздела в поле «Тип баннера»: все баннеры раздела выглядят одинаково. Если тип не выбран, баннеры раздела выводятся как «Главный баннер» — слайдером.

Тип можно поменять. Например, если переключить раздел «Популярные категории» с «Одинаковой плитки» на «Плитку», категории выстроятся мозаикой.

Главный баннер — слайдер в начале страницы

Главный баннерmain

Большой слайдер в начале главной. Слайды листаются автоматически, поддерживаются видео и отдельные картинки для телефонов. Поведение слайдера — скорость, точки, анимация, высота — настраивается в «Главная страница» → «Главный баннер».

Картинка: 1920×1080 pxДля телефона: вертикальная, ~900×1800 pxБаннеров: до 20

Двойной баннерdouble

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

Картинка: ~1500×820 pxБаннеров: чётное число

Одиночный баннерone

Широкий баннер на всю ширину контейнера — для акции или важного объявления в середине страницы. Каждый баннер раздела выводится отдельной полосой.

Картинка: ~2600×820 px (примерно 3:1)

Одиночный баннер (слева картинка — справа текст)one_alt

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

Картинка: ~820×580 pxТекст: поле «Описание для анонса», можно длинный

Плиткаgrid

Мозаика из плиток разного размера: баннеры идут группами по три, и в каждой шестёрке первая и последняя плитки широкие. Название и кнопка выводятся поверх картинки. Хорошо смотрится при 6 или 12 баннерах.

Картинки: широкие ~1400×700 px, обычные ~700×700 px

Одинаковая плитка — популярные категории

Одинаковая плиткаgrid_equal

Ряд одинаковых плиток — обычно это популярные категории. Сколько плиток в строке, где подпись (под картинкой или на ней), выравнивание и карусель — задаётся в «Главная страница» → «Баннер плиткой». Кнопка у плитки появляется, только если заполнены и «Ссылка», и «Подпись кнопки».

Картинка: квадратная, от 600×600 pxБаннеров: до 20

Преимуществаfeatures

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

Иконка: 48×48 px, SVG или PNG с прозрачным фономБаннеров: 4

Как сменить тип баннера у раздела

Откройте Контент → Информация → Баннеры.
Наведите на нужный раздел, откройте меню действий и выберите «Изменить».
В поле «Тип баннера» выберите вариант и нажмите «Сохранить».

Как добавить баннер

Откройте Контент → Информация → Баннеры и зайдите в раздел, где должен появиться баннер, например «Главный баннер».
Нажмите «Добавить элемент». Убедитесь, что на вкладке «Разделы» отмечен нужный раздел.
Заполните «Название» — это заголовок на баннере.
Загрузите «Картинку для анонса» — основное изображение для компьютеров. По желанию добавьте текст в «Описание для анонса» — это подзаголовок.
Заполните свойства: «Ссылка», «Подпись кнопки», вид текста и кнопки. Для телефонов загрузите «Баннер для мобильной версии». Все поля описаны ниже.
Проверьте, что отмечена «Активность», и нажмите «Сохранить». Откройте главную и посмотрите результат.

Баннеры можно править прямо на сайте: включите «Режим правки» в верхней панели «Битрикса», наведите курсор на баннер и нажмите кнопку редактирования. Так же баннер удаляется.

Порядок и расписание показа

Сначала выводятся баннеры с заполненным полем «Начало активности» — от новых к старым, затем остальные по полю «Сортировка»: чем меньше число, тем раньше баннер. Чтобы управлять порядком вручную, используйте только «Сортировку» и оставьте даты пустыми.
Баннер показывается только в период активности. Задайте «Начало активности» и «Окончание активности» — и акционный баннер сам появится и исчезнет в нужные даты.
Чтобы временно скрыть баннер, снимите галочку «Активность» — удалять не нужно.

Поля и свойства баннера

Основные поля

Поле	Что делает
Активность	Показывать баннер на сайте или нет.
Начало / окончание активности	Даты показа баннера. Влияют и на порядок — см. выше.
Сортировка	Порядок баннеров в разделе: меньше — раньше.
Название	Заголовок на баннере. В плитке — подпись плитки, в «Преимуществах» — заголовок карточки.
Картинка для анонса	Основная картинка баннера (для компьютеров). Для видео-баннера — обложка, которая видна до запуска ролика. В «Преимуществах» — иконка.
Описание для анонса	Подзаголовок под заголовком; в типе «Слева картинка — справа текст» — основной текст.
Детальная картинка	Картинка для телефонов, если не заполнено свойство «Баннер для мобильной версии».

Свойства

Свойство	Код	Что делает
Блок с текстом	`PANEL_TYPE`	Где расположить заголовок, текст и кнопку: по левому краю, по центру, по правому краю. «Не показывать» скрывает текст и кнопку — остаётся только картинка. Если при этом заполнена «Ссылка», кликабельным становится весь баннер. Так удобно размещать баннеры, где текст уже нарисован на картинке.
Цвет подложки у текста	`PANEL_COLOR`	Белая или Чёрная подложка под текстом, чтобы он читался на пёстрой картинке. Не выбрано — текст без подложки. Стиль подложки (сплошная или с затуханием) задаётся в «Главная страница» → «Баннеры» → «Фон текста».
Белый текст	`FONT_WHITE`	Отмечено — текст белый, не отмечено — тёмный. Белый текст нужен на тёмных фотографиях и чёрной подложке.
Подпись кнопки	`BUTTON`	Текст на кнопке, например «Перейти в каталог». Если не заполнено, на кнопке будет «Подробнее». В «Одинаковой плитке» и «Преимуществах» кнопка без подписи не выводится.
Ссылка	`LINK`	Куда ведёт баннер. Без ссылки кнопка не показывается. Для страниц своего сайта указывайте путь от корня: `/catalog/sale/`.
Тип кнопки	`BTN_TYPE`	Вид кнопки: Обычная, цвет темы — залитая основным цветом сайта (так же, если ничего не выбрано) Обводкой, цвет темы — прозрачная с рамкой Обычная, белая — для тёмных картинок Обводкой, белая — белая рамка на тёмной картинке
Баннер для мобильной версии	`MOBILE_PICTURE`	Отдельная картинка для телефонов. Обычно вертикальная, чтобы важная часть изображения не обрезалась на узком экране. Автоматически уменьшается до ширины 900 px.
Видео	`VIDEO`	Видеоролик вместо картинки: играет без звука и по кругу. В главном слайдере играет на текущем слайде, в остальных типах — когда блок появляется на экране. «Картинка для анонса» служит обложкой.
Видео для мобильной версии	`MOBILE_VIDEO`	Отдельный ролик для телефонов, например вертикальный. Если не задан, на телефонах играет основное видео.

Как работают картинки для телефона

Шаблон выбирает картинку для телефонов по приоритету: «Баннер для мобильной версии» → «Детальная картинка» → «Картинка для анонса». Если загружена только одна картинка, она используется везде. Если только мобильная — она же покажется и на компьютере.

Тип баннера	Компьютер	Телефон
Главный баннер	1920×1080 px	вертикальная, ~900×1800 px
Двойной баннер	~1500×820 px	ширина ~900 px
Одиночный баннер	~2600×820 px	ширина ~900 px
Слева картинка — справа текст	~820×580 px	та же
Плитка	~1400×700 (широкие), ~700×700 (обычные)	та же
Одинаковая плитка	квадрат от 600×600 px	та же
Преимущества	иконка 48×48 px	не показывается

Частые вопросы

Баннер не появился на сайте

Отмечена ли «Активность» и не закончилась ли дата активности?
Баннер лежит в нужном разделе (вкладка «Разделы» у элемента)?
Включён ли соответствующий блок в «Главная страница» → «Блоки страницы»?
Выбран ли инфоблок «Баннеры» на вкладке «Инфоблоки»?
Не изменён ли символьный код раздела?

Текст на баннере плохо читается

Включите или выключите «Белый текст» под цвет фотографии, а если фон пёстрый — выберите «Цвет подложки у текста». Можно перенести текст на спокойную часть картинки свойством «Блок с текстом».

На телефоне обрезается важная часть картинки

Загрузите отдельную вертикальную картинку в свойство «Баннер для мобильной версии».

Как поменять баннеры местами

Измените поле «Сортировка»: баннер с меньшим числом будет первым. Если у баннеров заполнено «Начало активности», порядок определяет дата — очистите это поле.