Scroll

Виджеты: Структура

1. Ряд
2. Контейнер

1. Ряд

Виджет "Ряд" это важный виджет, который необходим для размещения других виджетов на странице сайта. С его помощью достигается адаптивность. Для него недоступны стили.

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

Этот виджет реализован в двух вариантах: 1) на всю ширину экрана; 2) фиксированного размера.
____2.png

По умолчанию ширина экрана растянута на всю ширину элемента структуры.

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

Одна колонка используется по умолчанию. Максимальное количество колонок составляет 6 штук.
____5.png

Каждая из колонок занимает одинаковое пространство, если ширина страницы задана как 100%.

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

Контур пустого ряда будет серым, а середина - прозрачная.

Контур выбранного ряда будет голубого цвета.

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

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

При уменьшении количества столбцов в меньшую сторону (например, было 6, а стало 5) будет выводится сообщение о том, что часть контента будет удалена. Действие также необходимо будет подтвердить в появившемся окне. В случае подтверждения действия, система начнет удаление справа налево. Это действие необратимое.
Например, было 6 колонок с контентом. Если в настройках справа уменьшить количество колонок до 1, то 5 колонок справа будут удалены.

Функция "Якорь" позволяет Вам перейти в любую часть страницы, кликнув на объект, в котором активирована функция "Якорь".

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

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

2. Контейнер

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

Свойства виджета "Изображение" делятся на два раздела - "Настройки" и "Дизайн".
Раздел "Настройки" содержит такие парметры: "Отступ вне контейнера" и "Отступ в контейнере", а также "Якорь".

"Отступ в контейнере" регулирует расстояние между краями контейнера и объекта внутри него. В то же время "Отступ вне контейнера" регулирует расстояние между самим контейнером и другими объектами. По умолчанию используется значение равное 0.
Настройки отступов: Используются только символы от 0 до 9, другие символы использовать некорректно. Минимальное значение составляет 0, а максимальное - 999 пикселей.
____3.png

Принципиальная схема того, как это работает, изображена ниже.____4.png

Чтобы изменить значение отступов можно использовать переключатели со стрелочками или числовой шаговый инструмент.
____5.png

Функция "Якорь" позволяет Вам перейти в любую часть страницы, кликнув на объект, в котором активирована функция "Якорь".

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

Раздел "Дизайн" состоит из трех блоков - "Фон", "Рамка" и "Скругления".

Блок "Фон" содержит настройки, которые влияют на внешний вид фона контейнера. По умолчанию контейнер прозрачный.

"Цвет" - определяет цвет фона.

Чтобы изменить цвет, необходимо нажать на его поле. В результате откроется палитра цветов. В ней представлено 25 предустановленных и 5 дополнительных цветов. Любой из них можно заменить, нажав на кнопку "Больше цветов".

В открывшемся окне можно выбрать любой цвет. Для удобства при подборе цвета присутствует два поля для цвета - "текущий" и "новый". В первом поле отображается используемый цвет, а во втором - тот, который мы выбираем в качестве альтернативы. Когда подходящий цвет найден, необходимо нажать кнопку "ОК". Если по каким-то причинам решение об измении цвета изменилось, то достаточно нажать "Отмена".
____10.png

"Фон" - позволяет использовать изображение в качестве фона. Чтобы добавить его, нужно нажать на кнопку  "+".

Для того, чтобы изменить фоновое изображение, необходимо нажать на кнопку "Редактировать". Для удаления изображения необходимо нажать на кноку "Удалить".

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

"Размер" - определяет логику использования изображения. На выбор доступно 3 варианта - "Не масштабировать", "Вписать по ширине" и "Вписать по высоте".
____14.png

Вариант "Не масштабировать" позволяет использовать изображение в оригинальном размере.

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

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

При помощи параметра "Расположение" можно задать положение изображение относительно одного из краев экрана или угла. Также есть возможность разместить изображение относительно центра экрана.

При помощи выпадающего списка "Повторять" можно задать логику использования повторений изображения на странице.
____16.png

"Не повторять" - вариант, использующийся по умолчанию. Повторение не используется.

"Повторять"  - вариант, который позволит повторить изображение несколько раз на странице (с использованием оригинальных размеров).

"Повторить горизонтально" - вариант, который позволяет включить повторение изображение по горизонтали (с использованием оригинальных размеров).

"Повторить вертикально" - вариант, который позволяет включить повторение изображение по вертикали (с использованием оригинальных размеров).

"Зафиксировать" - параметр, который позволяет зафиксировать положение изображения. По умолчанию включен. Если же его отключить, то изображение будет перемещаться со страницей при ее прокрутке.

Раздел "Рамка" содержит настройки, от которых зависят границы виджета "Контейнер". Состоит из трех параметров - "Стиль", "Цвет" и "Ширина".

"Стиль" - позволяет редактировать внешний вид границ контейнера. На выбор доступны 3 варианта - "Слошная", "Пунктир" и "Штриховка".

"Цвет" - определяет цвет линий границ контейнера.

"Ширина" - регулирует ширину линий границ контейнера. По умолчанию используется значение равное 0. При помощи стрелочек или путем ввода точного значения толщину линий можно редактировать. Для ввода могут быть использованы цифры от 0 до 9. Минимальное допустимое значение 0, максимальное - 999 пикселей.

"Скругления" - позволяет изменять внешний вид углов контейнера, делая их более круглыми. По умолчанию используется значение равное 0. При помощи стрелочек или путем ввода необходимого значения можно вносить изменения. Для ввода могут быть использованы цифры от 0 до 9. Минимальное допустимое значение 0, максимальное - 999 пикселей.

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 3 из 4
Еще есть вопросы? Отправить запрос

Комментарии

На базе технологии Zendesk