Как настроить макет группы

Блоки «Группа» помогают упорядочить контент: он размещается в контейнере, который можно стилизовать и разместить на сайте как единое целое. В этом руководстве показано, как при помощи настроек макета создавать адаптивные, чётко выровненные разделы страниц, пользуясь блоком «Группа».

По умолчанию в блоке «Группа» блоки располагаются друг над другом. Изменение порядка расположения блоков в группе позволяет управлять отображением контента: в ряд (по горизонтали) или друг под другом (по вертикали). Это придаёт вариативность макету вашего дизайна. Чтобы настроить выравнивание контента в блоке «Группа», выполните следующие действия:

1. Выберите представление в виде списка в верхней части экрана редактирования.
2. Выберите блок «Группа».
3. На появившейся боковой панели настроек блока справа выберите одну из опций, приведённых далее.
   • Группа: расположение по умолчанию в блоках «Группа».
   • Друг под другом: блоки располагаются один под другим, по вертикали. Идеальный вариант для создания чёткого, последовательного оформления контента, например пошаговой инструкции или рекомендуемых товаров.
     • При необходимостис помощью настроек «По верхнему краю», «По центру» и «По нижнему краю» можно изменять выравнивание по вертикали.
   • В ряд: блоки размещаются в ряд по горизонтали. Идеальный вариант для сравнения характеристик или для галереи изображений.
     • При необходимостиможно настроить выравнивание по горизонтали, пользуясь опциями «По левому краю», «По центру», «По правому краю» или «Интервал».
   • Сетка: располагает блоки в настраиваемом макете в виде сетки. Хороший вариант для показа товаров или участников команды.
4. Нажмите «Сохранить» или «Опубликовать» , чтобы сохранить изменения.

Управление общей шириной блока «Группа» помогает создать визуальную иерархию страницы и настроить отображение контента на экранах различных размеров. Вы можете указать, сколько места должен занимать блок «Группа», при помощи параметров «По ширине контента», «Широкий формат» или «Во всю ширину». Для этого выполните следующие действия:

1. Выберите представление в виде списка в верхней части экрана редактирования.
2. Выберите блок «Группа».
3. На появившейся панели инструментов выберите значок«Выровнять»и выберите одну из опций:
   • Контент (или «Нет»): задаёт ширину блоков по ширине области контента по умолчанию. Оптимальный вариант для стандартных разделов контента.
   • Широкий формат: блоки делаются широкими (но не во всю ширину). Привлекает внимание к важному контенту, не позволяя заполнять весь экран.
   • Во всю ширину: блок заполняет собой всю доступную область в ширину. Оптимальный вариант для создания разделов иммерсивного контента, например баннеров или галерей крупных изображений.
4. Нажмите «Сохранить» или «Опубликовать» , чтобы сохранить изменения.

Подробнее о том, как изменить ширину контента.

Можно управлять тем, сколько места контент занимает в группе. Это бывает полезно при создании адаптивных макетов, которые должны выглядеть безупречно как на мобильных, так и на стационарных экранах. Следуйте инструкции ниже, чтобы изменить настройки ширины контента в блоке «Группа».

1. Выберите представление в виде списка в верхней части экрана редактирования.
2. Выберите блок «Группа».
3. На появившейся боковой панели настроек блоканайдите раздел«Внутренние блоки». Включите настройку «Внутренние блоки по ширине контента» :
   • Вкл.: ширина контента будет зависеть от настроек ширины контента сайта . Можно также указать определённые значения ширины с помощью элементов управления.
   • Выкл.: контент будет растягиваться по всей ширине блока «Группа».
4. Нажмите «Сохранить» или «Опубликовать» , чтобы сохранить изменения.

Параметр «Внутренние блоки по ширине контента» управляет шириной контента внутри блока «Группа».

Если параметр включён:: контент внутри блока «Группа» будет соответствовать общим настройкам ширины сайта (как правило, 700–800 пикселей). Таким образом возникает единый центральный столбец контента, даже если блок «Группа» распространяется по всей ширине страницы. Это облегчает чтение с большого экрана и сохраняет визуальную привлекательность макета.

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

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

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

1. Выберите представление в виде списка в верхней части экрана редактирования.
2. Выберите блок «Группа».
3. На боковой панели настроек блоканайдите раздел «Размеры» .
4. Укажите значения следующих параметров:
   • Отступы: интервал между контентом и границей блока «Группа». Чем шире отступы, тем больше свободного пространства вокруг вашего контента.
   • Граница: свободное пространство вокруг блока «Группа» за его пределами. Помогает отделить данный раздел от остального контента.
5. Нажимая на значок ссылки, можно переключаться между общей и индивидуальной настройкой сторон.

Подробнее о настройке размеров блока.

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

1. Выберите представление в виде списка в верхней части экрана редактирования.
2. Выберите блок «Группа».
3. На боковой панели настроек блоканайдите раздел «Интервал между блоками» .
4. При помощи элементов управления установите:
   • Интервал между блоками: пространство между отдельными блоками. Чем шире интервалы, тем чётче разделение, а чем они уже, тем более связно выглядит контент.
   • Минимальная высота: минимально допустимая высота блока «Группа». Этот параметр поможет создать единообразные разделы или добавить пробелы для визуального равновесия.

Подробнее о настройке интервалов между блоками.