Solving The Missing Upload Feature
By now you probably head about the Divi 4.15 feature update for background patterns and masks. As soon as I saw it, I instantly noticed a potential dealbreaker – no custom upload option. The development team lead confirmed this also. And as you know, when I notice a missing Divi feature, I solve it! So in this tutorial, I will show you how to upload and apply your own custom Divi SVG background patterns and masks.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
1. Prepare The SVG Files
The first step is to find or create the SVG file and prepare it for uploading to the web. To do this, you first need to understand how the background patterns and masks work.
Patterns
The patterns are very small tiles that are repeated over and over to make a pattern. So your pattern needs to be a “seamless” tile. You can either search form one online or create your own if you have the experience. I personally found some nice options by searching for “website SVG background pattern” and here is a nice post which lists several of the best sources.
Masks
Masks are a little different. Rather than a repeated tile, the ones in Divi are actually one complete file. They are also different in availability. I’m not even sure what you would search for online to find SVG examples, so most likely if you are wanting to use a custom shape then you already know how to use a vector editing program or can hire someone to create one for you. So I don’t really have any other recommendation for sourcing a custom background mask other than making one.
2. Add Custom CSS Class
The second step is to add a custom CSS class to the element, which would be the section, row, or module where you want to add the custom background pattern or mask. So just open the settings of that element and to the Advanced tab, open the Custom CSS IDs & Classes toggle, and add the class .pa-custom-background-mask-1 or .pa-custom-background-pattern-1. You can see that the number system will be very important as you add the custom CSS snippet in step #3.
3. Add Custom CSS Code
The third step is to add the relevant CSS code snippet below for either patterns or masks. Then you can repeat all the steps for more backgrounds on your site, and if you do that then you would also add a new snippet for each pattern or mask.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSSÂ tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Background Pattern
.pa-custom-background-pattern-1 .et_pb_background_pattern {
background-image: url("PASTE FILE LINK HERE")!important;
}Background Mask
.pa-custom-background-mask-1 .et_pb_background_mask {
background-image: url("PASTE FILE LINK HERE")!important;
}4. Upload The SVG Files
The fourth step is to upload your SVG background pattern or mask files. You will need to allow SVG uploads into WordPress first, and I suggest doing that with a plugin such as Safe SVG. Once the plugin is active, you can upload the files to your WordPress Media library. This is important – we are not uploading the files to a page, but to the Media Library itself. Then, once it is uploaded, simply click on the file and click the “Copy URL to clipboard” button. Then go to the CSS snippet from step #3 and past the link into the snippet where it says PASTE FILE LINK HERE.Â
It’s like you read my mind, again! Thanks Nelson.
You’re welcome Greg! Glad I could read your mind.
Maaan, this is sooo cool! This is exactly the single problem that renders this new featur halway useless. Thanks for solving this so fast!
You’re welcome!
This worked brilliantly. Thank you!!!
That’s great Ryan, you’re welcome and glad you found it useful!
Thank you, thank you, thank you! I was so excited for this option, but of course the ones offered aren’t what I’m looking for. This solves all the problems!!
Hey Heather,
We are glad that this was helpful.
dont suppose you have a tutorial on using your own svg shape dividers? i searched and couldn’t find one.
We don’t right now, but are planning one!
This would be clutch! About to jump into doing this on my own, so looking forward to see how y’all do it.
Thanks for this tutorial, Nelson! How would I change the svg colour to white please?