New design options for Divi (patterns and masks)

divi pattern

For those who didn’t notice yet, Divi has added some new design options that look really nice and let us give a new face to our site’s content.

If you have Divi up to date you may have noticed some new options that we didn’t have before.

background options

It doesn’t seem like a big thing right now but when we get into it and check its different settings we have a great design tool.

Background patterns

Before, if you wanted to add some pattern to your background you probably had to download it from somewhere change it to your liking and then add it as an image to your website to be able to use it as a background.

But now Divi has its own completely customizable patterns in the visual builder.

background patterns

There aren’t a lot but enough to give a nice touch to your website, and we can customize them in many different ways.

example image
Default image
pattern example
We add the pattern
pattern example with changed color and opacity
We can change the color and opacity
pattern example with changed display
We can change the way we display the pattern
pattern example with different size
We can change the sizing
pattern example with changed pattern
The patterns pattern too 🙂

As you can see we have a lot of ways to change how we use the patterns, in fact, so many that we eventually create new patterns and designs with just some settings.

For example with the same pattern from the previous examples we can get this:

example of new design with patterns

As you can see much different from a simple repetitive cube texture.

But there is more because we can combine not only images with patterns but with the new Divi masks too.

But experimenting is part of the fun so let’s briefly see masks and start getting your hands dirty.

Background masks

Masks are pretty much what the name suggests, a mask over your content that covers it rather than a background element.

background masks

As we can see here we have our image being covered by the mask and it doesn’t look great right now.

example of background mask

But with a bit of color and lowering the opacity, it already improves a lot.

example of background mask with changed color and opacity

From here the settings are really similar to the patterns ones so we really don’t need to go into every single one but I would like to make a few honorable mentions.

Like this one that changes the focus of the mask completely:

mask by default
reverted mask

Or this one that flips the design making it easier to combine it with the content below if the colors match:

example mask
turn around mask

Final thoughts

From here on you are the one that writes the story. Experiment with these new designs and find the new face of your web with the help of Divi.

A final note would be that all these examples have been done with a slider module, but we know that the background settings appear on almost any other module so the options are endless and the results vary a lot from one module to another.

Have fun, experiment, and let us know if you like this feature and if you found it useful for your site.

How useful was this post?

Click on a smiley to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

Your email address will not be published.

Scroll to Top
Skip to content