divi 归档 - 第 7 页共 9 页

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!

The Divi Circle Counter Module

The Divi Circle Counter Module
How to add, configure and customize the Divi circle counter module.

The circle counter provides you with a beautiful and visually-compelling way to display a single statistic. As you scroll down, the number counts up and the circle graph fills to the percentage based location. Try combining multiple circle counter modules on a single page to give your visitors a fun way to learn about your company or your personal skills.

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

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

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

Let』s get started.
Use the visual builder to add a Standard Section with a fullwidth (1 column) layout. Then add a Circle Counter Module to the row.

Update the Circle Counter Settings as follows:
Content Options
Title: Branding
Number: 80
Percent Sign: ON
Bar Background Color: #e07a5e
Design Options
Circle Color: #e07a5e
Text Color: Dark
Title font: default
Title Font Size: 26px
Title Text Color: #405c60
Number Font: Default
Number Font Size: 46px
Number Text color: #405c60

Save Settings
Now duplicate the Circle Counter Module twice and drag each duplicate to the second and third columns in your row.

Since your design elements have carried over to the duplicate modules, all you need to do is update the Title, and Number of the Circle Counter.
That』s it!
Check out the page.

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

Title
Input a title for the circle counter. This is typically a word that represents that statistic that you are displaying. It will be displayed below the number within the circle graph.
Number
Define a number for the circle counter. Picking a number bellow 100 will cause the circle graph to fill up to a percent that equals the number you entered. For example, entering the number 20 will cause the circle to fill up 20% of the way with your accent color.
Percent Sign
Here you can choose whether the percent sign should be added after the number set above.
Bar Background Color
This will change the fill color for the bar. The fill color amount is controlled by the 「number」 selected above. If you select the number 50, and a color of Blue, then your circle will fill up 50% of the way with a blue color.
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.
Circle Counter Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Circle Color
This is the color that will be used for the unfilled part of the circle (the negative space that is not filled by the Bar Background Color defined in the Content tab).
Circle Color Opacity
You can reduce the opacity of the filled part of the circle using this setting.
Text Color
Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.
Title Font
You can change the font of your title text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Title Font Size
Here you can adjust the size of your title text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Title Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your title text, choose your desired color from the color picker using this option.
Title Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your title text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Title Line Height
Line height affects the space between each line of your title text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Number Font
You can change the font of your number 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.
Number Font Size
Here you can adjust the size of your number 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.
Number 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 number text, choose your desired color from the color picker using this option.
Number Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your number 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.
Number Line Height
Line height affects the space between each line of your number 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.
Circle Counter Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

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

Divi Layout & Typography Customizer Settings

Divi Layout & Typography Customizer Settings
You can customize just about everything when it comes to layout & typography.

Adjusting Your Website』s Layout And Typography
To begin customizing your website』s Layout & Typography, you must first enter the Theme Customizer by clicking on the Divi > Theme Customizer link within your WordPress Dashboard. This will launch the customizer. Next look for the 「General Settings」 panel. Click the panel to open up the relevant settings and begin customizing. Within the General Settings panel you will notice three sections: Layout Settings, Typography and Background.

Layout Settings
The layouts panel is where you can adjust various sizing and spacing options for your website. Here you can increase or reduce spacing between columns, rows and sections, and adjust the size of your sidebar. You can also enable 「Boxed Layout」 mode from within this panel.

ENABLE BOXED LAYOUT
Here you can change your site into a box layout which frames the content of your site and exposes a background that can be customized.
WEBSITE CONTENT WIDTH
This is where you can set the max width of your content section. Since your content is on a responsive layout, it will adjust to smaller sizes but will not expand any wider than the max width set here.
The default is set to 1080px. This is a good width for most standard laptops and desktops.
WEBSITE GUTTER WIDTH
Gutter width corresponds to the amount of horizontal space (margin) between the columns in each row.
Optional values for gutter width range from 1 to 4.
1 represents zero margin between columns.
2 represents a 3% right margin between columns.
3 represents a 5.5% right margin between columns.
4 represents a 8% right margin between columns.
USE CUSTOM SIDEBAR WIDTH
This sets the default sidebar width for your theme. This applies to all pages on your theme that have a sidebar and are not built using the Divi Builder.
SECTION AND ROW HEIGHT
These options adjust the amount of vertical spacing (top and bottom padding) for each section and row.
THEME ACCENT COLOR
Before you start changing the colors for your other elements, you should change this first. Once you change it, save & publish your settings and refresh your page. Now the updated Theme Accent Color should have populated other elements automatically.
Typography
The typography panel is where you can adjust the default appearance of the text across your entire website. You can adjust the size of your body font and header fonts, which will be reflected across all areas of the site proportionally. You can adjust their colors as well as line height, letter spacing and font styles. Finally, you can also choose between dozens of fonts to be applied to each.

BODY TEXT SIZE
This changes the default body text for your theme. The default size is 14px.
BODY LINE HEIGHT
The line height of each individual line of text.
HEADER TEXT SIZE
Divi allows you to set your default Header text size here. This effects elements of Divi like the Fullwidth Header Module titles.
HEADER LETTER SPACING
Letter spacing adjusts the horizontal space between letters. The Header Letter Spacing value affects all of the header levels (h1, h2, h3, h4, h5, h6), blockquotes, and slide titles.
HEADER LINE HEIGHT
Just like for the letter spacing value, the header line height value affects all of the header levels (h1, h2, h3, h4, h5, h6), blockquotes, and slide titles. Because of the larger font size, 1em is the default settings.
HEADER FONT STYLE
Use these options to change the font style of your headers.
HEADER AND BODY FONT
The default font in Divi is Open Sans , but the Divi Theme Customizer has almost a hundred fonts to choose from! Take advantage of these built-in fonts and test which ones work best for your theme.
BODY LINK COLOR
The body link color is inherited by your theme accent color. But you can always change it here.
BODY TEXT COLOR
Here you can change the color of your body text.
HEADER TEXT COLOR
Here you can change the color of your headers.
Background
The background panel allows you to adjust the background color of your theme, as well as upload a custom background image and adjust its positioning on the page. Background images and colors work great when paired with the Boxed Layout setting in the Layouts panel mentioned earlier.

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 Code Module

The Divi Code Module
How to add, configure and customize the Divi code module.

The Code Module is a blank canvas that allows you to add code to your page, such as plugin shortcodes or static HTML. If you would like to use a third party plugin, for example a third party slider plugin, you can simply place the plugin』s shortcode into a standard or fullwidth code module to display the item unimpeded.
How To Add A Code Module To Your Page
Before you can add a code 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 code 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 「code」 and then click enter to automatically find and add the code 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 an External Style Sheet to Animate Content on an Individual Page
In this example, I』m going to add a link script to import Animate.css in order to add animation effects to the elements on the page. Since the Animate.css file has a lot of code, it makes sense to load it only on the page that I need it.
Simply add a Regular Section and a fullwidth (1 column) row and add the Code Module.

In the content text box, add the code snippet.

Now, all you have to do is add a few CSS classes to animate any element of your page of CSS classes to your page. In this example, I』m going to make the button bounce when loading the page.
In the Button Module Settings, under the Advanced tab, enter the two clases 「animated」 and 「bounce」 into the CSS Class text box.

Now the button will bounce when loading the page.

Here are a few more examples of how you can use the code module:

Add javascript code blocks or libraries that you only what applied to your page.
Integrate third party plugins like the revolution slider.
You can use the Fullwidth Code Module to embed a Typeform for more interactive questionnaires, contact forms, etc…
Add a floating action menu
Create a slide-in top bar ad.
Add a floating action button.

Tip: Sometimes adding code with line breaks will cause the code not to work. It is best to create your code in a text editor and concat it (make it all on one line) before pasting it in the Code Module.
Code 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.

Content
Here you can place any HTML, CSS or JavaScript code that you would like to display on the page in the current location. Only Editors and Admins are allowed to post unfiltered HTML, which means some code may be stripped from the module if it is used by an Author or Contributor. You can also placed shortcodes into the module. These shortcodes will be rendered inside of the parent column without any additional Divi module wrappers.
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.
Code 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.

Max Width
Any value entered here will restrict the width of any content rendered within the code module to the defined value. For example, entering 50% into the input field will reduce the content of the code module to 50% of the column that contains it.
Code 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.

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

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.

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