The most important Beaver Builder addon ever?

Apologies for the clickbait title. The addon I am talking about is not, on the suffice, earth shattering and is still being tested on github. It may even end up in Beaver Builder itself. Hopefully though, by the end of this you will see why I might want to grab attention.

In short

The plugin (called bb code settings)  was made by Justin Busa from the Beaver Builder team. It adds CSS and Javascript settings to the advanced tabs of individual modules, columns and rows. Effectively extending on what we have with page templates and in our Beaver Builder global settings.

What happens is that CSS written like this:

p {
  color: red;
}

gets assigned to the auto-generated nodes and is outputted like this:

.fl-node-1d43q3gf56s p {
  color: red;
}

Why I’m personally excited

I’ll covered this more fully in future video posts, but briefly I’m building my own template library using the same approach as Beaver Builder.  For my use I wanted:

  • My (homepage) templates to contain all the CSS styles so the theme did not effect it’s look.
  • A standard approach to the CSS  so it could act as a crib sheet to setting up the theme styles.
  • To be able to clear the CSS in  page template after the themes was set up.

Until this plugin this was difficult. I wanted to style forms, list items, have hover effects and so on. I did not want to have to commit to any particular 3rd party addons when I could do it myself with custom CSS and JS.

Beaver Builder Own Modules

Even if I did commit to a 3rd party addons I might still need custom CSS or find I wanted something they did not have.  One example is this interactive team gallery I set up:

Beaver Builder Team Gallery
Now, I have the ability to save CSS and JS in modules, columns and rows and save them as templates for reuse. Effectively I have my own addon pack that:

  • Does not need me to learn how to create a Beaver Builder module.
  • Is extremely lightweight as it does not add extra code to deliver the effect.
  • Is something I could share with others.

Of course, there’s no fancy interface, but I find learning where options are is often more time consuming than altering CSS.

At first I thought this was just me being used to CSS, but recently my wife with no CSS knowledge has been altering my templates. What is quite nice is you can add a ton of comments that stay in the builder, but are not outputted. Equally nice my wife’s time is being use learning CSS with is a more transferable skill than finding the options in a plugin.

Could this help with a larger problem?

I think Beaver Builder has done an amazing job since 2014:

  • First creating a developer friendly page builder.
  • Creating a theme builder with Beaver Themer.
  • Constantly progressing with minimal bugs and imperceivable bloat.

Even though the move from themes to page builders has made the DIY market even larger and more lucrative Beaver Builder has remained true to serving the needs of agencies and pro freelancers. Many of which simply can’t go with Page Builders that are competing for the largest share of the market on features and cost.

Yet even amongst those of us who value simplicity and stability, there’s always a need to keep pushing to be more efficient at building sites. This has made me wonder whether sharing templated modules, columns and rows could be the way forward in adding some sparkle and ease to Beaver Builder:

I say this because I think there are these issues with page builder modules:

  • They weigh more than adding CSS/JS directly (although modularization in 2.3 could help with that).
  • Once added it would be irresponsible to remove them.
  • Some options have to be excluded because CSS/JS offers almost endless possibilities.
  • CSS and JS  dynamically changes over time so why freeze them in time?
  • Clients don’t often need to use many modules.
  • Professionals are probably better with code than sliders and buttons.
  • It does not matter how many you have –  it will not be enough. New trends come and go.

Of course, I don’t expect the Beaver Builder community (whatever that is) to suddenly start sharing their templates. In fact it is taking me quite some time to work out a good format for my own. I also wonder if Beaver Builder might need an extra data ID field to make some effects possible (there a github plugin that does that).  But I am interesting in thoughts on this.

It does seem to allow for easier sharing than say creating a plugin that needs supporting and this approach also allows the end user to make it their own.

If you are interesting in me sharing what I am doing please say so in comments so I have your email and subscribe to my YouTube channel if you want to see more on what I’m doing.

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!

4 Comments

  1. Bob Huber Bob Huber on October 21, 2019 at 1:34 pm

    Excellent write-up, David. I can immediately see how useful this add-on be in my own workflow. I always enjoy seeing what you’re up to. It looks like you are really progressing with the whole system you have in place. I am totally intrigued by that too! That is no small feat.

    • David Waumsley David Waumsley on October 21, 2019 at 2:25 pm

      Hi Bob, it is always brilliant to hear from you. Thank you. It’s funny how things change on the page builder journey. Hope you are in good healthy.

  2. james smith james smith on June 5, 2020 at 5:43 am

    I wanted to let you know that this is really an informative guide for beginners like me! I have bookmarked this article and I’m sure these tips will be very helpful for me.

    • David Waumsley David Waumsley on June 5, 2020 at 6:02 am

      Thanks James, I really appreciate it. I have been a bit quiet since this, but I am closer now to sharing more useful design elements for Beaver Builder.

Leave a Reply Cancel Reply