Exploring Divi 2.4: Using The Module Customizer to Control 100’s of New Module Styles

Earlier this month introduced Divi 2.4, the biggest upgrade in Divi history and a giant leap forward for our most popular WordPress theme. There are so many great features to explore in this update that it was hard to describe them all on the release post, which is why we have decided to do a 2-week series of informational blog posts that will aim to teach you how to take full advantage of Divi 2.4 and its new options. In part twelve of this series, I will give an overview of the all-new Divi Module Customizer.

Learn All About Divi 2.4 Here

Introducing The Divi Module Customizer

Another customizer!? Yes, we have added a new customizer, separate from the Theme Customizer, that lets you customize hundreds of default module styles. For example, set the default top and bottom padding for the Slide Module—then anytime you add a new slider, it will inherit the Module Customizer settings. This customizer is going to save you a ton of time and even further decrease the need for child theme customizations.

Understanding the Differences and Similarities Between the Module Customizer and Advanced Design Settings

In the image below, you are looking at the Gallery Advanced Design Settings and the Gallery Module Customizer (Module Customizer > Gallery). There are a lot of overlapping styles so you might be wondering which settings are the right ones to change. The answer is that there is no right answer—It just depends on what you are trying to do. The simple explanation is that modifying the Advanced Design Settings only effects the specific module you are editing, whereas modifying settings in the Module Customizer will affect every instance of that module throughout your site.

Let’s Dive a Little Deeper

Let’s say I add a Gallery Module to a couple pages of my website and and my settings look as show above (theme defaults). This is what my two galleries will look like.

Changing the Hover Overlay in the Module Customizer

If I change the hover overlay color to Green in the Module Customizer, it will effect all gallery instances throughout my site. It will also update the advanced settings of all gallery modules.

Changing the Hover Overlay in Advanced Design Settings

When I make this change in the Advanced Design Settings, you can see that it only effects the module that I edited and does not affect the Module Customizer.

To sum up, the Module Customizer only sets the defaults for Advanced Design Settings—it does not override them. And now that I have chosen a custom overlay in the Advanced Design Settings, it will no longer be controlled by the Module Customizer. However, If I click the reset icon next to the overlay setting, it will once again sync up with the Module Customizer. Whew! We did it. Let’s check out some more examples.

Define the Default Padding for All Sliders

Here you can see that I already have two sliders on my page. I’ve decided that I want all of my sliders to have a little less padding, with smaller and bolder header text. I could do this with a child theme, use ePanel’s custom css field, update the advanced settings for every slider on my site, or I can use the Slider Module Editor to change these things instantly.

Change the Default Image Module Animation

Tired of always changing the default image animation to the one you want? Head over to the Image Module Customizer and choose the default lazy-loading animation for all image modules that you add in the future. Note that this will only affect image modules added after 2.4 and once your module has been saved, it is no longer synced up to the Image Module Customizer setting.

Completely Customize the Look of Your Animated Counters

All of these options are available to you in the Advanced Module Settings, but this is much more effective for modifying ALL of your animated counters.

Choose the Size and Shape of Testimonial Portraits

Use the Module Customizer to Set Default Pricing Table Styles

Combining Advanced Settings With Module Customizer Settings

Mixing the setting controls in both of these areas makes things a little more complex, but doing so gives you a lot more control. Let’s use the Call To Action module as an example.

Anytime I add a Call To Action module on my site, I want it to have a font-size of 36px, I want it to be Bold, and I want it to have a padding of 40px. Because I want that to be the site-wide default, I make those changes in the Module Customizer.

I’ve added 4 CTA’s to my website below.

But What if I want my CTA in the bottom right to have a smaller title size? I only want to change the header size for that specific module, so I am going to make the change in its Advanced Design Settings.

One cool thing to note here, is that when I set the Header Font Size to 36 in the Module Customizer, Divi automatically changed my advanced settings to reflect that change. Now, when I reduce my header size to 24, I am presented with a ‘Reset’ Icon that would then reset my header size to 36 (or whatever my Module Customizer setting is at the time).

The result shows that I have reduced my header size, but the Module Customizer Settings still take place across the rest of my site and still tell my newly customized CTA to have a bold title and 40px of padding.

The beauty of it all is that the Module Customizer still has control over the advanced settings that I haven’t touched, such as the font styles and module padding. So if I edit the font styles and padding in the Module Customizer, all four of my CTA’s will still be affected.

A Quick Recap

Just to make sure everyone understands when, where, and why to use the module customizer, I want to do a quick recap. The Module Customizer controls module settings across your entire website and also sets the default settings for Advanced Design Settings. Hierarchically, Advanced Design Settings override the Module Customizer. Basically, do not use the Module Customizer to customize a single instance of a module.

The List Goes On And On

Almost every module in Divi has Module Customizer settings, and our plan is to keep growing the list of options as we move forward. If there is anything that you would love to set a default value for, but is not currently available, please share your thoughts in the comments 🙂