Настройки уровня Pro. Grid и Flex вёрстка. — Документация

В настройках виджетов, секций и групп есть вкладка Pro. Этот раздел объединяет в себе более сложные настройки, которые могут оказаться затруднительными для понимания на первый взгляд. Однако мы постараемся наиболее подробно раскрыть функции каждой из этих настроек.

Стили CSS

Данная настройка относится только к тем, кто профессионально владеет навыком разработки сайтов. Стили пишутся в обычном формате для CSS-селекторов, например:
.test-1{color: test;}
table{color: test;}

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

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

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

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

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

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

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

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

Метод Flex

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

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

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

Максимальная ширина

Относится к группам и виджетам, далее рассмотрим на примере виджетов, для групп всё идентично. Данная настройка работает только для Flex-верстки.

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

На примере картинки ниже, если группа имеет ширину 1000 (это значение приведено условно, группа может также занимать и всю ширину сайта), и есть 5 виджетов с ширинами 150, 100, 120, 150 и 50px. Тогда выделенный синим цветов виджет, в котором установлена настройка "Максимальная ширина", будет занимать следующее количество пикселей: 1000-150-100-120-150-50px. В зависимости от ширины родительского блока (группы) ширина синего виджета будет автоматически вычисляться.

Обратите внимание, что такой виджет может быть только один в рамках одной группы.

Максимальная высота

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

Фиксированная ширина

Позволяет задать определенную ширину элементу, значение нужно указывать в пикселях, например "100px".

Не переносить элементы при недостатке места

Если в группе находятся элементы, которые переносятся при недостатке ширины, то данная галочка сделает так, чтобы элементы принудительно шли в один ряд. Полезно для создания горизонтального скролла элементов в адаптивных версиях сайта. Работает только в сочетании с Flex-версткой.

Создавать скролл при недостатке места, вместо переноса контента

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

Варианты Flex расположения элементов:

В данном случае расположение виджетов в группах влияет исключительно на порядок выстраивания виджетов друг за другом. Их относительное положение влияет только на очередность элементов.

1. Слева

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

2. По центру

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

3. Справа

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

4. Распределить по всей ширине

Распределяет виджеты в группе или сами группы в секциях равномерно по всей ширине.

5. В колонку

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

6. В колонку по центру

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

7. В колонку распределить по всей высоте

В данном случае группа, к которой применена настройка, будет распределять виджеты внутри себя по всей доступной высоте (например, если к меньшей по высоте группе применена настройка "максимальная высота")