Налаштування плагіна Elementor для WordPress
Elementor — візуальний конструктор сторінок з drag-and-drop редактором. Встановлюється поверх будь-якої теми WordPress і дозволяє будувати макети без написання коду. Безплатна версія охоплює базові потреби; Elementor Pro додає тему-білдер, попапи, форми та віджети WooCommerce.
Установка
Плагін доступний у офіційному репозиторії WordPress. Після установки та активації кожна сторінка отримує кнопку Edit with Elementor у верхній панелі або у списку сторінок.
Для правильної роботи переконайтесь, що тема підтримує шаблон full-width — інакше бічні панелі або заголовок теми перекриватимуть редактор. Теми Hello Elementor, Astra, GeneratePress працюють без конфліктів.
Налаштування сайту через Elementor
У Elementor → Settings:
- Post Types — на яких типах записів увімкнено редактор (сторінки, пости, користувацькі типи)
- Default Colors / Fonts — глобальна палітра та типографіка, які можна переопределяти на рівні віджета
- Lightbox — глобальні налаштування спливаючих зображень
У Elementor → Global Settings (Pro) — змінні кольорів і шрифтів для всього сайту.
Структура редактора
Сторінка будується з секцій → колонок → віджетів:
Section (layout: full-width / boxed)
└── Column (width: 50% / 33% / тощо)
└── Widget (Text / Image / Button / тощо)
Кожен елемент має три вкладки налаштувань: Content (дані), Style (оформлення), Advanced (відступи, CSS-клас, умови показу, ефекти).
Глобальні віджети
Віджет можна зберегти як «глобальний» — він використовується на кількох сторінках, і зміна оригіналу оновляє всі копії. Аналог компонента у React або include у PHP.
ПКМ на віджеті → Save as Global Widget → дати ім'я
Elementor Pro: тема-білдер
Pro-версія дозволяє створювати шаблони для частин теми: Header, Footer, Single Post, Archive, 404. Шаблони призначаються через умови:
Template: «Blog Header»
Display Conditions: Include → Entire Site
Exception: Exclude → Front Page
Це замінює редагування PHP-файлів для більшості завдань верстки.
Користувацькі CSS та хуки
// Додати CSS лише на сторінки, редаговані Elementor
add_action( 'elementor/frontend/after_enqueue_styles', function() {
wp_enqueue_style( 'my-elementor-additions', get_stylesheet_directory_uri() . '/elementor-custom.css' );
} );
// Додати користувацький віджет
add_action( 'elementor/widgets/register', function( $widgets_manager ) {
require_once __DIR__ . '/widgets/my-widget.php';
$widgets_manager->register( new \My_Custom_Widget() );
} );
Продуктивність
Elementor генерує вбудований CSS для кожної сторінки і зберігає його у wp_posts (тип elementor_library) та wp_postmeta. При великій кількості сторінок розмір бази даних зростає. Рекомендації:
- Увімкніть Improved Asset Loading у Elementor → Experiments (завантажує CSS лише потрібних віджетів, а не всіх разом)
- Увімкніть Inline Font Icons для зменшення кількості HTTP-запитів
- Регулярно запускайте Tools → Regenerate CSS після оновлення плагіна
Конфлікти
Часта проблема — конфлікт з темами, які примусово завантажують свої стилі поверх Elementor. Діагностика: відключіть усі плагіни окрім Elementor, перевірте проблему, ввімкніть їх назад по одному.
jQuery-конфлікти після WordPress 5.6 (jQuery 3.x): якщо віджети сторонніх плагінів використовують застарілий синтаксис — у консолі з'являються помилки. Рішення — оновити або замінити конфліктуючий плагін.
Тимчасові рамки
Установка, налаштування глобальних стилів, розробка 5–10 сторінок — 2–3 робочі дні. Налаштування тема-білдера (Pro), попапи, форми, інтеграція з WooCommerce — 3–5 днів.