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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Let us know where you use this technique by commenting below!