Справочный центр / Подробные инструкции / Блоки

Блок: Секция

Секция - это мощный инструмент, который позволяет объединять несколько блоков на вашем сайте в единую группу. Он предоставляет возможность задавать общие настройки для блоков, такие как типографика, шрифты, размеры и цвета, а также дизайн фона и другие параметры.

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

Давайте создадим пример Секции, чтобы лучше разобраться в его использовании.

Секция обладает всеми обычными настройками блока, такими как отступы, типографика, фон и эффекты, как и у других блоков в Mobitsa.

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

Блок: Секция

Выберите любой блок из каталога (например, Сетка изображений) и настройте его. Теперь, поскольку этот блок находится внутри секции, у него появляется новая вкладка "Секция".

Блок: Секция

Перейдите в эту вкладку, и вы увидите в списке наш новый блок, который мы только что добавили.

Блок: Секция

Добавьте еще один блок, например, Заголовок. Теперь в нашем списке есть два блока.

Блок: Секция

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

Для наглядности давайте добавим еще один блок, например, Текст.

Блок: Секция

Когда у нас в Секции есть несколько блоков, мы можем настроить их общий стиль и фон. Для этого нажмите кнопку "Редактировать Секцию", и мы перейдем в режим редактирования мульти блока. Во вкладках "Отступы", "Типографика", "Фон" и "Эффекты" вы можете задать общие настройки для всех блоков внутри Секции.

Блок: Секция

Использование Секции позволяет вам гибко управлять и оформлять группы блоков на вашем сайте. Экспериментируйте с различными блоками, настройками и расположением, чтобы создать уникальный и привлекательный дизайн.

Настройка позиции блока

В дополнение к вкладке "Секция" в редакторе блоков появляется еще одна вкладка - "Позиция".

Она предоставляет вам возможность настраивать позицию блока внутри Секции, давая вам полный контроль над расположением блока на странице.

Для примера, добавим блок "Иконка" и перейдем на вкладку "Позиция".

Блок: Секция

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

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

Блок: Секция

Свободное позиционирование блоков дает вам большую гибкость в создании уникального дизайна вашего сайта. Экспериментируйте с различными позициями, поворотами и масштабами блоков, чтобы достичь идеального внешнего вида, соответствующего вашим потребностям и предпочтениям.

Отрицательный отступ

Еще одна настройка, доступная для блоков, находящихся внутри Секции - это отрицательный отступ.

Давайте добавим новый блок "Аватар" в нашу Секцию. После настройки блока перейдем на вкладку "Отступы".

Блок: Секция

В разделе "Отрицательный отступ" мы можем задать значение для верхнего отступа. Это позволит блоку перекрывать другой блок, создавая интересные дизайн-эффекты и аранжировки для вашего сайта.

Блок: Секция

Помимо отрицательного отступа, вы также можете корректировать другие типы отступов, такие как "Внешние" и "Внутренние", чтобы достичь желаемого визуального эффекта.

Порядок слоя

Иногда наши блоки могут перекрывать друг друга, особенно если блок имеет свободное позиционирование или на него налагается блок с отрицательным отступом.

Блок: Секция

Если мы хотим, чтобы наш блок был выведен на передний план, мы можем использовать настройку "Порядок слоя". Для этого перейдите на вкладку "Расширенные" и установите значение порядка слоя. Большее значение поместит наш блок на передний план, перекрывая другие блоки.

Блок: Секция

Однако стоит помнить, что внутри Секции следующий блок в списке будет перекрывать предыдущий. Это важно учитывать при размещении блоков внутри Секции и настройке порядка слоя.

Блок: Секция

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

Не забудьте сохранить ваши изменения, нажав кнопку "Обновить" или "Добавить".