Как редактировать верхние и нижние колонтитулы с помощью Elementor в WordPress

Elementor — это визуальный конструктор страниц для WordPress, который позволяет проектировать, заменять и управлять пользовательскими шапками и подвалами через интерфейс перетаскивания — без редактирования PHP-шаблонов или дочерней темы. Два основных способа — это Theme Builder Elementor Pro, который нативно обрабатывает шаблоны шапки и подвала, и бесплатный плагин Elementor Header & Footer Builder, который воспроизводит эту функциональность для пользователей бесплатного уровня.

Оба метода внедряют ваш пользовательский шаблон в иерархию шаблонов WordPress, переопределяя вывод header.php и footer.php по умолчанию из темы. Понимание этого различия важно при отладке конфликтов с активной темой или слоем кэширования.

Предварительные требования

Перед тем как приступать к работе с шаблонами, убедитесь в следующем:

• Ваша установка WordPress работает на версии 6.0 или выше (минимальное требование Elementor в текущих стабильных релизах).
• У вас активирована дочерняя тема, если родительская тема поставляется с собственной логикой шапки/подвала. Редактирование родительской темы напрямую приведёт к потере изменений при следующем обновлении темы.
• Лимит памяти PHP установлен не менее 256 МБ. Редактор Elementor требователен к памяти, и низкий лимит вызывает незаметные сбои при сохранении. Проверьте wp-config.php или php.ini вашего сервера.
• Вы очистили полное кэширование страниц перед тестированием изменений. Кэшированный HTML будет отдавать старую шапку/подвал независимо от того, что вы сохранили в Elementor.

Если ваш сайт WordPress работает в среде VPS Хостинга, у вас есть прямой доступ к php.ini и вы можете установить memory_limit = 256M без использования панели управления хостингом.

Метод 1: Elementor Pro Theme Builder

Theme Builder Elementor Pro — это канонический, полностью поддерживаемый способ. Он предоставляет детальные условия отображения, теги динамического контента и прямую интеграцию с элементами WooCommerce.

Шаг 1: Установка и активация Elementor Pro

Приобретите Elementor Pro на официальном сайте Elementor. Вы получите ZIP-файл и лицензионный ключ.

В панели управления WordPress перейдите в Плагины > Добавить новый > Загрузить плагин. Выберите ZIP-файл, нажмите Установить, затем Активировать. После активации перейдите в Elementor > Лицензия и подключите лицензионный ключ. Бесплатный основной плагин Elementor и Elementor Pro должны быть активны одновременно — Pro является дополнением, а не самостоятельным плагином.

Шаг 2: Открытие Theme Builder

Перейдите в Шаблоны > Theme Builder. Интерфейс разделён на разделы: Header (Шапка), Footer (Подвал), Single (Одиночная запись), Archive (Архив), Search Results (Результаты поиска) и Error 404. Каждый раздел может содержать несколько шаблонов с разными условиями отображения, что позволяет показывать разные шапки на лендингах и в записях блога.

Шаг 3: Создание или редактирование шаблона шапки

Нажмите вкладку Header, затем Добавить новый. Появится модальное окно с предложением назвать шаблон (например, Main Header) и при желании выбрать готовый блок из библиотеки шаблонов Elementor.

На холсте Elementor наиболее часто используемые виджеты для шапки:

• Site Logo (Логотип сайта) — использует логотип, установленный в Внешний вид > Настроить > Идентификация сайта, синхронизируя его с ядром WordPress.
• Nav Menu (Меню навигации) — ссылается на любое меню, зарегистрированное в Внешний вид > Меню. Вы можете стилизовать состояния наведения, выпадающие меню и поведение мобильного гамбургера прямо в настройках виджета.
• Search Form (Форма поиска) — добавляет поле поиска в реальном времени. Для пользователей Pro это можно связать с пользовательскими типами записей.
• Button (Кнопка) — полезна для CTA-элементов, таких как «Получить предложение» или ссылки для входа.
• Cart (Корзина) (WooCommerce) — отображает динамическую иконку корзины с количеством товаров, если активен WooCommerce.

Важный момент: Если вы перетащите Section (Секцию) (или Container (Контейнер) в режиме Flexbox) и установите её ширину на Full Width, фон шапки будет правильно охватывать весь вьюпорт. Если оставить значение Boxed, цвет фона остановится на ширине контента, оставляя фон страницы по бокам — распространённая визуальная ошибка, с которой сталкиваются новые пользователи.

Шаг 4: Настройка фиксированной шапки

Чтобы шапка оставалась зафиксированной в верхней части вьюпорта при прокрутке:

1. Нажмите на секцию/контейнер, который оборачивает весь макет шапки.
2. Откройте вкладку Advanced (Дополнительно) на левой панели.
3. В разделе Motion Effects (Эффекты движения) включите Sticky (Фиксация) и установите значение Top (Сверху).
4. При желании установите точку останова Sticky On, чтобы отключить фиксацию на мобильных устройствах, где она занимает слишком много вертикального пространства экрана.

Особый случай: Фиксированные шапки плохо взаимодействуют с панелью администратора WordPress, когда пользователь авторизован. Панель администратора добавляет 32px смещения сверху. В большинстве случаев Elementor обрабатывает это автоматически, но если вы используете пользовательский z-index для фиксированной секции, убедитесь, что она не перекрывает панель администратора, протестировав в авторизованном состоянии.

Шаг 5: Установка условий отображения для шапки

После нажатия Опубликовать Elementor немедленно предложит вам определить Условия отображения. Это одна из самых мощных и наиболее неправильно понимаемых функций.

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

По завершении нажмите Save & Close (Сохранить и закрыть).

Шаг 6: Создание или редактирование шаблона подвала

Рабочий процесс для подвала полностью повторяет процесс для шапки. Нажмите вкладку Footer (Подвал) в Theme Builder, затем Добавить новый.

Распространённые виджеты и шаблоны макета для подвала:

• Виджет Text Editor (Текстовый редактор) или Heading (Заголовок) для уведомлений об авторских правах. Используйте динамический тег [current_year] через систему динамического контента Elementor, чтобы избежать ручного обновления года.
• Виджет Icon List (Список иконок) или Social Icons (Иконки социальных сетей) для ссылок на социальные сети.
• Виджет Nav Menu (Меню навигации) для дополнительной навигации в подвале (политика конфиденциальности, условия использования, ссылки на карту сайта).
• Виджет Image (Изображение) для значков оплаты или знаков доверия.
• Виджет Shortcode (Шорткод) для встраивания вывода сторонних плагинов (например, шорткода согласия на использование файлов cookie).

Установите условия отображения по той же логике, что и для шапки, затем нажмите Save & Close (Сохранить и закрыть).

Метод 2: Elementor Header & Footer Builder (бесплатный)

Если вы используете бесплатный уровень Elementor, плагин Elementor Header & Footer Builder от Brainstorm Force предоставляет практически идентичную функциональность без необходимости лицензии Pro.

Шаг 1: Установка плагина

Перейдите в Плагины > Добавить новый, найдите Elementor Header & Footer Builder и установите плагин от Brainstorm Force (проверьте автора — существуют плагины с похожими названиями). Нажмите Активировать.

Примечание о совместимости: Этот плагин работает с большинством популярных тем, но требует, чтобы активная тема поддерживала хуки header.php и footer.php. Темы, полностью построенные на блочном Full Site Editing (FSE) — такие как Twenty Twenty-Three и Twenty Twenty-Four — используют другую систему шаблонов и могут не реагировать на метод внедрения этого плагина. В таком случае либо переключитесь на классическую тему, например Astra, GeneratePress или Hello Elementor, либо обновитесь до Elementor Pro.

Шаг 2: Создание шаблона шапки

Перейдите в Внешний вид > Elementor Header & Footer Builder, затем нажмите Добавить новый.

В модальном окне создания шаблона:

• Установите Type (Тип) на Header.
• Дайте ему описательное название.
• Нажмите Create Template (Создать шаблон).

Вы будете перенаправлены в стандартный редактор Elementor. Процесс проектирования идентичен Elementor Pro — используйте те же виджеты (Site Logo, Nav Menu, Button и т.д.).

Шаг 3: Назначение правил отображения

После публикации прокрутите вниз на экране редактирования шаблона в WordPress (не на холсте Elementor), чтобы найти мета-блок Display Rules (Правила отображения). Он отличается от модального окна условий отображения Elementor Pro и работает через стандартные мета-данные записей WordPress.

Доступные варианты:

• Entire Site (Весь сайт)
• Specific pages (Конкретные страницы, выбираются по отдельности)
• All Singular Pages (Все одиночные страницы)
• All Archive Pages (Все страницы архивов)

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

Шаг 4: Создание шаблона подвала

Вернитесь в Внешний вид > Elementor Header & Footer Builder, нажмите Добавить новый и установите тип Footer. Процесс проектирования и назначения правил отображения идентичен описанному выше рабочему процессу для шапки.

Сравнение: Elementor Pro Theme Builder и бесплатный плагин

Продвинутые техники кастомизации

Адаптивный дизайн шапки и подвала

Редактор Elementor имеет три режима вьюпорта, доступных через иконки в нижней части холста: Desktop (Рабочий стол), Tablet (Планшет) и Mobile (Мобильный). Каждый параметр отступов, размера шрифта и видимости можно переопределить для каждой точки останова.

Практический рабочий процесс:

1. Сначала разработайте макет для рабочего стола.
2. Переключитесь на вид Tablet и настройте стекирование колонок, размеры шрифтов и отступы.
3. Переключитесь на вид Mobile. Скройте второстепенные элементы навигации с помощью Advanced > Responsive > Hide On Mobile (Дополнительно > Адаптивность > Скрыть на мобильных). Замените полное меню навигации кнопкой-гамбургером, установив Breakpoint (Точку останова) виджета Nav Menu на Mobile.

Никогда не используйте одинаковые значения отступов для всех точек останова. Верхний/нижний отступ 40px на рабочем столе будет выглядеть тесно на экране телефона шириной 375px. Установите мобильные отступы на 15px или 20px.

Добавление прозрачной или активируемой прокруткой шапки

Распространённый дизайн-паттерн — прозрачная шапка поверх hero-изображения, которая становится непрозрачной при прокрутке. Elementor Pro обрабатывает это через настройки Sticky (Фиксация) в сочетании с Scroll Effect (Эффектом прокрутки):

1. Установите фон секции шапки на None (прозрачный).
2. Включите Sticky (Фиксацию) в разделе Motion Effects.
3. В настройках фиксации включите Transparency Effects (Эффекты прозрачности) и установите цвет фона в прокрученном состоянии.

Для бесплатного плагина потребуется пользовательский CSS. Добавьте следующее в Внешний вид > Настроить > Дополнительный CSS:

/* Transparent header on load */
.hfe-header {
    background-color: transparent !important;
    transition: background-color 0.3s ease;
}

/* Solid header after scroll — requires a JS class toggle */
.hfe-header.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Затем добавьте небольшой фрагмент JavaScript через плагин, например Code Snippets:

window.addEventListener('scroll', function () {
    const header = document.querySelector('.hfe-header');
    if (window.scrollY > 50) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});

Использование динамических тегов в подвале (Pro)

Динамические теги Elementor Pro позволяют вставлять актуальные данные в текст подвала без жёсткого кодирования значений. Наиболее практичный сценарий использования — год в уведомлении об авторских правах:

1. Добавьте виджет Text Editor (Текстовый редактор) в подвал.
2. Нажмите иконку динамического тега (иконку базы данных) рядом с текстовым полем.
3. Выберите Site (Сайт) > Current Year (Текущий год).

Вывод отображается как текущий четырёхзначный год и обновляется автоматически 1 января — без ручного редактирования. Вы можете комбинировать статический текст и динамические теги в одном виджете: © [dynamic: Current Year] Your Company Name. All rights reserved.

Соображения о производительности

Пользовательские шапки и подвалы Elementor загружают дополнительные CSS и JavaScript на каждой странице. Оцените влияние:

• Используйте плагин Query Monitor, чтобы проверить, сколько запросов к базе данных добавляет ваш шаблон шапки при каждой загрузке страницы.
• Запустите аудит Lighthouse до и после включения пользовательской шапки. Плохо структурированная шапка с неоптимизированными изображениями может добавить 200–400 мс к Largest Contentful Paint (LCP), если изображение логотипа не имеет правильного размера или не подаётся в формате WebP.
• Если вы используете CDN, очищайте кэш CDN после каждого обновления шапки/подвала. Устаревшие узлы CDN будут продолжать отдавать старый HTML шаблона.

В среде VPS с cPanel вы можете настроить объектное кэширование с Redis или Memcached, чтобы снизить накладные расходы на запросы к базе данных, которые разрешение шаблонов Elementor добавляет при каждом запросе.

Устранение распространённых проблем

Шапка не отображается после публикации:

Наиболее частая причина — отсутствующее или конфликтующее условие отображения. Перейдите в Шаблоны > Theme Builder > Header, откройте шаблон, нажмите Опубликовать и убедитесь, что условия отображения включают тестируемую страницу. Также проверьте, что активная тема не содержит жёстко закодированный вызов get_header(), который обходит хук Elementor.

Подвал перекрывает контент страницы:

Обычно это означает, что секция шаблона подвала имеет отрицательный верхний отступ, или обёртка основного контента темы не имеет нижнего отступа. Проверьте элемент в DevTools браузера и определите, какое правило CSS вызывает перекрытие.

Редактор Elementor не загружается (белый экран или спиннер):

Временно увеличьте лимит памяти PHP до 512 МБ для диагностики. Также отключите все плагины, кроме основного Elementor и Pro, затем включайте их по одному, чтобы выявить конфликт.

Фиксированная шапка прыгает на мобильных устройствах:

iOS Safari имеет известные проблемы с position: sticky и динамическими изменениями высоты вьюпорта, вызванными появлением/исчезновением интерфейса браузера при прокрутке. Используйте position: fixed с компенсирующим padding-top на теле страницы в качестве обходного решения, или установите параметр фиксации только для рабочего стола.

Пользовательская шапка не отображается на страницах WooCommerce:

WooCommerce регистрирует собственные типы страниц (Магазин, Корзина, Оформление заказа, Мой аккаунт). В условиях отображения Elementor Pro необходимо явно включить WooCommerce > Shop Page или WooCommerce > All WooCommerce Pages — они не охватываются общим условием «Entire Site» в некоторых конфигурациях тем.

Среда хостинга и производительность

Производительность шапки и подвала, созданных в Elementor, напрямую зависит от времени отклика вашего сервера. Elementor хранит данные шаблонов как мета-данные записей в базе данных WordPress и генерирует CSS-файлы на сервере. На общем хостинге с ограниченным I/O регенерация CSS после обновления шаблона может незаметно завершиться по таймауту, оставив сайт с устаревшими стилями.

Для производственных сайтов WordPress, использующих Elementor, среда VPS Хостинга с минимум 2 ядрами CPU и 4 ГБ RAM обеспечивает необходимый запас ресурсов для плавной работы редактора и быстрой генерации CSS. Если вы управляете магазином WooCommerce с пользовательскими шапкой и подвалом, Выделенные серверы полностью устраняют конкуренцию за ресурсы.

Независимо от уровня хостинга, всегда используйте действующий SSL-сертификат для вашей установки WordPress. Предупреждения о смешанном контенте — возникающие при загрузке HTTP-ресурсов внутри HTTPS-страницы — нарушат работу интерфейса редактора Elementor и приведут к тому, что ресурсы в шапке (логотипы, иконки) не будут загружаться в некоторых браузерах.

Матрица решений: какой метод выбрать?

Практический чеклист перед запуском

• Убедитесь, что условия отображения охватывают все предполагаемые типы страниц, включая страницы 404 и результатов поиска.
• Протестируйте шапку и подвал на реальном мобильном устройстве, а не только в эмуляции DevTools браузера.
• Убедитесь, что логотип использует изображение в формате WebP и имеет явно заданные атрибуты width и height в виджете Image для предотвращения сдвига макета (CLS).
• Проверьте, что все ссылки меню навигации корректно разрешаются после публикации шаблона.
• Очистите все уровни кэширования: серверный кэш, кэш CDN и кэш браузера.
• Запустите Lighthouse на рабочем столе и мобильном устройстве, чтобы убедиться в отсутствии регрессий LCP или CLS.
• Если используются динамические теги Elementor Pro, убедитесь, что они отображают корректный вывод при просмотре неавторизованным пользователем.
• Убедитесь, что динамический тег года в копирайте подвала активен и не задан жёстко.
• Протестируйте поведение фиксированной шапки при видимой панели администратора WordPress (состояние авторизованного пользователя).
• Убедитесь, что страницы WooCommerce (если применимо) охвачены правильным условием отображения.

Часто задаваемые вопросы

Можно ли использовать Elementor для редактирования шапок и подвалов без Elementor Pro?

Да. Установите бесплатный плагин Elementor Header & Footer Builder от Brainstorm Force. Он интегрируется с бесплатным редактором Elementor и позволяет проектировать пользовательские шапки и подвалы с правилами отображения, хотя с меньшим количеством параметров нацеливания, чем Theme Builder Elementor Pro.

Почему моя шапка Elementor не отображается на сайте WordPress после публикации?

Наиболее распространённая причина — ненастроенное или неверное условие отображения. Откройте шаблон в Theme Builder, нажмите Опубликовать и убедитесь, что условие отображения установлено как минимум на Entire Site (Весь сайт) или на конкретный тип страницы, который вы нацеливаете. Также убедитесь, что в файлах шаблонов родительской темы нет жёстко закодированной шапки.

Заменяет ли пользовательская шапка Elementor шапку темы по умолчанию?

Да. При совпадении условия отображения Elementor подключается к elementor/theme/before_do_header и полностью заменяет вывод get_header() темы. Оригинальный header.php темы обходится для этих страниц.

Замедлит ли пользовательская шапка Elementor мой сайт?

Это возможно, если не оптимизировать. Elementor загружает собственный CSS-файл для каждого шаблона. Убедитесь, что логотип является сжатым изображением WebP, избегайте загрузки ненужных виджетов и включите опцию Improved Asset Loading (Улучшенная загрузка ресурсов) в Elementor в разделе Elementor > Настройки > Дополнительно, чтобы загружать только CSS для виджетов, фактически используемых на каждой странице.

Можно ли иметь разные шапки для разных страниц в WordPress с Elementor?

Да, с Elementor Pro. Создайте несколько шаблонов шапок и назначьте каждому конкретное условие отображения — например, одна шапка для главной страницы, другая для записей блога и минималистичная шапка для страницы оформления заказа. Pro Theme Builder оценивает условия в порядке приоритета, поэтому более конкретные условия переопределяют более широкие.