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

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

Beaver Builder — конструктор сторінок з акцентом на чистоту коду та стабільність. На відміну від Elementor та WPBakery, генерує компактний HTML без зайвих обгорток і часто вибирається розробниками саме за передбачуваність верстки.

Версії плагіна

• Beaver Builder Lite — безплатна, обмежений набір модулів
• Beaver Builder Standard/Pro/Agency — платні, повний набір модулів, тема-білдер (Beaver Themer — окупка покупка), white-label

Редактор

Після активації сторінки відкриваються через Launch Beaver Builder у верхній панелі. Редактор працює поверх сторінки — ліва панель модулів, права робоча область.

Структура: Row → Column → Module. Колонки в рядку встановлюються передустановленими шаблонами (1 колонка, 2x50%, 1/3+2/3 тощо) або довільними відсотками.

Збережені рядки та шаблони

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

Modules Panel → Saved → Saved Rows / Saved Modules / Saved Layouts

Це аналог глобальних віджетів Elementor, але більш гнучкий — можна зберегти будь-який рівень ієрархії.

Розробка користувацьких модулів

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 Themer — тема-білдер

Окремий плагін Beaver Themer дозволяє створювати шаблони для:

• Header / Footer
• Archive (списки постів, категорії)
• Singular (окремі пости, сторінки, користувацькі типи)
• 404 / Search Results
• Part (переиспользуемі блоки)

Умови відображення аналогічні Elementor Pro.

Глобальні налаштування стилів

У Settings → Global Settings встановіть базові змінні:

Responsive Breakpoints: Medium ≤ 992px, Small ≤ 768px
Module Spacing: 20px
Row Margin: 0
Default Heading Font: Inherit / Custom

Продуктивність

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

// Програмний сброс кешу
FLBuilderModel::delete_asset_cache_for_all_posts();

На відміну від Elementor, BB не завантажує JS на сторінках без своїх модулів — це плюс для продуктивності.

Сумісність з ACF

Через BB Settings → Advanced поля ACF підключаються до модулів через функцію-коннектор. Для динамічного контенту (Themer + ACF) використовуються field connections — кнопка з блискавкою рядом з полем модуля дозволяє прив'язати його до ACF-поля поточного посту.

Тимчасові рамки

Установка, базові налаштування, розробка 5–8 сторінок — 1–2 робочі дні. Користувацькі модулі, Beaver Themer, інтеграція з ACF — 2–4 дні.