Типы виджетов

Grid (сетка)

В виджете Grid (сетка), все элементы отображаются как отдельные элементы сетки. Используйте настройку виджета, чтобы изменить внешний вид сетки.

Раздел	Описание
Столбцы	Настраивает число столбцов для различных размеров экрана (для )Configure the number of columns for different screen sizes (для адаптивности дизайна). Свойство gutter определяет пространство между строками и столбцами.
Контент	Настраивает то, как каждый элемент контента и его вложенный медиаэлемент будут отображены. Совет: Когда настройка Media overlay установлена на Social Buttons, вы можете добавить собственные поля для ссылок социальных сетей к выбранному элементу контента.
Основные	Настраивает то, как в целом будет отображаться виджет. Вы можете установить собственный класс HTML, который будет добавлен к элементу виджета при его отображении.

Пример: виджет Сетка по умолчанию. Элементы контента соотносятся к 100% и поэтому будут сложены.
[widgetkit id="23" widget="grid"]
Пример: Виджет Сетка имеет 4 колонки на больших экранах, автоматически переходящие в 2 колонки на планшетах и 1 колонку на всех устройствах, которые будут меньше планшетов. Чтобы понять это, вы можете изучить статью UIkit responsive grid, которая используется здесь
[widgetkit id="23" widget="grid" columns="1" columns_small="2" columns_large="4"]

Grid Stack (стек сетки)

В виджете Grid stack, все элементы из выбранного вами контента будут отображены один над другим. Это легко может быть использовано для парного отображения изображения (взятого из поля медиа вашего элемента контента) и краткого текста (взятого из поля контента вашего элемента контента).

Раздел	Описание
Сетка	Настраивает внешний вид сетки. Свойство gutter определяет пространство между элементами в сетке.
Контент	Настраивает то, как каждый элемент контента и его вложенный медиаэлемент будут отображены. Вы можете индивидуально устанавливать анимации для колонок медиа и контента. Совет: Когда настройка Media overlay стоит в значении Social Buttons, вы можете добавлять собственные поля  для ссылок социальных сетей к выбранному элементу контента.
Основное	Настраивает то, как виджет будет отображаться в целом. Вы можете также установить собственный класс HTML, который будет добавлен к элементу виджета при его отображении.

Пример: виджет Стек сетки по умолчанию.
[widgetkit id="23" widget="grid-stack"]
Пример: виджет Стек сетки с разделителем между элементами, медиаэлементы обрезаны по форме круга и анимация, которая срабатывает, когда прокрутка страницы подходит к отображению виджета.
[widgetkit id="23" widget="grid-stack" divider=1 media_border="circle" animation_media="fade" animation_content="slide"]

Map (карты)

Виджет Карты отображает карты Google на вашем сайте. Убедитесь, что вы добавили поле Location в ваш элемент контента и выбрали местоположение, которое хотите вывести на картах. Другое поле вашего контента, которое будет отображено, когда пользователь кликает по маркеру местоположения. Вы можете добавлять различные точки и всплывающие подсказки путем добавления различных элементов в ваш контент.
A map widget displays a Google map on your website. Make sure to add a custom field Location to your content element and select a location you want to display in the map. The other field of your content will be displayed when you the user clicks on the location marker. You can add several pins and popup boxes by adding more several items to your content element.

Раздел	Описание
Карта	Настраивает внешний вид карты.
Стиль	Настраивает стиль карт. Вы можете удалить все кнопки управления картой, изменить цвета или установить собственные.
Всплывающие подсказки	Настройка всплывающих подсказок, котоыре появляются на маркерах местоположений. Вы можете индивидуально настроить анимации для колонок медиа и контента. Совет: Когда настройка Media overlay стоит в значении Social Buttons, вы можете добавлять собственные поля  для ссылок социальных сетей к выбранному элементу контента.
Основное	Настраивает то, как виджет будет отображаться в целом. Вы можете также установить собственный класс HTML, который будет добавлен к элементу виджета при его отображении.

Пример: Простой виджет Карта. Убедитесь, что контент (#23 в примере) имеет поле с добавленным местоположением.
[widgetkit id="23" widget="map"]
Пример: Карта, показывающая изображение спутника без кнопок управления картой.
[widgetkit id="23" widget="map" maptypeid="SATELLITE" disabledefaultui=1]

Слайдшоу

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

Раздел	Описание
Слайдшоу	Настраивает внешний вид слайдшоу. Здесь можно найти настройки анимации и навигации для слайдов.
Заголовок	Когда вы включаете заголовок, текст будет отображен на каждом слайде. Текст будет взят из названия и полей контента в вашем элементе.
Основное	Настраивает то, как виджет будет отображаться в целом. Вы можете также установить собственный класс HTML, который будет добавлен к элементу виджета при его отображении.

Пример: Стандартный виджет Слайдшоу.
[widgetkit id="23" widget="slideshow"]
Пример: Слайдшоу с включенными заголовками и анимацией для слайдов и заголовков.
[widgetkit id="32" widget="slideshow" animation="swipe" caption=1 caption_animation="fade"]

Переключатель

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

Раздел	Описание
Переключатель	Настраивает внешний вид переключателя. Навигация может быть представлена в различных визуальных вариациях и может быть расположена на любой стороне контента.
Контент	Настраивает то, как каждый элемент контента и его вложенный медиа будут отображены. Совет: Когда настройка Media overlay стоит в значении Social Buttons, вы можете добавлять собственные поля  для ссылок социальных сетей к выбранному элементу контента.
Основное	Настраивает то, как виджет будет отображаться в целом. Вы можете также установить собственный класс HTML, который будет добавлен к элементу виджета при его отображении.

Пример: Стандартный виджет Переключатель.
[widgetkit id="23" widget="switcher"]
Пример: Переключатель с вкладочной навигацией снизу контента.
[widgetkit id="23" widget="switcher" nav="tabs" position="bottom"]
Пример: Переключатель с кнопками навигации, отображающимися слева.
[widgetkit id="23" widget="switcher" nav="nav" position="left"]