Настройка плагина 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 — на каких типах записей включён редактор (страницы, посты, CPT)
- Default Colors / Fonts — глобальная палитра и типографика, которые можно переопределять на уровне виджета
- Lightbox — глобальные настройки всплывающих изображений
В Elementor → Global Settings (Pro) — переменные цветов и шрифтов для всего сайта.
Структура редактора
Страница строится из секций → колонок → виджетов:
Section (layout: full-width / boxed)
└── Column (width: 50% / 33% / etc.)
└── Widget (Text / Image / Button / etc.)
Каждый элемент имеет три вкладки настроек: 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 дней.