How To Upload Your Own Custom Divi Background Patterns And Masks Tutorial By Pee Aye Creative

How To Upload Your Own Custom Divi Background Patterns And Masks

In this tutorial I will solve a missing Divi feature and show you how to upload your own custom Divi background patterns and masks.
Categories: Divi CSS Tutorials

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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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. 

Last updated Mar 21, 2022 @ 6:20 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

12 Comments

  1. Greg

    It’s like you read my mind, again! Thanks Nelson.

    Reply
  2. Ryan B

    This worked brilliantly. Thank you!!!

    Reply
  3. Heather

    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!!

    Reply
    • Hemant Gaba

      Hey Heather,

      We are glad that this was helpful.

      Reply
  4. Mike

    dont suppose you have a tutorial on using your own svg shape dividers? i searched and couldn’t find one.

    Reply
      • Bobby

        This would be clutch! About to jump into doing this on my own, so looking forward to see how y’all do it.

  5. Cherry

    Thanks for this tutorial, Nelson! How would I change the svg colour to white please?

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart