Как блоки располагаются на мобильных устройствах

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

Раскладка для мобильных и для десктопа хранится отдельно. Изменения в одном режиме превью не подменяют другой автоматически. Общие действия с блоками — в Добавление контента на сайт с помощью блоков и Перемещение, изменение размера и закрепление блоков.

Когда срабатывает мобильная версия

На опубликованном сайте мобильная раскладка включается, когда ширина окна браузера меньше 768 пикселей. В редакторе тот же порог: переключатель над превью с иконками монитора и телефона показывает, как секция выглядит на десктопе и на мобильном.

[изображение: переключатель «Десктопная версия / Мобильная версия» над превью страницы]

Чем мобильная сетка отличается от десктопной

1. Ширина. На десктопе — 24 колонки, на мобильном — 8. Блоки по умолчанию занимают всю рабочую ширину секции.
2. Расположение. Блоки, которые на десктопе стоят в одном ряду или накладываются друг на друга, на мобильном обычно выстраиваются вертикальной колонкой — один под другим.
3. Высота. У текстовых блоков и форм высота на мобильном подстраивается под объём контента. У изображений, кнопок, видео и других типов высота задаётся размером блока в сетке.
4. Закрепление при прокрутке, порядок наложения и видимость блока тоже можно настроить отдельно для каждого режима — см. раскладку блоков.

Как формируется порядок блоков на мобильном

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

1. Блок выше в списке «Слои» на десктопе оказывается «сверху» при наложении и при автоматической вертикальной стопке идёт раньше (выше на странице).
2. Новый блок, добавленный на десктопе, по умолчанию встаёт в конец списка — на мобильном он окажется внизу колонки.

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

[изображение: одна и та же секция — слева несколько блоков в ряд на десктопе, справа те же блоки колонкой на мобильном]

Совет. После добавления блока на десктопе на иконке телефона в переключателе превью может появиться синяя точка — это напоминание проверить мобильную версию. Переключитесь на мобильное превью, убедитесь, что порядок и размеры устраивают, затем сохраните страницу.

Ручная настройка мобильной раскладки

Мобильную версию можно править так же, как десктопную: выделить блок, перетащить, изменить размер маркерами на рамке, выровнять содержимое и изменить порядок наложения — подробнее в статье о раскладке.

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

Чтобы вернуть блок в общую автоматическую колонку, удалите его и добавьте заново на десктопе или скопируйте (Ctrl + C / Ctrl + V) — у копии мобильная позиция снова будет автоматической.

Добавление блоков — только на десктопе

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

Уже существующие блоки в мобильном превью можно двигать, менять размер, скрывать через панель «Слои», дублировать и удалять.

Панель «Слои» и видимость на мобильном

Панель Слои работает в контексте текущего превью:

1. на десктопе — порядок наложения и видимость для десктопной версии;
2. на мобильном — то же для мобильной версии.

Иконка глаза скрывает блок только в выбранном режиме: можно, например, убрать декоративный элемент на телефоне, оставив его на большом экране.

Перетаскивание строк в «Слоях» меняет порядок блоков в секции и их z-index в текущем режиме. После смены порядка на десктопе откройте мобильное превью — редактор пересчитает вертикальную стопку для блоков без ручной настройки.

Рекомендуемый порядок работы

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

Ограничения и нюансы

1. Та же логика блоков и мобильной сетки действует на страницах и в подвале сайта. Шапка настраивается отдельно — это не блоки секции.
2. В секции-галерее блоки не расставляют — там свой редактор (Галерея на странице).
3. Если на мобильном блоки кажутся «слишком плотными» или «разъехались», чаще всего помогает ручная правка в мобильном превью или изменение порядка в «Слоях», а не правки только на десктопе.