Как создать адаптивный макет с помощью сетки в Zero Block?

Чтобы создать адаптивный макет с помощью сетки в Zero Block, нужно настроить сетку для каждого разрешения экрана. help-ru.tilda.cc create-sites-on-tilda.tilda.ws По умолчанию используется 12-колоночная сетка. help-ru.tilda.cc

Чтобы настроить сетку, нужно: help-ru.tilda.cc

1. Перейти в Zero Block. help-ru.tilda.cc
2. Нажать на кнопку Settings. help-ru.tilda.cc
3. Нажать на кнопку Open в разделе Zero Block Settings. help-ru.tilda.cc
4. Открыть настройки рабочей области. help-ru.tilda.cc

Некоторые настройки вертикальной сетки:

• Columns — количество колонок; help-ru.tilda.cc
• Column width — ширина колонок в пикселях; help-ru.tilda.cc
• Column gutter — расстояние между колонками в пикселях; help-ru.tilda.cc
• Column margins — отступ слева и справа от сетки в пикселях. help-ru.tilda.cc

Некоторые настройки горизонтальной сетки:

• Row baseline — шаг горизонтальных рядов в пикселях; help-ru.tilda.cc
• Module height — количество рядов (один модуль), после которых добавится пустая строка и модуль начнётся заново; help-ru.tilda.cc
• Row margins — отступ сверху и снизу от сетки в пикселях. help-ru.tilda.cc

Некоторые общие настройки сетки:

• Color — цвет колонок; help-ru.tilda.cc
• Opacity — прозрачность заливки колонок; help-ru.tilda.cc
• Border opacity — прозрачность границ колонок. help-ru.tilda.cc

По умолчанию настройки сетки задаются для всего проекта, то есть в каждом Zero Block будет автоматически использоваться новая сетка. help-ru.tilda.cc Чтобы задать уникальную сетку для конкретного блока, нужно в пункте «Use for» выбрать опцию «Current block». help-ru.tilda.cc Тогда настройки применятся только к текущему блоку, а в остальных блоках останется сетка по умолчанию. help-ru.tilda.cc

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