Як редагувати верхній і нижній колонтитули за допомогою 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, які хочуть мати верхній колонтитул без відволікаючих елементів на сторінці оформлення замовлення.

Натисніть Зберегти та закрити після завершення.

Крок 6: Створення або редагування шаблону нижнього колонтитула

Робочий процес нижнього колонтитула точно відображає верхній. Натисніть вкладку Footer у Theme Builder, потім Додати новий.

Поширені віджети нижнього колонтитула та шаблони макетів:

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

Встановіть умови відображення, дотримуючись тієї ж логіки, що й для верхнього колонтитула, потім натисніть Зберегти та закрити.

Метод 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.

Доступні параметри:

• Весь сайт
• Конкретні сторінки (вибираються індивідуально)
• Усі окремі сторінки
• Усі архівні сторінки

Система правил відображення безкоштовного плагіна менш деталізована, ніж у 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. У налаштуваннях sticky увімкніть 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 core та Pro, потім вмикайте їх по одному, щоб виявити конфлікт.

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

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

Власний верхній колонтитул не відображається на сторінках WooCommerce:

WooCommerce реєструє власні типи сторінок (Shop, Cart, Checkout, My Account). В умовах відображення Elementor Pro ви повинні явно включити WooCommerce > Shop Page або WooCommerce > All WooCommerce Pages — вони не охоплюються загальною умовою «Весь сайт» у деяких конфігураціях тем.

Середовище хостингу та продуктивність

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

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

Незалежно від рівня хостингу, завжди поєднуйте вашу інсталяцію WordPress з дійсним SSL-сертифікатом. Попередження про змішаний вміст — що виникають, коли 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, натисніть Опублікувати і переконайтеся, що умова відображення встановлена принаймні на Весь сайт або конкретний тип сторінки, на який ви орієнтуєтеся. Також перевірте, чи немає жорстко закодованого верхнього колонтитула на рівні теми у файлах шаблонів батьківської теми.

Чи замінює власний верхній колонтитул Elementor стандартний верхній колонтитул теми?

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

Чи сповільнить власний верхній колонтитул Elementor мій сайт?

Може, якщо не оптимізований. Elementor завантажує власний CSS-файл для кожного шаблону. Переконайтеся, що логотип є стисненим зображенням WebP, уникайте завантаження непотрібних віджетів і увімкніть параметр Improved Asset Loading Elementor у розділі Elementor > Налаштування > Advanced, щоб завантажувати лише CSS для віджетів, що фактично використовуються на кожній сторінці.

Чи можу я мати різні верхні колонтитули для різних сторінок у WordPress з Elementor?

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