How to add SVG backgrounds to WordPress pagebuilders

By Matt Visiwig Dec 8, 2021

How to add SVG backgrounds to WordPress pagebuilders

In this guide, I will break down how to add an SVG background to your designs on the most popular pagebuilders on WordPress. While there are many pagebuilders in the WordPress ecosystem, they generally all have a similar approach to applying SVG Backgrounds. Please reach out to me, if you find this guide doesn’t apply to a specific pagebuilder.

With that said, let’s go over the basic steps, then see how that applies to specific pagebuilder plugins.

What’s the best SVG Background format for WP pagebuilders?

The answer is CSS, it’s the best format for adding SVGs to WP pagebuilders. The best part is with this method, we don’t have to mess with image files or uploads. The visuals are completely stored as CSS code.

One of the top reasons pagebuilders speed up work is that they turn visual designs into code. That’s why we can still include HTML and CSS, because the code output by pagebuilders is HTML and CSS.

For that reason, we can safely include CSS as long as the pagebuilder allows CSS input, or at a minimum, classes. For instance, Elementor allows CSS input with their pro version, but we have to use the fallback method for the free version of the Elementor plugin.

How to get SVG backgrounds as pure CSS

I’m going to grab a free SVG Background from SVGBackgrounds.com/free. I clicked a design to preview the background and changed the color to purple to match my branding. Next I clicked the EXPORT button and selected the CSS button under the “COPY AND PASTE” section. This places the CSS rules into your clipboard. 

Now that we copied the CSS code, here is what I get when I paste the CSS background I chose.

background-color: #880088;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='100' y1='33' x2='100' y2='-3'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='100' y1='135' x2='100' y2='97'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%237b007c' fill-opacity='0.6'%3E%3Crect x='100' width='100' height='100'/%3E%3Crect y='100' width='100' height='100'/%3E%3C/g%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23a)' points='100 30 0 0 200 0'/%3E%3Cpolygon fill='url(%23b)' points='100 100 0 130 0 100 200 100 200 130'/%3E%3C/g%3E%3C/svg%3E");

Whether you work with CSS or don’t, it doesn’t matter that it looks like a blob of code. The browser renders the visual for you.

You’re ready for the next step, but I wanted to note if you’re more hands on, you can convert your own SVG into pure CSS. 

Where to put CSS backgrounds into WP pagebuilders

In the previous step, we grabbed an SVG Background and copied the CSS code. Now we need to paste the CSS so it’s accessible from any webpage.

Let’s start with the fall back solution, since this should work for everyone. The main difference for specific pagebuilders will be where you place the CSS.

In the WP backend, AKA dashboard, click Appearance > Customize > Additional CSS on the left sidebar menu. 

Note: If you don’t have these options, it is possible that your theme or a plugin is disabling the WordPress customizer. 

A textarea should allow you to input your CSS here, making the CSS rule accessible sitewide. If you want your background on every page on your website, this is the way to do so without messing with theme files.

You’ll need to ensure your CSS code is wrapped in a selector, or in simple terms: your CSS needs a class name. Replace the placeholder message /* CSS code here */ with your background CSS from the previous step. Then copy the the entire code, and paste it into the WordPress CSS field.

.your-background{ 
   /* CSS code here */
}

For those of you who have not messed with CSS, note the . (period) before the class name .your-background. Ensure you include that period when you copy and paste, otherwise this will not work. Once you add your CSS to the WP customizer textarea, don’t forget to save by hitting the “Publish” button on the top.

With this setup, we can now apply this background on any page by linking the associated class. Let’s take a closer look…

Getting the SVG Background to display on a WP pagebuilder

The final step is to associate the CSS class with a section on your page. For this step, we’ll break down a few specific pagebuilders and how you can add a class to a given section or row. But keep in mind the same steps should work when you select a column or specific element as well. This all assumes your class is still .your-background and that you placed your CSS code in the WP customizer (or moved the CSS code directly to the pagebuilder for the current page you’re editing). 

Elementor (free) – Video demo
Select your section and then open the advanced tab. You should be able to find and type your-background into the class field (no period in the Elementor field). Here’s a full tutorial on Elementor.

Elementor Pro – Video demo
The same technique from the free plugin works here, but you can add CSS directly on sections, columns, or even elements. You’ll find this option on the very bottom of the advanced tab. I recommend using selector instead of .your-background to avoid having to add anything to the class field. Here’s a full tutorial on Elementor.

Beaver Builder – Video demo
Click the wrench icon to open the “Row Settings” and then click to the advanced tab. Under the “HTML Element” accordion menu you should find the class field. Type your-background and keep a space between any classes that may already be present. Note that if you have the paid version, you can put your CSS directly in the “Layout CSS / Javascript” panel instead of the WP customizer, press CTRL+Y or use the main menu to find this panel.

Brizy – Video demo
The class field is deeply nested in the UI, but you can find it by navigating to the section Settings (sliders icon) > Settings (Gear icon) > More Settings > Advanced. You should be able to find and type your-background into the class field (no period).