# Конструктор шапки и подвала из настоящих блоков

URL: https://canvaswp.com/ru/header-builder/
Updated: 2026-11-03

Конструктор шапки

Шапки, подвалы, верхние полосы, мега-меню, боковые панели, заголовки страниц и hero-секции создаются как записи в редакторе блоков и назначаются всему сайту или одной странице.

[Посмотреть в демо](https://canvaswp.com/ru/demos/) [Как работает редактор](https://canvaswp.com/ru/editor/)

Обновлено 3 ноября 2026 г.

Как строится шапка

## Вложенность блоков работает так, как вы ожидаете

Запись шапки содержит Header Root. Header Root содержит Container, а Container содержит Zones. Zone — это ячейка строки шапки: в одной находится логотип, в следующей меню, а в последней значок поиска и корзина.

### Зоны задают раскладку

Зона определяет, что где находится. Сдвиньте одну зону вправо, объедините поиск и корзину в группу или оставьте зону без оформления, если хотите убрать лишнюю разметку.

- Зоны меняют порядок для каждого брейкпоинта, поэтому одна запись охватывает десктоп, планшет и телефон
- Любую зону можно ограничить одной категорией устройств, и на остальных она не попадает в разметку
- Дополнительные классы для зоны, если нужно обращаться к ней из собственного CSS

[Все блоки в библиотеке](https://canvaswp.com/ru/blocks/)

### 22 блока шапки

#### Header Root

Сама шапка. Всё остальное вложено внутрь неё.

#### Header Container

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

#### Header Zone

Ячейка в строке шапки. Зоны вмещают элементы и определяют их расположение.

#### Header Logo

Ваш логотип с отдельными файлами для закреплённого и тёмного состояний.

#### Header Navigation

Главное меню с выпадающими списками и панелями Мега-меню.

#### Header Search

Значок поиска, который открывает поле, или поле, которое всегда открыто.

#### Header Cart

Корзина WooCommerce с количеством товаров и выпадающей сводкой.

#### Header Social

Ряд значков социальных сетей из профилей, которые вы настроили один раз.

#### Header Button

Кнопка призыва к действию с обычными настройками размера, стиля и ссылки.

#### Header Icon Link

Один значок со ссылкой на любой адрес, например на номер телефона или страницу аккаунта.

#### Header Info

Небольшой блок с контактными данными, адресом или часами работы.

#### Header Shop Search

Поиск товаров для магазина в пределах вашего каталога.

#### Header Topbar

Размещает запись верхней панели над строкой шапки.

#### Mega Menu Column

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

Готовые макеты

## 7 пресетов для старта

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

### Прозрачность

Фон не задан, поэтому видно всё, что находится за шапкой.

### Полупрозрачный

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

### Плавающая

Шапка располагается внутри страницы с отступами со всех сторон.

### Плавающая полупрозрачная

Плавающая, также с полупрозрачным фоном.

### Плавающая и уменьшенная

Плавающая шапка уменьшенной высоты.

### Во всю ширину, липкая

Занимает всю ширину окна просмотра и остаётся закреплённым при прокрутке страницы.

### Закрепление при прокрутке вверх

Скрывается при прокрутке вниз и возвращается при прокрутке вверх.

Многоразовые фрагменты

## Верхние панели, мега-меню и боковые панели тоже записи

Создайте каждую шапку один раз, задайте её как шапку сайта по умолчанию, затем переопределите её на страницах, которым нужно что-то другое.

### Верхние панели

Верхняя панель хранится как отдельная запись со своими блоками: номер телефона, часы работы, переключатель языка, акция. Блок Header Topbar размещает её над строкой шапки. Назначьте её глобально и переопределяйте для каждой страницы.

В 12 из 88 демо есть верхняя полоса, которую можно редактировать.

### Мега-меню

Мега-меню — это запись, которую вы собираете из блоков и выводите с помощью блока Mega Menu. Пункт меню затем открывает панель на всю ширину, которая может содержать колонки, изображения, кнопки или любой другой блок.

Mega Menu Column keeps the panel on a grid. 5 demos ship one.

### Боковые панели

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

В 6 демо боковая панель уже связана с триггером.

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

Настройки шапки

## 94 поля: самый большой раздел в Настройках темы

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

- 94 of the 533 Theme Options fields belong to the header
- Задайте шапку по умолчанию, а затем переопределите её на любой странице
- Закрепление при прокрутке, высота, отступы и мобильные брейкпоинты
- Каждое поле описано в справочных статьях

[Все 533 параметра в Настройках темы](https://canvaswp.com/ru/features/#options)

**Настройки темы, шапка.** Сама панель, снятая на работающем сайте.

Шаблоны

## 40 шаблонов шапки для старта

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

- 40 паттернов шапки, больше, чем в любой другой категории
- 16 шаблонов подвала для нижней части страницы
- 183 шаблона всего, сгруппированы в 17 категорий
- Вставляется из вкладки «Шаблоны» в панели добавления блоков, которой вы уже пользуетесь

[Паттерны по категориям](https://canvaswp.com/ru/editor/#patterns)

Конструктор подвала

## Подвалы и строки копирайта — отдельные записи

Подвал работает точно так же, как шапка. Запись Footer хранит колонки, а запись Copyrights — тонкую полоску под ними, поэтому юридическую строку можно поменять по всему сайту, не трогая оформление выше.

### Шесть блоков и 17 параметров

Footer About для описания компании, Footer Contacts для адреса и телефона, Footer Instagram для ленты, Footer Widget Area для любого содержимого, которое может выводить виджет, Widget Links для аккуратного столбца ссылок и Copyrights для нижней полосы.

- Назначайте подвал глобально или для каждой страницы отдельно, так же как шапку
- Отдельная запись с копирайтом для нижней полосы
- 16 шаблонов подвала, с которых можно начать
- Отображается в области редактирования по мере сборки страницы

**Настройки темы, подвал.** 17 общих полей сайта за записями подвала.

Заголовки страниц

## 4 стиля, или создайте свой

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

**Настройки темы, Заголовок страницы.** 57 полей, третий по размеру раздел продукта.

### По умолчанию, Мини, Шаблон или Своя

Default — это стандартная полоса. Mini — компактная версия для внутренних страниц. Template выбирает один из именованных специализированных макетов. Custom выводит запись заголовка страницы, которую вы собрали из блоков самостоятельно.

- Page Title, Heading, Subtitle, Breadcrumbs and Buttons blocks
- Общая настройка по умолчанию, которую может переопределить любая отдельная страница
- Фон, высота, выравнивание и хлебные крошки задаются в настройках

[Заголовки страниц в списке возможностей](https://canvaswp.com/ru/features/#page-titles)

Hero и слайдеры

## Размещается в шаблоне блоком слота

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

- Записи Hero и записи Slider, созданные из блоков
- Блоки Hero Slot и Slider Slot находятся в шаблоне, а не в вашем контенте
- Один шаблон для всех страниц, у каждой своё вступление
- 12 из 88 демо содержат слайдер, который можно редактировать

[Hero и слайдеры](https://canvaswp.com/ru/features/#heroes)

В редакторе

## Шапку вы создаёте прямо там, где её видите

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

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

### Единый рендерер

Шапка, которую вы видите в редакторе, строится тем же кодом, что и для посетителя, поэтому отдельного предпросмотра, который нужно было бы держать в актуальном состоянии, нет.

### Глобально или для каждой страницы

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

### Адаптивность по умолчанию

Зоны меняют порядок для каждого брейкпоинта и могут быть ограничены определённым классом устройств, поэтому вы проверяете расположение на телефоне в редакторе, прежде чем его увидит кто-либо ещё.

[Всё, что умеет редактор](https://canvaswp.com/ru/editor/)

Вопросы

## О конструкторе

Остальные ответы есть в [полном FAQ](https://canvaswp.com/ru/faq/) и в [документации](https://docs.canvaswp.com/how-to-build-a-header).

**Нужна ли отдельная шапка для мобильных устройств?**

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

**Может ли одна страница использовать другую шапку?**

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

**Шапка — это область виджетов или меню?**

Шапка Canvas не относится ни к тому, ни к другому: это запись, которую вы редактируете в редакторе блоков, точно так же, как страницу. Навигация, логотип, поиск, корзина и кнопки внутри неё — это блоки со своими панелями настроек.

**Что будет с шапкой, когда истечёт лицензия?**

Когда лицензия Canvas истекает, ваша шапка и остальная часть сайта продолжают отображаться так же, как сейчас. Приостанавливается сам сервис: обновления, импорт демо, AI и редактирование премиум-блоков остаются недоступны до продления. Если проверка лицензии не может связаться с нашими серверами, действует 14-дневный льготный период.

**Можно ли по-прежнему пользоваться Редактором сайта?**

Да, Canvas построен на настоящих блочных шаблонах, поэтому шаблоны и части шаблонов остаются там, где их хранит WordPress, а запись шапки помещается в шаблон с помощью блока. [Узнайте, как работает редактор](https://canvaswp.com/ru/editor/).