Виджеты, секции, группы и подгруппы

Сетка

Сетка — это поле, на котором располагаются виджеты сайта. Сетка работает по принципу таблицы, в каждую из ячеек которой можно положить виджет, причем виджет можно растянуть на несколько ячеек, при этом виджеты не могут пересекаться между собой. Ширина сетки равна ширине сайта (а если экран по ширине меньше, чем сайт, то сетка занимает ширину всего экрана).

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

Пример самой обыкновенной сетки

Секции

Секции — это области, которые занимают всю ширину сайта, и содержат в себе группы, которые делят секцию по горизонтали. Каждая секция состоит минимум из одной группы из 24 ячеек по горизонтали. Если в секции несколько групп, то каждая из них занимает равное количество ячеек по горизонтали (1 группа — 24 ячейки, 2 группы — по 12 ячеек, 3 группы — по 8 ячеек, 4 группы — по 6 ячеек, 5 групп — по 5 ячеек, 6 групп — по 4 ячейки)

Создание секции: внизу самом низу страницы конструктора под надписью «Добавить новую секцию, выберите количество групп» нажмите на соответствующую кнопку. По умолчанию достаточно 1 группы в секции, но для исполнения более сложных дизайнов порой требуется использовать несколько групп в секции. После создания секции изменить количество групп в ней вы не сможете. #11 на рис.1

Перемещение секции: наведите на надпись «Секция», справа появится две стрелки: вверх и вниз. Одним нажатием секция перемещается на 1 шаг вверх или вниз #4,5 на рис.1

Настройка секции: справа от надписи «Секция» нажмите на «Настройки». #1 на рис.1

Копирование секции: наведите на надпись «Секция», справа появится кнопка «Скопировать». После нажатия скопированная секция появится в самом низу страницы. #2 на рис.1

Удаление секции: наведите на надпись «Секция», справа появится кнопка «Удалить». После нажатия безвозвратно удалится секция и всё её содержимое. #3 на рис.1

Рис. 1

Группы и подгруппы

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

Настройка группы: справа от надписи «Группа» нажмите на «Настройки» #6 на рис.1

Подгруппы делят группы по вертикали. Каждую группу вы можете разбить на 12 подгрупп.

Подгруппы объединяют в себе ячейки по вертикали, и обозначаются серой полоской в левой части группы. #8,9,10 на рис.1

Создание подгрупп

1. Убедитесь, что группа не содержит в себе виджетов
2. Наведите на надпись «Группа»
3. Нажмите кнопку «Разбить», которая появится справа от названия группы #7 на рис.1
4. По мере нажатия по алгоритму группа будет делиться на подгруппы с равным количеством ячеек по вертикали, пока это возможно

Настройка подгрупп

1. Убедитесь, что вы создали как минимум одну подгруппу
2. В левой части сетки группы нажмите на вертикальную серую полоску #8,9,10 на рис.1. Настройки появятся в правой части экрана

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

---

Виджеты

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

Создание виджета на странице

1. Откройте нужный раздел виджетов в левом меню
2. Зажмите мышку на сером квадрате слева от названия виджета
3. Перенесите его в секцию

Копирование виджета

1. Нажмите на виджет (он выделится синим цветом)
2. Справа от названия «Секция» появится синяя кнопка «Скопировать виджет»
3. Нажмите на нее
4. Скопированный виджет появится в левой верхней клетке. Если там уже есть виджет, то скопированный сместит существующий ниже

Удаление виджета

1. Правой кнопкой мыши нажмите на виджет
2. В появившемся окне нажмите «Ок»

Настройка виджета

1. Нажмите на виджет
2. В правой части экрана появится список всех доступных настроек данного виджета
3. Выберите все необходимые настройки виджета
4. Настройки автоматически сохранятся (для полей ввода, где вы вручную пишите текст, для сохранения нужно нажать в любую область конструктора, чтобы поле стало неактивным)

Способы относительного расположения

Виджеты, секции и группы могут по-разному располагаться друг относительно друга. Чтобы детально узнать про эти способы, перейдите в раздел документации "Настройки Pro: grid и flex"