Skip to content

Beaver Builder Author Templates

This is based on this article in the Beaver Builder Knowledge Base.  It is intended for WordPress theme authors adding Beaver Builder to their packages, but it can be very handy for freelancers and agencies.

Why not use regular saved templates?

With Beaver Builder we can save pages, rows, columns and modules as templates. We can export and import these to other sites is we wish. The downsides are:

  • Clients can delete them.
  • Preview images for the templates need to be in the media library or you need a plugin or code to add via a URL.
  • The preview images for page template are small by default (I did a post on altering this).

Why theme author template?

  • It solves the problems above.
  • Looks more professional.
  • It makes us systematic in saving reusable design components.
  • Gives a way to store centrally our reusable media.
  • Combined with the recent ability to add CSS/JS to rows, columns and module we can really speed up our workflow.

Setting up the templates

The official instruction are here  so I don’t need to repeat them.  I used the plugin method as sometimes I will use a different theme.

The example plugin in the article works as it is, but you can change the names to suit you. . You need to install the plugin on all site that you wish to receive the templates.

The hardest part for me was deciding a format for where my template were going to live. Location wise  I decided on a sub-domain of our business site and called it designs.  Templates sounded a bit cheap and easy so I tend to refer to them as starter designs

I’ve used posts (rather than pages) for creating them so I could add tags and categories.  On my homepage I used WP Portfolio (which I use a lot and was  part of my Astra agency package)  to link to my actual saved templates.

One thing to be aware of is that columns can be exported, but the is no place for them in the Beaver Builder UI.

Theme Author Templates

Showing templates and hiding the Beaver Builder defaults

To show the templates Beaver Builder core template have to be enabled (or have the default of all templates). I did not want the Beaver Builder templates as well and luckly some shared a snippet from the Beaver Builder team on how to unset them:

You just added this to your (child) themes functions.php file

// Hides Front-end Beaver Builder templates. 
add_filter( 'fl_builder_ui_js_config', function( $config ) {
unset( $config['panelData']['tabs']['templates']['views'][0] );
unset( $config['panelData']['tabs']['templates']['views'][1] );
unset( $config['panelData']['tabs']['rows']['views'][2] );
return $config;
 });

Updating templates across sites

When I have established the templates this will rarely be needed. The .dat file will be in my author templates plugin in my boilerplate site for all new projects.

Presently though I am updating via MainWP which I use to update all my client sites. It has a extension called File Uploader that allows me to replace the the dat file in all the site I chose in one go.

One alternative to this could be this Github plugin updater. I have not explored this option yet.

Page Builder Cloud

I’ll be looking at the Page Builder Cloud plugin on my personal blog.  This could be one to consider particularly if:

  • Your have a team.
  • Use multiple page builders (they are working at being able to convert template from one page builder to another!)
  • Want to save forms and fields too.
  • Want a handy place to save experiments.

Pagebuildercloud

Integrations are still being added but presently it supports:

Divi, Elementor, Beaver Builder, Oxygen, Gutenberg, Brizy and …

Pootlepress, Site Origin, WP Bakery, Fusion Builder, Bold Grid plus…

Advanced Custom Fields, Gravity Forms, Ninja Forms, Formidable Forms, Caldera Forms, Essential Grid, and The Grid.

Presently it save only page templates, but being able to save other sections is on their to do list.

Black Friday sale on with 50% off Page Builder Cloud 

BF SALE LINKS MENTIONED HERE:
https://www.beaverjunction.com/go/page-builder-cloud/ 50% OFF LTD
https://www.beaverjunction.com/go/astra/  30% off
https://www.beaverjunction.com/go/wp-portfolio/ 30% off
https://www.beaverjunction.com/go/beaver-builder/ 25% off

Posted in
david-waumsley-web-developer-150x150-circle

David Waumsley

A British chap who helps with websites and whatnot.  Some refer to him as a digital nomad, but he will accepts the term "fugitive" or "international bag lady".  He actually builds websites for a living. Yeah, I know!

Leave a Comment





Do NOT follow this link or you will be banned from the site!