Баннеры

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

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

Общие настройки блока с баннерамиОбщие настройки блока с баннерами

Права на настройку блока с баннерами есть только у администраторов портала. Для общей настройки блока с баннерами включите режим правки — для этого у вас должна быть активна административная панель. Когда режим правки включен, наведите курсор на блок с баннерами, чтобы появился серый блок с опцией «Добавить баннер». Здесь нажмите на шестеренку (⚙️).

Как включить административную панель

В результате откроется меню с настройками баннеров. Для изменения здесь доступны следующие параметры:

Блок «Шаблон компонента»Блок «Шаблон компонента»

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

• banners_sparkle (выбран по умолчанию)

• banners

Внешний вид шаблона banners_sparkle:

Внешний вид шаблона banners:

Шаблоны отличаются кнопками переключения слайдов и наличием временно́й полосы. В шаблоне banners_sparkle у каждого баннера есть временная полоса — она выполняет роль таймера и заполняется в зависимости от длительности показа баннера. Если навести курсор на баннер, то временная полоса перестанет заполняться и время показа баннера будет поставлено на паузу. Когда временная полоса будет полностью заполнена карусель автоматически переключится на следующий баннер.

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

У текущего отображаемого баннера временная полоса выделяется белым:

Блок «Основные параметры»Блок «Основные параметры»

В этом блоке обратите внимание на опцию «Количество новостей на странице». Она позволяет установить максимальное количество баннеров, отображаемых в карусели. Максимально возможное количество баннеров для отображения: 20.

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

Блок «Источник данных»Блок «Источник данных»

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

Здесь доступны следующие опции:

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

   • ID. Порядок баннеров в карусели будет определяться с учетом их ID. Например, баннер с наименьшим ID будет первым, а с наибольшим — последним.

   • Название. Порядок баннеров в карусели будет определяться с учетом их названия. Например, в алфавитном порядке.

   • Дата начала активности. Порядок баннеров в карусели будет определяться с учетом даты начала их активности. Например, баннер с самой ранней датой будет первым, а с самой поздней — последним.

   • Сортировка. Порядок баннеров в карусели будет определяться с учетом заданных индексов сортировки. Например, баннер с индексом 10 будет первым, а с индексом 50 — последним.

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

2. Направление для первой сортировки новостей. В этом поле можно выбрать порядок сортировки: по возрастанию или по убыванию. Например, от 1 до 10, от А до Я, от более ранней даты к более поздней, или наоборот — от 10 до 1, от Я до А, от поздней даты к ранней.

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

4. Направление для второй сортировки новостей. В этом поле можно выбрать порядок дополнительной сортировки: по возрастанию или по убыванию.

Блок «Дополнительные настройки»Блок «Дополнительные настройки»

Здесь обратите внимание на параметр «Поведение баннеров», с его помощью можно настроить отображение картинок в блоке с баннерами.

Для выбора доступно два варианта поведения баннеров:

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

В данном случае баннер не имеет ограничений по высоте, а его максимально допустимая ширина составляет 1229px. Это значит, что чем больше разрешение экрана, тем больше баннер будет растягиваться по ширине — максимально до 1229px. А высота баннера будет меняться пропорционально ширине. Например, при разрешении экрана 1920px ширина баннера составляет 855px. Если в баннер загрузить картинку размером 1600х600, то в карусели изображение будет уменьшено по ширине с сохранением пропорций. В результате размер картинки баннера станет 855х321.

Кроме того, эта опция устанавливает единую высоту баннеров на основе баннера с наибольшей высотой. К примеру, если высота всех баннеров 100px, а одного — 300px, то для всех баннеров будет установлена высота в 300px. При этом изображение в 100px не будет растянуто в высоту до 300px, но от края изображения будет сделан отступ до 300px.

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

2. Растягивать по ширине, сохраняя высоту и обрезая фон. Опция позволяет автоматически подогнать картинки под один размер, чтобы сделать баннеры одинаковыми по высоте и ширине. В этом случае изображение обрезается и центрируется внутри блока баннера. Эту опцию можно использовать, если картинка нужна в качестве фона для текста и ее содержимое не требуется целиком выводить на баннере.

Когда выбрана эта опция, максимально доступная ширина баннера — 1229px, а высота варьируется от 212px до 322px (в зависимости от текущей ширины). Это значит, что чем больше разрешение экрана, тем больше баннер будет растягиваться по ширине — максимально до 1229px. А высота баннера будет меняться от 212px до 322px пропорционально ширине.

Например, при разрешении экрана 1920px ширина блока с баннером составляет 855px, а высота — 212px. Если в баннер загрузить картинку размером 1600х600, то в карусели изображение будет обрезано и выравнено по центру блока. В результате размер картинки станет 855х212 и на баннер попадет ее центральная часть.

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

Создание баннеровСоздание баннеров

Добавлять новые баннеры могут только привилегированные пользователи. Для перехода настройкам баннеров наведите курсор на блок с баннерами и кликните на шестеренку (⚙️).

В результате откроется слайдер для управления баннерами. Здесь вы можете создавать, редактировать и удалять баннеры. На слайдере отображается основная информация обо всех созданных баннерах: их статус активности, название, индекс сортировки, изображение, шаблон, текст и время показа.

При необходимости вы можете вывести колонки с дополнительной информацией о баннерах. Для этого нажмите на шестеренку в левом верхнем углу экрана и отметьте галочками нужные колонки.

Чтобы добавить новый баннер нажмите на кнопку «Создать». Откроется слайдер, где у вас будет выбор из пяти шаблонов баннеров. Рассмотрим особенности создания каждого из них.

Шаблон баннера «Картинка»Шаблон баннера «Картинка»

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

При создании такого шаблона доступны следующие поля:

1. Название. Обязательное поле, в котором нужно ввести название баннера. Название будет доступно только привилегированным пользователям на слайдере управления и редактирования баннеров — оно нужно для удобной навигации по баннерам, а также может использоваться для сортировки. Баннер можно назвать исходя из его содержания, например «Информация о корпоративе» или «Анонс нового курса».

2. Картинка. В это поле нужно загрузить картинку баннера. Для загрузки доступны изображения в формате JPEG и PNG. Вес, высота и ширина загружаемого изображения не ограничены, однако при их загрузке нужно учитывать настройки поведения баннеров, а также размеры других баннеров в карусели. Чтобы все баннеры были одного размера рекомендуется загружать картинки одинаковые по ширине и высоте.

3. Активность. Опция влияет на отображение баннера на Главной. Если галочка стоит, баннер будет выводиться в общей карусели. Если галочку убрать, баннер будет доступен только администраторам через слайдер управления баннерами.

4. Начало активности/Окончание активности. В этих полях можно указать временной промежуток (дату и время) в течение которого баннер будет отображаться на Главной. Когда дата окончания активности пройдет, сотрудники больше не будут видеть данный баннер. Доступ к нему останется только у администраторов через меню управления баннерами. Если поля не заполнены, баннер будет отображаться в карусели всегда.

5. Сортировка. С помощью этого поля устанавливается порядок отображения баннеров в карусели. Баннер с самым меньшим индексом будет первым, а с наибольшим — последним. То есть, баннеры будут идти от наименьшего индекса к большему. Если в настройках блока выл выбран другой тип сортировки, то эта опция не будет использоваться.

6. Время показа (сек.). Здесь можно указать количество секунд, которое баннер будет отображаться в карусели до переключения на следующий баннер. Если значение не задано, то по умолчанию каждый баннер отображается в карусели 10 секунд. Опция позволяет управлять длительностью показа баннеров с учетом их содержания. Например, если на баннер добавлено много текста, то время его показа можно увеличить.

7. Показывать только новым сотрудникам (в течение месяца с даты регистрации). Опция позволяет сделать баннер видимым только для новых сотрудников. Баннер будет виден в карусели всем новым пользователям в течение 30-ти дней с момента регистрации. После этого баннер будет доступен только администраторам через меню управления баннерами.

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

9. Права доступа. Здесь настраиваются права доступа к баннеру, т.е. какие пользователи смогут его видеть, а какие — нет. Это позволяет размещать таргетированные баннеры.

Пример отображения баннера, созданного по шаблону «Картинка»:

Шаблон баннера «Картинка с текстом»Шаблон баннера «Картинка с текстом»

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

У данного шаблона есть все настройки шаблона «Картинка», а также дополнительные поля:

1. Заголовок. В этом поле можно указать текст заголовка, который будет выводиться на баннере поверх картинки. Размер и шрифт зафиксированы в стилях шаблонов баннеров и не настраиваются отдельно. Выравнивание заголовка также всегда стандартное — по левому краю баннера.

2. Цвет текста заголовка. В этом поле можно указать цвет текста заголовка в виде HEX-кода.

3. Подзаголовок. В этом поле можно указать текст подзаголовка, который будет выводиться на баннере поверх картинки. Если заголовок указан, то текст подзаголовка всегда будет отображаться ниже. Размер и шрифт зафиксированы в стилях шаблонов баннеров и не настраиваются отдельно. Размер шрифта подзаголовка всегда меньше, чем у заголовка. Выравнивание также всегда стандартное — по левому краю баннера.

4. Цвет текста подзаголовка. В этом поле можно указать цвет текста подзаголовка в виде HEX-кода.

5. Добавить кнопку. Опция позволяет добавить на баннер кнопку для перехода по ссылке. С ее помощью можно акцентировать внимание на том, что баннер кликабелен и перенаправить пользователей на внешний ресурс: сайт, статью, сервис, опрос и так далее.

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

6. Текст кнопки. Настройка появляется только если включена опция «Добавить кнопку» (см. пункт 5). В данном поле можно указать текст для кнопки. Например «Перейти», «К статье», «Голосовать», «Кликай сюда», «Наш сайт» и тому подобное.

7. Заглавные. Настройка появляется только если включена опция «Добавить кнопку». Здесь можно настроить регистр букв в тексте кнопки: все заглавные или первая заглавная, а остальные прописные.

8. Цвет текста. Настройка появляется только если включена опция «Добавить кнопку». В этом поле можно указать цвет текста кнопки в виде HEX-кода.

9. Скругление. Настройка появляется только если включена опция «Добавить кнопку». Здесь можно выбрать форму кнопки: полностью скруглить края или оставить прямоугольными.

10. Цвет кнопки. Настройка появляется только если включена опция «Добавить кнопку». В этом поле можно указать цвет фона кнопки в виде HEX-кода.

11. Цвет рамки. Настройка появляется только если включена опция «Добавить кнопку». В этом поле можно указать цвет рамки кнопки в виде HEX-кода.

12. Добавить таймер. Опция позволяет добавить на баннер блок с обратным отсчетом до события. Если галочка активна, то созданный таймер выводится. Если галочку снять, то таймер не будет выводиться на баннере.

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

    При необходимости вы можете скрыть баннер с главной страницы, как только закончится обратный отсчет. Для этого в настройке баннера «Окончание активности» укажите те же дату и время завершения, что и у таймера.

14. Часовой пояс. Поле для выбора часового пояса, в котором будет выполняться обратный отсчет.

15. Цвет цифр. Цвет цифр и текста на таймере.

16. Цвет подложки. Цвет блоков со временем на таймере.

17. Прозрачность подложки, %. Прозрачность фона блоков.

Пример отображения баннера, созданного по шаблону «Картинка с текстом» со всеми элементами:

Шаблон баннера «Видео растянутое»Шаблон баннера «Видео растянутое»

У данного баннера есть все настройки шаблона «Картинка». Отличие в том, что вместо поля для загрузки изображения здесь находится поле для загрузки видео. Для добавления доступны видео в формате mp4, mpg, avi, wmv, mpeg, mpe и flv. В данном случае будет размещено во всю ширину блока баннера.

Пример баннера, созданного по шаблону «Видео растянутое»:

Шаблон баннера «Видео с текстом справа»Шаблон баннера «Видео с текстом справа»

У данного баннера есть все настройки шаблона «Картинка с текстом». Отличие в том, что здесь сразу два блока для загрузки медиа: «Видео» и «Фон баннера».

Для загрузки доступны видео в формате mp4, mpg, avi, wmv, mpeg, mpe и flv. И фото в формате JPEG и PNG.

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

Шаблон баннера «Видео с текстом слева»Шаблон баннера «Видео с текстом слева»

У данного баннера есть все настройки шаблона «Видео с текстом справа». Отличие в том, что в данном случае видео будет размещено справа, а текст — слева.

Редактирование, деактивация и удаление баннеровРедактирование, деактивация и удаление баннеров

На слайдере управления баннерами нажмите на бургер-меню рядом с нужным баннером и выберите нужное действие:

• Редактировать. При нажатии на кнопку откроется слайдер редактирования баннера. Он идентичен слайдеру создания баннера.

• Деактивировать/Активировать. Опция позволяет скрыть/показать баннер на Главной странице.

• Удалить. При нажатии на кнопку баннер будет удален.

Деактивация блока с баннерамиДеактивация блока с баннерами

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

Перейдите в административную часть портала по пути: адрес_портала/bitrix/admin/. В шапке портала нажмите «Настройки» > «Улей: Главная страница».

Во вкладке «Компоненты» обратите внимание на таблицу «Центральный блок». Здесь в строке «Слайдер» снимите галочку в чекбоксе и сохраните изменения.

В результате блок с баннерами больше не будет отображаться на Главной. При этом все добавленные баннеры будут сохранены. Чтобы вернуть баннер на Главную активируйте соответствующую галочку в настройках модуля.