詩語，作者 Divi 文件 - 第 11 頁共 16 頁

The Divi Comments Module

The Divi Comments Module
How to add, configure and customize the Divi comments module.

The comments module allows you to place a comment form anywhere on your page. If you are using a standard page or post without the Divi Builder, comments will always appear below your post content. Once the Divi Builder is enabled, however, you can place the comments module anywhere on your page and the comments form will appear in the location of the module. This gives you a lot more control over your comments!

View A Live Demo Of This Module
How To Add A Comments Module To Your Page
Before you can add a comments 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 comments 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 「comments」 and then click enter to automatically find and add the comments 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 Comments Section To Your Blog Post
For this example, I』m going to show you just how easy it is insert and style a Comments Module to your post using the Visual Builder.
Notice the comment section is added below the post content and above a three column footer section. However, the Comment Module could have been added anywhere.

Using the Visual Builder, add Standard Section with a fullwidth (1 column) row under the modules containing your post content. Then add the Comments Module to the row.

Update the Comments Settings as follows:
Content Options
Fields Background Color: #ffffff
Design Options
Text Color: Dark
Comment Font: PT Sans
Comment Font Size: 20px
Comment Text Color:
Field Font: PT Sans
Field Font Size: 20px
Meta Font: PT Sans, Italic, Uppercase
Meta Font Size: 16px
Fields Border Radius: 0px
Use Border: YES
Border Color: #aaaaaa
Border Width: 1px
Use Custom Styles for Button: YES
Button Text Size: 20
Button Text Color: #ffffff
Button Background Color: #02b875
Button Border Width: 3px
Button Border Color: #02b875
Some of the elements like post meta info and the avatar images won』t show up until you or someone else adds a comment to the post.

That』s it. The beauty of this module is that you can add additional content after the comments section (like a call to action or contact form) which is something not easily done on a default WordPress.
Comments 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.

Show Author Avatar
Turning this off will remove the comment author』s avatar from the comment list.
Show Reply Button
When the show reply button is disabled, users will not be able to reply to comments in the comment list.
Show Comments Count
When disabled, the total comment count will no longer be displayed above the comment list.
Fields Background Color
The comment module displays a comment form made up of various input fields. By default, these input fields have a gray background color. You can change this color by choosing a custom color from the color picker.
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.
Comments Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Text Color
Here you can choose 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.
Comment Font
You can change the font of your comment 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.
Comment Font Size
Here you can adjust the size of your comment font. 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.
Comment 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 field text, choose your desired color from the color picker using this option.
Comment Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your comment 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.
Comment Line Height
Line height affects the space between each line of your comment 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.
Field Font
You can change the font of your field 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.
Field Font Size
Here you can adjust the size of your field 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.
Field 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 field text, choose your desired color from the color picker using this option.
Field Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your field 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.
Field Line Height
Line height affects the space between each line of your field 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.
Fields Border Radius
Border radius affects how rounded the corners of each input field are. The higher the value, the more rounded the four corners of each input field becomes. You can reduce the value to 0 to create rectangular input fields, or increase the value significantly to create input fields with circular edges.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
Custom Margin
Margin is the space added outside of your module, between the module and the next element above, below or to the left and right of it. You can add custom margin values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
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.
Comments 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
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:

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!

Using The Divi Mobile Customizer Settings

Using The Divi Mobile Customizer Settings
Adjust sizes and margins for specific devices, such as tablets and smartphones.

Adjust The Layout For Mobile Devices
One of the Theme Customizer』s great features is that it allows you to adjust font sizes on spacing specifically for different mobile devices. You can assign unique text sizes and spacing values for smart phones and tablets, adjusting these settings independently from the general settings applied to desktop viewers.To customize your mobile styles you must first enter the Theme Customizer by clicking the Div > Theme Customizer link within your WordPress Dashboard. Next look for the Mobile Styles panel and open it to reveal the mobile styling options. You will notice 3 sections within the Mobile Styles panel: Tablet, Phone and Mobile Menu.

Tablet
Here you can adjust the styles seen by viewers on tablet-sized screens. You can adjust your font sizes, including body and header fonts, as well as your website spacing, such as the spacing between rows and sections.

Phone
Here you can adjust the styles seen by viewers on phone-sized screens. You can adjust your font sizes, including body and header fonts, as well as your website spacing, such as the spacing between rows and sections.

Mobile Menu
When the main mobile breakpoint is reached, the navigation menu appearance changes to a more standard mobile-style. This menu is seen by viewers on phones and tablets. Here you can adjust the appearance of this mobile menu, overriding the general styles chosen for your Primary Navigation bar within the Header & Navigation panel of the Theme Customizer.

The Divi Contact Form Module

The Divi Contact Form Module
How to add, configure and customize the Divi contact form module.

Communication is the cornerstone of any business. With Divi, you can easily add contact forms to any part of your website.

View A Live Demo Of This Module
How To Add A Contact Form Module To Your Page
Before you can add a contact form 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.

Locate the contact form 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 「contact form」 and then click enter to automatically find and add the contact form 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 Contact Form to a Contact Page
The first place you should consider putting a contact form on your website is, of course, the contact page. A well designed contact page is essential to increase conversions and spark new business.
For this example I』m going to show you how to add a contact form to a contact page.

Using the Visual Builder, insert a new standard section with a fullwidth (1 column) row. Then add the Contact Form Module to your row.
Update the Contact Form Settings as follows:
Content Options
Title: [enter title of form] I』m using this title section as a call to action more than a simple title.
Design Options
Title Font: Playfair Display
Title Font Size: 48px (desktop), 40px (tablet), 30px (phone)
Title Line Height: 1.5em
Form Field Font: Montserrat (Bold)
Form Field Font Size: 14px
Form Field Text Color: #aaaaaa
Form Field Letter Spacing: 1px
Form Field Line Height: 1.7em
Border Color: #d4d4d4
Use Custom Styles for Button: YES
Button Text Size: 16
Button Text Color: #ffffff
Button Background Color: #202020
Button Border Width: 12
Button Border Color: #202020
Button Border Radius: 0
Button Letter Spacing: 2
Button Font: Montserrat
Add Button Icon: No
Button Hover Background Color: #333333
Button Hover Border Color: #333333
Button Hover Border Radius: 0
Button Hover Letter Spacing: 2

Save Settings
It is a good idea to use a custom width for the row containing your contact form so that the form stays compact and doesn』t stretch too far on larger screens. To change the width of your row, go to the row settings under the Design tab and set a custom width of 800px.

That』s it. The design is both modern and purposefully simple in order to ensure readability and usability.

Now that you』ve seen the contact form module in action, dive into ALL of it』s settings in the sections below. We』ve provided a detailed rundown of what you will find inside each tab of the module』s settings and an explanation of what each one does.
Contact Form 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
Define a title for your contact form.
Success Message
Type the message you want to display after successful form submission. Leave blank to keep the default message: 「Thanks for contacting us」.
Submit Button Text
Here you can define the text of the form submit button.
Email
Input the email address where messages should be sent.
Note: Email delivery and spam prevention are complex processes. We recommend using a delivery service such as Mandrill, SendGrid, or other similar services to ensure the deliverability of messages that are submitted through this form.
Message Pattern
Here you can define the custom pattern for the email Message. Fields should be included in following format – %%field_id%%. For example if you want to include the field with id = phone and field with id = message, then you can use the following pattern: My message is %%message%% and phone number is %%phone%%. Leave blank for default.
Display Captcha
Here you can turn the captcha on or off using this option.
Enable Redirect URL
Here you can choose to redirect users to another URL after successful form submission.
Redirect URL
Here you can type the Redirect URL where you want users to go after a form submission.
Form Background Color
This option changes the background of your form fields.
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.
Contact Form 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.

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.
Form Field Font
You can change the font of your form field 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.
Form Field Font Size
Here you can adjust the size of your form field 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.
Form Field 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 form field text, choose your desired color from the color picker using this option.
Form Field Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your form field 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.
Form Field 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.
Input Border Radius
Here you can choose the border radius CSS value for all the form fields in your contact form. Increasing border radius will give your form fields rounded corners.
Use Border
Enabling this option will place a border around your form fields. 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.
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.
Contact Form 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.

Field ID
Here you can define the unique ID of this field. You should use only English characters without special characters and spaces.
Title
Here you can define the content that will be placed within the current tab.
Type
Here you can choose your field type. Options include Input Field, Email Field, or Text Area.
Minimum Length
This sets the minimum length of characters for the input field. Leave at 0 to remove restriction.
Maximum Length
This sets the maximum length of characters for the input field. Leave at 0 to remove restriction.
Allowed Symbols
This designates the symbols allowed for the input field. Choices include 「letters only」, 「numbers only」, and 「alphanumeric only」.
Required Field
Here you can define whether the field should be required or optional.
Enable (Conditional Logic)
Here you can choose to enable the conditional logic feature. Enabling conditional logic makes this field only visible when any or all of the rules below are fulfilled.
Relation
Here you can choose whether any or all of the rules should be fulfilled.
Rules
This section allow you to show or hide the field based on the rules or conditions you set for previous selections.
Background Color
Here you can choose a background color for this specific field.
Individual Contact Form Design Options

Make Fullwidth
If enabled, the field will take 100% of the width of the content area. Otherwise it will take 50%.
Field Font
You can change the font of your field 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.
Field Font Size
Here you can adjust the size of your field 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.
Field 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.
Field Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your field 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.
Field 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.
Use Border
Enabling this option will place a border around your form fields. 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.
Individual Contact Form Advanced Options

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

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.

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.

The Divi Module Customizer

The Divi Module Customizer
Easily change something about a specific module across your entire website.

Customize The Appearance Of Each Divi Module
In addition to the Theme Customizer, we have also introduced the Module Customizer. The Module Customizer has styling options that can be used to adjust every single Divi module available! If there is something bothering you about the appearance of a particular module, and you would like to adjust the appearance of that module on your entire site, The Module Customizer is you new best friend. The access the Module Customizer, click the Divi > Module Customizer link in your WordPress Dashboard. When you open the customizer, you will notice individual panels for each of the Divi Modules. To adjust the appearance of a module, open the panel to reveal the available settings.

Using The Customizer Controls
Most of the module customizer controls are limited to font sizes, style and custom spacing. For additional control, you can use the module』s Design Settings. For small adjustments, however, the Module Customizer is perfect. When you adjust the appearance of a module within the Module Customizer, it will affect all of the modules of that type on your website, which can save you precious time when configuring new modules for each page.

If, for example, you find that the Fullwidth Slider module is too large for your taste, and you would like all of your sliders to be a little smaller, you can adjust the size of the module』s padding using the Module Customizer. Open the Fullwidth Slider panel within the Module Customizer and use the slider controls for 「padding」 to decreased the overall size of the slider. If there is a slider active on the page you are viewing, you will get a live preview of your adjustments.

The Divi Countdown Timer Module

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

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

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

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

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

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

That』s it!

Countdown Timer Content Options

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

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

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.

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.

The Divi Blurb Module

The Divi Blurb Module
How to add, configure and customize the Divi blurb module.

The blurb module is a simple and elegant combination of text and imagery. Blurbs are a great way to showcase small bits of important information, and are often used in rows to display skills or features. Blurb modules can be placed in any column that you create.

View A Live Demo Of This Module
How To Add A Blurb Module To Your Page
Before you can add a blurb 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.

Locate the blurb 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 「blurb」 and then click enter to automatically find and add the blurb module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Using the Blurb Module to List Company Services on Homepage
Since the Blurb module combines both imagery and text to showcase certain features, you can use it to add a list of your company』s services on your homepage. The Blurb Module also allows you to turn your Blurb image/icon and title into a link to your service page. For this example, I』m going to use the Blurb Module to add four featured services to a homepage.

To add the four Blurbs to your page, use the visual builder to add a standard section with a four column row. Then add a Blurb module to the first column of your row.
Update the Blurb Settings with the following:
Content Options
Title: [enter title of service]
Content: [enter a short description of the service]
URL: [add a URL to the service page]
Use Icon: YES
Icon: [select an icon that illustrates your service]
Design Options
Icon Color: #42bb99 (make sure color compliments the site design)
Use Icon Font Size: YES
Icon Font Size: 68px (this adjusts the size of your icon)
Text Orientation: Center
Header Font Size: 24px
Body Font Size: 18px
Body Line Height: 1.5em

Now you have your first blurb finished.

Now duplicate the Blurb Module you just created three times and drag each of the duplicated blurbs over to the other three columns. Since your design settings have carried over to your duplicated modules, all you have to do is change the content (heading, content, icon, url, etc…) and tweak colors to fit each of your services.

Blurb 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
Give a title to your blurb that will appear above the body text of the blurb in a bold text style. The URL option below the Title Field will allow you to make your Title a hyperlink.
Content
This field is where you can enter the body content of your blurb. Blurb Text will also span the full width of your column up to 550px.
URL
Place a valid web URL in this field to turn your Blurb Title into a link. Leaving this field blank will simply leave your title as a static element.
URL Opens
Here you can choose whether or not your link opens in a new window.
Use Icon
When using Blurbs, you can choose to either use an Icon or and Image with your text. If you select 「yes」 for the 「Use Icon」 option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead.
Icon
If you chose 「yes」 for the 「Use Icon」 setting, then this option will appear. This options presents you with a list of available icons that you can use with your blurb text. Simply click on the con that you would like to use and it will appear in your blurb.
Image
If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. Blurb Images will always appeared centered within their columns and will span the full width of your column up to 550px. However, your image will never scale larger than its original upload size. The height of the blurb image is determined by the aspect ratio of your original image, so making all of your blurb images the same height is a good idea if you are placing them side by side.
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.
Blurb Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Icon Color
If you chose 「yes」 for the 「Use Icon」 setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color.
Circle Icon
If you chose 「yes」 for the 「Use Icon」 setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select 「yes」 for this setting, then you will be presented with additional options for customizing your circle color and border.
Circle Color
If you chose 「yes」 for the 「Circle Icon」 setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it』s color, will appear inside this a circle with the color you select here.
Show Circle Border
If you chose 「yes」 for the 「Circle Icon」 setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color.
Circle Border Color
If you chose 「yes」 for the 「Show Circle Border」 setting, then this option will appear. Here you can adjust the color of the circle border.
Image/Icon Placement
Here you can choose where you would like your image/icon to be placed. It can either appear above the text, or to the left of the text. Placing the image/icon to the left of your text will cause the image to be smaller than if it were placed at the top.
Use Icon Font Size
If enabled, you can input a custom size for the icon that is displayed above or two the left of your blurb text.
Text Color
If your blurb is being placed onto a dark background the Text Color should be set to 『Dark』. Visa versa, if your blurb is being placed onto a light background, the Text Color should be set to 『Light』.
Text Orientation
This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified.
Header Font
You can change the font of your header text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Header Font Size
Here you can adjust the size of your header text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your header text, choose your desired color from the color picker using this option.
Header Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Line Height
Line height affects the space between each line of your header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Font
You can change the font of your body text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Body Font Size
Here you can adjust the size of your body text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your body text, choose your desired color from the color picker using this option.
Body Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your body text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Line Height
Line height affects the space between each line of your body text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
Image Max Width
Applying a max width value here will limit the width of the blurb image. This only affects blurbs that are not in icon mode.
Custom Margin
Margin is the space added outside of your module, between the module and the next element above, below or to the left and right of it. You can add custom margin values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Blurb 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.
Image/Icon Animation
This controls the direction of the lazy-loading animation.
Image Alt Text
If you did not choose to use an Icon, then this setting will appear. Alternate text provides any necessary information if the image does not load, appear properly, or in any other situation where a user cannot view the image. It also allows the image to be read and recognized by search engines.
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.

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.