Сообщество строителей сайтов на Joomla + Gridbox

Gridbox 3.0 уже вышел — как безопасно обновиться

Личный кабинет

Настройка и управление шапкой сайта (Header) в Gridbox

Шапка (Header) в конструкторе Gridbox является сквозным глобальным элементом темы оформления. Это означает, что вы верстаете структуру, подключаете меню и настраиваете стили шапки всего один раз в специальном редакторе, после чего она автоматически транслируется на все страницы сайта, использующие данную тему.

1. Как открыть редактор шапки

Поскольку шапка изолирована от контента конкретных страниц, для ее редактирования предусмотрен отдельный режим:

  • ■ Откройте визуальный редактор Gridbox на любой странице сайта.
  • ■ Наведите курсор на самую верхнюю область экрана. Вокруг нее появится синяя рамка с надписью Header.
  • ■ Нажмите на иконку шестеренки (Edit) в контекстном меню шапки, чтобы открыть панель её специфических параметров, или начните перетаскивать туда плагины (логотип, меню, иконки соцсетей).

2. Основные типы и режимы отображения шапки

В настройках макета (Layout) Gridbox предлагает три аппаратных режима фиксации и позиционирования шапки:

  • ■ Static (Статическая): Классическая шапка. Она находится вверху страницы и прокручивается вместе с основным контентом вверх, исчезая из поля зрения.
  • ■ Fixed / Sticky (Фиксированная): Шапка остается жестко прижатой к верхнему краю экрана при скроллинге страницы вниз. Идеально для удержания навигации и контактов перед глазами пользователя.
  • ■ Overlay (Перекрывающая): Абсолютное позиционирование шапки поверх первого экрана сайта. В этом режиме подложка шапки становится прозрачной, и под неё заезжает фон первой секции (например, фоновое видео или баннер).
Адаптивность и мобильное меню (Responsive):

Вам не нужно верстать отдельную шапку для смартфонов. Встроенный плагин Menu внутри шапки имеет собственные настройки для мобильных разрешений. Вы можете задать брейкпоинт (например, планшет или телефон), при достижении которого стандартная горизонтальная навигация автоматически свернется в иконку «гамбургера», а при клике будет вызываться кастомная выезжающая панель (Sidebar/Overlay Mobile Menu).

3. Скрытие шапки на целевых страницах

Иногда на сайте требуются страницы без стандартной шапки (например, изолированные посадочные страницы-лендинги или экраны благодарности за заказ):

  • ■ Откройте нужную страницу в визуальном редакторе.
  • ■ Перейдите в Page Settings (Настройки страницы) в левом сайдбаре.
  • ■ Найдите переключатель Display Header и переведите его в положение выключено. Шапка скроется локально только для этого экрана.
💡 СОВЕТ РАЗРАБОТЧИКУ:

При использовании режима Sticky Header активируйте опцию уменьшения шапки при скролле (Scroll Layout). Это позволит вам задать альтернативные, более компактные отступы (padding) для строк шапки и уменьшить размер логотипа в тот момент, когда пользователь начинает листать страницу вниз. Такой прием сохраняет полезную площадь экрана и делает навигацию аккуратной.