Use the Beaver Builder theme and aways wanted a full width post page?

Well recently I created a hero header that placed the featured image in the background of the header, overlayed with the post title, meta data and breadcrumbs. 

For this to work, I really needed a full page post. Below are 2 screen shots, one is the default BB layout with meta and sidebars disabled, as well as my Post Hero Header module. The second is a common site and what I wanted my post page to actually look like.

Default BB post page
Divi Screenshots

Customise my Module

This first thing we need to do, is with the module in place on its own row, remove all the padding ans margins from both the row and the module under the Advanced Tab.

The other thing we need to do is hide the default post title, that is included in the theme, using the simple select field in the module.

Remove margins & padding
Hide default theme title and meta

The Beaver Builder Theme

The Beaver Builder theme is built on Bootstrap, so let's jump over to the Bootstrap CSS info page.

You can see the Containers section that shows that container-fluid is the class we need to make the page full width.

See this code
Use .container for a responsive fixed width container.

<div class="container">
 ...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

<div class="container-fluid">
 ...
</div>

The Inspector

I am using Chrome here so the terminology may vary if using a different browser, but the functionality should be the same. If you get stuck, a quick Google of 'Using Inspect with MYBROWSEROFCHOICE' should help find the process.

Make sure you are not in the Page Builder, and then right click on the module you have created and choose Inspect.

A window should appear that will show all the generated HTML for the page.

Scroll up to the top so you can see the first DIV below the header, this is the beginning of your page content.

You will see the first inner div of the page is <div class="container">, this is what we need to change to container-fluid

Container using Inspector

Using jQuery

So what do we need to do? We want to target the single post page where it has the div with class of container, we want to remove that container class and add in the container-fluid class.

Sounds easy right? Well, it actually is so don't be confused.

If you stay in the inspector and scroll up to see the start of the body tag (this is the start of the entire page) you will see it has a whole range of classes in it. This is a function of WordPress, so if you are using a different theme and it doesn't have any classes in the body, its a good indication of a poorly coded theme.

The class we are interested in is single-post.

Jump into the Customizer and go to Code > Javascript Code.

Like usual, the first thing I am going to do is give you the code, and then run through what it is doing, but hopefully it is pretty self explanatory.

(function($) {

    $(function() {

       $('.single-post .fl-page-content .container').addClass('container-fluid');
       $('.single-post .fl-page-content .container-fluid').removeClass('container');

   });

 ​})(jQuery);

So first up we are executing the jQuery when the document loads, that is what the first lines are doing, we are also letting the browser know that is is jQuery and not vanilla Javascript, so we are making sure jQuery is loaded.

It is the two lines in the middle that are doing the heavy lifting for us.

The first line,  $('.single-post .fl-page-content .container').addClass('container-fluid');, is searching the document for the parent class single-post, then in that it is looking for fl-page-content and then withing that class it is looking for the container class. If found it is adding the class container-fluid to it.

The second line, $('.single-post .fl-page-content .container-fluid').removeClass('container');, is doing the same thing, except it is searching for the new container-fluid class we added, and if successful it is removing the class container

Single post body class
New hero header

Cleaning it up

Ok so the full page is almost working, by default Bootstrap adds in a 15px padding on either sider, so we just need to remove that. 

So lets just get rid of that with normal CSS.

We already know the class we need to target (it is the same class we searched in the second line of the jQuery to remove the container class), so lets jump into the CSS Code in the customizer and add the following css.

.single-post .fl-page-content .container-fluid {
padding: 0;
}
Full Width Result

1 thought on “Make Single Post Page Full Width in BB Theme”

Leave a comment