Курсы обучения
+7 (351) 777-80-70
2021.05.07

Добавить виджет - Линейка решений INTEC: Universe

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

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

0.2.png

Далее кликнем на нужный нам контейнер и нажмем «+», после чего слева появится форма с выбором виджета.

0.3.png

Здесь есть различные разделы, в которых можно выбрать виджеты, являющиеся частью решения Intec:Universe, либо стандартные виджеты Битрикса. Подробнее о виджетах (компонентах) от 1С-Битрикс: Основные сведения.

0.1.png

Системные

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

Элементы

  • Контент страницы - это функционал добавления контента для внутренних страниц. Нет смысла добавлять этот блок на главную страницу.
  • Иконки - функционал добавления иконок. О настройке иконок можно почитать здесь.
  • Панель управления - функционал добавления верхней панели редактирования сайта.
  • Текстовый блок - функционал добавления текстового блока. Можно редактировать его прямо из конструктора, вставлять картинки, менять шрифт и т.д.
  • Заголовок страницы - добавляет заголовок к текущей странице.

Шапка

В разделе «Шапка» доступен предустановленный вариант шапки.

Категории, футер и т.д.

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

Разработчик Bitrix Framework.


В качестве примера добавим виджет для вывода блока «О компании». Для этого в разделе «О компании» выберем один из предустановленных вариантов.

2.1.png

Кликнем по иконке и перейдем в параметры данного виджета.

Для начала выберем шаблон, а затем укажем тип инфоблока и сам инфоблок.

2.2.png

Далее выберем какой элемент инфоблока выводить.

2.3.png

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

2.4.png

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

2.5.png

Во вкладке "Параметры сортировки" можно настроить сортировку элементов.

После того, как мы настроили данный виджет, сохраняемся. Однако, если сейчас выйти из конструктора, то изменения не применятся, так как необходимо еще кликнуть по кнопке "Сохранить" в самом конструкторе.

2.6.png

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

2.7.png

Наши решения