标签： divi

Using The Divi Theme & Module Customizer

Using The Divi Theme & Module Customizer
Divi makes it easy to take your custom layouts anywhere using the WordPress Importer.

Accessing The Theme & Module Customizers
The Theme & Module customizers give you control over just about every single element on your page. Want to adjust the size or spacing of text or an element of your website at the click of a button? The Customizer is where you want to start! To customizer panels can be accessed via the Divi > Theme Customizer and Divi > Module Customizer links in your WordPress Dashboard. The Theme Customizer gives you control over site-wide theme elements, such as your menu & logo size or your body and header text styles. The Module Customizer gives you size & font controls over individual modules. Do you want to reduce the height of all the slider modules on your website? That can be done in just a few seconds via the Module Customizer! Let』s take a closer look.

Exploring The Theme Customizer
First we will explore the Theme Customizer. There are hundreds of options here, separated into different categories. When you first open up the customizer you will see several panels, such as 「Header & Navigation」 and 「General Settings.」 Opening these panels will reveal the options related to those areas of your website. As you adjust the settings within the customizer, you will be given a live preview of their effects. Once you save your changes, the new styles will be reflected on your live website.

You can do just about anything with the Theme Customizer without ever touching a line of code. For a more detailed look at some of the different customizer options, and some creative ways to use these options together, be sure to watch the instructional video above.
Exploring 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 Divi modules. Opening up these panels will reveal customizer controls that can be used to adjust the spacing and typography of each module on your entire website. For example, if you think that the FullWidth Slider titles are too large, you can simply open up the Fullwidth Slider panel and adjust the Header Size slider. Now whenever you add a new Fullwidth Slider to a page, the customized header size will be reflected. No need to use a Child Theme or adjust the Advanced Module settings for the individual module. The Module Customizer is a collection of global module controls.

The Divi Countdown Timer Module

The Divi Countdown Timer Module
How to add, configure and customize the Divi Countdown Timer module.

The Countdown Timer module creates a visual timer that counts down to a specific date. This is great for creating a 「coming soon」 page to builds anticipation for a new product or service. When combined with a 「blank page,」 this can also be used as a great 「coming soon」 landing page/maintenance mode page.
It is important to be able to let your visitors know when something is going to be launched or an event is going to occur. Simply set the date and time to count down to and wait for the big day.

How To Add A Countdown Timer Module To Your Page
Before you can add a countdown timer module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don』t forget to add a row to your page first. We have some great tutorials about how to use Divi』s row and section elements.

Locate the countdown timer module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「countdown timer」 and then click enter to automatically find and add the countdown timer module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Adding a Countdown Timer to a Coming Soon Page.
For this example, I』m going to show you how to add a Countdown Timer Module to a Coming Soon page when launching a new product. The countdown timer adds an element of anticipation. This combined with an email optin or contact form will help you stay top of mind with your visitors before the product launch.

Let』s get started.
Use the visual builder to add a Regular Section with a fullwidth (1 column) row. Then add a Countdown Timer Module to the row.

Update the Countdown Timer Settings as follows:
Content tab
Countdown Timer Title: We』re Coming Soon
Countdown To: [enter date and time of the launch]
Use Background Color: NO
Design tab
Header Font: Roboto
Header Font Size: 36px
Header Text Color: #f1c346
Numbers Font: Roboto
Numbers Font Size: Desktop 70px, Tablet 55px, Smartphone 35px
Label Font: Roboto
Label Font Size: 13
Label Text Color: #ffffff
Lable Line Height: 20px
Custom Padding: 38px Top, 38px Bottom
Advanced tab
Custom CSS (Main Element): font-weight: 500;

That』s it!

Countdown Timer Content Options

Countdown Timer Title
This is the title displayed for the countdown timer.
Countdown To
This option allows you to select the date and time of the event you want to countdown to. Once selected, you countdown timer will automatically begin counting down to this point in time. Your countdown timer is based on your timezone settings in your WordPress General Settings.
Background Color
Here you can choose a background color for your countdown timer module.
Background Image
Here you can choose a background image for countdown timer module.
Admin Label
By default, your countdown module will appear with a label that reads 『Countdown Timer』 in the builder. The Admin Label allows you to change this label for easy identification.
Countdown Timer Design Options

Text Color
Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.
Header Font
You can change the font of your Header text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Header Font Size
Here you can adjust the size of your Header text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your Header text, choose your desired color from the color picker using this option.
Header Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your Header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Line Height
Line height affects the space between each line of your Header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Numbers Font
You can change the font of your Numbers text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Numbers Font Size
Here you can adjust the size of your Numbers text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Numbers Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your Numbers text, choose your desired color from the color picker using this option.
Numbers Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your Numbers text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Numbers Line Height
Line height affects the space between each line of your Numbers text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Label Font
You can change the font of your Label text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Label Font Size
Here you can adjust the size of your Label text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Label Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your Label text, choose your desired color from the color picker using this option.
Label Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your Label text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Label Line Height
Line height affects the space between each line of your Label text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Custom Margin
Margin is the space added outside of your module, between the module and the next element above, below or to the left and right of it. You can add custom margin values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Countdown Timer Advanced Options

CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.
Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

Divi Global Presets

Divi Global Presets
Learn how to create Divi Presets and apply them to modules across your entire website.

Table of Contents
An Overview of Divi』s Global Presets Feature
Using Global Presets in Divi
The Global Preset Dropdown Menu
Global Preset Item Menu
Adding New Presets
Updating Existing Presets
Other Settings ( or Right-Click) Options
Conditional Logic within Global Presets
Global History States
Importing Elements with Global Presets
An Overview of Divi』s Global Presets Feature
A Powerful Replacement for Global Defaults
Global presets is a powerful evolution of global defaults, taking Divi』s global settings and styles to a whole new level. Instead of allowing one global default for an element, Global Presets allows multiple defaults called 「presets」 to be used for any element in Divi. For example, let』s say you have a site with three main button designs used throughout. You can give each of those three button designs their own global preset (ie. 「button preset 1 「, 「button preset 2」, 「button preset 3」). Now every time you create a new button, you can choose from one of those global presets.

Furthermore, when you update the design of one preset, it updates every instance of that preset site-wide. Global presets speed up the design process both on a local and global scale.

The Preset Settings Dropdown Menu
Global Presets exist within the settings modal of any Divi element. To access the global presets for a specific Divi element, open the settings and click the preset dropdown menu at the top of the modal under the heading.

Within the dropdown, you will have the option to create a new preset or update the current default preset.

Local Side vs Global Preset Side
When updating the global presets for an element in Divi, you have the option of deploying the Global Preset Settings modal for that element. This Global Preset Setting Modal will have a gray header to make it easy to determine that you are editing global preset options, rather than options that only apply to the element locally.
The global preset dropdown menu and options are identical in both the local settings modal and the global presets settings modal. This will make it easy to update global presets no matter what side you are currently working from.

Using Global Presets in Divi
The Global Preset Dropdown Menu
By default, the Global Preset Dropdown Menu will include only the default preset which will, of course, already be selected.

List of Presets
Once more presets are added, the dropdown menu will list the available global presets for that element. The default global preset will remain listed at the top of the dropdown along with the name of the preset it is based on.

「Star」 and 「Checkmark」 Icons
Next to certain presets in the list, you will notice a star icon and a check icon. The star icon identifies the preset that is being used as the default preset. The green checkmark icon identifies the active preset (or the preset currently being used by the element).

Buttons for Creating New Presets
Also included in the presets dropdown are two main buttons. Click the 「Create New Preset From Current Styles」 button if you want to jumpstart the preset with the designs currently active on the element. Or, click the 「Add New Preset」 button to add a new preset from scratch.

Global Preset Item Menu
When hovering over an individual global preset within the dropdown, the item will turn blue and a menu with additional options will appear.

This menu item include the following options:

Edit
Settings
Update Preset with current styles
Duplicate
Delete
Assign as default

Edit Preset Styles
The Edit icon will deploy the global preset side of the element (with a nice flip animation). There you can update the design of that particular global preset.

Preset Settings
The gear icon will open the Preset Settings where you can edit the name of the preset or assign the preset to default.

Update Preset With Current Styles
The update icon allows you to update the global preset with the current styles of the element. This is a quick way to apply the design you are working on to an existing preset. And since this will have an effect on all elements using this global preset site-wide, there is a helpful 「Are You Sure?」 notification that will popup before applying the update.

Duplicate Preset
The duplicate icon will clone the preset and open the preset settings of the duplicate so that you can give it a proper name or assign it as the default. This is a great option for creating a new preset without having to start the design from scratch.

Delete Preset
The delete icon will delete the preset. The 「Are You Sure?」 notification will remind you that you are deleting a preset that affects the entire site. And, if the deleted preset happens to be the one used as the default, a new preset will take its place as the default preset for that element.

Assign Preset as Default
As mentioned earlier, the star icon indicates the default preset. Clicking on the star icon within the preset』s menu will assign that preset as the default.

Adding New Presets
Divi gives you a few options for adding a new global preset. These include creating a new preset from scratch, creating a new preset using the current styles of the element, or duplicating an existing preset.
From Scratch
To create a new preset from scratch, select the Add New Preset button from the preset dropdown. Update the preset settings for the new preset (preset name and/or assign as default). Then use the new preset』s menu to make further changes like editing the preset』s styles or updating the preset with the current styles of the element.

From Current Style
If you have an element that is already styled, you can choose to make that element a new global preset by clicking the button labeled 「Create New Preset From Current Styles.」 This is more convenient when working with existing designs and you want to jumpstart a new preset design.

Duplicating Another Preset
As mentioned earlier, you can use the duplicate icon to clone an existing preset which will give you a jump start on designing a new one.

Updating Existing Presets
There are multiple methods for updating the design of an existing global preset in Divi. This gives the user more power to update the design in a way that makes the most sense to them.
Editing a Preset』s Settings
The most direct way to update an existing preset is to click the edit icon on the preset』s menu. This will flip the element into its global preset modal where you can update the settings for that specific global preset.

Update Preset With Current Styles
As mentioned earlier, you can update the settings of an existing preset using the update icon. The update icon allows you to update the global preset with the current styles of the element. This a quick way to apply the design you are working on to an existing preset.

Other Settings ( or Right-Click) Options
Edit Preset Style
In addition to the global preset menu items, you can also use the 「Other Settings」 or 「right-click」 menu to edit an existing preset style. Once you open the menu, click the 「Edit Preset Style」 option. This will open the global preset modal settings for the preset assigned to that element (same as clicking the edit icon on the preset item menu).

Apply Styles to Current Preset
The 「Other Settings」 menu also includes the option 「Apply Styles to Active Preset.」 This is basically the same as the 「Update preset with current styles」 option available in the preset item menu. However, this option may be more convenient if you don』t want to open the settings of a particular element to apply the change.

Applying Option Group to Current Preset
Use the 「Other Settings」 menu for an option group/toggle to apply the styles of that particular option group to the active preset.

Applying Single Style Option to Current Preset
Also, you can use the 「Other Settings」 menu to apply a single option to the active preset. For example, you may need to adjust the text size for a particular preset. To do this, open the 「Other Settings」 menu next to the option, and select 「Apply Style to Active Preset.」

Choosing Different Presets
Once you have multiple presets available for an element, you can easily choose a different preset for that element by clicking the preset within the list.

Conditional Logic within Global Presets
Normally, when updating the settings of an element, certain options are only available based on conditional logic. For example, icon styles are only available when a user selects to use an icon instead of an image for the blurb module. Having this functionality cleans things up by not including options that don』t apply to the design.
However, when editing the global presets for an element, the conditional logic (which normally hides or shows options based on the logic) is ignored. This allows users to design global presets for all options that may or may not be used when adding the element to the site.
As you can see in the illustration below, the icon styles are available for the blurb preset even though an image is being used.

Global History States
Make a mistake with presets? Don』t worry. You can control history states for site-wide changes with Global History States. To access the editing history modal, click the clock icon in the settings menu. Then select the Global History States tab within the History modal. There you will be able to select different site-wide states to undo mistakes. A new state will be added to the list each time you save and confirm a global preset change to a module, row, or section. All you need to do is select the state from the list to revert back to previous states.

Importing Elements with Global Presets
When you import an element with global presets to the Divi library, you will have the option to include or exclude the global presets. To do this, navigate to Divi > Divi Library. Then click the Import & Export button. In the portability popup, select the import tab. Then select the file to import, select 「Import Presets.」 Then click the import button.

The 「Imported」 Suffix
When you export or import an element with global presets, the imported elements global presets will automatically be renamed with the suffix 「imported.」

The Divi Call To Action Module

The Divi Call To Action Module
How to add, configure and customize the Divi call to action module.

It』s always important to give your visitors a clear call to action. Whether you are trying to get them to purchase your product or contact you for a quote, the call-to-action module will get the clicks you need. The CTA module is a simple combination of a title, body text and a button. When combined with a vibrant background color, a CTA can easily catch your visitor』s eye.

View A Live Demo Of This Module
How To Add A Call To Action Module To Your Page
Before you can add a call to action module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don』t forget to add a row to your page first. We have some great tutorials about how to use Divi』s row and section elements.

Locate the call to action module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「call to action」 and then click enter to automatically find and add the call to action module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Adding a Clear Call to Action to A Landing Page
For this example, I』m going to add a clear call to action (CTA) to a product landing page. Notice that the CTA has a big headline telling visitor in clear terms exactly what they should do (「Try Our Product」). And the big pink button stands out and also clearly states what will happen when they click the button (「start now」). The dark text and pink button over a white background makes the text more readable and the button pop which can increase conversions.

Let』s get started.
Use the visual builder to add a Regular Section with a fullwidth (1 column) row. Then add a Call to Action Module to the row.

Update the Call To Action Settings as follows:
Content Options
Title: Try Our Product Today For FREE
Button Text: START NOW
Content: [add addition content for your CTA]
Button URL: [enter URL for your CTA destination]
Design Options
Text Color: Dark
Text Orientation: Center
Header Font: Playfair Display
Header Font Size: Desktop 62px, Tablet 32px, Smartphone 32px
Body Font: Source Sans
Body Font Size: 24
Body Text Color: #888888
Body Line Height: 1.3em
Use Custom Styles for Button: YES
Button Text Size: 16
Button Text Color: #ffffff
Button Background Color: #d94b6a
Button Border Color: #d94b6a
Button Border Radius: 100
Button Letter Spacing: 3
Button Font: Source Sans, Bold
Button Hover Background Color: #d8294f
Button Hover Border Color: #d8294f
Button Hover Letter Spacing: 3

That』s it!

Call To Action Content Options
Within the content tab you will find all of the module』s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Title
Insert the title of your Call to Action module here.
Button Text
Specify the button text here, or leave it blank if you do not wish to have a button.
Content
This field is where you can enter the Call To Action content.
Button URL
Inserting a valid web URL in this field to specify the destination of your CTA.
URL Opens
Here you can choose whether or not your link opens in a new window
Use Background Color
If enabled, a background color will be applied to the module. If a background color has been enabled, additional padding is added inside the module to separate the text content from the visible edge of the module. If a background color is not enabled, the background of the module becomes transparent and the additional padding is removed.
Background Color
Define a custom background color for your module, or leave blank to use the default color. This option will only appear when Use Background Color has been enabled.
Background Image
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Call To Action Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Text Color
If your CTA Background Color is dark, the Text Color should be set to 『Light』. Visa versa, if the CTA Background Color is light, the Text Color should be set to 『Dark』.
Text Orientation
This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified.
Header Font
You can change the font of your header text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Header Font Size
Here you can adjust the size of your header text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your header text, choose your desired color from the color picker using this option.
Header Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Line Height
Line height affects the space between each line of your header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Font
You can change the font of your body text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Body Font Size
Here you can adjust the size of your body text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your body text, choose your desired color from the color picker using this option.
Body Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your body text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Line Height
Line height affects the space between each line of your body text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
Max Width
By default, the module will extend 100% the width of the parent column. If you would like to restrict this max width, a max width value can be input here. If you input 50%, for example, the module will be restricted to 50% of the width of the column that contains it.
Custom Margin
Margin is the space added outside of your module, between the module and the next element above, below or to the left and right of it. You can add custom margin values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Use Custom Styles for Button
Enabling this option will reveal various button customization settings that you can use to change the appearance of your module』s button.
Button Text Size
This setting can be used to increase or decrease the size of the text within the button. The button will scale as the text size is increased and decreased.
Button Text Color
By default, buttons assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom text color to the button in this module. Select your custom color using the color picker to change the button』s color.
Button Background Color
By default, buttons have a transparent background color. This can be changed by selected your desired background color from the color picker.
Button Border Width
All Divi buttons have a 2px border by default. This border can be increased or decreased in size using this setting. Borders can be removed by inputting a value of 0.
Button Border Color
By default, button borders assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom border color to the button in this module. Select your custom color using the color picker to change the button』s border color.
Button Border Radius
Border radius affects how rounded the corners of your buttons are. By default, buttons in Divi has a small border radius that rounds the corners by 3 pixels. You can decrease this to 0 to create a square button or increase it significantly to create buttons with circular edges.
Button Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your button text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Button Font
You can change the font of your button text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Add Button Icon
Disabled this setting will remove icons from your button. By default, all Divi buttons display an arrow icon on hover.
Button Icon
If icons are enabled, you can use this setting to pick which icon to use in your button. Divi has various icons to choose from.
Button Icon Color
Adjusting this setting will change the color of the icon that appears in your button. By default, the icon color is the same as your buttons』 text color, but this setting allows you to adjust the color independently.
Button Icon Placement
You can choose to have your button icon display on the left or the right side of your button.
Only Show Icon On Hover for Button
By default, button icons are only displayed on hover. If you would like the icon to always appear, disable this setting.
Button Hover Text Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Background Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Border Color
When the button is hovered over by a visitor』s mouse, this color will be used. The color will transition from the base color defined in the previous settings.
Button Hover Border Radius
When the button is hovered over by a visitor』s mouse, this value will be used. The value will transition from the base value defined in the previous settings.
Button Hover Letter Spacing
When the button is hovered over by a visitor』s mouse, this value will be used. The value will transition from the base value defined in the previous settings.
Call To Action Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.
Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

How To Use Divi Leads

How To Use Divi Leads
Split test your pages, gain valuable stats & insights and increase conversion rates.

What Is Divi Leads?
Divi Leads is an incredibly useful Split Testing and Conversion Optimization system backed by powerful stats and insights that helps you unlock your website』s hidden potential. Through simple testing, you can make meaningful design decisions that help boost user engagement and sales. Split Testing is something that everyone should be doing!
What』s Split Testing All About?
The idea behind split testing is simple: You make a change on your page (such as changing text content, size, color, or positioning) and then test that change against the original version to see which variation produces the best results. Let』s consider a classic sales page. At the top we have our sales pitch in the form of a headline (using the Fullwidth Header Module), followed by a list of customer testimonials (using the Testimonials Module), followed by a sales button (using the Call To Action Module). The Goal of the page is to get as many people to click your sales button and buy your product as possible. But how do you know if your sales page is truly effective? How might different value propositions in the headline affect bounce rate? How might different testimonials affect a visitor』s willingness to buy? How might your sales button』s size, color and position on the page affect a visitor』s propensity to click? Each of these items can be turned into a split testing subject to find out exactly how they affect the conversion rate to our desired goal.

Split tests consist of two main elements: The Subject, and the Goal. The subject is the item that you are testing, and the goal is how you attribute success on your page. In the example above, we could use the Fullwidth Header Module as our test Subject and the Button Module as our Goal. Next you can configure different variations of your headline to figure out how each versions affects relevant user engagement statistics. A more effective headline will lead to higher user engagement, lower bounce rate, and these engaged users will ultimate click your sales button more often. Since we have selected the Call To Action Module as our Goal, Divi Leads will track clicks on the CTA button (in addition to other basic stats). Each version of your test subject will be shown to different visitors and over time a differences in conversion rates will become apparent. Using these stats, you can make an informed decision as to which headline is most successful. This test will show us how different versions of our header affect click-through rates to our button, and we can make an informed decision as to which version is superior.Similar split tests can be performed for each item on your page, increasing the overall conversion rate of your page by leaps and bounds!

Starting Your First Test
To begin a split test, open the Divi Builder Page Settings and turn on the Split Testing feature. After clicking 「Save,」 you will be prompted to configure your test. During this process you will be asked to do two things: 1) Choose your split testing subject, and 2) Choose your split testing goal. The subject is the item that you would like to test. This item will be duplicated so that you can configure different variations, each of which will be shown to different visitors. The goal is what you want your visitors to do on your page. Depending on the goal you choose, Divi Leads will track relevant stats. For example, if you are testing a landing page and your goal is to gain leads using the Email Optin Module, then you can select the Email Optin Module on your page as your goal. Divi Leads will then track how each of your subject variations affects email optin conversion rates. If the goal of your page is to sell items through your WooCommerce store, then you can select the eCommerce Module as your goal. In this case, Divi Leads will track sales. If you have a simple page with a standard call to action button that you would like users to click, then you can assign the relevant Call To Action or Button module as your goal and Divi Leads will track click-through rates. Any module, row or section can be assigned as a goal. You can even assign your test subject as the goal.

Picking Your Test Subject
The first things Divi Leads will ask you to do is pick your test subject.Anything on your page can be tested. In Divi, your test subject can be any Module, Row or Section. Once your test subject has been chosen and your split test has begun, your test subject will be duplicated and you can begin configuring the alternate variation. In doing so, you can make and test any number of changes, including different content, design and positioning. You can make any number of variations by simply duplicating the test subject. For example, you could test 10 different headlines at once by testing your fullwidth header module, duplicating the test subject and configuring all 10 variations.Select your split testing subject by clicking on it with your mouse.

Selecting Your Goal
Next up, Divi Leads will ask you to select your goal.Anything on your page can be used as a goal. In Divi, your goal can be any Module, Row or Section. Depending on the item you choose as your goal, Divi Leads will track relevant user engagement statistics. Over time, you will be able to see how each version of your test subject affects the conversion rate to your specified goal. For example, if you have chosen your Fullwidth Header as your test subject and your Call To Action module as your goal, Divi Leads will display different version of your Fullwidth Header to different visitors and track how often each of those visitors clicks your Call To Action module. Over time, it may become apparent that one version of your Fullwidth Header increases click-through rates. Select your goal by clicking on it with your mouse

Viewing Test Results
Once you have configured your split test, you will need to wait for traffic stats to be collected. Divi Leads will show each variation of your test subject to different visitors and collect insights for each. You can view your current test results by clicking on the stats icon at the top of the Divi Builder.

Depending on the goal you choose, Divi Leads will track different stats:
Clicks
This shows you how often your goal has been clicked. Clickthrough rate is calculated by: Clicks / Impressions.
Sales
This shows you how often a WooCommerce product has been purchased. Sales rate is calculated by Sales / Impressions.
Conversions
This shows you how often a form has been submitted (such as a Contact Form or Email Optin Form). Conversion rate is calculated by Conversions / Impression.
Bounce Rate
This shows you how often visitors stay on your page, and how often they bounce. A visitor is considered to have 「bounced」 when they land on your page and then leave right away without consuming any of your content. Bounce rate is calculated by Bounces / Impressions. Lower bounce rates are superior to high bounce rates.
Reads
This shows you how often visitors read your goal. For example if you set a Text Module at the bottom of your page as your goal, the reading rate will tell you how many visitors actually scrolled down your page and read that text module. Reading rate is calculated by Reads / Impressions.
Goal Engagement
This stat is a little different, as it does not take into consideration the test subject at all. The sole purpose of this stat is to determine how effect your Goal is, independent of all other factors. Engagement rate is calculated by Goal Reads / Goal Impressions. For example, a successful test subject may by thwarted by a Goal that is entirely unappealing and ignored.

Ending A Split Test
Once your test has gathered enough statistics and you have decided which variation of your test subject is most effective, you can end the test and pick the version that you would like to keep.To end a test, simply right click on the test subject and choose 「End Split Test,」 or disable Split Testing inside the Divi Builder Page Settings.Once your have chosen to end your test, Divi Leads will prompt you to select the winner of the test. Simply click on the test subject that you would like to keep with your mouse. Divi Leads will delete the remaining test subjects and the test will be completed.

Additional Options
Once Split Testing has been enabled for the current page, a few conditional options will appear inside the Divi Builder Page Settings popup. These settings are:
Bounce Rate Limit
This rate affects what is/isn』t considered a bounced visitor. Bounced visitors determine the page』s bounce rate, which is a great metric for determining overall visitor engagement levels. When a visitor lands on your page and leaves right away, that visitor is considered a 「bounce」 and your bounce rate increass. The lower your bounce rate, the better. The bounce rate limit determines what is considered to be a bounced visitor. By default, any visitor who lands on your page and leaves within 5 seconds is considered a bounce. However, you can change this value using the Bounce Rate Limit setting.
Stats Refresh Interval
When a split testing is running, Divi Leads tracks relevant user engagement stats to be displayed in the statistics window. By default, these stats update once per hour and are cached in the WP database. However, if you would like to reduce the server resource used by Divi Leads then you can reduce this frequency to once per day.
Shortcode Tracking
Shortcode tracking is used to track off-page goals. Place the Divi Leads shortcode tracker on any page on your website and Divi Leads will track visits to that page as a separate conversion metric. For more details, please continue reading.

Shortcode Tracking For Off-Page Goals
Shortcode tracking can be used to track off-page goals. These are goals that exist outside the current page being tested.For example, let』s say you are testing your software company』s lead generation page. You have created a new test with a Fullwidth Header Module as your subject and an Email Optin Module as your goal. The goal of this page is to collect emails to be imported into your CRM system. Once imported into the CRM system, an email marketing automation campaign is launched, the goal of which is to encourage the person to purchase your software product through a separate page. After the sale is completed, customers are referred to a Thank You/Confirmation page on your website.This series of events is what is known as a 「sales funnel.」 In this case, the initial split test is focused on on-page metrics for the first page in our funnel. Using the shortocde tracker, however, you can also track how many people complete the entire sales funnel and ultimately purchase your product. Simply copy and past the tracking shortcode into the page content of the final Thank You page, and Divi will track that metric.Using this same logic, the shortcode tracker can be used to track any number of things. It can be used to track sales in third party ecommerce plugins, leads generated by third party opt-in system, or anything else for that matter!

The Divi Accordion Module

The Divi Accordion Module
How to add, configure and customize the Divi accordion module.

The accordion module is a great way to consolidate information within a single system. Accordions are very similar to tabs, except that the items are displayed within a vertical list. When a new item within the list is opened, the previously-opened item is closed and the new item』s content is displayed.

View A Live Demo Of This Module
How To Add An Accordion Module To Your Page
Before you can add a accordion module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don』t forget to add a row to your page first. We have some great tutorials about how to use Divi』s row and section elements.

Locate the accordion module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「accordion」 and then click enter to automatically find and add the accordion module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Showcasing Product Features Using the Accordion Module
For this example, I』m going to show you how to add product features to a product page using the Accordion Module.

Here is the toggle module in action:

Let』s get started.
Use the visual builder to add a Regular Section with a 1/2 1/2 (2 column) row. Edit the section settings to change the background color to #d94b6a (pink).
On the left column, add your product image.

On the right column, add a Text Module to serve as a header above the Accordion Module.

Finally, add the Accordion Module directly under the Text Module on the right column.

Update the Accordion Settings as follows:
Content Options
Open Toggle Background Color: #ffffff
Closed Toggle Background Color: rgba(255,255,255,0.83)
Design Options
Icon Color: #d94b6a
Open Toggle Text Color: #333333
Closed Toggle Text Color: #333333
Toggle Font: Raleway
Toggle Font Size: 20px

Save Settings
Under the Content tab, click + Add New Item to add your first accordion to the module.
Update the Individual Accordion Settings as follows:
Content Options
Title: [enter title]
Content: [enter content]

Note: Since we already configured the design options for the Accordion Module Settings, there is no need to update the design of the individual accordion settings unless you want to override the Module settings.
Now duplicate the accordion item you just created twice and update the Title and Content for each of the duplicates as needed.

That』s it! The accordion looks great and keeps the content compact, fitting nicely in the section of the page.

Accordion Content Options
Within the content tab you will find all of the module』s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Open Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of opened toggles. Select your desired color from the color picker to apply it to your module.
Closed Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of closed toggles. Select your desired color from the color picker to apply it to your module.
Background Image
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Accordion Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Icon Color
Here you can adjust the color of the icon that appears inside of each toggle, to the inner right of the toggle rectangle. If you are adjusting the background color of your toggle, you may want to adjust the icon color to better compliment your custom color.
Open Toggle Text Color
The text color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the text color of opened toggles. Select your desired color from the color picker to apply it to your module.
Closed Toggle Text Color
The text color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the text color of closed toggles. Select your desired color from the color picker to apply it to your module.
Body Font
You can change the font of your body text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Body Font Size
Here you can adjust the size of your body text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your body text, choose your desired color from the color picker using this option.
Body Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your body text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Line Height
Line height affects the space between each line of your body text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Toggle Font
You can change the font of your toggle text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Toggle Font Size
Here you can adjust the size of your toggle text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Toggle Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your toggle text, choose your desired color from the color picker using this option.
Toggle Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your toggle text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Toggle Line Height
Line height affects the space between each line of your toggle text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Accordion Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.
Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.
Individual Accordion Content Options

Title
The title will be displayed when the item is closed within the accordion, as well as above the accordion content text when the item has been opened.
Content
The content is displayed within the item box when the accordion item has been opened, below the title.
Open Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of opened toggles. Select your desired color from the color picker to apply it to your module.
Closed Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of closed toggles. Select your desired color from the color picker to apply it to your module.
Background Image
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.
Individual Accordion Design Options

Icon Color
Here you can adjust the color of the icon that appears inside of each toggle, to the inner right of the toggle rectangle. If you are adjusting the background color of your toggle, you may want to adjust the icon color to better compliment your custom color.
Open Toggle Text Color
The text color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the text color of opened toggles. Select your desired color from the color picker to apply it to your module.
Closed Toggle Text Color
The text color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the text color of closed toggles. Select your desired color from the color picker to apply it to your module.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Individual Accordion Advanced Options

Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Divi Design Settings & Advanced Module Settings

Divi Design Settings & Advanced Module Settings
You can customize absolutely everything about any module using the advanced design settings.

Whenever you edit a module, row or section, you will notice three tabs in the settings popup: Content, Design, and Advanced. Everything you need to create awesome Divi Layouts and take full advantage of each module can be found in the Content tab. However, if you want even more control over the appearance of the module then you can venture into the Design tab. If you are a developer and you want to use your own CSS instead of using the design controls in the Design tab, then you can venture further into the Advanced tab. When combined, there is nothing that can』t be customized.
Design Settings
The Design settings vary from module to module. For each, we have added all the possible design settings that you could ever want into the Design tab. Due to the sheer breadth of design settings available for certain modules, we have separated them into labeled dropdowns that toggle each group of design settings. There is also a convenient Search Options box above all options to make finding a specific design option that much easier.
To locate and use the Design Settings, simply edit an existing module, row or section (or create a new one) to open up the settings popup. Next click on the Design tab to reveal the design options.

From within this tab you can do just about anything. Settings will vary depending on the type of module you are editing. Typically you will find options to adjust typography (such as text size, letter spacing, line height, etc), spacing adjustments (such as custom padding and margin values), color options (such as text color, overlay color, column background colors) as well as a slew of unique settings for certain elements. Utilizing these design options can create some truly unique.
Advanced Settings
In the Design tab, we have created so many options that you can do just about anything that can be done with CSS (without touching a line of code). If you are a developer, however, you might prefer to write your own code instead of using our custom design controls. In this case you can use the Advanced tab, which can be found right next to the Design tab in the modal settings window for modules, rows and sections.

In this tab you can add a custom CSS ID or CSS Class in order to target and apply your own CSS from your child theme』s style.css file.
If you want to remove the need and the hassle of creating Child Themes, you can easily target CSS to individual modules on individual pages by utilizing the options in the Custom CSS dropdown. Here we have broken down all of the structural elements of the module, and given you text area fields where you can type in your own CSS. Using this panel you can apply CSS to individual parts of the module. For example, you could apply custom CSS directly to a Blurb Icon, or create your own :after pseudo element right from the Divi Builder.
And finally, in the visibility dropdown, you are able to adjust the visibility of your module on phones, tablets, and desktops.

The Divi Audio Module

The Divi Audio Module
How to add, configure and customize the Divi audio module.

The audio module allows you to embed an audio file + a custom audio player anywhere on your page. The audio player assumes the clean/modern style of the Divi theme. This is a great feature for musicians who want to show off their latest creations, or podcasters who want to post their latest shows.

View A Live Demo Of This Module
How To Add An Audio Module To Your Page
Before you can add an audio module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don』t forget to add a row to your page first. We have some great tutorials about how to use Divi』s row and section elements.

Locate the audio module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「audio」 and then click enter to automatically find and add the audio module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Add a Featured Podcast Episode to a Podcaster』s Site Homepage
For this example, I』m going to show you how to use the Audio Module to create a custom audio player for a feature podcast.
Here is the page with the Featured Podcast at the bottom:

Let』s get started.
Use the visual builder to add a Regular Section with a fullwidth (1 Column) row. Change the row setting to have a custom width of 800px. Then add an Audio Module to the row.

Update the Module Settings as follows:
Content Options
Title: [enter title]
Artist Name: [enter artist]
Album Name: [enter album]
Audio: [upload audio file]
background image: [upload 800 x 281 background image]
background image position: Bottom Center
Design Options
Text Color: Light

That』s it!
The audio module really is easy to use and looks great.

Audio Content Options
Within the content tab you will find all of the module』s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Title
The title of the audio module is displayed within the audio player. This is typically the name of your song.
Artist Name
Here you can input an artist name. This will be displayed in the audio player below the title.
Album Name
If your audio file is a song that is part of a larger album, you can input an album name here. This name will appear below the artist name within the module.
Audio File
Define the audio file for use in the module. To remove an audio file from the module, simply delete the URL from the settings field. Click the 「upload」 button to upload an audio file from your computer to be used in the audio player.
Cover Art Image
Cover art images are displayed to the left, or above the audio controls (depending on your column width). Click the 「Upload」 button to upload an image from your computer to be used as your cover photo.
Background Color
Define a custom background color for your module, or leave blank to use the default color.
Background Image
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field.
Admin Label
This will change the label of the module in the builder for easy identification.
Audio Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Text Color
Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.
Title Font
You can change the font of your title text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Title Font Size
Here you can adjust the size of your title text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Title Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your title text, choose your desired color from the color picker using this option.
Title Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your title text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Title Line Height
Line height affects the space between each line of your title text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Caption Font
You can change the font of your caption text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Caption Font Size
Here you can adjust the size of your caption text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Caption Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your caption text, choose your desired color from the color picker using this option.
Caption Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your caption text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Caption Line Height
Line height affects the space between each line of your caption text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
Custom Margin
Margin is the space added outside of your module, between the module and the next element above, below or to the left and right of it. You can add custom margin values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Audio Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.
Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

The Divi Bar Counters Module

The Divi Bar Counters Module
How to add, configure and customize the Divi bar counter module.

Animated counters are a fun and effective way to display stats to your visitors. Animation is triggered using lazy-loading to make browsing the page truly engaging. You can place as many counters as you would like inside of this module.

View A Live Demo Of This Module
How To Add A Bar Counter Module To Your Page
Before you can add a bar counter module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don』t forget to add a row to your page first. We have some great tutorials about how to use Divi』s row and section elements.

Locate the bar counter module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「bar counter」 and then click enter to automatically find and add the bar counter module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Using the Bar Counters Module to Display Project Goals in a Case Study
One great ways to use the Bar Counters Module is to illustrate stats for case studies. Simply label each bar with a certain project feature or goal so the user knows what services where included in the project. In this example, I』m adding using the Bar Module to display three project Goals.

As you can see the, the top of the page includes the three project goals using the Bar Counter Module and the bottom of the page includes the results of the case study using the Number Counter Module.
Let』s get started.
Use the visual builder to add a Standard Section with a fullwidth (1 column) layout. Then add a Bar Counters Module to the row.

Update the Bar Counters Settings as follows:
Content Options
Use Percentages: ON
Background Color: #dddddd
Bar Background Color: #e07a5e
Design Options
Text Color: Dark
Title font: default
Title Font Size: 20px
Title Text Color: #405c60
Title Line Height: 2em
Percent Font: Default
Percent Font Size: 16px
Percent Text color: #ffffff
Percent Line Height: 2.5em

Now go back to the Content tab and select + Add New Item to add the first bar counter to the module.
Update the Individual Module Settings as follows:
Content tab
Title: Branding
Percent: 80
Save Settings

Add two more bar counters to the module and give each a Title and a Percent.

That』s it!

Bar Counter Content Options
Within the content tab you will find all of the module』s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Use Percentages
By default, percentages are displayed within the colored bar counter. This text can be disabled using this setting, allowing the visual bar graph to speak for itself.
Background Color
This option allows you to adjust the background color of each bar counter. This settings applies to the negative space behind the filled bar color.
Bar Background Color
This option allows you to adjust the background color of the filled bar. This background color settings overlays the previous background color setting.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Bar Counter Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Text Color
Here you can choose whether your text will appear light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark. You can further customize your text color using the additional text color options that follow.
Title Font
You can change the font of your title text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Title Font Size
Here you can adjust the size of your title text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Title Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your title text, choose your desired color from the color picker using this option.
Title Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your title text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Title Line Height
Line height affects the space between each line of your title text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Percent Font
You can change the font of your percent text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Percent Font Size
Here you can adjust the size of your percent text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Percent Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your percent text, choose your desired color from the color picker using this option.
Percent Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your percent text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Percent Line Height
Line height affects the space between each line of your percent text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Border Radius
Applying a border radius will round the corners of the bar within the bar counter. The higher the border radius, the more rounded the corners become.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
Bar Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. Here you can add custom top padding and bottom padding to the bar module.
Bar Counter Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.
Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.
Individual Bar Counter Content Options

Title
The title defined here will appear above your the bar counter. Leave blank to have no title.
Percent
This value defines how filled the bar counter will be. You can input a value between 1% and 100%.
Background Color
This option allows you to adjust the background color of each bar counter. This settings applies to the negative space behind the filled bar color.
Bar Background Color
This option allows you to adjust the background color of the filled bar. This background color settings overlays the previous background color setting.
Individual Bar Counter Design Options

Label Color
Option changes the color of the bar』s title text that appears above the bar counter.
Percentage Color
This option changes the color of the percentage text that appears inside of tour bar counter.
Individual Bar Counter Advanced Options

Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Using Divi』s Blank Page Template

Using Divi』s Blank Page Template
Use the Blank Page template to create unique stand-alone landing pages.

Enabling The Blank Page Template
The blank page template disabled your header and footer and a specific page, leaving only what is built with the builder visible. This is a great way to create unique landing pages that are separate from the rest of your website. For example, you might create a sales landing page, a coming soon page, a newsletter optin page, or a maintenance mode page.When you create a new page, you will notice a settings box on the side of your screen called 「Page Attributes.」 Within this box, look for the 「Template」 option, and from the dropdown menu, select the 「Blank Page」 template.

Once you update your page, you will see that your header and footer has been removed. This gives you a blank canvas on your individual page that you can use to create truly unique designs. Check out this sleek landing page:

How about a coming soon page complete with a countdown timer and an optin box? There are so many possibilities!