How to make a full width 50/50 post slider with Beaver Builder

Post Sliders in BB work pretty well out of the box. But you can add a little magic to them to do a bit more. In this tutorial, I’d like to show you how we achieved the post slider checkerboard effect shown below.

post slider 1 post screenshot

You’ll notice on the page, two post sliders stacked one on top of each other, one with an image left and post content right and the slider below that in reverse. The Beaver Builder theme is responsive so when you scale down the viewport, the slider automatically stacks to fit smaller screens and in this case, it stacks the image on the top and the post content below for both sliders.

Getting your slider to look and work this way is not as easy as dragging the module to your page and setting 0px on margins and padding. Here’s how we achieved the effect:

Setting up the row and module

Drag a post module to you page and set your row to full width, content to full width. You’ll need to set your left and right margins and padding to 0px to ensure that the post slider fills the entire viewport, edge to edge.

post slider 7 row settings

Next, open up the Post Module settings and make the following edits. We’ve chosen to set our slider height at 500px, with a looped, auto play, fade transitions and arrows displayed. Turn off ‘Show Dots’.

post slider 6 slider settings

For layout settings, choose to show the featured image and make sure you choose Thumbnail as the Image size choice and set it at large size. Crop the image square. Make a choice on whether or not to show post info; this will display in the right hand column under the title.

post slider 5 layout settings

In the style settings, choose your heading text style and then in the text options, choose your post content position – right in our case. Make the text width 50% and then, crucially, make sure you set your text padding to 1px. If you choose 0px here or anything else, it messes up the effect. So 1px is important. When you set it like this, you will notice the 1px line down the left hand side of the image – but I’m guessing you didn’t notice that until I told you. 🙂

post slider 4 style settings

Next, choose which post type to display and filter your posts if necessary.

post slider 3 content settings

Finally, set your margins in the advanced tab to 0px.

post slider 2 advanced settings

Save your module. You’ll notice that the post content text is stuck to image – so to fix that we need to add this CSS. Either via Global settings or layout settings if your slider is only on one page. If you only want to target a specific slider then add a CSS name to the slider’s advanced settings field and add the CSS declaration to this code:

.fl-post-slider-content {
padding: 25px;

That’s it. Save everything the and see if it works for you. Have a better way? Let us know in the comments below.

Posted in

Michael Davis

Chief brainstormer at I'm Not Marvin, a development agency specializing in WordPress Applications. I've been in web development in one form or another since the late 90's. If I can't be reached I'm probably hitting the trail on my mountain bike.

Leave a Comment