If you're using Beaver Builder to edit your posts, follow this tutorial to learn how to override a core Beaver Builder module and then use this to create a unique Blog Post layout.
The code in the Beaver Builder Plugin is structured so that you can extend and customize it anyway you want with your own custom code - that's what makes is great and why we're all using it.
Get instant access to a list of over 1000 winning products
With ready-to-go videos you can use in your facebook ads + more!
In this tutorial we're going to show you how to override a core Beaver Builder module so that you can add your own settings for use when editing a Post or Page using Beaver Builder.
To do this, we're going to override the Photo Module and create a new setting which will allow us to extend our larger images outside of our content to create a modern technique you've probably seen around the internet while browsing.
Here is an animation which shows exactly what we'll be creating. Notice how the text content is narrow and the image stretches full width. Then, on mobiles, the image is brought back into the grid to align with the text and other content on the Post.
This is a great effect for two reasons:
- Longer lines of text are harder to digest for your readers so you want to ensure your character count per line is between 50-75 characters long. Any longer and people find it hard to jump from line to line and that causes fluency issues. Fluent reading = better digestion of the content you've sweated out to write so it's extremely important. By reducing the width of the default content section and increasing the font size, you can achieve a character count per line that is within this optimum character range.
- Pulling the images out from the content creates a dynamic, almost magazine like feel and puts emphasis on your images which make for interesting reading. One of the key elements to design that I was taught at university is contrast. In anything you do, you need to have contrast between elements to bring life to your designs.
TL;DR: The larger images contrasting with the other content on the page in the narrower content column creates a design which facilitates easier reading and heightened aesthetics.
Now, here's what the default Single Post layout looks like with the Beaver Builder Theme when you edit it using the native WordPress (i.e. not with Beaver Builder). In the below, we've got an image with a caption and under that some paragraphs of text.
NOTE: This tutorial will focus on customizing the Beaver Builder Theme to create the layout but you can take the logic from this and alter your theme's CSS to work by changing the CSS classes.
Step 1: Disable the Blog Sidebar in the Beaver Builder Theme
This technique will only work for Blogs where there is no sidebar as we need the content to take up 100% of the width of the post and having a sidebar would not make this possible for obvious reasons.
Using the Beaver Builder Theme, log into your WordPress Dashboard and go to Appearance > Customize and then Content > Blog Layout and set Sidebar Position to No Sidebar, as per the animation below.
Step 2: Activate the Beaver Builder Plugin for WordPress to work on Posts
By default, when you install Beaver Builder it is only activated on Pages. Thus, when you go to Edit or Add a Post there is no option to launch the Beaver Builder Page Builder, as shown below.
The first step we need to take is to allow Beaver Builder to be used on Posts.
To do this, log in to your WordPress Dashboard and on the left go to Settings > Page Builder.
Then click on Post Types and CHECK to activate Beaver Builder on Posts (as shown below) and click Save Post Types.
Now when you edit a Post you'll see the option to launch the Page Builder, as per below.
Step 2: Make the content area narrower to allow optimum character count per line for easier reading of your content
Add the below CSS to your child theme's style.css file to pull the content area of the Posts in and make it narrower.
Once added, your Post should look like the below where all content is now in this narrower column. (In the below we have a Beaver Builder Photo Module and then a Beaver Builder Text Editor Module).
Step 2: Add a new Alignment setting to the Beaver Builder Photo module by overriding a core Beaver Builder module
By default, the core Beaver Builder Photo Module has the below alignment settings, including Left, Center and Right.
What we'll be doing in this tutorial is creating a new Alignment setting called Full-width. Any images that get this new Full-width image setting will automatically be pulled out of our content to extend beyond and create the effect we're trying to achieve.
IMPORTANT! When WordPress loads, it checks to see whether files for a specific thing are in your child theme. If they are not, it then checks the Parent Theme and plugins. Beaver Builder works the same way and we'll be leveraging this hierarchy that WordPress uses to load files. We'll copy files from the Beaver Builder plugin into our active child theme and (as we know) WordPress will use these files we copy into our child theme and NOT the files in the Beaver Builder plugin (as our child theme loads first).
To add our new setting to the core Beaver Builder Photo module we need to copy the files for the core Beaver Builder module either into our own plugin OR our WordPress Theme / Child theme.
TIP! The official documentation on how to override a core Beaver Builder module can be found here.
In our example, we're using a child theme of the Beaver Builder Theme so we'll be copying the Photo module files from the Beaver Builder plugin into our child theme.
To do this, login to your FTP client (or cPanel) and navigate to your active Theme's folder (if you're using a child theme go to its folder) and create a new folder named fl-builder. For example, if you are using our Electro CHARGE child theme you would go to /wp-content/themes/electrocharge and create a folder here called fl-builder.
Now, in this new folder named fl-builder in your theme, create a new folder named modules.
Next, navigate to the Module files in the Beaver Builder plugin's files in your WordPress install by going to /wp-content/plugins/bb-plugin/modules.
As stated, we're wanting to add a new alignment setting to the Photo module in this tutorial, so copy the Photo folder and paste it into the fl-builder folder you created previously inside your theme. So, if you're using our Electro CHARGE child theme, you're going to copy the Photo folder from /wp-content/plugins/bb-plugin/modules to /wp-content/themes/electrocharge/fl-builder/modules.
Now that we've copied the Photo Module into our active child theme, we can edit these files and STILL update the Beaver Builder plugin - how powerful is that!
Let's add our new Alignment setting to the Photo Module.
Using your cPanel or FTP go to /wp-content/themes/odw/fl-builder/modules/photo and EDIT the photo.php file. This file contains the code of the Beaver Builder Photo module.
Search for the Alignment setting in the photo module (it should be around like 466 of the file photo.php file you are editing) and add our new full-width option as per below. Also, ensure you add a comma to the end of the line which registers the right alignment setting.
Once you've updated the PHP code in the photo.php file to the above to include the new full-width alignment setting, save the photo.php file.
Now when you edit a Photo Module using Beaver Builder you will see the new Full-width setting as per below.
And what's even better is that Beaver Builder alters the CSS class that our Photo Module outputs automatically to match our new alignment setting, as shown in the screenshot below.
We've edited the Photo module in our Post, chosen the new Alignment: Full-width setting and saved the Post. Once we inspect the code we can see the the image now has the css class fl-photo-align-full-width.
This is great because we're going to be using this in our CSS to target the Photo module's with Alignment: Full-width and then expand their width beyond the narrower content area.
Step 3: Add CSS to pull Photo Modules with the new Full-width alignment setting outside of the narrow column
Next add the below CSS into your theme's style.css file (or whever else you prefer to add your CSS to your website).
THINGS TO NOTE ABOUT THE ABOVE CSS
- We are only targeting Photo Modules with the new Full-width alignment setting chosen with the CSS class fl-photo-align-full-width that Beaver Builder auto outputs.
- Change the -160px margin value to whatever suits your theme settings. For example, in our demo the web content area is set to 1100px wide, whereas if you have a different setting you will need to alter the -160px value to either pull out the image more or less.
IMPORTANT! When using this technique your images must be AT LEAST the width of your content area. For example, if your content area is set to 1100px wide, your images need to be AT LEAST 1100px wide.
And congratulations! Below is the final outcome of this tutorial and what you've just created for yourself.
Now you can go about creating those modern Blog Post layouts that you see around the web using this design effect.
Wrapping it up
In this tutorial you've learn how to override a default Beaver Builder module. Using this, you can create your own unique Beaver Builder Modules and really unlock the power of Beaver Builder.
Understanding how Beaver Builder modules are coded makes using Beaver Builder just that much more fun as you know how each thing you're putting into your page functions and works. For example, when you drag one of the powerful modules from Ultimate Addons for Beaver Builder (UABB) into a page, now you now how UABB have coded the modules and, if anything, you can appreciate the effort third-party module developers put into coding these for our use.
Please comment below and let us know if this tutorial has helped you.