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.

• Added the ability to drop columns into columns.
• Added the ability to drag and drop existing columns.
• Made multiple improvements for more accurate dragging and dropping.
• Added responsive settings for margins, padding and borders.
• Added new content page templates.
• Template images are now loaded via HTTPS.
• Added the ability to open a lightbox via a button.
• Added the ability to add an alpha slider to color fields.

There has already been much buzz about the columns in columns and the ability to drag-n-drop columns. so let’s take a deeper look at one of the other new additions you might overlook.

Lightbox Option for Buttons

Now there is a new option called Click Action where you can select between Link and Lightbox. Link behaves like you expect a button to behave, by linking to somewhere. The lightbox option opens a simple html editor for adding content, then opens that content in a simple lightbox.

Lightbox Content Type For Video

If you want to open video in the lightbox, there is a Content Type option where you can simply paste the link.

The options are few so those who need more options will want to look for a suitable addon, such as Power Pack for their modal popups module.

How did you come to WordPress? For many in the WordPress community, especially the do-it-yourself-ers who have no interest except to maintain their own website, you were using WordPress to blog before you ever considered customizing the theme or making unique pages. For the website designer or developer, however, our path to discovery tends to be driven by the needs of our customers.

My discovery started in about 2008 with a brother asking me which I thought was better for him to use for his own site, Joomla or WordPress. I was building Facebook apps at the time and hadn’t been building sites for clients in about eight years, so I hadn’t heard of either at the time. That didn’t stop me from realizing the incredible value WordPress was for developers and it wasn’t long before I pivoted away from Facebook development to building client projects in WordPress exclusively.

It was probably four or five years later, however, before I wrote my first actual blog post. I was never a blogger, I was a developer. I didn’t have time to blog. Besides, what would I write about, I’m a boring developer. [Side note: Interesting parallel to my current excuse for why I don’t use Instagram more.]

Eventually I was pivoting away from being a freelance developer to bootstrapping an agency and started paying attention to marketing, more specifically the eventual buzz word worthy inbound-marketing.

I started adding how-to articles on my website. Usually I was explaining to myself how I did something interesting to me. They were also based in tools I used and was often a recommended developer for.

The benefit to me was not in large amounts of traffic to my blog. There’s no one in the world who understands what web developers do who would consider me a guru. But time after time, as potential clients would find me through Google searches on the issue they were having. Finding my article added credibility when they later considered hiring me.

I’ve also shared that proud moment Sal referred to in his Wordcamp talk when Google directs you back to your own article that you hadn’t even remembered writing.

Read Sal’s accompanying article for his WCUS 2016 talk, How Blogging Helps Me as a Developer.

I know I wrote about this as past tense, but I still write on. Different brands and different goals, even using better authors whenever possible, but the value of inbound marketing to the developer far outweighs the time loss.

What’s your experience been?

Hello. I’m Michael Davis. Some of you may have seen Ian’s post in the Beaver Builder Facebook group last month seeking someone to take over Beaver Brains. While he loved creating and operating Beaver Brains, a job change was forcing him to realize he needed to let it go. Over the next few weeks Ian received a number of proposals, mine included and before I knew it I was having an Oh Shit! moment when I received Ian’s email saying he had picked me. Now what!?!

While I have grand plans for the future of Beaver Brains, the immediate challenge has been to make the transition as smooth as possible. There has still been a few hiccups, but for the most part they should be ironed out now. Please reach out to me here if you catch a bug that got past us.

New Sites in the Showcase

Browse the showcase any time you are needing some inspiration.

Beaver Builder Plugin

This biggest news in November for the Beaver Builder plugin is that it’s almost over and December means we’re mere days away from the release of version 1.9,, a.k.a. Shasta, and the release of the most saught after feature since the day the beaver was born, columns within columns. Columns are going draggable so you can drag one or more colums and drop them into any other column. Smooth and easy!

Here’s a couple of videos to tease you while we wait for a first week of December release. If you can’t wait, however, the latest beta (0.2 at the time I’m writing this) is available from the downloads page within your account.

Matt Maderios, of The Matt Report podcast, made a video about the Shasta Beaver Builder update.

Also have a look at the official preview video from Justin in the Shasta Update post from Beaver Builder.

New Module added to Power Pack

Example of Fancy Heading with Clip to Image option

Power Pack from Beaver Addons received a new module in November. Fancy Heading gives you a few new ways to customize your headings. Check out other examples in the Power Pack Demo.

Swag Love

Have you seen the Beaver Builder Swag store? I couldn’t resist buying a couple t-shirts as soon as I saw the announcement. Not that I needed more geeky t-shirts, but I do live in The Beaver State of Oregon so I felt an urge to represent.

Important Links

• Every product made for Beaver Builder by anyone
• How to get started with Beaver Builder
• Showcase of site built using Beaver Builder

Michael’s vision for the future of Beaver Brains includes expanding the current resources and introducing new tools and features for the Beaver Builder community.

When I started out looking for a new owner, my ambition was to find someone with the resources and know-how to take Beaver Brains and elevate it to the next level.

Michael showed both the capability, energy and enthusiasm required to take on Beaver Brains and so I am really excited to hand it over to him and see his exciting plans unfold.

I would like to thank everyone in the Beaver Builder community who made my journey, creating Beaver Brains, such a great experience. I’ve made some great new friends that I take away with me to cherish.

See you soon and always; ‘Be A Better Beaver!’

Ian

Beaver Builder has released more news about their upcoming plugin and theme releases and 3rd party developers have been busy with their own new updates. Here’s a rundown of the latest and greatest…

Beaver Tunnels 2.0

The awesome plugin, Beaver Tunnels just updated to version 2.0 and got a total brand makeover and a new website too. This is one bit of software we could not do without and the new updates extend the power of Tunnels even further. The new Tunnels includes an updated user interface in the admin back end making it easier to define display rules. There are a few new display conditions including page types, cust0m post types and time-based conditionals. If you’re running Beaver Builder in a white label environment, Beaver Tunnels now respects those settings too. More about Beaver Tunnels on our product page and watch David Waumsley’s YouTube review.

Free theme from Beaver World

Beaver World released an amazing new e-commerce theme for Beaver Builder users called BSHOP based on WooCommerce. The theme is very clean and well laid out and incorporates a nifty cost filter too. If you want to set up shop quick, with a minimal, modern, responsive e-commerce theme, then download the free BSHOP theme now.

Subscribe Form Stylesheets

The clever folks at BeaverAddons have created a simple series of CSS stylesheets for getting those subscribe forms looking great. Like their contact form stylesheets, these CSS rules are brilliant for adding unique effects to your forms. Check out the 5 free styles here.

Beaver Builder October Update

Beaver Builder released an Alpha version of the soon to be released plugin version 1.9. The full release notes are available here. One of the top requested features included in this release is columns in columns. Included is a great update to the responsive settings for row, column and module padding and margin settings allowing for greater control of elements at varying device sizes. Here’s Justin with a rundown of the new features…

Powerpack updates and Discounts

There is no doubting the power of Powerpack and up until the 30th of October you can get PowerPack at 30% discount. That’s $49 Unlimited Sites, 35+ Modules, 20+ Page Templates & 100+ Row Templates, Support & Updates for 1 Year – bargain! Powerpack just updated to Version 1.1.8 and it now includes a new module called content tiles. Tiles displays a block of posts in a grid view with overlay post titles and comes with a few pre-defined layouts – great for blog headers.

Ultimate Addons Releases new templates

Ultimate Addons for Beaver Builder keeps getting more and more powerful and the recent update to Version 1.3.1 brings a new cloud-based template library which includes 40 page templates and 195 section templates. The new Cloud Templates library makes downloading and adding the pre-built page and section designs to your site really simple and reduces the plugin weight enormously.

NEW! Creative Beaver

Creative Beaver is a new initiative by Martin Nickisch Conde that aims to crowdsource ideas for Beaver Builder templates. Martin will build out designs from the submitted requests based on their support through upvotes. It’s a novel approach to creating resources for Beaver Builder and helps to ensure that the community gets relevant resources that include unique ideas. Cast your vote and add your ideas here.

Interviews by David Waumsley

There is no doubt that Beaver Builder makes running a web development agency a whole lot easier. However, web development is an extremely competitive and tough business, requiring dedication, nerves and perseverance to achieve success. David’s interview series takes a look at the workings of a number Beaver Builder based agencies, offering an incredible insight into the success of each of these businesses. In the latest interview, David talks to Dutch-based developer Peter Luit about his work and how his incredible curiosity enables him to get to grips with the real issues facing modern web development.

BeyondBeaver

Finally, Grant over at BeyondBeaver has updated his site – it’s looking amazing and you’ll find plenty of great Beaver Builder tips and tricks on his blog and awesome YouTube channel. Grant publishes plenty of great child themes and templates to help you get your own site up and running fast. Check them out here.

Wrap Up!

That’s it, folks! If you’re enjoying the many festivals around the world, play safe and have fun and for those of you enjoying the first buds of spring – send us some sunny smiles!

In essence, Google Tag Manager is a user-friendly way to manage snippets of JavaScript that send information to third-parties; Google Analytics for example. It also offers a way to for you to run 3rd party services, such as our chat bubble below and our social sharing buttons on the left. Both these services have been installed on Beaver Brains via Google Tag Manager instead of the more traditional plugin route.

Why use Tag Manager?

When you add WordPress plugins to your site, small amounts of code related to that plugin may fire every time a page is loaded, regardless of whether or not the functionality provided by the plugin is required. That’s often not great for speed and certainly not an efficient way to run complex websites. Beaver Builder also allows you to add Javascript to your pages, either globally or layout based but doesn’t allow you to conditionally run Javascript beyond these two options.

Adding code to your site through Google Tag Manager and setting trigger variables, gives you  greater flexibility for rendering code only under particular conditions.

If like me, you’re not a seasoned Javascript coder, then Tag Manager will make the whole process of managing, segmenting and updating scripts a breeze. You keep all of your code, variables and triggers in one place and you can even re-use code and variables across multiple sites.

Give me some examples…

Google Analytics

Most of us are familiar with Google Analytics, installing it on our sites and client sites by adding tracking code through WordPress plugins. Adding tracking code through a plugin usually means that every page and post on your site will send tracking information to Google Analytics. But what if you don’t want a particular page to be tracked? Tag Manager makes it possible for you to add triggers and variables so that you can specify the conditions under which the code is executed. And because it’s all happening in one place, you can re-use the variables and triggers in multiple places.

Beaver Builder Javascript

Beaver Builder makes it possible to add Javascript to pages either globally or on a page by page basis. But you can’t specify more fine-grained execution conditions; for instance ‘don’t fire this javascript if the button on this page is green’. With Tag Manager you do have that control because you can specify page as well as CSS conditions that need to be present for the code to execute. For example, the Beaver Builder Theme contains CSS classes that determine the layout of the overall page – full width or sidebar etc, so you can target pages based on their layouts and execute Javascript only when certain conditions are met.

Our single module pages include Javascript for displaying an extended list of Beaver Builder modules when you press the ‘See more button’. We could have added that Javascript globally or tried to remember to add it on a page by page basis, but Tag Manager makes it easy to only include that Javascript when it knows that the ‘See more’ button is present on the page.

Chat Bubbles

I love Chat Bubbles. They make it really easy for me to make announcements and get talking to our website visitors. But I don’t want the chat bubble showing up every hour of every day. With Tag Manager, I can set time limits on the chat bubble code executing – in my case limiting the bubble to weekdays only.

Social Sharing Plugins

Social share plugins often come in for criticism because they slow page load speed down. With Tag manager, we load our social shares after the page has fully loaded – you can specify that condition in tag manager. We don’t have any social sharing plugins on Beaver Brains – it’s all done with the magic of Tag Manager.

Wrapping up

Because WordPress is so extensible, it’s always tempting to just add another plugin that will ‘cover every base’. However if you need more control over the code executed on your site, then Tag Manager may be the easiest way yet. Plus it’s free!

There are some great Tag Manager blogs out there, read the excellent blog by Simo Ahava’s for starters.

If you need some help getting Tag Manager set up or you have a particular use case in mind, let us know.

Beaver World

First up is a host of useful plugins from developer Chinmoy Kumar Paul. Chinmoy released a number of new plugins and modules, most notably his new Checkerboard module that allows you to create cool checkerboard style post archives. Find out more about Checkboard on our product review page.

Hot off the press is Chinmoy’s new Beaver Lister that adds useful information to the WordPress admin page and post lists telling you if the Beaver Builder page builder is active and which modules are included on the page. Super useful! Chinmoy is adding new products all the time, solving some of the problems community members face when developing in Beaver Builder.

Hot off the press is Chinmoy’s new Beaver Lister that adds useful information to the WordPress admin page and post lists telling you if the Beaver Builder page builder is active and which modules are included on the page. Super useful! Chinmoy is adding new products all the time, solving some of the problems community members face when developing in Beaver Builder. Check out the Beaver World products pages here.

CobaltApps

Next up is the new Beaver Extender plugin from CobaltApps. Eric Hamm has been a long time developer in the Genesis community and his Genesis extender plugin is a popular utility used by Genesis developers and designers. His ‘port’ of the extender plugin over to the Beaver Builder Theme comes at a time when many Genesis developers are looking to take the BB Theme on full time. Beaver Extender adds enormous power to your theme customisation capabilities – check out the video from Eric Hamm here and read more about the plugin on our product page.

BeaverAddons

BeaverAddons released a set of 10 contact form CSS presets to add a little pizzaz to the standard Beaver Builder forms. Add the relevant CSS classes in the advanced tab of your form modules, add the CSS provided by BeaverAddons and see your forms magically turn into unique and stylish elements. Happily, these work on the Contact and Subscribe form modules for Beaver Builder. Get them here.

Beaver Brains

Whilst we’re on Modules, have you seen our new modules page? Every Beaver Builder module is listed along with great examples of how you can achieve unique looks with each of them. We’ll be adding PowerPack and Ultimate Addons modules too. Check out the module page here.

Ultimate Beaver

Thierry Pigot, the developer behind Ultimate Beaver products has released a new plugin called Custom Post Type Template which allows you to create re-usable templates for custom post types. The plugin makes it possible to drag and drop standard WordPress fields along with Advanced Custom Fields to build up powerful single and archive page templates for custom posts. It’s a very powerful solution and by the looks of things, very simple to implement. We’ll be adding our review soon.

Ultimate Addons for Beaver Builder

Coming this week (today perhaps?) is Ultimate Addons‘ awesome collection of Cloud Templates. This is a hugely anticipated update to the Ultimate Addons suite and will include over 30 page templates, all hosted in the cloud and ready to download at the touch of a button. lead Developer, Sujay Pawar has released a video showing the feature over on his YouTube channel.

That’s all for this week, folks! I hope these additions to the Beaver Builder community will give you super power web design strength!

Images offer a valuable way of attracting visitors to your website and online store. People use services like Facebook, Twitter, Pinterest, Instagram and Google image search every day when looking for websites and products that suit their search criteria. In order to get those images in front of potential customers, search engines need to be able to index them correctly. Here are a few tips to get the most from images in Beaver Builder.

Optimize your images

Huge images are bulky and inefficient – they’ll slow down your page load speed and penalize your overall ranking in search engine results. There are a number of tools to use that optimize images once they’re in your media library, but that adds more workload to your server. Simply optimizing before uploading should do the trick.

Use software like Adobe Photoshop or Sketch to optimize your images or alternatively use free software from GIMP, available for Mac and Windows.

WordPress does a lot of its own optimization to the images it creates when you add media to your library. If you’d like to know what WordPress is doing when you upload media, take a look at our article on compression and responsive images here.

Tag your images

Tagging images with a proper title, alt tag and description helps search engines understand what your image is about. Search engines use the HTML alt-tag associated with the image, so that’s where you need to focus your attention first.

The Title attribute, which provides the image tooltip, is sometimes used by search engines but it’s less important than the ALT tag. Don’t stuff the alt-tag with too many keywords – 125 characters is the recommended maximum, and between 4 to 7 words is regarded as best practice.

WordPress won’t add the alt-tag or title attribute data to your images automatically so it’s up to you to add it manually on upload. There are plugins that can help out with that but we recommend adding this data yourself for optimal results.

Schema.org

Beaver Builder uses schema.org markup to add metadata to images used throughout your site. It won’t add data to every image – that’s often not necessary. However, it will add code to images that have context on your site like your logo. Here’s the code added by Beaver Builder to the head section of your site’s HTML for a header logo:

Using structured data this way gives search engines more scope in understanding the usage and context of images on your site.

More about using the ALT-tag

So we know search engines use the alt-tag as the primary snippet of data to understand your images. How do you go about adding data to your image? You can do it a number of ways; either when you upload the image or by editing the image in your media library. In the example below, we’ve opened the image up by clicking on it in the WordPress editor, allowing us to add the necessary data to the Alternative Text field.

When you add an image to your layout without an alt-tag or title attribute, the final HTML output will look a bit like this:

If you don’t add any data to these fields, you’ll see the image on your layout but it won’t have any useful information associated with it. This image below has no additional data added to it which in turn means it won’t be indexed by search engines.

A better image example

To enable search engines to index your image properly, we’ve opened the image in the editor and add relevant data to the ALT-tag and Title Attribute. This results in the following code included in the HTML that search engines will be able to use.

Using images in Beaver Builder from Beaver Brains

Using images in Beaver Builder Modules.

Not all modules are equal. Juan Carlos Duron’s post on the Beaver Builder Facebook Group made a valid point about the way Beaver Builder modules render image metadata.

Photo Module – The standard Photo module includes alt-tags and in addition, adds schema markup to the images.

Gallery Module -includes alt-tags and schema markup in all images.

Content Slider – includes alt-tags and schema markup in all images.

Row Backgrounds – Beaver Builder references the image in row backgrounds in CSS rather than the HTML. Search engines, therefore, won’t be able to index the image. It adds the image to the CSS rather than the HTML as it needs to manipulate the image properties according to the row background settings.

Slideshow Module – The slider module works in much the same way as row backgrounds, adding the images without alt-tags. Again, not great if you intended search engines to index your images and if you prefer using an SEO friendly slideshow plugin, perhaps Metaslider is a good alternative.

More and more data – using Open Graph

When visitors to your site share blog posts or images to Facebook or Pinterest, these services will use Open Graph metadata to create cool previews of your content. Plugins like Yoast SEO add Open Graph meta data to your site’s <head> section which includes image data for file type, width and height. Open Graph uses the image title instead of alt-tags, so it’s import to title your images correctly.

Here’s an example of the Open Graph HTML code used. The image referenced in the og:image path is the image used for the preview on social media pages.

Twitter uses similar code to Open Graph but they have their own framework for displaying images in Twitter cards. If you’ve filled in the necessary information in the social sharing section of your SEO plugin, you’ll be good to go.

Yoast has a good article on alt-tag optimization here.

Wrapping up

As we’ve seen, there is a lot of hidden data used by external services to interpret and understand your content. Search engine ranking relies on this data to be present to help them deliver relevant results and whilst there are ways for you to add the data, it’s really important to know that WordPress, Beaver Builder and SEO tools deliver the data as intended.

If your site relies a lot on product images to attract visitors, make sure you add metadata and use modules that include the alt-tag in HTML code.