Конструктор Gridbox использует современную адаптивную сетку, которая позволяет настраивать отображение сайта под любые типы экранов. Адаптация в системе работает по каскадному принципу сверху вниз (Desktop-First). Это означает, что вы создаете базовую структуру на компьютере, а затем точечно корректируете отступы, размеры и видимость блоков на мобильных разрешениях.
1. Логика наследования стилей (Каскад)
В Gridbox доступны 4 стандартных режима отображения (контрольные точки / Breakpoints): Desktop, Laptop (Ноутбук), Tablet (Планшет) и Phone (Смартфон). Управление наследованием подчиняется строгой логике:
- ■ Любые изменения, внесенные в режиме Desktop (шрифты, цвета, отступы, выравнивание), автоматически применяются ко всем мобильным устройствам ниже по цепочке.
- ■ Если вы переключаетесь в режим Tablet и меняете там размер шрифта или внутренний отступ (padding), это изменение зафиксируется для планшетов и унаследуется смартфонами (Phone), но никак не повлияет на отображение на ноутбуках (Laptop) и ПК (Desktop).
2. Какие параметры являются адаптивными
Далеко не все свойства плагинов можно настраивать индивидуально для разных устройств. Система разделяет параметры на глобальные и адаптивные:
- ■ Адаптивные параметры (меняются под каждый экран): Внешние и внутренние отступы (Margins / Paddings), размер шрифта (Font Size), межстрочный интервал (Line Height), выравнивание текста и элементов (Alignment), а также ширина колонок в сетке. Рядом с такими полями в редакторе всегда отображается иконка текущего устройства.
- ■ Глобальные параметры (одинаковы для всех устройств): Текстовый контент, ссылки, фоновые изображения секций, цвета текстов и иконок. Если вы удалите текст или измените цвет фона в режиме смартфона, он изменится и на основном компьютере.
В настройках любого плагина, строки или целой секции во вкладке Layout доступна опция Hide on Devices. Вы можете принудительно скрыть тяжелую анимацию, огромный баннер или карусель на смартфонах, чтобы ускорить загрузку страницы в мобильных сетях. Вместо скрытого блока можно сверстать альтернативную, облегченную секцию под мобильные и включить её отображение только для телефонов.
3. Изменение порядка колонок (Reverse Columns)
При верстке шахматного порядка блоков (например: картинка-текст, затем текст-картинка) на смартфонах колонки стандартно выстраиваются друг под другом, что может нарушить логику восприятия (пользователь увидит две картинки подряд). Для решения этой проблемы в Gridbox встроен инструмент реверса:
- ■ Переключитесь в мобильный режим отображения (Tablet или Phone).
- ■ Откройте настройки строки (Row Settings) и перейдите во вкладку Layout.
- ■ Активируйте переключатель Reverse Columns. Колонки внутри этой строки изменят порядок на противоположный исключительно на мобильных экранах.
Чтобы верстка не «ломалась» при экстремально маленьких экранах, используйте относительные единицы измерения для шрифтов и отступов (например, rem, em или %) вместо жестких пикселей (px) там, где это критично. И никогда не настраивайте мобильную версию, не завершив финальную сборку десктопного макета, иначе вы попадете в бесконечный цикл правок отступов по всему каскаду стилей.