How to Create a Responsive Spacer Using Beaver Builder

blue and purple galaxy digital wallpaper
Photo by Jeremy Thomas on Unsplash

I’m in love with Beaver Builder and today I’m going to show you how to create a simple responsive spacer using Beaver Builder.

Step 1: Create the Module Structure

In my case, I have a modules directory, and within this module is the main module file, as well as an includes folder that contains the markup.

Simple Spacer Structure

The first thing you might want to do is change the icon out. I used this icon from Material Design. Simply download the SVG and overwrite the icon.svg in the folder.

Step 2: Create the Module Class

Inside simple-spacer-module.php, I create the module class.

class MediaRon_Simple_Spacer_Module extends FLBuilderModule { public function __construct() { parent::__construct(array( 'name' => __( 'Simple Spacer', 'mediaron-bb-modules' ), 'description' => __( 'Simple Spacer for Beaver Builder', 'mediaron-bb-modules' ), 'category' => __( 'Separators/Spacers', 'mediaron-bb-modules' ), 'group' => __( 'MediaRon Modules', 'mediarion-bb-modules' ), 'dir' => MEDIARON_BEAVER_BUILDER_DIR . 'modules/simple-spacer/', 'url' => MEDIARON_BEAVER_BUILDER_URL . 'modules/simple-spacer/', 'editor_export' => true, // Defaults to true and can be omitted. 'enabled' => true, // Defaults to true and can be omitted. 'partial_refresh' => false, // Defaults to false and can be omitted. )); } }

From there, I add the necessary fields, which is just a basic unit field.

/** * Register the module and its form settings. */ FLBuilder::register_module('MediaRon_Simple_Spacer_Module', array( 'general' => array( // Tab 'title' => __('General', 'mediaron-bb-modules'), // Tab title 'sections' => array( // Tab Sections 'general' => array( // Section 'title' => __('Spacer', 'mediaron-bb-modules'), // Section Title 'fields' => array( // Section Fields 'spacer' => array( 'type' => 'unit', 'label' => __( 'Height of Spacer', 'mediaron-bb-modules' ), 'description' => 'px', 'default' => '10', 'responsive' => true ), ) ) ) ), ) );

I then instantiate the class in my main plugin file.

// Spacers/Separators require_once 'modules/simple-spacer/simple-spacer-module.php'; new MediaRon_Simple_Spacer_Module();

You should now see your module in the Beaver Builder settings when you try to add a module.

HTML Markup

In /includes/frontend.php, I include this simple markup.

<div class="fl-mediaron-spacer-gap"> </div>

Style Markup

In /includes/frontend.css.php, I include the following to ensure my spacer is responsive.

.fl-node-<?php echo $id; ?> .fl-mediaron-spacer-gap { clear: both; width: 100%; } <?php FLBuilderCSS::rule( array( 'selector' => ".fl-node-$id .fl-mediaron-spacer-gap", 'media' => 'default', // Optional. Can be `default`, `medium`, `responsive` or a custom statement. 'props' => array( 'height' => $settings->spacer . 'px' ), ) ); FLBuilderCSS::rule( array( 'selector' => ".fl-node-$id .fl-mediaron-spacer-gap", 'media' => 'medium', // Optional. Can be `default`, `medium`, `responsive` or a custom statement. 'props' => array( 'height' => $settings->spacer_medium . 'px' ), ) ); FLBuilderCSS::rule( array( 'selector' => ".fl-node-$id .fl-mediaron-spacer-gap", 'media' => 'responsive', // Optional. Can be `default`, `medium`, `responsive` or a custom statement. 'props' => array( 'height' => $settings->spacer_responsive . 'px' ), ) );

Notice the use of FLBuilderCSS::rule. I add one for each of the breakpoints. You can find more Beaver Builder helpers here.

That’s it!

Spacer Screenshot
Spacer Screenshot
Spacer Options
Spacer Options

You should now have a responsive spacer module. If you have any questions, leave a comment below.

Ronald Huereca
Ronald Huereca

Ronald Huereca

Ronald has been part of the WordPress community since 2006, starting off writing and eventually diving into WordPress plugin development and writing tutorials and opinionated pieces.

No stranger to controversy and opinionated takes on tough topics, Ronald writes honestly when he covers a topic.

Leave a Comment