Какие есть настройки адаптивности

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

1. Всего поддерживается 4 типа устройств.

Указанные ниже значения - это минимальная ширина содержимого страницы, а настройка адаптивности выполняется именно под минимальные размеры.

По умолчанию минимальная ширина установлена на значениях:

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

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

3. Также можно включить или выключить применение того или иного варианта адаптивности нажав левой кнопкой мыши по значку устройства. Активные устройства будет подсвечены, неактивные станут серыми.

1. В большинстве случаев достаточно настроить адаптивность только для телефонов и ноутбуков.

При подобной конфигурации, мобильная адаптивность будет использоваться при ширине экрана от 1 до 991px, а уже от 992px включится адаптация под ноутбуки.

2. Страница является длинной даже на широких экранах и в этом случае использовать адаптивность под телефоны и даже планшеты будет не рационально, так как страница станет еще длиннее. Тогда имеет смысл настроить только один вид адаптивности, например, под ноутбуки, чтобы положение всех виджетов на странице осталось прежним на любом устройстве. И в этом случае при открытии страницы, например, на мобильных нужно будет просто увеличивать масштаб страницы, чтобы прочитать какой-то текст или нажать на кнопку.

Например, если установить на странице адаптивность только под планшеты и открыть её на экране ноутбука с разрешением в 1280x800px страница будет отображаться так, на мобильном так.

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

Параметры - Размеры секции и фиксация

При наведении на кнопку “ Для всех устройств” можно выбрать при каких разрешениях секция будет закреплена Сверху или Снизу

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

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

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

В секции с блоками так же возможно добавить панель слева или справа от набора блоков. По умолчанию панель выключена, чтобы ее включить нужно перейти в раздел Настройки блока - Панель и поставить галочку напротив “Включить боковую панель”.

Чтобы открыть дополнительные настройки нужно нажать на кнопку “Настройки панели”

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

Чтобы открыть настройки нужно нажать на виджет Капелька и выбрать нужную вкладку, например “Отступы”.

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

Размер шрифта указывается на панели сверху при выделении/клике текстового компонента, если нужно настроить его размер отдельно для другого устройства, возле размера активируется галочка и задается другой размер, неактивная галочка говорит о том, что размер наследуется с широкого экрана:

Для картинок размер можно указать в процентах или в пикселях.

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

Если в процентах - тогда размер колонок указывается в процентном соотношении и чем меньше будет экран, тем уже будут колонки и наоборот, чем ширине экран - тем шире колонки;

Если в пикселях - тогда размер всех колонок, кроме одной, будет иметь фиксированную ширину

Чтобы задать отступы внутри кнопки, необходимо нажать на Гаечный ключ - Вид - Отступы, по умолчанию можно выбрать из 4 вариантов.

Если нужно задать свои отступы нажмите на кнопку Подробные настройки

Настройки - Положение кнопки на устройствах

Ситуация: Вы решили поменять положение виджетов в Колонках. При изменении положения на мобильном, виджеты меняют свое положение и на ПК.