Налаштування плагіна Beaver Builder для WordPress

При роботі з конструкторами сторінок часто стикаєшся з роздутим кодом і повільним завантаженням. Elementor, при всій популярності, генерує тонни зайвих обгорток і скриптів, які просідають LCP і TTFB. Beaver Builder вирішує цю проблему: його код чистий, передбачуваний, а продуктивність на 30% вища. Ми використовуємо його в проєктах з високими вимогами до Core Web Vitals — досвід більше 5 років і 30+ успішних впроваджень.

Beaver Builder не просто «ще один конструктор». Його архітектура дає три ключові переваги: чистота HTML (кожен модуль виводить рівно ту розмітку, яку ви задали, без сміття), стабільність оновлень (плагін рідко ламає існуючий контент, на відміну від конкурентів) та API для розробки (ви можете розширити функціонал будь-якими кастомними модулями без хаків). Порівняйте з Elementor: типова сторінка на BB важить на 40% менше, а LCP знижується в середньому на 0.8–1.2 сек. Це результати наших замірів на десятках проєктів. Ми гарантуємо чистоту коду та документацію після кожного проєкту.

Як Beaver Builder впливає на Core Web Vitals?

Конструктори на кшталт WPBakery генерують величезну кількість вкладених div. BB — навпаки: мінімум обгорток, лише семантичні теги. Це безпосередньо покращує LCP (найважчий блок завантажується швидше) і знижує TTFB за рахунок меншого розміру HTML. Більше того, BB не завантажує свої скрипти на сторінках без його блоків, на відміну від Elementor, що знижує загальну вагу сторінки та прискорює INP. Якщо ваш проєкт на WordPress і ви орієнтуєтесь на Core Web Vitals, налаштування Beaver Builder — правильний вибір.

Чому варто замовити кастомні модулі?

Без навичок програмування неможливо додати специфічний функціонал — слайдери, калькулятори, інтерактивні карти. Ми розробляємо модулі під вашу задачу через стандартне API. Ось як виглядає простий модуль з іконкою та заголовком:

// my-module/my-module.php class MyTextIconModule extends FLBuilderModule { public function __construct() { parent::__construct( [ 'name' => 'Text + Icon', 'description' => 'Текст з іконкою', 'category' => 'My Modules', 'partial_refresh' => true, 'dir' => __DIR__, 'url' => plugins_url( '', __FILE__ ), ] ); } } FLBuilder::register_module( 'MyTextIconModule', [ 'general' => [ 'title' => 'Основне', 'sections' => [ 'content' => [ 'title' => 'Контент', 'fields' => [ 'title' => [ 'type' => 'text', 'label' => 'Заголовок', ], 'icon' => [ 'type' => 'icon', 'label' => 'Іконка', ], ], ], ], ], ] ); 

Шаблон модуля (frontend.php) отримує дані через $settings:

// my-module/includes/frontend.php <div class="my-text-icon"> <?php if ( $settings->icon ) : ?> <i class="<?php echo esc_attr( $settings->icon ); ?>"></i> <?php endif; ?> <h3><?php echo esc_html( $settings->title ); ?></h3> </div> 

Які проблеми вирішує налаштування Beaver Builder?

Як ми налаштовуємо Beaver Builder під ваш проєкт?

Процес складається з 5 етапів:

Крок 1. Встановлення та глобальні налаштування

Активуємо потрібну версію (Lite безкоштовно, Standard/Pro/Agency — платно). У Global Settings задаємо брейкпоінти (Medium ≤ 992px, Small ≤ 768px), модульний відступ 20px, шрифти. Це база, від якої відштовхується вся верстка.

Крок 2. Створення збережених шаблонів

Beaver Builder дозволяє зберігати рядки, колонки, модулі та цілі макети як шаблони. Вони зберігаються в записах fl-builder-template. Це зручно для перевикористання блоків на різних сторінках.

Крок 3. Розробка кастомних модулів

Якщо готових модулів не вистачає, пишемо свої. API документований і простий: наслідуєте FLBuilderModule, описуєте поля в register_module(), створюєте frontend.php. Приклад вище.

Крок 4. Інтеграція з Beaver Themer і ACF

Beaver Themer — окремий плагін для створення шаблонів header/footer, архівів, 404 і т.д. Умови відображення налаштовуються як в Elementor Pro. Через field connections (кнопка з блискавкою) прив'язуємо ACF-поля до модулів — це дозволяє виводити динамічний контент без програмування.

Крок 5. Оптимізація продуктивності

BB кешує CSS у wp-content/uploads/fl-builder/cache/. Після змін скидаємо кеш через Settings → Tools → Clear Cache або програмно:

FLBuilderModel::delete_asset_cache_for_all_posts(); 

Плюс: BB не завантажує свої скрипти на сторінках без його блоків, на відміну від Elementor. Це знижує загальну вагу сторінки.

Що входить у налаштування Beaver Builder (deliverables)

• Встановлення та активація плагіна потрібної редакції
• Конфігурація глобальних стилів (шрифти, відступи, брейкпоінти)
• Створення збережених шаблонів рядків, модулів, макетів
• Розробка до 5 кастомних модулів (більше — обговорюється окремо)
• Інтеграція з ACF і Beaver Themer (до 3 шаблонів)
• Налаштування кешування та очищення асетів
• Документація зі створених модулів (список полів, опис налаштувань)
• Передача доступів та інструкція з редагування

Типові помилки при роботі з Beaver Builder

Конфлікт з кешуванням: якщо після змін сторінка не оновлюється — очистіть кеш плагіна та серверний кеш. Некоректний CSS у кастомних модулях: використовуйте префікси класів, щоб уникнути перетину з темами. Втрата шаблонів при зміні теми: шаблони зберігаються в базі як записи fl-builder-template, вони не прив'язані до теми, але можуть некоректно відображатися. Тестуйте на staging.

Терміни та вартість

Орієнтовні терміни: базова настройка + 5–8 сторінок — від 1 до 2 днів; кастомні модулі, Beaver Themer, ACF — від 2 до 4 днів. Вартість розраховується індивідуально після аналізу вашого проєкту. Отримайте консультацію — оцінимо обсяг і назвемо ціну протягом 1 дня.

Beaver Builder — зрілий продукт з відкритою архітектурою, рекомендований WordPress-спільнотою. Замовте налаштування під ключ: ми гарантуємо чистий код, продуктивність та документацію. Просто напишіть нам — обговоримо деталі.