Настройки позиционирования в редакторе блоков WordPress предоставляют мощный инструмент для управления расположением элементов на странице без необходимости писать CSS-код. Эта функция, доступная для контейнерных блоков, таких как «Группа», позволяет создавать «липкие» (sticky) и фиксированные (fixed) элементы, которые остаются видимыми при прокрутке страницы, улучшая навигацию и пользовательский опыт.
Где найти настройки позиционирования?
Инструменты управления позиционированием встроены в инспектор блоков. Чтобы получить к ним доступ, выполните следующие шаги:
- Выберите блок, который поддерживает позиционирование. Как правило, это контейнерные блоки, такие как «Группа», «Ряд» или «Стек».
- На панели настроек справа перейдите на вкладку «Стили» (иконка в виде черно-белого круга).
- Найдите и разверните секцию «Позиционирование». Если вы не видите эту опцию, значит, для выбранного блока или в вашей теме она недоступна.
Типы позиционирования в WordPress
В интерфейсе редактора доступны несколько ключевых опций, основанных на свойстве CSS position.
По умолчанию (Static)
Это стандартное поведение для любого блока. Элемент отображается в обычном потоке документа, занимая свое естественное место на странице. Этот режим выбран по умолчанию и не требует дополнительных настроек.
Липкий (Sticky)
«Липкое» позиционирование — это гибрид между относительным и фиксированным. Блок ведет себя как обычно, пока не достигнет определенной точки при прокрутке страницы. После этого он «прилипает» к указанному краю экрана (например, к верху).
- Когда использовать: Идеально подходит для создания шапки сайта, навигационного меню или боковой панели, которые должны оставаться видимыми, когда пользователь прокручивает длинную страницу.
- Настройки: После выбора «Липкий» вы можете задать отступы (
top,right,bottom,left), которые определяют, на каком расстоянии от края экрана блок будет зафиксирован. Например, установкаtop: 0pxзаставит блок прилипнуть к самому верху окна браузера. - Важно: Элемент будет «липким» только в пределах своего родительского контейнера.
Фиксированный (Fixed)
Фиксированное позиционирование полностью изымает блок из потока документа и размещает его относительно окна браузера (viewport). Это означает, что блок всегда будет оставаться на одном и том же месте на экране, независимо от того, как пользователь прокручивает страницу.
- Когда использовать: Отлично подходит для кнопок «Наверх», плавающих кнопок призыва к действию (CTA), баннеров о cookie или виджетов чата поддержки.
- Настройки: Как и в случае с «липким» позиционированием, вы можете установить отступы от краев экрана, чтобы точно расположить элемент.
Практический пример: создание «липкой» шапки
Чтобы сделать шапку сайта «липкой», выполните следующие действия:
- В редакторе сайта перейдите к редактированию хедера.
- Оберните все блоки шапки (логотип, навигацию и т.д.) в один общий блок «Группа».
- Выберите этот родительский блок «Группа».
- На вкладке «Стили» откройте панель «Позиционирование».
- Выберите тип позиционирования «Липкий».
- Установите значение отступа сверху (
top) равным0. - Сохраните изменения. Теперь при прокрутке страницы вниз ваша шапка будет оставаться закрепленной вверху экрана.
Ключевые моменты и совместимость
- Поддержка темой: Настройки позиционирования являются стандартной функцией блочных тем, использующих
theme.json. В классических темах эта опция в интерфейсе редактора может отсутствовать, и для реализации подобного поведения потребуется добавление пользовательского CSS-кода. - Контекст наложения (Stacking Context): При использовании фиксированных или липких элементов они могут перекрывать другой контент. Встроенного инструмента для управления свойством
z-indexв редакторе пока нет. Если возникают проблемы с наложением, их, возможно, придется решать с помощью дополнительного CSS. - Ограничения родительского контейнера: Помните, что «липкий» элемент ограничен границами своего родителя. Если у родительского элемента задано свойство
overflow(например,overflow: hidden), «липкое» поведение может не сработать.