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

Nelson Miller Pee Aye Creative
In this tutorial I will solve a missing Divi feature and show you how to upload your own custom Divi 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. 

Categories: Divi CSS Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

18 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 <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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
  5. Cherry

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

    Reply
  6. Julia

    Hi Nelson. Fantastic tutorial thank you. In the list of pattern resources you included, there’s one https://heropatterns.com/ which is great because you can customise the pattern, but you end up with CSS as opposed to an SVG file. I’ve just spent a couple hours online trying to figure out how to use the CSS code to apply custom backgrounds in Divi using your tutorial but haven’t found an answer. Are you able to help at all ? Many thanks.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart