Автоскейл и контентная сетка

Задайте ширину контента и решите, будет ли страница расти вместе с экраном посетителя.

Где открыть настройки

На верхней панели редактора нажмите кнопку с текущей шириной экрана в пикселях.

Вверху списка нажмите кнопку с иконкой настроек. Подсказка у неё — «Настроить».

Откроется панель настроек страницы на блоке «Контентная сетка». Тот же блок есть в «Панели настроек», если на странице ничего не выделено. Панель включается кнопкой панелей справа наверху или клавишами Ctrl + O. На Windows это Ctrl + O.

«Показывать сетку» в настройках редактора рисует направляющие только у вас на холсте. На опубликованную страницу эта сетка не влияет. «Контентная сетка» ниже — про ширину сайта у посетителя.

Контентная сетка

«Контентная сетка» задаёт ширину основной области контента и минимальные боковые отступы. Содержимое страницы выравнивается по ней. Настройка действует на всю страницу, а не на одну секцию.

В блоке два поля в пикселях:

1. Левое — ширина области контента.
2. Правое — минимальный отступ с каждого края.

Под полями написано, с какой ширины экрана страница начинает уменьшаться. Это ширина области плюс отступ с двух сторон. Например, при 1150px и отступе 25px граница — 1200px.

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

Свои числа можно не подбирать. Нажмите «Пресеты» и выберите готовую пару.

Ширину на десктопе можно задать от 768px до 2560px, отступ — от 10px до 300px. Если ввести число меньше минимума, поле вернётся к пресету «По умолчанию».

Элементы, которые стоят по ширине этой области, сдвинутся вместе с ней. Сумма ширин элементов шапки не может быть больше ширины контентной сетки.

Автоскейл

Автоскейл увеличивает всю страницу под ширину экрана и сохраняет пропорции: и размеры, и отступы. Он есть только на десктопе. Переключатель «Переключить устройство» должен быть в режиме компьютера.

Включите «Автоскейл». Появятся два списка.

«От» — ширина экрана, с которой страница начинает расти. Первая строка списка называется «Контентная сетка»: это та самая граница, что написана под полями ширины и отступа. Дальше идут типовые ширины экранов.

«До» — предел, после которого рост останавливается. «Авто» значит, что потолка нет: страница продолжает расти вместе с экраном.

Под списками редактор пишет, на каком диапазоне это работает.

Как это видит посетитель:

1. Экран уже границы контентной сетки — страница уменьшается и вписывается целиком.
2. Экран между этой границей и значением «От» — страница в натуральном размере. Контент остаётся заданной ширины.
3. Экран от «От» до «До» — страница растёт вместе с окном, композиция не разъезжается.
4. Экран шире «До» — размер больше не увеличивается. При «Авто» этого порога нет.

Если в «От» выбрана строка «Контентная сетка», второго промежутка нет: рост начинается сразу, как только экран шире сетки.

Кнопка с процентами на верхней панели — это «Масштаб» холста в редакторе. На опубликованную страницу она не влияет.

В списке устройств у строки появляется подсказка, если на этой ширине страница сожмётся или растянется. Сам масштаб смотрите на опубликованной странице: потяните окно уже границы сетки, затем шире значения «От» и, если задан предел, шире «До».

Мобильная версия

Нажмите «Переключить устройство» и перейдите в мобильный режим.

Блок «Контентная сетка» остаётся, «Автоскейл» пропадает. У мобильной версии своя ширина и свой отступ. Автоскейл десктопа её не заменяет.

Ширину можно задать от 250px до 550px, отступ — от 10px до 300px.

Глобальные секции

В редакторе глобальной секции параметры сетки применяются только в редакторе. На сайте действует контентная сетка той страницы, куда секция вставлена.

Переключателя «Автоскейл» у глобальной секции нет.

Частые вопросы