Beaver Builder Plugin Setup for WordPress

Beaver Builder Plugin Setup for WordPress

Beaver Builder is a page builder with emphasis on code cleanliness and stability. Unlike Elementor and WPBakery, it generates compact HTML without extra wrappers and is often chosen by developers for predictable markup quality.

Plugin Versions

• Beaver Builder Lite — free, limited set of modules
• Beaver Builder Standard/Pro/Agency — paid, full set of modules, theme builder (Beaver Themer — separate purchase), white-label

Editor

After activation, pages open via Launch Beaver Builder in the top panel. The editor works on top of the page — left panel shows modules, right side is the work area.

Structure: Row → Column → Module. Columns in a row are set via preset templates (1 column, 2x50%, 1/3+2/3 etc.) or custom percentages.

Saved Rows and Templates

Beaver Builder supports saving rows, columns, modules, and entire layouts as templates. They are stored as records of type fl-builder-template and accessible via:

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

This is analogous to global widgets in Elementor, but more flexible — you can save any level of hierarchy.

Developing Custom Modules

Beaver Builder has a well-documented API for creating modules:

// my-module/my-module.php
class MyTextIconModule extends FLBuilderModule {
    public function __construct() {
        parent::__construct( [
            'name'            => 'Text + Icon',
            'description'     => 'Text with icon',
            'category'        => 'My Modules',
            'partial_refresh' => true,
            'dir'             => __DIR__,
            'url'             => plugins_url( '', __FILE__ ),
        ] );
    }
}

FLBuilder::register_module( 'MyTextIconModule', [
    'general' => [
        'title'    => 'General',
        'sections' => [
            'content' => [
                'title'  => 'Content',
                'fields' => [
                    'title' => [
                        'type'  => 'text',
                        'label' => 'Title',
                    ],
                    'icon' => [
                        'type'  => 'icon',
                        'label' => 'Icon',
                    ],
                ],
            ],
        ],
    ],
] );

Module template (frontend.php) receives data via $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 — Theme Builder

Separate plugin Beaver Themer allows creating templates for:

• Header / Footer
• Archive (post lists, categories)
• Singular (individual posts, pages, CPT)
• 404 / Search Results
• Part (reusable blocks)

Display conditions are analogous to Elementor Pro.

Global Style Settings

In Settings → Global Settings, set basic variables:

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

Performance

Beaver Builder generates CSS for each page and caches it in wp-content/uploads/fl-builder/cache/. When changing settings, manually clear cache: Settings → Tools → Clear Cache.

// Programmatic cache reset
FLBuilderModel::delete_asset_cache_for_all_posts();

Unlike Elementor, BB does not load JS on pages without its modules — this is a performance plus.

ACF Compatibility

Via BB Settings → Advanced, ACF fields connect to modules through a connector function. For dynamic content (Themer + ACF), field connections are used — a lightning button next to a module field allows binding it to an ACF field of the current post.

Timeline

Installation, basic settings, development of 5–8 pages — 1–2 business days. Custom modules, Beaver Themer, ACF integration — 2–4 days.