Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

Edit Posts with Beaver Builder and make them full width

Beaver Builder is usually only used for building Pages in WordPress but there may come a time when you want to design a Post using Beaver Builder. Maybe it’s a Feature Post or a Post that tells a story and full-width rows with Beaver Builder will really help you communicate the message you’re trying to get across to your readers.

Whatever your reason, you’ll want to know how to Edit Posts with Beaver Builder and make them full width and this post will show you exactly how to do this with the Beaver Builder Theme.

NOTE: The CSS we use here in this Post relates to the Beaver Builder Theme. You can, however, change the CSS classes in our post to work with the theme you’re using and get the same effect.

Building on our previous Blog posts Set up a blog with Beaver Builder the right way and Create a grid layout for your WordPress Blog in one simple step which run you through some customizations for the Blog, below is what we’ll be creating in this tutorial.

Edit Posts with Beaver Builder and make them full width

This is the final layout we will be producing in this tutorial. The content of the Posts you edit with Beaver Builder will be full width and allow you to drag and drop full width rows into your Posts!

Step 1: Disable the Blog Sidebar

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.

design-fullwidth-posts-disable-blog-sidebar

Disable the sidebar on Posts with the Beaver Builder Theme by using the Customizer. You access the Customizer by going to your WordPress Dashboard and on the left navigating to Appearance > Customize, as shown in this animation.

Step 2: Activate Beaver Builder 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.

design-full-width-posts-settings-page-builder-disabled-posts

Notice how there is no option to edit this Post with Beaver Builder as there is no tab that says Page Builder.

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.

design-full-width-posts-settings-page-builder

Then click on Post Types and CHECK to activate Beaver Builder on Posts (as shown below) and click Save Post Types.

design-full-width-posts-settings-page-builder-activate-posts

Activate editing Posts with Beaver Builder by going to the Beaver Builder Plugin settings page.

Now when you edit a Post you’ll see the option to launch the Page Builder, as per below.

design-full-width-posts

But when we start designing a Post using Beaver Builder, we immediately see that the content does not go full width, as per below, even if we set the rows to be full width.

design-fullwidth-posts-content-not-full-width

Let’s fix this!

Step 2: Make the content area in Posts full width

As we saw above, when we start designing using Beaver Builder, the content is contained and will not stretch to the full width of the page. What you need to do is set the width of the content area to 100% width using the CSS below.

WHAT YOU NEED TO KNOW ABOUT THE ABOVE CSS

When you edit a Post or Page with Beaver Builder it adds the CSS class fl-builder to the <body> element. You can see this below where, on the left, we have a Post that has been edited with Beaver Builder and on the right is a Post edited with the default WordPress editor.

If you compare the CSS classes on the <body> element you can see the class fl-builder has been added to the Post edited with Beaver Builder on the left.

design-fullwidth-posts-comparing-classes

Posts and Pages that are edited with Beaver Builder get the CSS class fl-builder added to the body element in the page which allows you to write CSS that targets only those Pages and Posts that are built with Beaver Builder. This is very useful!

So, in the CSS above, we are targeting the content area of the Posts that are ONLY edited with Beaver Builder and making them stretch full width.

Once you add the CSS above, the Posts that you’ve edited with Beaver Builder will now stretch full width, as per below, and you’ll now be able to edit Posts with Beaver Builder and make them full width.

design-fullwidth-posts-content-full-width-with-post-header

Step 3: Pull the comments and bottom Post Meta back into the grid

Currently, after completing Steps 1 and 2 you will have your comments section and Post Meta section at the bottom of your Post looking something like the below where they are incorrectly stretching to the ends of the page.

design-full-width-posts-comments-stretched

Add the below CSS, replacing max-width: 1020px; with a width that is appropriate to your website.

Once done, the Comments and bottom Post Meta will be displaying correctly, as per below, where they are back in the grid and correctly line up with your logo and menu up the top in your website header.

design-full-width-posts-comments-not-stretched

Step 4: Optionally hide the Post Heading section

That section above with the Post Title and Post author looks a bit out of place. Sure, you can style it with CSS if you’d like, or you can hide it using the CSS below

To hide the Post Header Section on Posts that are editing with Beaver Builder, add the below CSS.

The final result of this tutorial: Edit Posts with Beaver Builder and make them full width

Once you complete the above steps, you’ll now have a full width Post that you can edit with Beaver Builder, as per below.

design-full-width-posts-final-outcome

Comment below

Let us know where you use this technique by commenting below!