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