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.

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.

What is Bootstrap?

Bootstrap is an HTML, CSS and JS framework for developing responsive, mobile first, websites – and Beaver Builder ships with it out of the box.

Whilst BB has lots of modules to do cool things, including awesome row & column modules, Bootstrap has some additional features that are not covered by the plugin. So it’s good to know that you can achieve more by simply using built in Bootstrap code. Being Bootstrap, everything you add is responsive too.

How to use it

Most of what we’re going to use is based on Bootstrap CSS helpers. Applying them to elements on your layout is quite easy and in many cases simply a matter of adding extra CSS classes to your html markup. By using Beaver Builder’s HTML or in some cases, the Text module, you can add these examples to your page quite easily.

Our favorite CSS helpers & components

Transformation classes

Lowercased text.
Uppercased text.
Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Marked text

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

Blockquotes

Whilst the WordPress text editor makes it easy to add block quotes, this example makes it easier to add a quote source too.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Horizontal description

CMS

Wordpress

Page builder

Beaver Builder

Description

Save time and stop writing code. Beaver Builder is a powerful and flexible drag and drop design system. Whether you’re a beginner or a seasoned professional, you’re going to love taking control of your website with Beaver Builder.

<dl class="dl-horizontal">
 <dt>...</dt>
 <dd>...</dd>
</dl>

Tables with Striped rows

<table class="table table-striped">
  ...
</table>

Contextual colors

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Contextual backgrounds

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Buttons

Default Primary Success Info Warning Danger Link

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Display a Link as a Button

Primary

<a href="#" target="_top" role="button" class="btn btn-primary">Primary</a>

Buttons small and large

Extra small button Small button Default button Large button

<button class="btn btn-primary btn-xs" type="button">Extra small button</button>
<button class="btn btn-primary btn-sm" type="button">Small button</button>
<button class="btn btn-primary" type="button">Default button</button>
<button class="btn btn-primary btn-lg" type="button">Large button</button>

Labels

Default Primary Success Info Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Alerts

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

This is just a small selection out of the many options Bootstrap has to offer. You can see a full list of bootstrap’s magic here.

Beaver Builder is made for live, front end editing. So you can design and view the outcome of your pages instantly. You’re not left sitting in the admin area of WordPress wondering what your page design will look like when you hit publish.

Whilst this is possible with Visual Composer and Divi, both of these page builders use shortcodes to wrap and display your content.

That may not seem like a big deal at first, but if you publish a lot of pages, or you end up developing a lot of WordPress websites using these tools, over the years, you’re placing a lot of pressure on your time if a client decides they won’t pay you for retrieving their content from a tangle of code.

At some stage in the future, if Visual Composer or Divi stop working, or the developers no longer support the product, you may be left picking your content out of a lot of shortcodes.

Here’s what you could be left with…

All of that, just to display these three elements on the page.

Beaver Builder handles this differently. If you turn the plugin off, it’ll leave your content intact with no extraneous shortcodes to remove. Jonathan Perez explains.

This is the one outstanding difference between Beaver Builder and other page builders. There are pros and cons for every page builder, but for us, this one difference makes all the difference.

The content Grid is one of PowerPacks’ most effective, well-produced modules for Beaver Builder and extends the standard blog post with easy to set up filtering, read more buttons, categories and featured image options.

You only get this sort of power with standalone plugins like ESS Grid and others. So to have this as a single module in PowerPack is worth the price of the add-on alone.

David has also set up a demo site where you can explore and play with this and other PowerPack modules. A really valuable resource if you need to explore PowerPack before purchasing.

Step 1: Create the Subscriber form

One of the advanced modules in Beaver Builder is the Subscribe module which allows you collect subscriber names and email addresses from your website visitors. The module has loads of great built-in services like ActiveCampaign, Mailchimp and more and is really useful in allowing you to create lists using these various services. However, none of these services is able to detect when you hit the publish button, so whilst they are great for weekly or monthly campaigns, they’re not so good for new post notifications.

Within the Beaver Builder ‘Subscribe’ module is an email option that allows you to send an email to a specified address containing the contents of the form. So if you’re collecting names and email addresses, you can get the module to send an email with the following information:

Subscribe Form Signup

Email: {{emailaddress}}
Name: {{name}}

This information is then used in step 2 by the Zapier Email Parser. Using this technique means you don’t need to install any Zapier plugins on your website for new post notifications.

Step 2: Using the Zapier email parser

Zapier is a powerful online app that allows you to tie up multiple online services. What I like about Zapier is its ability to write out multiple steps in its interface allowing you to create quite powerful waterfall actions from a single trigger.

Zapier also has a really simple and free email parser which again, gives you a way of picking out information from emails you send it. Head over to parser.zapier.com and set up an account to create your first parser. You get an email address that you can customise and then use within the Beaver Builder Subscribe module to send your emails. Zapier saves this as an app option in its main interface to allow you to use out the information to build your subscriber list database.

Step 3: Storing values in Zapier

In Zapier,  we can create a new Zap that triggers when the parser receives an email, pushes the value onto a list using Zapier Storage and sends out a confirmation email to your new recipient.

STEP 1: Set up a new Zap to trigger when the parser receives a new email from the Beaver Builder subscriber module.

STEP 2: Save the values in Zapier storage

Setup a confirmation in your routine to send out an email and allow your user to unsubscribe too

As this is a new post notification rather than a newsletter, you’re slightly at ease when it comes to double-opt ins but it’s always good to have an Unsubscribe option in this email in case someone is up to no good.

Step 4: New post trigger

Again, using Zapier, we can set up a simple new post notification to trigger whenever a new article is published on your website.

Using the Wordpress trigger along with the Zapier Storage and Email actions you can build a routine to notify your subscribers whenever you publish a new article.

We use the Wordpress app to pull out the post excerpt which we can then use to populate the email notification sent out to our subscribers.

You can add all sorts of intermediate steps into these routines if you like to be notified of new subscribers and to add new subscribers to other lists like ActiveCampaign or Mailchimp. So as a starting point it’s a great way to build up lists without having to add further plugins for each of these services.

Unsubscribe

It’s always good and necessary to allow a simple unsubscribe routine at the base of each of the emails you send out. In our follow-up post, we’ll show you how to create a form on your website that is dynamically populated by creating a URL such as https://yourdomain.com/?unsubscribe=emailaddress generated in your newsletter footer.

Using a similar routine you can then pass that information to Zapier to remove the subscriber from your list.

Conclusion

We like using this routine as it means we don’t need to add more plugins or services to our website. If you run a website with a team, be careful that each of them is aware of how this functionality is achieved otherwise you may end up with some members confused by the way your notifications work. Be mindful of your country’s regulations when it comes to privacy and collection of personal information too.

If you are using the Beaver Builder theme, you can add social icons to your header and footer by setting your social networks and the header options in the theme customiser. But what you get is a pretty standard affair…

The default Beaver Builder social icons selected in the WordPress Customiser displayed in the header top bar

Head to the WordPress customiser if you want to use the default social icons in the header top bar

By adding a bit of code to the WordPress menu, you can craft your own colourful icons

The final result with font awesome icons showing up in the top bar

By utilising the Font Awesome library that comes with the Beaver Builder theme, plus a little CSS styling, you can achieve a much better result and the same code can be used just about anywhere you’d like your icons to appear.

Because the Beaver Builder theme loads the font awesome library automatically, you can use the icons anywhere you like. – hence this: Facebook this: Twitter and this: Instagram

Just don’t swap out to a non-font awesome theme later on!

Error!

To get Font Awesome icons into your menus, follow David’s article over on his blog and be sure to visit his YouTube channel where you’ll find plenty more useful Beaver Builder tips.

WordPress jpg compression

When you upload a JPG image to your media folder, WordPress automatically applies an 82% compression to the file. WP does not apply any compression to your original file, it only applies the compression to the images it creates for the thumbnail, medium and large image sizes that it creates on upload. The original stays just that, original. WP won’t try and apply compression on any other img type either.

So if your original JPEG image was exported from your desktop software at 75% compression, be aware that WP will apply it’s own 82% by default on top of that when it creates your thumbnails, medium and large sizes. Again, the original file will not be touched.

If you don’t want WordPress to apply compression to the images it creates, then you can add this code to your child theme’s functions.php file and set the compression argument to 100. Similarly, you can set it lower if you’d like it to add more compression.

If you add this code, WP won’t change the compression settings for existing files, you’ll need to run Regenerate Thumbnails to get WP to apply the new settings.

Setting pixel sizes for thumbnails, medium and large images

To set the pixel sizes for the thumbnail, medium and large images, head on over to the WordPress dashboard and click on Settings > Media. There you’ll be able to change the dimensions for each of these default media sizes.

When changing settings for the thumbnails, WP can either ‘soft’ or ‘hard’ crop them depending on whether or not you check the box, ‘Crop thumbnail to exact dimensions (normally thumbnails are proportional)’

If you check the crop box, WP will scale the image from its centre point until the shortest edge matches the pixel dimensions set for the thumbnail. It then crops the remaining image outside of the thumbnail area. A soft crop scales the entire image down to fit within the box so that no part of the image is hidden. Check out this article for a great explanation.

The medium and large sizes are scaled to a maximum pixel dimension so your portrait images will be a maximum of 300px tall for medium and 1024px tall for large if you have set a pixel height of 300 and 1024px respectively. Similarly, a landscape image will be resized to a maximum of 300px wide for medium and 1024px wide for large. You should set these max image dimensions to suit your particular theme.

Creating additional image sizes

If medium and large images just don’t cut it and you need additional images to be created on upload, then adding this code to your functions file will tell WordPress to create an additional image based on the criteria specified.

The code above tells WordPress to create two additional images, one hard cropped, the soft cropped and you can then choose these images from Beaver Builder’s photo module when adding an image to your page.

Beaver Builder breakpoints

Beaver Builder has two responsive breakpoints by default, 992px for medium devices and 768px for small devices. You can alter these values by going to Tools > Global Settings > Responsive Layout but you only have two break points to work with. These breakpoints are important as you’ll see later as they determine when your browser starts looking for your large or medium images instead of displaying the original. Beaver Builder 1.8 introduced stacking order on columns allowing you to reverse the columns order on mobile – David Waumsley has a great video here outlining the technique.

Beaver Builder photo module

When using the Beaver Builder photo module, you tell BB which image size to use from the module size dropdown. In my tests, BB also gave me a few suggested smaller sizes based on the column or row I was inserting the image into. If you’ve defined custom sizes in your functions file, these will also be listed here for you to choose from.

BB then inserts your image and scales it to suit the containing column size. So if you insert, say a 1024px wide ‘large’ image into a column size of 900px, BB will scale it down to fit the column width. If you then resize your viewport, your browser will continue to scale the image until you reach your defined breakpoints.

The srcset img tag

BB adds code to enable your browser to know what image to use for each of your breakpoints. It will then swap out the large for a medium image according to rules set by the code below. It does this because BB supports the srcset img tag. Basically, what’s happening here is that BB is saying to the browser, here’s the image I’d like you to display by default; use this one if the viewport is bigger, use this one if the viewport is made smaller. Using an example of an image displayed on this site, BB is displaying versions of an original image of 1136px wide in the following manner:

<img class=“size-large" src="https://builderbrains.com/my-image-1024x789.jpg" width="1024" height="789" srcset="https://builderbrains.com/my-image-1024x789.jpg 1024w, https://builderbrains.com/my-image-300x231.jpg 300w, https://builderbrains.com/my-image-768x592.jpg 768w, https://builderbrains.com/my-image.jpg 1136w" sizes="(max-width: 1024px) 100vw, 1024px" />

Let’s see what’s going on:

img class=“size-large" src="https://builderbrains.com/my-image-1024x789.jpg" width="1024" height="789"

This is setting a class on the img and telling the browser to use the large image by default. It’s telling the browser that the image width and height are 1024 x 789px. If your browser doesn’t support the srcset img tag, it will fallback to using this image by default.

srcset="https://builderbrains.com/my-image-1024x789.jpg 1024w
Here we’re telling the browser that for a viewport wider than 1024px then use the image called my-image-1024×789.jpg which also happens to be the size-large img.

https://builderbrains.com/my-image-300x231.jpg 300w
For viewports between 300 and 768px wide, use the my-image-300×231.jpg

https://builderbrains.com/my-image-768x592.jpg 768w
For viewports between 768 and 1024px wide, use the my-image-768×592.jpg

https://builderbrains.com/my-image.jpg 1136w
For viewports over 1136px wide, use the original image.

sizes="(max-width: 1024px) 100vw, 1024px"
This last section is telling the browser that if a viewport is bigger than 1024px wide then the image used must fill 100% of the container otherwise if it’s smaller then it should be displayed at 1024px wide, until of course, the smaller images come into play.

The browser and Beaver Builder are doing a pretty good job of automating this in the background and for the most part, this will suit most people. However, there may be times when you want to tweak the settings and in that case, you’ll need to use a Beaver Builder HTML module and write the corresponding code accordingly.

So in conclusion, for me it seems best to have a design strategy in place to determine the best default image sizes for your website’s layout. Then set the best thumbnail, medium and large sizes in WordPress media settings and define your own if needs be. Choose the right image sizes in the photo module and if you need to alter breakpoints or override the defaults then the HTML module and responsive global options are your friends!

Have a tip? Please let us know in the comments.

Digging around, I realised that it’s a simple visit to the WordPress Customiser to set the sidebars to always display. Head to Content–>Blog Layout and from the ‘Sidebar Display’ dropdown, choose always. Of course, if you don’t want sidebars to display on mobiles, then leave this option set to ‘Desktop Only’

Head to the WordPress Customiser to set your sidebar display preferences.

But what if you want to reuse your templates on other websites? Perhaps you’ve built a great landing page template on site one that you’d like to use on site two?

Chris Lema has an excellent tutorial on getting this done and shows just how easy it is to export and import templates to multiple sites.