Виджеты, секции, группы и подгруппы — Документация — 4eo.ru

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

Сетка

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

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

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

Секции

Секции — это области, которые занимают всю ширину сайта, и содержат в себе группы, которые делят секцию по горизонтали. Каждая секция состоит минимум из одной группы из 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. Они автоматически сохранятся (для полей ввода, где вы вручную пишите текст, для сохранения нужно нажать в любую область конструктора, чтобы поле стало неактивным)

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

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

В дальнейшем описании под «Элементами» будем подразумевать группы, подгруппы и виджеты

Как выбрать метод?

  1. Перейдите в настройки секции/группы/подгруппы
  2. Откройте раздел Pro
  3. Выберите метод в списке «Использовать вместо Grid Flex». Если выбрано значение «Нет», то используется Grid, во всех остальных случаях — Flex

Метод Grid (по умолчанию)

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

Принцип работы:

  1. Сетка занимает всю ширину экрана
  2. Каждый ячейка по горизонтали занимает одинаковое место, и рассчитывается как отношение ширины сайта к количеству столбов. Например, если ширина сайта 1440px, то на главной странице, состоящей из 24 ячеек по горизонтали, каждая из них будет занимать по 1440px/24=60px
  3. Каждый элемент занимает ту ширину, которую занимают ячейки, в которых он располагается. Например, если виджет «Надпись с иконкой», в которой будет располагаться лишь иконка шириной 20px, мы расположим в двух ячейках, то по ширине он будет занимать 60px*2=120px пикселей
  4. Вы не можете сделать, например, так, чтобы между содержимым виджетов было фиксированное расстояние
  5. Вы можете регулировать расстояние между ячейками, которые занимают виджеты, а также расположение самого виджета относительно занимаемых ячеек (например, прижать их к правому нижнему углу)

Метод Flex

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

Принцип работы:

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

Этот сайт использует cookie для хранения данных. Продолжая работу с сайтом, вы даете свое согласие на работу с этими файлами.

Согласен