How to Create a Responsive Spacer Using Beaver Builder

Posted by Ronald Huereca / March 10, 2019 /

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.

Posted in

Ronald Huereca

Ronald Huereca is the CEO of MediaRon LLC and enjoys WordPress plugin and theme development.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top