Recently I set out to see if I could find another solution for adding dynamic content. One that would allow a greater variety of sources and that would not require anything more than the Beaver Builder plugin itself. What I came up with does just that.

The background

At I’m Not Marvin, most of our work is internal applications that are tracking and reporting on workflows or other business processes built on WordPress. Beaver Builder should make it easy to create dashboards or other report pages, but the module settings for most modules are not able to receive data dynamically, which is the point of any report.

Take the Number Counter module for example. It would be a helpful module for displaying totals, but it only allows you to set a number at the time you edit the module. For a dashboard you would need this to update automatically as the data changes. I needed a way to link the Number setting to my data, that could be in custom fields (post meta) or stored within other plugins, such as Formidable Pro or Gravity Forms.

I decided the best solution would be to customize the module to accept a shortcodes instead of a static number. A shortcode gives me near universal since they are supported by WordPress and many of the major plugins already provide them for extracting data.

Another goal of this project is to avoid creating another number module if I could help it. I wanted to see if I could customize Beaver Builders module instead. Not that this wouldn’t be a worthy purpose for a new module, but why add an additional module if all I really want to do is add a little extra functionality to what’s already built-in?

Overriding built-In modules

Beaver Builder has provided a method of overriding any of their built-modules that is so simple that the documentation explains it perfectly in a mere eight sentences!

While this still requires at least an intermediate level of web development experience, it’s as easy as working with any other PHP templates in WordPress and reminds me even more of the WooCommerce template system.

Any of Beaver Builder’s built-in modules can be overridden within your theme by following these steps:

1. Create a new folder inside your theme (or child theme) folder named fl-builder.
2. Create a new folder within your theme’s fl-builder folder named modules. (fl-builder/modules)
3. Copy the module you want to override from wp-content/plugins/bb-plugin/modules to your theme’s fl-builder/modules folder. ( as in fl-builder/modules/numbers for my example)

That’s really all there is to setting up the folder and files in your theme so that when you customize them, your changes will override the built-in module. Just find the module you want, copy it’s folder and all the file within it to your theme, and make your changes to these copied files.

This is what I did to get started with my customized Numbers module. Have you spotted it in action yet?

Dynamic data in membership CTA

For my test project, I edited the Number Counter module to add a new drop down field to the General options called Number Source. Now I can select either Static or Shortcode.

If the default option of Static is selected, the other settings remain exactly the same as the before and the I can enter a static number in the Number field.

By selecting the Shortcode option, the Number field changes to a field called Shortcode where, you guessed it, I can enter any shortcode that will produce a number. In fact to be safe, if the field ends up being anything but a number, the module just falls back to using the static Number field.

This article is not meant to be a code tutorial. Rather than getting into the specifics of my changes to the PHP and JavaScript for my test project, I will make my files available for members to download at the end of the article.

You can see my test project in action up in the site header where the bar graph shows the total Beaver Brains members!

One more thing

There is a down side to this that is worth taking note of. By overriding the built-in plugin, you are taking ownership of it. If there are changes made to a module you have copied to your theme folder in the future, they will not be applied to the version in your theme folder.

One of the most common questions asked about the Beaver Builder theme is how you create unique header and footer designs for your site. Whilst the customiser does offer some powerful options, it’s not a complete solution. Access to further design options is not available in the Beaver Builder theme as of now – the only way round it is to set your page template to ‘no headers and footers’ and design the complete blank canvas accordingly.

That’s fine when you have just one page to do, but when you need to make amendments to a whole bunch of pages, you could find yourself spending a lot of time doing so.

That’s where ‘BB Header Footer‘ makes thing easy. Instead of using the ‘No Header/Footer’ template and then adding headers and footers manually, use this plugin to ‘replace’ your header and footer with one you’ve pre-designed. The plugin allows you to select an alternative header or footer from a pre-design Beaver Builder page layout or template and apply it to your whole site. At the moment it’s only able to replace your headers and footers site wide, but Nikhil tells me that they’re working on an update to the plugin that will allow you to choose unique designs on a page by page basis.

Removing the default header may seem like a bad idea as you lose structured markup which Google uses to understand the content and layout of your pages. However Nikhil has confirmed that his plugin will retain the markup generated by the default headers.

So how do you go about replacing the Beaver Builder theme header using this plugin? Here’s a step by step guide. In the screenshot below we’re going to replace the standard header and navigation elements, outlined in yellow, with our new design.

Step One – Create a header template

In the screenshot below we’ve created a new template called ‘New Header’ that will be used to replace our standard BB theme header. If you don’t see ‘Templates in the WordPress admin sidebar, make sure you have them enabled in the Beaver Builder Page Builder options under Settings –> Page Builder –> Templates tab.

Step 2 – Design your new header

Using the Beaver Builder page builder, design your new header using the modules you need. In this example, we’re going to make our header row background colour yellow and we’re going to add a menu and social network icons to the design.

Step 3 – Publish your new design

In the screenshot below, you can see the default header and navigation menu and below it our new, very yellow design that will replace it.

Step 4 – Choose your new template

Head over to Settings –> Page Builder –> BB header Footer tab and from the header drop down, choose your new template. Click on Save Settings to enable BB Header Footer to apply the template as your new site wide header.

Step 5 – Check design

Head to the front end of your site and you should now see that the new template design replaces your standard Beaver Builder header.

Nikhil’s plugin makes replacing standard header and footer designs really easy and with updates coming to the plugin, we should start to see further customisation options available too. A great start and we’re looking forward to seeing how the plugin grows.

For support options, use Nikhil’s Github page located here.

Post Slug

Post ID

What does that mean exactly?

If you spend hours and hours entering text, images and other content into some page builders and it stops working, you could end up losing the text and images and be left with a mass of ugly shortcodes instead. Your beautiful page of elegantly composed text and images could end up looking like garbage and leaving you with the time-consuming task of picking out the content from within the code.

Always consider that you might be creating a website for a client and handing them a ticking time bomb if the page builder you have chosen uses shortcodes to display your content.

Beaver Builder doesn’t wrap your content in shortcodes and if you ever turn it off or in the unlikely event of that the Beaver Builder plugin stops working, your content will remain intact and editable from within the usual WordPress editor.

3rd party plugins designed to be used with Beaver Builder work the same way.

Following on from our blog post last month, here are a few new updates to add to the upcoming plugin features…

Beaver Builder Plugin Updates

Justin Busa has recently updated the Trello Beaver Builder Roadmap with two very exciting features; the much-anticipated Columns in Columns and Dragging Columns. You can see these features and how they are expected to work in a preview here and if you’re a member of the Beaver Builder Facebook Group, visit this post.

Column feature upgrades

What this means is that unlike the current version where you cannot add columns to existing columns, this update will make this possible by allowing you to drag a column module into an existing module to create ‘nested’ columns. What’s more, the video shows how the Beaver Builder team have worked out the functionality for dragging columns to new locations with a simple pick up, drag and drop feature.

The current version of the Beaver Builder Plugin only allows you to drag modules to new locations, creating new rows if required, but this new feature will ensure that you can drag and drop complete column arrangements out of rows into new locations. A simple blue marker highlight shows where your columns will be located when moving around the layout. This is a much-requested feature and we’re certain that it will make the creation of complex layouts a breeze!

All this is expected to be released in the next update to the Beaver Builder Plugin, Version 1.9

User Interface Improvements

One of the great successes of the Beaver Builder Plugin is the editing interface. Back when page builders first became popular, front end editing was clunky and often saw users returning to backend admin editing screens to layout complex pages. The Beaver Builder Plugin changed all of that with a simple, intuitive interface that was easy for both designers and their clients to manage. True front end editing was born and the team at Beaver Builder ensure they still lead the way through innovation and clear development goals.

However scaling an application such as this requires an interface that is able to accommodate a growing list of features, modules, and 3rd party add-ons. Enter Brent Jet, designer and developer, drafted onto the Beaver Builder team to explore interface ideas. Brent’s work on the Plugin interface looks to be bringing a little bit of finesse to the Beaver Builder sidebar and explores an alternative way to display templates, rows and modules. Included in the update will be a preview and save on the fly button – something that 3rd party developers like MapSteps have offered with their Peek-a-Boo plugin.

New Beaver Builder Sidebar panel expected in version 2.0

The new panel an updated tab arrangement for displaying Templates, Rows and Modules and presumably offers key areas for 3rd Party add-ons to co-exist alongside core features. A handy save, settings, preview and close panel buttons site at the top of the panel and expand to show key information / additional links where necessary.

One of the benefits of using Beaver Builder, as pointed out in Part 1, is the ability to use templates and reusable elements to get a site built quickly and efficiently. In this post, we’ll look at how to use row and module templates to do just that.

If you’re new to the TAKE-OFF! series, you may want to catch up on previous posts here.

Beaver Builder Global Settings

One of the first things you’ll want to look at when starting a new website with BB is the global settings. Global settings determine whether or not BB shows your page titles, default row margin and padding settings, and responsive options for your entire site. These are all important options and you should adjust these settings to suit your particular theme options.

Most of the options in the Global Settings modal can be overridden on a page by page basis. So if you’ve left your default row settings to fixed, you can always override this in each of your individual row’s settings.

Getting to the Global Settings dialogue is a little tricky as you have to navigate to a page on your site, initiate the page builder, click on the ‘Tools’ button and then click the Global Settings button in the dialogue that pops up. Pretty long winded! But once you’ve set the options up, you won’t need to visit the settings page too often.

Global CSS and Javascript

You’ll also notice two other tabs in the Global Settings dialogue: the CSS and Javascript tabs where you can add custom code to your website. We add Google Analytics code to the Javascript tab and any if we need to refine the look and feel of our site, we add custom code to the CSS tab. Word of warning: anything you add to these tabs will no longer work if you ever deactivate the Beaver Builder plugin, so if you want your Google Analytics to work despite uninstalling the plugin, then don’t add your analytics code to this box.

Advanced Modules

In our previous post, we took a brief look at some of the basic Beaver Builder modules that come with every version of the plugin. If you’ve bought the Standard, Pro or Agency package then you’ll also get access to premium modules. A full list of all modules available in Beaver Builder is published here. Premium modules currently

• Accordion module overview
• Callout and Call to Action
• Contact form
• Content slider
• Countdown
• Gallery
• Icon and Icon Group
• Map
• Menu
• Number Counter
• Posts, Posts Carousel and Posts Slider
• Pricing Table
• Sidebar
• Slideshow
• Social Buttons
• Subscribe Form
• Tabs
• Testimonials
• Woocommerce – only shows up if you have it installed.

Page Templates

Beaver Builder Templates are a big time saver and one of the most powerful features of the premium plugin. Reuse entire page layouts, complete rows or even single elements to quickly build layouts for your site.

To use Templates, head over to your Page Builder settings in the WordPress backend and make sure you enable all templates from the dropdown and check the tick box, ‘Enable Templates Admin’. Templates act like ordinary WordPress posts and once enabled, will show up in your sidebar as a post type.

There are two types of templates available to you – Core Templates; those designed by Beaver Builder that are included with your plugin purchase and User Templates; those that you will create and save for your own use.  In a later post, we’ll talk about 3rd party templates that you can purchase and import into your site.

Core Page Templates

Beaver Builder Core Templates are often a good way to get a site laid out quickly. They are categorised as Landing Page and Content Page templates. Landing pages give you a total top to bottom layout design. Content pages are designed for particular pages like your About Page,  Contact and Portfolio pages.

You can edit these templates as you like and save them for later use. When you do that, Beaver Builder places your customised template in a ‘Your Templates’ area that you can access in the Templates section of your WordPress admin.

Row Templates

Row templates are powerful reusable elements that can drive whole sections of your site. There are two types; single and global row templates. Single row templates give you access to a saved design that you can amend and change once you’ve dropped them onto your page. In other words, they’re not tied to the original template.

Global row templates are different. You design global row templates once and add them to as many pages as you like. After that, when you update your original global row template design, every row template that is linked to the original will automagically update too!

We use a global row template to add a section for our social links and a menu just above our footer on every page of our site. We use a global row template so that we don’t have to add this separately or edit it separately on every page of our site – that would be a bit of a chore! You can tell if you’re about to edit a global row template because when you hover over it, it turns orange instead of the usual blue of an ordinary row.

You create row templates and global row templates by clicking on the rows spanner icon, click ‘Save As…’ and then give your row a name and choose ‘yes or no’ from the Global drop-down. Click save and your new row template will then be available as a draggable element from the Page Builder ‘Add Content’ sidebar.

Module Templates

Like row templates, you can also make module templates that can be reused over and over. So if you want to design a button that you’d like as a consistent element across your site, then add the button module to you page, style it as you like and then save it as a module template to use elsewhere on your site.

This will save you hours of time tweaking button settings and trying to remember your customised button colours.

Like rows, you can also create global module templates. Global modules are brilliant for adding consistent buttons, forms, menus and FAQs anywhere in your site. Again, like custom rows, if you edit your original global module, every page containing that module will update accordingly. This is a huge time saver and ensures that your site has a consistent look and feel to it.

You can tell if you are editing a global module if you hover over it and it turns orange like the example above. Also, when you save a global module, it will be listed in the sidebar with a ‘Global’ marker.

Wrapping up

So that’s about all for this second post in our series. We hope this shows you just how useful and powerful the Beaver Builder plugin is and how much time you can save by using templates and rows creatively!

Be sure to visit some of the resources in our sidebar where you’ll find more information about today’s topic. If you get stuck you can always refer to the Knowledge Base.

Our next post will take a closer look at the Beaver Builder theme, how to use Beaver Builder child themes and why you’d want to use the Beaver Builder shortcodes in your layout. Until then, be a better Beaver!

Subscribe

Subscribe to our blog posts to be notified just as soon as we hit that publish button!