Divi 文档

The Divi Fullwidth Map Module

The Divi Fullwidth Map Module
How to add, configure and customize the Divi fullwidth map module.

The maps modules makes it easy to embed custom Google Maps anywhere on your page. You can even add unlimited pins to the map, and define a custom viewport starting location. The maps modules also comes in a Normal Width format, so be sure to check that out as well!

View A Live Demo Of This Module
Google Maps API Key
An API key is required in order to use the Maps Module. To obtain an API key, log into the Google Developers Console, which will guide you through the process, and activate the Google Maps JavaScript API and any related services automatically. The first thing you will be asked to do is create a new project.

Next you will be asked to name your project. You can name the project anything you like. In this example, I simply called it 「Maps.」 You can also input your website』s domain name (add an * in front of it if you allow access from both www.domain.com and domain.com) to make sure to other website』s are allowed to your your API key.

After you have created an named your project, you will be presented with an API Key that you can use.

After you have obtained an API key, you must copy/paste it into the theme options panel by navigating to: Divi>>Theme Options>>General Settings>>Google Maps API Key
How To Add A Fullwidth Map Module To Your Page
Before you can add a fullwidth map 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 Enable 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 fullwidth modules can only be added inside of fullwidth sections. If you are starting a new page, don』t forget to add a fullwidth section to your page first. We have some great tutorials about how to use Divi』s section elements.

Locate the fullwidth map 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 「fullwidth map」 and then click enter to automatically find and add the fullwidth map 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 Fullwidth Map Module to a Contact Page
A fullwidth map module is a great way to showcase your company location on your contact page. And the ability to add multiple pins to your map to showcase different company locations and information is a helpful and engaging feature.
For this example, I』m going to add a Fullwidth Map Module to showcase the company location and information by adding a custom pin to the map.

Important: Make sure a valid Google API Key has been entered inside the Divi Theme Options panel. The Map Module will not work without it.
Using the Visual Builder, add a Fullwidth Section to the bottom of the contact page. Then insert the Fullwidth Map module to your new section. In the Content tab of the Fullwidth Map Settings, enter your company address under the Map Center Address option. The Map Center Address is for the map center point.

Then click + Add New Item to create your first pin. Update the following:
Title: [enter the title of your location]
Content: [enter the content for your pin (ex. address and phone number)]
Map Pin Address: [enter the address for this specific location]

Save Settings
That』s it. Now you have a dynamic fullwidth map module at the bottom of the contact page with a clickable pin that displays company information.

Fullwidth Map 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.

Google API Key
The Maps module uses the Google Maps API and requires a valid Google API Key to function. Before using the map module, please make sure you have added your API key inside the Divi Theme Options panel. Learn more about how to create your Google API Key here.
Map Center Address
Enter an address for the map center point, and the address will be geocoded and displayed on the map below. This is useful if you have multiple pins, and you want to have the map zoomed in to a specific, more focused location. You can simply type in an address in a standard format, such as 「1235 Sunny Road, Some City, State, 88343.」
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.
Fullwidth Map 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.

Mouse Wheel Zoom
Here you can choose whether the zoom level will be controlled by the mouse wheel or not. Often times it』s better to disable this option so that visitors are not disrupted as they scroll down the page and get their mouse wheel stuck inside the map』s iframe. This is especially true for fullwidth map modules.
Draggable Zoom
Here you can choose whether or not the map will be draggable on mobile devices.
Use Grayscale Filter
Enabling this option will turn your map into a grayscale image.
Fullwidth Map 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 Fullwidth Map Content Options

Title
While creating a new pin, you can assign a Title. This title will appear in the box when hovering over the pin on the map.
Content
While creating a new pin, you can assign a block of content text. This text will appear in the box when hovering over the pin on the map.
Map Pin Address
This is the specific location on the map where your new pin will appear. You can enter the address in a standard format.

The Divi Fullwidth Header Module

The Divi Fullwidth Header Module
How to add, configure and customize the Divi fullwidth header module.

The fullwidth header module makes it easy to add beautiful, colorful headers to the top of your pages (or anywhere on your page, if you so chose). These modules can only be placed within full width sections.

View A Live Demo Of This Module
How To Add A Fullwidth Header Module To Your Page
Before you can add a fullwidth header 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 Enable 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 fullwidth modules can only be added inside of fullwidth sections. If you are starting a new page, don』t forget to add a fullwidth section to your page first. We have some great tutorials about how to use Divi』s section elements.

Locate the fullwidth header 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 「fullwidth header」 and then click enter to automatically find and add the fullwidth header 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 Fullwidth Header to an About Page
For this example I』m going to show you how to use the Fullwidth Header Module to add a header with customized text and a background image.

All Fullwidth Modules are only available when using Fullwidth sections. Using the Visual Builder, insert a new Fullwidth Section. Then add a Person Module to the section.

Update the Fullwidth Header Settings as follows:
Content Options
Title: About Us
Subheading Text: We do things differently…
Background Image URL: [insert a 1920 x 800 image]
Background Overlay Color: rgba(0,0,0,0.2)
Design Options
Text & Logo Orientation: Center
Show Scroll Down Button: YES
Icon: [select icon]
Scroll Down Icon Color: #fcbf00
Scroll Down Icon Size: 50px
Text Color: Light
Title Text Color: #fcbf00
Title Font: Open Sans, Bold, Uppercase
Title Font Size: 60px (desktop), 40px (tablet), 30px (phone)
Subhead Font Size: 25px
Advanced Options (Custom CSS)
Main Element:
padding: 100px 0;

That』s it!

Fullwidth Header 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
Enter your page title here.
Subheading Text
If you would like to use a subhead, add it here. Your subhead will appear below your title in a small font.
Button #1 Text
Enter the text for the Button.
Button #2 Text
Enter the text for the Button.
Content
Here you can define the content that will be placed below the header and title text.
Button #1 URL
Enter the URL for the Button.
Button #2 URL
Enter the URL for the Button.
Logo Image URL
Upload your desired image, or type in the URL to the image you would like to display.
Header Image URL
Upload your desired image, or type in the URL to the image you would like to display.
Background Image URL
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.
Background Color
Define a custom background color for your module, or leave blank to use the default color.
Background Overlay Color
Choose a background overlay color, which will be placed on top of the background image. Semi-transparent backhround overlay images can create cool effects when placed above background images.
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.
Fullwidth Header 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 & Logo Orientation
This controls the how your text is aligned within the module.
Make Fullscreen
Here you can choose whether the header is expanded to fullscreen size.
Use Parallax effect
If enabled, your background images will have a fixed position as your scroll, creating a fun parallax-like effect.
Parallax method
Define the method, used for the parallax effect.
Show Scroll Down Button
Here you can choose whether the scroll down button is shown.
Icon
Choose an icon to display for the scroll down button.
Scroll Down Icon Color
By default, the scroll down icon inherits the color of your header text (white or gray). You can change this color by adjusting the color in this option using the color picker.
Scroll Down Icon Size
Use this setting to increase or decrease the size of the scroll down icon that appears at the bottom of your header.
Image Vertical Alignment
This controls the orientation of the image within the module.
Text Color
Here you can choose the value of your text. If you are working with a dark background, then your text should be set to light. If you are working with a light background, then your text should be dark.
Text Vertical Alignment
This setting determines the vertical alignment of your content. Your content can either be vertically centered, or aligned to the bottom.
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.
Content Font
You can change the font of your content 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.
Content Font Size
Here you can adjust the size of your content 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.
Content 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 content text, choose your desired color from the color picker using this option.
Content Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your content 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.
Content Line Height
Line height affects the space between each line of your content 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.
Subhead Font
You can change the font of your subhead 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.
Subhead Font Size
Here you can adjust the size of your subhead 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.
Subhead 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 subhead text, choose your desired color from the color picker using this option.
Subhead Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your subhead 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.
Subhead Line Height
Line height affects the space between each line of your subhead 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.
Text Max Width
Use this setting to reduce the max width of the text within the header module. For example, a value 50% will ensure that the text is never more than 50% of the width of the overall header module.
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.
Fullwidth Header 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 Filterable Portfolio Module

The Divi Filterable Portfolio Module
How to add, configure and customize the Divi filterable portfolio module.

The Filterable Portfolio allows you to display your most recent projects in either a Grid or Standard fashion. The filterable portfolio looks just like the normal portfolio module, except that it loads new projects using an Ajax request, and it includes options to filter the project list by categories. When a particular category is selected, the list of projects is instantly regenerated with a new list of projects from the selected category.

View A Live Demo Of This Module
How To Add A Filterable Portfolio Module To Your Page
Before you can add a filterable portfolio 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 Enable 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 filterable portfolio 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 「filterable portfolio」 and then click enter to automatically find and add the filterable portfolio 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 Filterable Portfolio Module to a Portfolio Page
For this example, I』m going to show you how to add a Filterable Portfolio Module to a portfolio page.

Let』s get started.
Use the visual builder to add a Regular Section with a fullwidth (1 column) row under the header of the page. Then add a Filterable Portfolio Module to the row.

Update the Filterable Portfolio Settings as follows:
Content Options
Posts Number: 8
Design Options
Layout: Grid
Zoom Icon Color: #ffffff
Hover Overlay Color: rgba(224,153,0,0.58)
Title Font: Default, Bold, Uppercase
Title Font Size: 14px
Title Letter Spacing: 1px
Filter Font: Default, Bold, Uppercase
Filter Font Size: 14px
Filter Letter Spacing: 1px
Meta Font Size: 12px
Meta Letter Spacing: 1px
Advanced Options (Custom CSS)
Active Portfolio Filter:
color: #e09900;
Portfolio Title:
text-align: center;
Portfolio Post Meta:
text-align: center;
Pagination Active Page:
color: #e09900 !important;

That』s it!
Filterable Portfolio 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.

Posts Number
Choose how may posts you would like to display before the list is paginated.
Include Categories
Select which categories you would like to display. Posts in categories that are not selected will not appear in the generated list of posts.
Show Title
Enter a title, if desired, which will be placed above the list of projects.
Show Categories
Choose whether or not you would like to display the category below each post in the post meta area.
Show Pagination
This option enables/disabled pagination. If pagination is disabled, only a single page of projects will be displayed for each category.
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. 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.
Filterable Portfolio 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.

Layout
Choose your desired portfolio layout style. 「Fullwidth」 display one post per row, while 「Grid」 will display your projects in a tiled grid with multiple projects per row.
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.
Filter Font
You can change the font of your filter 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.
Filter Font Size
Here you can adjust the size of your filter 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.
Filter 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 filter text, choose your desired color from the color picker using this option.
Filter Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your filter 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.
Filter Line Height
Line height affects the space between each line of your filter 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.
Meta Font
You can change the font of your meta 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.
Meta Font Size
Here you can adjust the size of your meta 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.
Meta 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 meta text, choose your desired color from the color picker using this option.
Meta Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your meta 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.
Meta Line Height
Line height affects the space between each line of your meta 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.
Filterable Portfolio 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 Shop Module

The Divi Shop Module
How to add, configure and customize the Divi shop module.

Divi has been designed to be WooCommerce compatible. To integrate WooCommerce you will need to install the latest version of WooCommerce.
WooCommerce is the plugin that we recommend, as it has the nicest feature set, interface and follows the best coding practices. After you enabled the plugin, you will see a new 「WooCommerce」 and 「Products」 section has been added to your WordPress Dashboard. You can use these areas to adjust your eCommerce settings and publish new products. You can find full documentation on WooCommerce here.
Please note that while the builder includes various WooCommerce modules, you can also use WooCommerce by itself without the builder just fine. You can create standard pages for Checkout, Shopping Cart, etc, as outlined in their documentation. You can also link straight to your woocommerce categories, or use the WooCommerce Shortcodes within a Divi text module. This gives you the freedom to do just about anything.
View A Live Demo Of This Module
How To Add A Shop Module To Your Page
Before you can add a shop 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 shop 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 「shop」 and then click enter to automatically find and add the shop 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: Feature the Most Recent Products on a Homepage Using the Shop Module
For this example, I』m going to use the shop module to display the most recent products on a homepage.
Here is the page with the four products featured.

Let』s get started.
Use the visual builder to add a Regular Section with a fullwidth (1 Column) row. Change the row setting to make it fullwidth with a custom Gutter width of 2.

Then add an Audio Module to the row.

Update the Module Settings as follows:
Content Options
Type: Recent Products
Product Count: 4
Design Options
Icon Hover Color: #ea1d63
Title Font: Open Sans
Title Font Size: 24px
Price Font: Open Sans
Price Font Size: 20px
Advanced Options (Custom CSS)
Title:
text-align: center;
background: #fff;
margin-top: -10px !important;
Price:
text-align: center;
background: #fff;
padding-bottom: 15px;
That』s it! Here is the final result.

Shop 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.

Type
Choose which type of products you would like to display in your product feed. You can choose from Recent Products which will display all of your products in chronological order, Featured Products, Sale Products, Best Selling Products, or Top Rated Products.
Product Count
Define the number products that you wish to display. You will need to have products made for anything to show up inside of this module. See how to add and manage produces here.
Include Categories
Choose which categories you would like to include.
Columns Number
Chose how many columns to display in your shop module. 4 columns should be used for a 1 column row. 3 columns should be used for a 3/4 row column. 2 column should be used for a 1/2 row column. 1 column should be used for a 1/4 row column.
Order By
Choose how you would like your products to be ordered. Choose to order by Default Sorting, Popularity, Rating, Date, Priced Low to High, Priced High to Low, Oldest To Newest, Newest To Oldest.
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.
Shop 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 Hover Color
When hovering over an item within the shop module, an overlay icon appears. You can adjust the color that is used for this icon using the color picker in this setting.
Hover Overlay Color
When hovering over an item within the shop module, an overlay color fades in on top of the image and below the shop』s title text and icon. By default, a semi-transparent white color is used. If you would like to use a different color, you can adjust the color using the color picker in this setting
Hover Icon Picker
Here you can choose a custom icon to be displayed when a visitor hovers over shop items within the module.
Sales Badge Color
When an item is on sale, a sales badge appears over the product image. Using this setting, you can adjust the color that is used for the badge』s background.
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.
Price Font
You can change the font of your price 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.
Price Font Size
Here you can adjust the size of your price 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.
Price 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 price text, choose your desired color from the color picker using this option.
Price Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your price 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.
Price Line Height
Line height affects the space between each line of your price 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.
Shop 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 Divider Module

The Divi Divider Module
How to add, configure and customize the Divi divider module.

The divider module is perfect for creating either a horizontal line rule, custom vertical spacing, or both. Using this element is great for adding structure and organization to your site.

View A Live Demo Of This Module
How To Add A Divider Module To Your Page
Before you can add a divider 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 divider 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 「divider」 and then click enter to automatically find and add the divider 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 custom Divider line above section headers on a page.
Adding a stylized divider line to a webpage using the Divi Divider Module is a convenient solution for framing your sections and making your header look great.
For this example I』m going to show you how to add a minimal divider line above a section header that is 4px thick and 50px wide. The small line does two things. First, it adds an element of design above your headers which make them look better. And second, the divider line separates the section, framing it for better readability.
Here you can see the small pink divider implemented throughout the webpage.

Now I』m going to show you how to add this small divider line above one of the headers.
Using the Visual Builder, add a new 1 column row above (or before) the section header. Then add the Divider Module to that row.

Update the Divider Settings as follows:
Content Options
Visibility: Show Divider
Design Options
Color: #ea1d63 (pink)
Divider Position: Vertically Centered
Divider Weight: 4px
Height: 4

Save Settings
Now go back and edit the row settings you created for the Divider Module. Under the Design tab of the Row Module Settings, change 「Use Custom Width」 to YES and set the Custom Width option to 50px.

This will make sure your row the contains your Divider will only be 50px wide and remain centered on the page.
Now your section header has a subtle divider that adds a nice design element.

You can then repeat this process for all of the section headers on your page.
Divider 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.

Visibility
Choose to not show the divider if you only want to add vertical spacing. If you choose to display the divider, the rule will appear at the top of the module, but will not affect the height that you specify below.
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.
Divider 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.

Color
Choose the color of the 1px divider line that will be created with this module. The horizontal rule will span the full width of the column that it is in.
Height
Define how much vertical space you would like your divider module to create (in pixels).
Divider 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.

Divi WooCommerce Modules

Divi WooCommerce Modules
Divi』s WooCommerce Modules allow you to edit and style WooCommerce elements using the Divi Builder. This will allow you to utilize the power of Divi to add, remove, and style the WooCommerce Elements that make up a product page layout to create completely custom product pages from scratch. No more having to resort to external CSS or modifying woocommerce page templates with custom code.

Table of Contents
Live Demos of Product Pages Using Woo Modules
How to Use Divi』s WooCommerce Modules
Introduction to WooCommerce Modules
How WooCommerce Modules Work
Accessing WooCommerce Modules from the Divi Builder
Using WooCommerce Modules on Product Pages
Divi Page Settings for Product Pages
Using Woo Modules on Normal Pages and Posts
Understanding Each Woo Module and Their Settings
Understanding Woo Module Settings
A Breakdown of Each Woo Module and Their Unique Settings
Use Case Tutorial: Building a Product Page With Divi』s Woo Modules
Live Demos of Product Pages Using Woo Modules
Check out the following live demos to see what is possible when designing product pages with Divi』s Woo Modules.

View A Live Demo Of This Product Page

View A Live Demo Of This Product Page

View A Live Demo Of This Product Page

View A Live Demo Of This Product Page

View A Live Demo Of This Product Page

View A Live Demo Of This Product Page

View A Live Demo Of This Product Page

View A Live Demo Of This Product Page

View A Live Demo Of This Product Page
How to Use Divi』s WooCommerce Modules
Introduction to WooCommerce Modules
Divi』s WooCommerce Modules allow you to edit and style WooCommerce elements using the Divi Builder. This will allow you to utilize the power of Divi to add, remove, and style the WooCommerce Elements that make up a product page layout to create completely custom product pages from scratch. No more having to resort to external CSS or modifying woocommerce page templates with custom code.
WooCommerce Modules aren』t limited to product pages either. You can add Woo Modules anywhere on your site to showcase related products dynamically, create custom add to cart buttons for a particular product, create a completely custom product galleries, and much much more.
If that wasn』t enough, WooCommerce data is also available via Divi』s dynamic content feature that is built in to all Divi Modules. That means you can easily pull in woocommerce elements and product information to any module in Divi. For example, if you don』t want to use the Woo Tabs module to display your product』s additional information, you can add it to a Divi toggle module with dynamic content.
How WooCommerce Modules Work
WooCommerce Modules work in much the same way as dynamic content works already within the Divi Builder. Each WooCommerce Module requires you to select a product to generate dynamic content associated with that product. The dynamic content is pulled from the database and includes the information that you entered when setting up your product in woocommerce. Once a product is selected, you can use the Divi Builder settings to style the dynamic WooCommerce product content like you would any regular Divi module.
Accessing WooCommerce Modules from the Divi Builder
WooCommerce Modules are accessible from within the Divi Builder just like regular Divi Modules.
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 product or page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules including WooCommerce Modules. If you are enabling the Divi Builder on a WooCommerce Product page, Woo Modules will automatically replace the Woo Elements that were active on the page before enabling Divi. You can also click the Build On The Front End button to launch the builder in Visual Mode. You can also click the Enable 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 Divi Builder, you can click the gray plus button to add a new module to your page. Locate the Woo modules within the list of modules and click on one to add it to your page.

The module list is searchable, which means you can also type 「woo」 to see all Woo Modules or type 「Woo Title」 to quickly pull up the Woo Title module!
Once the module has been added, you will be greeted with the module』s list of options just like a normal Divi module. These options are separated into three main groups: Content, Design and Advanced.

Using WooCommerce Modules on Product Pages
Divi』s Woo Modules will work seamlessly with a WooCommerce Product Page. Below is an overview of how to use Woo Modules on a product page in Divi.
By default, Divi will use the default WooCommerce Product Page template which isn』t editable using the Divi Builder.
Here is what the default product page looks like when editing it on the backend.

The only thing you need to do to enable Woo Modules on your page is to enable the Divi Builder on the Product Page by clicking the 「Use the Divi Builder」 button.

Once you enable the Divi Builder on a Product Page for a normal product, Divi will automatically convert the product page elements into a collection of WooCommerce modules that mimic the default Divi product page design. For each one of the Woo Elements that are relevant to your product, Divi has a corresponding WooCommerce Module that allows you to deploy and design that Woo Element with the Power of the Divi Builder. For example, the product title is replaced with a new Woo Title module that has all the design options available to customize the title with Divi.
Here is what it looks like when you enable the Divi Builder on a Product page.

The user is then free to customize all of the WooCommerce elements (like product images, price, description, etc.) using the Divi builder. This will allow you to create completely custom product pages.
It is important to remember that every Woo Module is dynamic which means it is dependant on existing woocommerce data that you have already entered when building your products. So you will need to make sure the product has the information needed to display the module. For example, if you haven』t included any upsell products for a particular product, you wouldn』t be able to add or customize the woo upsell module on that particular product page because there is nothing to display.
Divi Page Settings for Product Pages
Once the Divi Builder has been deployed on a product page, the Divi Page Settings will contain slightly different options. The two main options to take note of, especially when working with Woo Modules, are Page Layout and Product Content.
Page Layout

Use this option to change the product page layout.
The Left Sidebar and Right Sidebar options will display the default Divi Theme sidebar.
If you want to hide the sidebar, you can select the No Sidebar or Fullwidth option.
One thing you may consider doing is selecting a creating a custom sidebar using the Divi Builder with a Fullwidth Page layout.
Product Content

The Product Content settings allows you to choose between two options:

Default
Build from scratch

The default option will enable the old way the Divi Builder worked with WooCommerce Product Pages. Basically the Divi Builder will allow you to add content only in the description area of the default WooCommerce Page Layout.
The Build from Scratch option is what enables the functionality of Woo Modules to override the default WooCommerce Product Page Layout. There really is no reason to switch from the Build From Scratch option unless you need to revert back to the old way of doing things.
Using Woo Modules on Normal Pages and Posts
Divi』s WooCommerce Modules can be used on any normal page or post throughout your website (not just WooCommerce Product Pages).
For example, you can easily add a Woo Add To Cart button for a specific product in your store to a custom landing page you created for the product.
Simply add a the Woo Add to Cart module to the page like you would any other Divi Module.

Then make sure you select the product you want to link to the module.

In this case, I want to select a specific product. Therefore I would need to search the dropdown list of products within the module to find a specific product in the WooCommerce database.

This would of course be the product I want featured on the landing page. The module will then fetch the product data dynamically and, in this case, add the product to the cart when clicking the button.
You can also combine multiple WooCommerce Modules together for completely custom layouts for your product information. For example, you may want to feature a product using multiple Woo Modules that are all linked to the same product so that the information updates dynamically.
Here is an example of a landing page that uses 6 Woo Modules that are all featuring information for the same product dynamically.

And since each Woo Module is styled using Divi』s powerful built-in design settings, you can get a great looking featured product section for your landing page.

Woo Modules with Other WooCommerce Pages
The woocommerce modules will also work on other WooCommerce Pages as well. These include the Shop, Checkout, and Cart pages. For example, you could feature special products on the WooCommerce Account page so that only users with an account can see them.
And don』t forget to think outside the box. You can definitely use Divi modules to create your own custom version of a shop page.
Understanding Each Woo Module and Their Settings
Understanding Woo Module Settings
Woo Module Settings have the same structure and UI as a regular Divi module, complete with three tabs – Content, Design, and Advanced.

Content

The content options will vary depending on the WooCommerce Module. However, since each WooCommerce Module is built with the same structure as a normal Divi module, the layout and functionality of the Woo Modules will be familiar and intuitive. For the most part, each Woo Module will be pulling content from a particular product. So instead of having a text box for entering static text, you will see a dropdown menu to select the product you want to pull data from.
Product Selection
The Content tab will hold helpful options that allow you to choose the product associated with the module. For example, you can keep the default selection, 「this product」, on the Woo Title module to display the title of the product on that current product page.

This is the default choice since you will normally want to display the information for the product associated with that product page.
However, you could also choose to display the 「Latest Product」 which would display the module content for the latest product that was added to your store.

Or, you could select an individual product from the various products that have been created in WooCommerce.
Notice the UI of the product selection popup box. Since you will have many products to choose from in your WC product database, Divi has made finding these products easy by including a search bar at the top and next/previous navigation at the bottom.

Custom Text Content
For the most part, every Woo Module is relative to a particular product dynamically. This means that the content generated onto the page comes from the information added to your product on the backend in WooCommerce. So selecting a product is all you really need to do in most Woo Modules. However, some Woo Modules will have an option to add custom text content relevant to the module. A good example of this is the Woo Breadcrumbs Module which allows you to add custom text for the home link as well as a custom separator character.

Show/Hide Elements
Some Woo Modules have multiple elements that can be displayed within one module. If this is the case, the Woo Module will allow you to show/hide those specific elements that pertain a WooCommerce module. For example, you in the Woo Tabs module, you can choose to include the description, additional information, and/or reviews in the woocommerce tabs element.

Each Woo Module will also have the content options groups common to most Divi Modules including options for Link, Background, and Admin Label.

Design

Each WooCommerce Module will have the same powerful design options that are common to all Divi Modules. These include but aren』t limited to the following groups:

Text
Sizing
Spacing
Border
Box Shadow
Filters
Transform
Animation

Woo Modules will also have design settings specific to that particular Woo module. For example, the Woo Tabs Module has design options for body text and tab text since you would need to style those specific elements.
More information about the design settings for each Woo Module can be found later in this documentation below.
Advanced

You will also have the advanced options common to Divi Modules including:

CSS ID and Classes
Custom CSS
Visibility
Transitions

A Breakdown of Each Woo Module and Their Unique Settings

There are a total of 16 Woo Modules that each have their own unique settings. Here is the list of those modules. Below this list is a brief overview of each Woo Module including some design option highlights.

Woo Breadcrumb (Breadcrumbs)
Woo Title (Product Title)
Woo Images (Product Images)
Woo Gallery (Product Image Gallery)
Woo Price (Product Price)
Woo Add to cart
Woo Rating (Product Rating)
Woo Stock (Product Stock)
Woo Meta (Product Metadata)
Woo Description (Product Description)
Woo Tabs (Product Tabs)
Woo Additional Information (Product Additional Information)
Woo Related Products
Woo Upsells (Product Upsells)
Woo Cart Notice
Woo Reviews (Product Reviews)

Woo Breadcrumbs Module

The Woo Breadcrumb module allows users to modify the WooCommerce Breadcrumb element which helps users to navigate your website/store by keeping track of their path.
Woo BreadCrumbs Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo BreadCrumbs modules has the following options:

Product: this is where you select the product.
Home Text: Here you can create the breadcrumb text for the home page link.
Home Link: Here is where you can add a custom redirect URL for the breadcrumb home link.
Separator: Here you can change the breadcrumb separator with a custom character (ie. 「//」, 「-」, 「:」, 「|」).

Under the design tab, you can use the text option group to style the clickable link elements within the breadcrumb separately from the body text. This will allow the users to distinguish between the current page and the links to parent pages.
Woo Title Module

The WC Product Title Module allows users to add and modify the WooCommerce Product Title. You can choose to display the current product of a particular product page, or you can choose to display any other existing product on any page, product, or post. With this module, you can place the title of your product anywhere and that product title will update dynamically whenever you update a particular product title.
Woo Title Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Title module has the following options:

Product: this is where you select the product.

Under the design tab, you can use the Title Text Option group to style the product title as well as choose a heading level (h1,h2,h3, etc.).
This will allow you to add multiple product titles to your page so that the titles update dynamically.
Woo Image Module

The Woo Image Module allows users to add and modify the WooCommerce Product Images element. With this module, you can display the single main product image and/or a gallery of product images that work like a thumbnail slider. You can even choose to show and customize a sale badge on the product image as well.
Woo Image Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Images module has the following content options:

Show Featured Image – here you can choose whether the product image should be displayed or not.
Show Gallery Images – here you can choose whether the product gallery should be displayed or not.
Show Sale Badge – here you can choose whether the product sale badge should be displayed or not.

Under the design tab, you can use the image option group to style the product image and product gallery images collectively. And you have options for styling the Sale Badge if applicable as well.
Woo Gallery Module

The Woo Gallery Module allows you to add the WooCommerce Product Gallery to any regular page/post or product page. The Woo Gallery will display the product gallery images associated with the selected product. This module allows you to control and style the product gallery images collectively, much like you would in Divi』s Gallery Module.
Woo Gallery Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Gallery module has the following options:

Show Title and Caption – here you can choose whether the image title and caption should be displayed or not.
Show Pagination – here you can choose whether the pagination should be displayed or not.

The rest of the Woo Gallery module settings will mirror the options available in a regular Divi Gallery Module.
Woo Price Module

The Woo Price Module gives you the ability to add the WooCommerce Product Price to any regular page/post or product page. The Woo Price will display the product price associated with the selected product. This would also include the variable price for variable products as well.
Woo Price Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Price module has the following options:

Price Text – here you can style the price text/numbers including the currency symbol.
Sale Old Price Text – here you can style the price of the selected product before it went on sale (if applicable)
Sale New Price Text – here you can style the sale price of the selected product (if applicable)

Woo Add To Cart Module

The Woo Add to Cart Module allows you to design the woocommerce add to cart button, product stock, and the product quantity all in one module.
The Add to Cart button will add the selected product to the shopping cart when successfully clicked.
The Product Stock will display the number of products available for purchase (if applicable).
The Product Quantity will display a field that allows users to select how many products they want to buy.
If you want to break those elements up into separate modules for more design control, you can replace this module with three separate Woo Modules that display the same info – Woo Add to Cart, Woo Stock, and Woo Quantity.
Woo Add to Cart Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Add to Cart module has the following options:

Show Quantity Field – here you can choose whether the product quantity field should be displayed or not.
Show Stock – here you can choose whether the product stock element should be displayed or not.

Under the design tab, you can target the design of the unique Woo elements with option groups for…

Fields – These options will style the quantity field
Dropdown Menus – These options will style the dropdown menu items that feature attributes of a variable product added in WooCommerce settings (if applicable)
Button – These options will style the add to cart button
Text – These options will style the product quantity text element.

Woo Rating Module

The Woo Rating module allows you to add the woocommerce product rating of the selected product to any page in Divi. The Product Rating will display the average star rating given to the product by customers. It will also display the count of customer reviews as a clickable link. The product rating element will only be displayed if at least one rating or customer review was given for the selected product.
You can use Divi』s built-in design settings to design the product rating with ease.
Woo Rating Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Rating module has the following options:

Show Star Rating – here you can choose whether the product』s start rating should be displayed or not.
Show Customer Reviews Count – here you can choose whether the product』s customer reviews count should be displayed or not.

Under the design settings, you can customize the following key features of the rating:

Rating Layout – here you can choose to display the rating elements inline or stacked
Star Rating – here you can style the stars in the star rating
Text – These options will style the customer review count text

Woo Stock Module

The Woo Stock module allows you to add the woocommerce product stock of any product to any page in Divi. This lets the user know if the product is in or out of stock and/or how many units are available. Plus, you can use Divi』s built-in design settings to design the product rating with ease.
Woo Stock Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Stock module has the following options:

In Stock Text Styles – These options will style the 「In Stock」 text.
Out of Stock Text Styles – These options will style the 「Out of Stock」 text.
On Backorder Text Styles – These options will style the 「On Backorder」 text.

Woo Meta Module

The Woo Meta module allows you to add the woocommerce product meta of any product to any page in Divi. The WooCommerce product meta element is responsible for displaying things like the product SKU, Categories, and Tags associated with a particular product. Not only can you choose which of these elements to display for your product, but you can also use Divi』s built-in design settings to design the product meta with ease.
Woo Meta Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Meta module has the following options:

Separator – Here you can change the metadata separator with a custom character (ie. 「//」, 「-」, 「:」, 「|」)
Show Sku – here you can choose whether the product SKU should be displayed or not.
Show Categories – here you can choose whether the product categories should be displayed or not.
Show Tags – here you can choose whether the product tags should be displayed or not.

Under the design tab, you can change the layout of the metadata to either inline or stacked.
There is also a meta text option group to style the meta text as well.
Woo Description Module

The Woo Description module allows you to add the woocommerce product description or short description of any product to any page in Divi. And, with the module』s built-in design settings, you can design the product descriptions with ease.
Woo Description Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Stock module has the following options:

Description Type – Here you can choose to display the long description or the short description for the selected product.

The rest of the design options will be much like Divi』s text module design settings, including all the body text and title text style options.
Woo Tabs Module

The Woo Tabs module allows you to add the woocommerce product tabs element of any product to any page in Divi. The Woo Tabs module allows you to include a tab for the product description, additional information, and reviews. And, with the module』s built-in design settings, you can design the product tabs with ease.
Woo Tabs Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Stock module has the following options:

Include Tabs
Description – here you can choose whether the Description tab should be displayed or not.
Additional Information – here you can choose whether the Additional Information tab should be displayed or not.
Reviews – here you can choose whether the Reviews tab should be displayed or not.

Woo Additional Information Module

The Woo Additional Info module allows you to add the woocommerce product additional info element of any product anywhere on your Divi site. The additional information element is based on the information given to a product including weight, dimensions, or attributes. And, with the module』s built-in design settings, you can design the product additional information with ease.
Woo Additional Information Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Additional Information module has the following options:

Show Title – here you can choose whether the 「Additional Information」 title should be displayed or not.

Under the design settings, you can also directly style the the following:

Text – These options will style the body text for the Additional Information (like the values of an attribute)
Title Text – These options will style the 「Additional Information」 title.
Attribute Text – These options will style the attribute title text.

Woo Related Products Module

The Woo Related Products module allows you to add the woocommerce related products element/section to a regular page/post or WC product page. The related products are pulled from products in your store that share the same category or tag(s).
Woo Related Products Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Related Products module has the following options:

Product Count – here you can set the number of products you want displayed
Column Layout – here you can set the number of columns
Order – here you can set how you want the products to be ordered

These content options are similar to Divi』s Shop Module.
Under the design tab, you have the following options that are unique to the Related Products Module.

Overlay
Image
Star Rating
Body Text
Title Text
Product Title Text
Price Text
Sale Badge Text
Sale Price Text

Woo Upsell Module

The Woo Upsell Module allows you to add the woocommerce upsell element to a regular page/post or WC Product page. The up-sells are products that the user adds to a particular product when adding a product to the store.

So this module will not display any content if the selected product has no additional up-sell products attached to it in the backend.
Woo Upsell Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Up-sells module has the following options:

Product Count – here you can set the number of products you want displayed
Column Layout – here you can set the number of columns
Order – here you can set how you want the products to be ordered

These module options are similar to Divi』s Shop Module.
Under the design tab, you have the following options that are unique to the Woo Upsells Module:

Overlay
Image
Star Rating
Body Text
Title Text
Product Title Text
Price Text
Sale Badge Text
Sale Price Text

Woo Cart Notice Module

The Woo Cart Notice Module allows you to add the WooCommerce Cart Notice element to any WC product page in Divi. The Cart Notice element is a notification that pops up on the page whenever a user successfully adds a product to the cart by clicking the Add to Cart button. In addition to a notification message, the cart notice also provides a 「view cart」 button.
Woo Cart Notice Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Cart Notice module has the following design options:

Text – for styling the notification text
Button – for styling the 「view cart」 button within the Cart Notice.

By default, the Cart Notice will have a background color that is relative to the default theme accent color within the theme customizer settings. But you can easily override this styling within the Cart Notice Module design settings.
Woo Reviews Module

The Woo Reviews Module allows you to add the WooCommerce Product Reviews element to any regular page/post or product page on your Divi site. This module will display the reviews of the selected product as well as a form for submitting new reviews.
Woo Reviews Module Key Options
In addition to the common content, design, and advanced options available to all Divi Modules, the Woo Reviews module has the following design options:
Show Author Avatar
Show Comment Count
Under the design tab, you have a lot of option groups for targeting the various elements of the module including:

Fields – for the review form
Image – for the author avatar
Title Text – for the title of the review
Meta Text – for the author and date of the review
Comment Text – for a submitted review text content
Star Rating – for the stars in the star rating
Button – for the review button

WooCommerce Dynamic Content
Divi supports WooCommerce dynamic content for any Divi Module. This means that every Divi Module has the capability of pulling in dynamic content from the woocommerce data stored in your wordpress database. This opens the door for limitless design combinations using regular Divi Modules to style WooCommerce content.
Use Case Tutorial: Building a Product Page With Divi』s Woo Modules

For this tutorial, we are going to build a simple product page and style it using Divi』s new Woo Modules.
To get started, we will need to have the Divi Theme (most recent version) installed and active as well as the WooCommerce plugin. If it is the first time setting up WooCommerce, you will need to run through the basic setup wizard to get your store ready. Once done, you are ready to add your new products. You will need at least 3 or 4 products created in order for some modules to display information. For example, the Woo Recent Products module won』t show recent products if there are none. And if you want to showcase upsells with the Woo Upsell module, you will need to add upsell products to a particular product/page for those to show up.
We can also import WooCommerce sample data to speed up the process if we want to test out the woo modules.
Creating a Product
To create a new product, go to the WordPress dashboard and navigate to Products > Add New.
Then enter the product information you want displayed on the product page.

For the Product Data, Select a Simple Product from the dropdown.
Then add the following info:
General

Regular Price: 20
Sale Price: 15

This info will be displayed by the Woo Price Module.
Inventory

SKU: sku-123-1
Select Enable stock management at product level
Stock Quantity: 10

This info will be displayed by the Woo Meta Module along with the Product Categories and Tags.
Linked Products

Upsells: [add three products to serve as mock upsell products]

This info will be displayed by the Woo Upsell Module.
Attributes
Add a custom attribute named 「size」 with the following values:

Large
Medium
Small

Then make sure to click the checkbox to make the attribute visible on the product page.

This info will be displayed by the Woo Additional Information Module and also included in the Woo Tabs module if Additional Information is selected to be displayed.
Activating the Divi Builder on the Product Page
After the Product Information has been entered, click to use the Divi Builder.

This will automatically convert the product page layout into a separate Divi Elements, with each WooCommerce Element converted to a customizable Woo Module. The Divi Builder will populate the area where the long description content used to be. The new location of the long description content will be located at the bottom of the product page.

NOTE: You can always update the product information after deploying the Divi Builder. It will work the same way. In other words, you don』t have to update all of the product information before you deploy the Divi Builder if you don』t want to.
Next, click the button to build on the front end.

Designing the Woo Modules
Now we are ready to start design each of the Woo Modules to create a custom design of the product page.
Woo Breadcrumb Module Styling
Let』s start at the top of the page with the Woo Breadcrumb module. Open the Woo Breadcrumb settings and update the following:

Product: This Product
Home Text: All Products (if your home link is to the shop or an all products page)

Text Font Weight: Semi Bold
Text Text Color: #333333
Text Size: 14px

Link Text Color: #d039a0

This will give the breadcrumbs some distinction between what is the current page and what are clickable links to parent pages.
Woo Notice Module Styling
Next open the settings for the Woo Notice module and update the following:

Background Color: #31d190
Text Line Height: 2.8em
Use Custom Styles for Button: YES
Button Text Color: #333333

Woo Image Module Settings
Next, open the Woo Image Module settings and update the following:

Image Box Shadow: see screenshot
Sale Badge Color: #d039a0

Woo Title Settings
Next, update the Woo Title module settings as follows:

Title Font Weight: Bold
Title Text Size: 42px

Woo Reviews Module Settings
In order for Product Reviews to show on the front end, you must first make sure you have at least one review entered for the product. To enter a review, simply view the product on a live page, click the reviews tab, and enter a review with a star rating.
Now deploy the visual builder again. Open the Woo Review Module settings and update the following:

Star Rating Text Color: #d039a0
Star Rating Text Size: 18px
Text Text Color: #31d190

After the product rating is styled, open the Woo Price Module settings and update the following:

Price Font Weight: Ultra Bold
Price Text Color: #31d190

Woo Description Styling
Next, update the Woo description module settings as follows:

Background Color: #f8f8f8
Text Line Height: 1.8em
Margin: -5% Left
Padding: 5% top, 5% bottom, 5% left, 5% right
Box Shadow: See screenshot

Woo Add To Cart Styling
Open the Woo Add To Cart module settings and update the following:

Text Text Color: #d039a0
Fields Text Color: #333333
Fields Font Weight: Bold

The update the button style as follows:

Button Text Size: 30px
Button Text Color: #ffffff
Button Background Color: #31d190
Button Font Weight: Semi Bold

Woo Meta Module Styling
Next, open the Woo Meta Module settings and update the following:

Meta Font Weight: Semi Bold
Meta Text Color: #333333
Meta Text Size: 16px
Meta Line Height: 1.8em
Link Font Style: Underline

Woo Tabs Module Settings
Open the Woo Tabs Module Settings and change the background color as follows:

Background Color: #f8f8f8

Then update the rest of the design settings as follows:

Active Tab Background Color:
Inactive Tab Background Color: #333333
Active Tab Text Color: #ffffff
Tab Text Color: #ffffff
Tab Font Weight: Bold
Tab Text Size: 26px (desktop), 18.8px (tablet)
Max Width: 780px
Module Alignment: Center
Border Width: 0px
Box Shadow: see screenshot

Woo Upsell Module Settings
The Woo Upsell Module will display the products added to the Linked Product tab under Product Data when building the product. To update the style of upsells, open the Woo Upsell Module settings and update the following:

Overlay Icon Color: #d039a0
Image Box Shadow: see screenshot
Star Rating: #d039a0
Title Font Weight: Bold
Title text Color: #333333
Title Text Size: 42px
Title Line Height: 2em
Product Title Font Weight: Bold
Product Title Text Color: #333333
Product Title Text Size: 18px
Price Font Weight: Ultra Bold
Price Text Color: #39d190
Sale Price Text Color: #d039a0
Padding 30px top

Final Result
And here is the final result!

The Divi Library

The Divi Library
The Divi Library is where you can save custom modules and layouts for later use.

What Is The Divi Library?
The Divi Library is your ultimate web design toolkit. Here you can store your favorite layouts, sections, rows or modules for later use. Whenever you save an item to your Divi Library, you can access it easily from within the module window when adding a new layout, module, section or row to the page.
Save yourself hours of design time by creating collections of your favorite module combinations. Did you spend hours customizing the Design and Advanced tabs of a module to create a completely unique look for your new website? Why not save all of those customized modules to your Library so that you can use them in the future without having to re-create them! Once you have created your collection of library items, you will find that starting to build new websites will become infinitely easier. In fact, you may never need to create a Child Theme again! Once you have developed a stellar library of custom modules, rows and sections, you can export these items and import them when creating new websites to speed up your design process.
The Divi Library is more than just a collection of saved layouts. Each library item can also be made 「Global.」 Global modules are synced and mirrored wherever they are placed. Whenever a Global module is altered, it updates automatically on all of the pages you have added it to! In this sense, Divi becomes more than just a page builder, it becomes a website builder. For example, you could create a Global section that is added to the footer of every page on your site. Update that Global Section once and have the footer of your entire website updated instantly.Modules in the library can also have their settings selectively synced. For example, if you have customized a module heavily using the Design and Advanced tabs, you can save the module to the library while only saving the settings in these two areas. If his module is made Global, your Design and Advanced settings will be synced, but everything in the Content tab can be different on each page the module is used on.
Saving New Items To The Library
With Divi』s Visual Builder, whenever you hover over a module, row or section in the Divi Builder, the menu bar includes a button to save the item to the library for later use. Simply click the icon, give your template a name and click 「Save to Library」.

Once it is added to the library, you can access the item at any time via the Divi > Divi Library link in your WordPress Dashboard, and you can add the saved item to a new page via the 「Add From Library」 tab when adding a new module, row or section to your page.

Once you click 「Save & Add To Library」 you will be asked to fill out some information about your new library item. You can give your new item a name to remember it by, choose which settings you would like to save, add your item to a category, as well as make the item a 「global library」 item. For more information about global items, be sure to read our global modules tutorial. We also have a great tutorial that talks about how to use the selective sync feature. Once you have filled out all of the necessary information, click 「Save」 to complete the process and add your new item to the library.

Creating & Managing Items In The Library
Whenever you add a new item to your library, this item can be managed and edited from within the Divi > Divi Library page in your WordPress Dashboard. When accessing this page you will get a list of all of your library items. You can sort your list via the controls at the top of the page, and you can edit any of your library items by clicking the 「edit」 link next to the item in the list. We just went over how to add an item to the library while you are using the Divi Builder. You can also build new items from scratch from inside of the Divi Library. Once you build a new library item, it will be available in the 「Add From Library」 tab while using the Divi Builder. To create a new item in the library, click the 「Add New」 button at the top of the screen while inside the Divi > Divi Library page in your WordPress Dashboard.

Adding Library Items To Your Page
Once an item has been added to your Divi Library, it can be quickly accessed when building new pages. Whenever you add a new Module, Row or Layout to your page, you will notice an 「Add From Library」 tab. Clicking this tab will reveal all of the items in your library. Click on the item that you would like to add to your 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!

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.」

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.