How To Customize Blog Page Beaver Builder

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 thenContent > Blog Layout and setSidebar Position toNo 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 toSettings > Page Builder.

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

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

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.

https://gist.github.com/a4efc1abfbaf449a2e67cf75a87ddb0d

WHAT YOU NEED TO KNOW ABOUT THE ABOVE CSS

When you edit a Post or Page with Beaver Builder it adds the CSS classfl-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 classfl-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, replacingmax-width: 1020px; with a width that is appropriate to your website.

https://gist.github.com/48acb27b38223f4bb4d3f56ba65a631e

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.

https://gist.github.com/5c4dd51b6e07d95ae277605b30232521

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!