x
Bookmark

Divi – Module Customizer

Video Tutorial

Script & Screenshots

In this video I’m going to go through the Module Customizer.

The Module Customizer works just like the Theme Customizer, except it focuses on the customization of individual modules as opposed to general website elements. When you open up the Module Customizer, you will see a separate panel for each of the modules. Opening up these panels will reveal customizer controls that can be used to adjust the colors, spacing and typography of each module on your entire website. For example, if you think that the full width slider titles are too large, you can simply open up the full width slider panel and adjust the header size slider. Now whenever you add a full width slider to a page, the customized header size will be reflected.  You might notice that the Advanced Design Settings and the Module Customizer have 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.

Under Divi, click on Module Customizer.

The Module Customer settings are on the left of the page.  Notice on the right side of the page, you will be able to preview your changes before you choose to save them.

The next option, it shows the active theme.  This will be Divi as long as you’re in the customizer.  Unless you’re using another theme and the Divi Builder plugin.  If you’d like to change your theme, you can do it here.

I’ll start with the Image Settings.

Under the Image Settings, you can change the animation of your images.  By default, it’s set to move from Left to Right.  Your other options are right to left, top to bottom, bottom to top, fade in, and no animation.  You may not want any animation on your images.  If that’s the case, change the setting here so that you don’t have to change this setting on each new image that you add to your site.

Under the Gallery Settings you can change the look of your galleries.  Including the zoom icon color, hover overlay color, and the title and caption font size and style.

On the Blurb Settings, you can change the header font size.

For the Tabs Settings, you can change the title font size and style and the padding for the Tabs Modules.

Under the Slider Settings, you can change the site wide settings for the top and bottom padding on the sliders, and the header and content font sizes and styles.

Next up is the Testimonial Module Settings.  Here you can change the name and details font styles, the radius of the portrait border, and the image width and height.

Under the Pricing Table Module Settings, you can change the header, sub header, and price font sizes and styles.

For the Call To Action Module Settings, you can change the header font size and style, and the padding.

For the Audio Module Settings, you can change header and sub header font sizes and styles.

For the Email Optin Module Settings, you can change the header font size and styles and the padding around the call to action.

For the Login Modules Settings, you have the options of header font size and style and the padding around the module.

The Portfolio Module Settings.  You can change the zoom icon color, hover overlay color, and the title and caption text size and style.

The Filterable Portfolio Module Settings are similar to the Portfolio.  You can change the zoom icon color, hover overlay color, and the header and caption text size and style.

For the Bar Counter Module Settings, you can change the label and percent font sizes and styles, padding and bar border radius.

For the Circle Counters, here you can change the modules number and title font size and styles.

For the Number Counter, you can change the number and title font size and styles of this module for the site.

For the Accordion Module Settings, you can change the title, opened title, and closed title text size and style, and toggle icon size and padding.

Similar to the Accordion, for the Toggle Module Settings, you can change the site wide settings for the title, opened title, and closed title font size and style and the toggle icon size and padding.

For the Contact Form Module Settings, you can change the header, input, and captcha font size and style.  Also the padding for the input field.

For the Sidebar Module Settings, you can change the header font and style and also remove the vertical divider that appears between the sidebar and the content.

For the Divider Module Setting, you can choose whether you want to show the divider.  By default, you have to turn the show divider on for each divider module.  You can also set the style, weight, height and position.

For the Person Module Settings, you can change the name and sub header font size and style, along with the social network icon size.

For the Blog Module, you can change the post title and meta font size and style settings.

The Blog Grid Module Settings are similar to the regular blog module.  Post and Meta text font size and style settings can be changed here.

With the Shop Module Settings, you have change fonts and styles for the product name, sale badge, price, and sales price.

For the Countdown Module you can change the header font size and style settings.

For the Social Follow Module, you can change the follow font and icon size and the button font style.

Full width Slider Module Settings.  If you would like all of your sliders to be a little shorter or taller, you can adjust the size of the module’s padding here.  If there is a slider active on the page you are viewing, you will get a live preview of your adjustments on the right.  You can also change the header and content font size and style if it’s too large or small.

At the bottom of the Module Customizer Settings, there’s an option to collapse the Customizer menu.  To the right of it, you have the option to change your preview pane to desktop, tablet, or phone screen sizes.

At the top you’ll see two arrows, pointing up and down.  I go through this setting in the Portability video.  When you’re all done making changes and you’re ready to save them, you can click on the Save button.  It currently says Saved for me, which means I have not made any changes to save.  If you click on the X, you will close out of the Module Customizer settings.

That’s it for this video.  I’ll see you in the next one.

WordPress Divi Theme
Purchasing & Installing
   Purchase Divi Theme   (7:46)
   Installing Theme   (1:44)
Divi Builder
  Default Editor vs Divi Builder   (3:18)
   Page Settings   (1:05)
   Post Settings
Sections, Rows, Modules (SRMs)
  SRMs Overview
   SRMs Settings Tabs
  Adding SRMs
  Cloning SRMs
  Deleting SRMs
  Moving SRMs
  Changing Structures of Rows
   Types of Modules
   Types of Full Width Modules
Theme Options
   General Theme Options
   Navigation Theme Options
   Layout Theme Options
   Ads Theme Options
   SEO Theme Options
   Integration Theme Options
   Updates Theme Options
Customizers
   Theme Customizer
   Module Customizer
Role Editor
   Role Editor Overview
   High Level Theme Privileges
   Builder Interface
   Library Settings
   Settings Tabs & Types
   Module Use
  Portability
Library
   Divi Library
   Global Items
   Premade Layouts
  Saving to the Library
  Loading from Library
X

Forgot Password?

Join Us

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.