Beaver Builder Row Background Image Fix

The title says it all “Beaver Builder Row Background Image Fix” but first a little background to the issue. This code snippet helps when you are using a Beaver Builder Row Background with an Image and using either a CDN (Content Distribution Network), or a service such as CloudFlare or you have hotlink protection on your images.

TL;DR: Skip to the Beaver Builder Row Background Image Fix Solution

How did we get here?

Beaver Builder is a fantastic plugin that allows for drag-and-drop layouts with ease and it takes WordPress to the next level. The layout is built with rows, similar to a grid system and each row has quite a few options to choose from.

Learn More about Beaver Builder

For Example, in the screenshot below we have a row.

• The Green Box is the row with a background image
• The pink and yellow boxes are columns within the row
• The Pink box has an image within the element
• The Yellow box has an icon list

The Issue

The background image would only show when logged in. Sometimes it would not show at all with the row background or it would just show as a white background which is not intended.

We attempted to clear the cache on our host, WP Engine, the Beaver Builder cache (located in the settings) and the Cloudflare cache (located on the dashboard).

Nothing worked. Thanks to the wonderful tech support from the Beaver Builders support team the issue was resolved with a code snippet.

To begin working on a new layout, drag and drop a row layout of your choice onto the page. Mouse over the row that you just dragged onto the page to see a set of icons that show the available actions for that row.

Set the layout to have a background. The blocks of the layout itself are called a ‘row’, and within the row itself, you can have columns and other elements such as titles, text, and images.

For the row’s background, you must set it to an image in this example. What happens is Beaver Builder

Beaver Builder Row Background Image Fix Solution

Fixing this is done by adding a code snippet to your fuctions.php file.

I recommend making a backup and editing the file via FTP when possible.

Explanation

• Add this to your functionality plugin or to the functions.php file
• The first URL is your actual URL – mine is https://pressavenue.com
• The second URL is your CDNs URL

// The first URL is your actual URL. The second is your CDN url.
add_filter( 'fl_builder_render_css', function( $css ) {
	$css = str_replace( 'https://pressavenue.com/', 'https://your.cdn.com/', $css );
	return $css;
});

See the Gist below

https://gist.github.com/JohnBunka/47fac8c1f649e05ec3dd9b710e846a0a

Have a question about WordPress for Business? How to help your clients with WordPress? or a theme? Just ask here and we will answer it via the #AskBunka show

Have a question? Ask on our free Facebook Community Group. We would love to help answer your questions.

WordPress Community & Help Group https://www.facebook.com/groups/pressavenue/