Перейти к навигации Перейти к основному содержимому 
Astra Pro + Elementor в 2026: как разделить роли темы и конструктора без конфликтов
Короткий ответ: в связке Astra Pro + Elementor тема отвечает за каркас сайта, а конструктор — за содержимое страниц. Каркас — это глобальные цвета, типографика, ширина контейнера, шапка, подвал, блог и стандартные шаблоны WooCommerce. Содержимое — это лендинги, уникальные блоки и сложные макеты. Конфликты почти всегда начинаются, когда один и тот же элемент настраивают сразу в двух местах. Например, шапку собирают в Astra Header Builder и одновременно назначают шаблон Header в Elementor Pro. Или задают шрифты в Customizer и в Site Settings Elementor. Ниже — схема разделения ролей, которая хорошо работает на реальных проектах.
Почему вообще возникают конфликты
Astra Pro и Elementor Pro частично дублируют друг друга. У Astra есть Header/Footer Builder, модуль Site Builder с условиями отображения, Blog Pro, расширенный модуль WooCommerce, глобальная палитра и типографика. У Elementor Pro есть Theme Builder: шаблоны Header, Footer, Single, Archive, Loop Item и шаблоны товаров. Также есть свои Global Colors и Global Fonts.
Если не договориться, кто за что отвечает, получаются типичные симптомы:
- две шапки на странице или шапка, которая «прыгает» при загрузке;
- шрифты загружаются дважды — из Customizer и из Elementor;
- кнопки в Elementor не совпадают по цвету с кнопками темы;
- контент упирается в узкий контейнер Astra, хотя в Elementor секция растянута;
- шаблон Single из Elementor Pro не применяется, потому что сработало условие Site Builder.
💡 Главное правило: у каждого элемента сайта должен быть ровно один «владелец». Зафиксируйте это в коротком документе проекта, чтобы следующий разработчик не начал править шапку не там.
Рекомендуемая схема разделения ролей
Ниже — базовое распределение для большинства сайтов: корпоративных, блогов и небольших магазинов.
Логика простая. Всё, что повторяется на сотнях страниц и должно пережить смену дизайна, держите в теме. Всё уникальное и маркетинговое отдавайте Elementor.
Глобальные стили: один источник правды
Начните с Customizer Astra: задайте глобальную палитру, базовую типографику, стили кнопок и ширину контейнера. Astra передаёт свою палитру в Elementor, поэтому в панели глобальных цветов конструктора вы увидите цвета темы.
Дальше важно не переопределять их в Elementor:
- в настройках Elementor отключите стандартные цвета и шрифты конструктора, если эти опции доступны в вашей версии, — иначе они перебьют тему;
- в Site Settings не задавайте отдельную типографику для заголовков, если она уже настроена в Astra;
- в виджетах используйте глобальные цвета, а не вписанные вручную HEX-коды — так смена палитры обновит весь сайт.
Отдельно сверьте ширину контента. Если в Astra контейнер 1200 px, а в Elementor по умолчанию стоит 1140 px, блоки на одной странице будут «гулять» на несколько пикселей. Это мелочь, но именно она создаёт ощущение неаккуратности.
Header и Footer: чей конструктор выбрать
В большинстве проектов шапку и подвал лучше собирать в Astra Header/Footer Builder. Он загружается без дополнительного JS конструктора. В нём уже есть липкая шапка (sticky), отдельная мобильная версия, корзина WooCommerce, поиск и мегаменю в Pro-версии.
Когда шапку лучше отдать Elementor Pro
- нужна нестандартная сетка: перекрывающиеся элементы, анимации, сложные фоны;
- разные шапки для разных разделов с тонкими условиями показа;
- дизайнер сдал макет, который в Astra нельзя собрать без кастомного CSS.
В этом случае назначьте шаблон Header в Elementor Theme Builder. Затем убедитесь, что шапка Astra не выводится параллельно. Обычно Astra корректно уступает место шаблону Elementor Pro. Если на отдельных страницах видны обе шапки, проверьте условия отображения шаблона. Также проверьте, не отключена ли шапка точечно в настройках страницы.
💡 Совет: не смешивайте подходы. Если шапка собрана в Elementor, подвал тоже лучше вести там. Иначе команда будет искать настройки в двух интерфейсах.
Site Builder Astra против Theme Builder Elementor
Модуль Site Builder в Astra Pro (ранее Custom Layouts) позволяет создавать шаблоны и вставлять их в хуки темы. Например, выводить блок перед контентом, после записи или внутри шапки. Есть условия: по типу записи, таксономии, роли пользователя и устройству. Содержимое такого шаблона можно собрать прямо в Elementor.
Single и Archive
Для записей блога стабильнее всего работает Astra Blog Pro. Он даёт варианты сетки архива, мета-данные, время чтения, похожие записи и аккуратную типографику без лишнего DOM. Шаблоны Single и Archive в Elementor Pro оправданы для кастомных типов записей с полями. Например, «Проекты», «Вакансии» или «Каталог услуг», где нужна уникальная раскладка.
Правило против конфликтов: для одного типа записи — один механизм шаблонов. Если «Проекты» оформлены через Theme Builder Elementor, не вешайте на тот же тип записи макет Site Builder с хуком замены контента.
Настройки страницы: мета-бокс Astra и Meta Box
В редакторе каждой страницы у Astra есть панель настроек (мета-бокс). В ней можно отключить шапку, заголовок, хлебные крошки, подвал и сайдбар, а также выбрать макет контента. Для страниц, собранных в Elementor, обычно выбирают полноширинный макет без сайдбара и скрывают заголовок, если он есть в самом дизайне.
Частая ошибка — отключить заголовок через мета-бокс, а потом искать, «куда пропал H1». Если заголовок скрыт, обязательно добавьте его виджетом Elementor с тегом H1.
Если же речь о плагине Meta Box для произвольных полей, распределение такое: поля создаются в Meta Box, а выводятся через динамические теги Elementor Pro. Для этого используйте интеграционное расширение Meta Box для Elementor. Тема в этой цепочке не участвует — и это правильно.
WooCommerce: кто отвечает за магазин
Модуль WooCommerce в Astra Pro закрывает большую часть задач без конструктора: раскладку каталога, стили карточек, фильтры off-canvas, быстрый просмотр, упрощённый чекаут, поведение мини-корзины. Шаблоны остаются совместимыми с обновлениями WooCommerce.
📦
Каталог и корзина
Оставьте Astra Pro. Это проще, быстрее и меньше ломается при обновлениях WooCommerce.
🎨
Промо-страницы товаров
Elementor Pro подходит для флагманских товаров с длинным продающим описанием и уникальной вёрсткой.
🛡️
Чекаут
Переделывайте его минимально. Каждая кастомизация — риск конфликта с платёжными плагинами.
Компромиссный вариант: стандартный шаблон товара от Astra и Elementor-блоки, выведенные через Site Builder после описания. Так вы получаете маркетинговую гибкость, не трогая ядро страницы товара.
Производительность связки
Astra сама по себе лёгкая. Основной вес добавляет Elementor, поэтому оптимизация начинается с него:
- используйте Flexbox/Grid-контейнеры вместо старых секций и колонок — DOM получается заметно компактнее;
- включите в разделе функций Elementor оптимизированную загрузку ассетов и встроенные иконки шрифтов, если они ещё не активны по умолчанию;
- грузите шрифты из одного места: включите локальную загрузку Google Fonts в Astra, а в Elementor отключите подключение Google Fonts, если не используете там отдельные шрифты;
- в Astra Pro отключите неиспользуемые модули — каждый активный модуль добавляет свой CSS;
- не ставьте сторонние наборы аддонов к Elementor «на всякий случай»: каждый из них подгружает свои стили.
Простой ориентир: проверьте страницу в инструментах разработчика браузера. Если файлы шрифтов одного семейства загружаются дважды, значит, источник правды не определён.
Free или Pro: что действительно нужно
Бесплатная Astra уже включает Header/Footer Builder и глобальные настройки, а бесплатный Elementor — редактор страниц. Для простого сайта-визитки этого хватает: тема ведёт каркас, конструктор собирает страницы.
Astra Pro нужна, если важны Blog Pro, Site Builder с хуками, расширенный WooCommerce, мегаменю и липкая шапка. Elementor Pro нужен для Theme Builder, форм, динамических тегов, Loop Grid и всплывающих окон. Покупать оба Pro-плагина имеет смысл, когда есть задачи для обоих. Если шапку, блог и магазин закрывает Astra Pro, Elementor Pro может оказаться лишним — и наоборот.
Troubleshooting: частые проблемы и решения
Стили не обновляются после правок
Пересоздайте CSS: Elementor → Инструменты → Regenerate CSS & Data. Затем очистите кеш плагина кеширования и CDN.
Секция Elementor не растягивается на всю ширину
В мета-боксе Astra выберите полноширинный макет контента. Также проверьте, не ограничивает ли ширину контейнер Elementor в Site Settings.
Шаблон Single или Header не применяется
Проверьте условия в Theme Builder и пересечения с макетами Site Builder. Более специфичное условие обычно побеждает общее. Временно отключите конкурирующий макет.
Цвета кнопок отличаются
Кнопку в Elementor привяжите к глобальному цвету палитры Astra и уберите ручные значения в стилях виджета.
После обновления что-то сломалось
Обновляйте сначала тестовую копию: тема, Astra Pro, Elementor, Elementor Pro — в этом порядке. Для отката держите резервную копию. Проблемный плагин ищите стандартно: отключайте плагины по одному на тестовом сайте.
Итог
Связка Astra Pro и Elementor в 2026 году остаётся надёжной, если распределить роли до начала работы. Глобальные стили, шапка, блог и магазин — за темой. Уникальные страницы и маркетинговые блоки — за конструктором. Хуки и вставки — через Site Builder. Один владелец на каждый элемент избавит от двойных шапок, дублирования шрифтов и долгих поисков нужной настройки.
Следующий шаг: откройте свой сайт и составьте таблицу «элемент — владелец» по образцу выше. Затем удалите дублирующие настройки во втором инструменте.
Наведите порядок в связке Astra Pro + Elementor
Начните с аудита глобальных стилей и шаблонов — это 30 минут работы, которые экономят часы на поддержке.
