Introducing Two Brand New Design Settings For Divi
Create Stunning Backgrounds By Combining Colors, Gradients, Images, Masks And Patterns!
Today we are excited to introduce Backgrounds Masks and Background Patterns for Divi, two brand new design settings that allow you to create a vast array of new visual effects by combining colors, gradients, images, videos, masks and patterns using a simple new interface. There is a lot to share about these new settings, so keep reading for all the details!
Introducing Background Masks
Background masks use positive and negative space to frame backgrounds and create new shapes. Background masks are placed on top of your background elements and below you content. They work by framing your background colors, gradients, images, and videos; letting only those elements shine through the mask to reveal new shapes. This adds quite a bit of utility to Divi by allowing you to use backgrounds in brand new ways. You can transforming backgrounds into unique shapes that can interact with surrounding content. Masks are built using SVGs, so they are super crisp, lightweight and will automatically conform to the size of your elements.
Choose From 23 Unique Masks
Divi comes with a wide range of wonderful masks to choose from. Masks can also be flipped, rotated and inverted to create different variations. With a few clicks, you can take a rigid design and turn it into something really fun! Background masks can be applied to any element, including modules, columns, rows and sections.
Flip, Rotate, Invert, Change Orientation, Adjust Size And More!
Not only can you choose from 21 unique masks, but each mask can also be customized to create different variations. By flipping, rotating, and inverting masks, you can frame your backgrounds in a way that makes sense for the content that sits on top of your background. You can also choose from different orientations (portrait, landscape and square) to better fit each element. Finally, there are width, height and alignment options for times when you need fine-tuned control.
In addition to adjusting the shape of masks, you can also adjust their color and blend mode. Instead of masking your background completely, you can use blend modes to let your backgrounds and masks mix together to create some interesting new effects.
Introducing Background Patterns
Background Masks can be combined with Background Patterns. Patterns sit on top of your background colors, gradients and images, and below you masks. Patterns overlay your background elements and can be used to add texture to your page. Using background gradients, patterns and masks, you can often forgo using background images completely, resulting in faster, higher-resolution backgrounds that can be built from scratch inside of Divi. These two new options really open up a whole new realm of possibilities.
Choose From 24 Unique Patterns
Divi comes with 24 different patterns to choose from. Patterns can be flipped, rotated and inverted to create additional variations. You can also adjust the color and blend mode of patterns. Each blend mode will affect your background colors, gradients and images in different ways.
Combine Images, Gradients, Patterns And Masks!
Divi now comes with quite an impressive range of background options including colors, gradients, images, videos, masks and patterns. All of these options can be overlaid on top of each other and combined in different ways to create new types of designs. You can also choose from a handful of different blend modules, adjust colors, change sizes and more. You are going to have a lot of fun playing with these options and discovering new and creative designs techniques!
Divi's Background Masks And Patterns Are Available Today!
Background Masks and Background Patterns are available today, so update Divi and let us know what you think in the comments. Stay tuned for more great Divi features coming soon, and don’t forget to follow and subscribe so that you can be the first to know when our next Divi feature is released. I always give a detailed look into each feature and it’s a great way to get up to speed before you update your website. If you are running your websites on Divi, these are videos and posts you really don’t want to miss.
Join Or Upgrade Today For 10% Off!
Today's The Best Day To Get Divi Or Upgrade Your Account To Lifetime
Join the most enthusiastic and loving WordPress theme community on the web and download Divi today. Using the new Visual Builder, you can build websites faster than ever before with its incredibly fast and intuitive visual interface. You have to see it to believe it!
Join Today For 10% OFF!
Renew Your Account Today For 10% OFF!
Upgrade Your Account Today For 10% OFF!
Hey, great feature! I did some tests but the masks and pattern i choose are applied to all sections, not just the one i defined them. How can i solve this. Regards Michael
I love this update
Lovely update! Do you know if it’ll be possible to use the masks on images please?
Amazing update! C
an these masks also be used on the image module? So to use it to create image masks.
My view is that Divi has over-emphasized eye candy design options – most of which are ignored by the majority of site builders, most of which can be easily implemented via custom CSS for those who want them – while certain areas of core functionality remain lacking. Divi has amazing overall functionality and recent page loading performance updates were a huge boost. One important area where Divi remains weak is in the basic blogging ie: journalism or media site category, which the Extra theme was meant to address. Problem is, Extra died on the vine. Its unique modules and features ARE NOT INTEGRATED with Divi Builder. You either use Divi modules on a post or page or Extra modules, and the Extra framework is outdated. Adding Post Carousel and Tabbed Posts modules to the Divi Builder remains my own top request.
Agree. Writing pleasingly presented. I do add photos but overall a leaner, faster theme for reading. I like some eye candy design but for enhancement not the main, ever scrolling and loading goal.
I am already a member (just recently) but there doesn’t seem to be a way for me to download these. What am I missing? I logged into my account but don’t see a button I can use to download. I am a lifetime member already. And I’m still working on my new website now to replace my old one. Let me know how I can take advantage of this deal. Because I’m not real sure what “lifetime access” means if I don’t get anything for that. Thank you.
Hi Anne,
I’m not an ET team member, just another customer 😉
Lifetime Access means u get updates (new features, bug fixes, security updates, etc) and support forever, which it’s pretty awesome!
These and other theme releases are just feature updates that get applied to your Divi as soon as u update it from the WP u have it installed, there are no additional downloads.
😉
Am I the only one rather disappointed by that update?
The latest divi update policy in general seems to struggle. There were only 4 product updates in 2021. The last one was 4 month ago and now we get this. If it continues like that it’s going to be 3 this year. Not much.
I think the masks are good even though I personally don’t like most of the 20 included. The patterns however are a nice feature and I can think of some projects to use it.
But with so many basic functionalities and modules missing I don’t get the point of these new “advanced” features. I would much more love more basic things first. Breadcrumbs, data table, social sharing, custom columns or row in row, row stacking order (for mobile), regular font weight, order and sorting options, local google fonts, pop ups, global heading settings (see responsive helper) or a roadmap. Just to name some. That would really help make the work with Divi better.
Seconded! And really with the inability to load our own custom masks?
Truly awesome, I have been looking for great background images, and this feature masks and patterns in Divi came just the right time! Divi makes my job as a web designer so much easier and most important my customers are impressed with what I can create for them.
It´s excellent! I will try immediately ;))
Thanks a lot!
nice update, any chance for a repeater in the not too distant future
Cool stuff, I right away tried it: https://www.ea-tabelle.at/einnahmen-ausgaben-rechnung/
Will save lots of time!
Thank you for this wonderful product, using it for almost 10 years!
I really enjoy these new updates, which are amazing, and hope for more new features in the future.
Love ❤️ Divi
Hi Nick! Great update, I was hopping for this for a long time, thank you. But I got to confesse I got a little disapointed. It would be great if you consider to add an option to upload our own patterns and masks in PNG or SVG. 23 or 24 patterns/masks it’s a great start but its kind of limited. Can you guys please consider this option in the next update? It would be amazing! Thanks 😀
Very good suggestion. I would like to see the option of uploading your own SVG for the divider shapes as well. And for those who will be using this feature, enabling SVG for wordpress, will not be a problem.
Hi Jorge,
WordPress doesn’t allow users to upload SVGs because they can contain malware. However, we could potentially allow the uploading of PNG based patters, and SVG patterns if the website owner changed the default WordPress security measure. Thanks for the suggestion.
Hi Nick! Thank you for the reply.
I use SVG on my WordPress websites all the time, my own, safe from malware. But, anyway, PNG uploads would be amazing!
Loving Divi more every day 🙂
You people never cease to amaze me. Keep up the great work!
These look amazing!!
Is it possible to upload your own shapes and patterns as SVGs yet or is it a future update?
Thanks for the constant updates to your brilliant theme 🙂
I am afraid not. WordPress does not allow users to upload SVGs because they can contain malware. For now, we are limiting the feature to our own set of masks and patterns, which were all built to be compatible with the feature set (flipping, rotation, inverting, changing orientation etc). This requires each mask/pattern to ship with 12 different variations.
What about adding our own masks and patterns? Is there a way to do that? For example, if I want to use my logo for a mask for branding?
OMG!! Finally!!!
This will make design websites a lot more fun!:))
I love this update! Thank you ET for your hardwork. Keep it up!
I tested this and you can get some funky results if you add an extra svg layer via css in the Advanced pane. We are kind of stuck with a limited number of options available with the new UI so as I said previously being able to add your own custom SVGs would be useful. There are many patterns out there for free on the net.
It would be great if we could upload our own patterns and masks. Please, please include this feature in your roadmap. Keep up your excellent work!
Very cool
0 comments ?
It s a beautiful update! But it would be great to have the option of select your own svg mask!
WOW, this looks dope! Can’t wait to create some cool landing pages with it!
Pretty dope stuff, I love the new patterns and how they look! Any chance for being able to upload custom Masks/patterns?
Hi Nick,
It is a beautiful option that still enriches Divi.
Could you please make the layouts on this page downloadable?
https://elegantthemesexamples.com/background-masks/
I would also propose to create a Library just for Theme Builder in three sections: Header, Body and Footer?
That would be a very time-saving option.
Thanks in advance
We have a big update coming for the Divi Library that will really help you organize your layouts for these different use cases. Stay tuned!
Yessssss !
Thank You ET Team !
Looks great. but impossible to make it work… I tried and clear all caches + Static CSS in Builder options. I can see the options while building pages and sections but anyone I choose doesn’t make any difference = neither mask nor pattern. Any idea ?
Sounds like you are looking at a cached version of the page when you visit it on the front end.
What a very cool Feature! I always used image Patterns now i can combine!!! Thats fantastic! i really do love Divi!
awesome update! thanks Divi team 😉
So cool. Can’t wait to play.
Great update, thank you!
But where are the options for background position now?
We have multiple websites that are using this option, so please don’t tell us that we must edit them all now?
Hope this will be back in the next update.
If not, please inform us, so that we can take steps to correct this manually.
Also, it would be amazing if you give us option to upload our own textures in future updates.
Almost all of our clients who wanted background texture, also wanted the texture to be personalized.
We fixed the issue with background image position options being hidden in some cases. Sorry about that!
Excellent, thank you very much to the whole team 👏
This is a great new addon feature for spicing up page layouts. Great job and great work to all at Elegant Themes. Well done and thank you 🙂
This is insane! Just took it to a whole other level. Thank you for all you continue to do to improve Divi. 👏🏼👏🏼👏🏼
Just WOW!
Very cool, practical feature. I would likely have used these if I still had the web site.
Pretty nice! But when will Extra theme be updated with everything Divi has? It is sorely behind.
This looks cool. Definitely makes it easier to create cool pattern sections. Any idea how will it affect the page load speed?
Are these available as vectors we can use in our mockups?
This is very cool. Can we upload our own background masks?
WordPress does not allow the uploading of SVGs by default because they can contain malware. We could allow SVG uploading for those that want to override the default WordPress behavior and take the risk, but it’s also worth noting that it’s not as simple as uploading a single SVG. Each mask requires 16 different SVG variations designed for a specific purpose in order to work with the flip/rotation/invert/orientation options. Still, it would be cool for those who want to put in the effort and we might consider it in the future.
True what you say about the security. All the same being able to upload many other svg options would be great. I have been experimenting with doing this via the css background: url(“”); option from the many libraries out there for patterns. It does override any image you set, so seems to work on that level and is specifically for patterns. As you mentioned, masks are more complex. Hopefully the Divi team will come up with something clever for all this.
The background alignment in the “resize” option has disappeared and aligns it to the center 😠
We had the same problem, team from Elegant Themes has resolved this so quickly, just update to the new version. THANK YOU VERY MUCH Elegant themes 🙂
We had the same problem, team from Elegant Themes has resolved this so quickly, just update to the new version. THANK YOU VERY MUCH Elegant themes 🙂
Looks good. Is there a way to upload install your own SVGs? I have already been using svg patterns available from various sites and dropping them in as backgrounds in the custom css of modules and sections.
I also use WordPress, a variety of theme builders, including Divi.
Would prefer Flexboc
Background masks and patterns seems to be a great new feature of Divi. I will test it soon. Nick is it possible to create own background masks and/or patterns?
Can we upload custom masks and pattern also? (A brand may have some pattern or mask shape as part of their design style.)
Divi really is becoming an all-one tool. We’ve only been here just short of a year and it’s just crazy how many new layouts, designs, and core features you guys improve on. At an incredible rate too. I don’t know how you do it and keep your pricing the same, but thank you.
Ps. You should look at creating your own CMS.
Juan
Interesting idea in your Ps, Juan. Not sure how I feel about it. You talking about a proprietary CMS?
Wow! This looks awesome! Can’t wait to try all the new options!
That right there – is an absolute GAME CHANGER! I’ve just fallen back in love with web development!
More fun for us. Thanks Divi team.
Hello Nick,
Woow ! That’s a killer feature.
Thanks for this update.
All I can say is “Way to Go!” Divi! Nick, this latest feature of “Masks and Patterns” is really what I needed to enhance some of my websites! I’m glad I am a Divi member and user!
Beautiful masks! Looking forward to playing around with this new Divi feature on my custom web design projects.
I love it! Thank you very much!!
Wow! That is a really cool update. Question though, how easy would it be to set it up to allow people to upload their own patterns and masks? I think that would be really cool for customizing a website even further. I would also be interested in importing custom dividers as well. What are your thoughts on that? Thank you, Shawn O’Connor.
Seconding Shawn’s motion! I would love that kind of true customizability, and I believe a lot of other people would, too.
The patterns and masks are in SVG format. Adding a feature to upload custom patterns and masks would be a great addition but WordPress still doesn’t allow uploading SVG files out-of-the-box for security reasons. If the feature will be available, the websites using Divi will be easily compromised as not all don’t know how to sanitize SVG and understand the security concerns.
You can upload SVG if you add a script to your functions.php. See this: https://wpengine.com/resources/enable-svg-wordpress/ . Done it before a couple of times. Undo the changes after upload for security reasons (same why WP does not support SVG format out of the box)
I agree with Shawn – would love to be able to upload my own mask. Any chance that’s going to happen?
I agree!
Awesome new functionality and addition to Divi. SVG’s are great for reducing page speed and bloat, nice job!
This is a gamechanger, for sure! I’m curious what other updates are in the pipeline. Are there any plans to release flexible, nestable columns? How about expanding on dynamic data fields?
awesome! and how about the responsiveness of those masks? can we edit size in the table and mobile versions?
Yep, you can customize your masks on hover, sticky and for each responsive breakpoint.
You guys seem to read minds. Just yesterday was discussing adding some patterns to a background on a site we are working on, I will be testing this new feature inmediately.
OHHHHH a really nice update for the DIVI theme.