Настройка плагина 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 (отдельные посты, страницы CPT)
• 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 дня.