詩語，作者 Divi 文檔 - 第 10 頁共 16 頁

Divi Rows & Row Options

Divi Rows & Row Options
Sections are the builder』s largest building blocks, and can be used in various ways.

Rows are the various column layouts that can placed inside of sections. Much like modules, rows have various settings that can be accessed by clicking the settings icon on the top left of the row. In this tutorial we will be going over just a few of the features and how they can be used to create some very unique layouts. Rows settings in particular can be used to greatly increase the variety of layouts built with the Divi Builder since they create the structure that your modules are housed in.

The Content Settings
Background Color
Background images can be applied to an entire row. By default, rows have a transparent background color.
Background Image
Background images can be applied to the an entire row.
Background Video MP4
Background videos can be applied to rows. If you would like to apply a background video, you must upload both an MP4 and WEBM video and input the videos here.
Background Video Webm
Background videos can be applied to rows. If you would like to apply a background video, you must upload both an MP4 and WEBM video and input the videos here.
Background Video Width
After your videos have been uploaded, you must input the width of your video here. It must be equal to the actual width of the video, otherwise the background position will be incorrect.
Background Video Height
After your videos have been uploaded, you must input the height of your video here. It must be equal to the actual height of the video, otherwise the background position will be incorrect.
Pause Video
If you would like videos to be paused when clicked, enable this option.
Column Background Color
For each column in a row, you can assign a unique background color.
Column Background Image
For each column in a row, you can assign a unique background image.
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.

The Design Settings
Use Parallax Effect
If you would like to use a parallax affect for your row background image, you can enabled here and then choose your desired parallax method.
Column Parallax Effect
Here you can choose whether or not to use parallax effect for the background image of a specific column in your row.
Make This Row Fullwidth
If this option is enabled, the row will extend the full width of the browser window (similar to a full width section). This is a great way to create cool fullwidth column layouts.
Use Custom Width
You can also assign a custom width to a row. For example if you would like to add some variation to the flow of the page and make a certain row larger than the rest, you can input a custom width value here
Use Custom Gutter Width
Gutter width adjusts the distance between columns. There are 4 gutter width sizes, ranging from none to large. Setting the gutter width to 1 will result in no space between columns. When combined with the Fullwidth Row option, this can create effects similar to the FullWidth Portfolio module.
Equalize Column Heights
This is a great option, especially useful when you have applied background colors to individual columns. Enabling this option will force all columns in the row to have the same height value.
Custom Padding
If you would like to adjust the padding of the row, you can do so here.
Custom Margin
If you would like to adjust the margin of the row, you can do so here.
Column Custom Padding
If you would like to adjust the padding of a specific column in your row, you can do so here.
Column Custom Margin
If you would like to adjust the margin of a specific column in your row, you can do so here.

The Advanced Settings
CSS ID
You can assign an CSS ID to the row if you would like to target it in your stylesheet or with anchor links.
CSS CLASS
You can assign an CSS Class to the row if you would like to target it in your stylesheet.
Column CSS ID
You can assign an CSS ID to a specific column in your row if you would like to target it in your stylesheet or with anchor links.
Column CSS CLASS
You can assign an CSS Class to a specific column in your row if you would like to target it in your stylesheet.
Before
Input CSS here to be applied :before the main row div.
Main Element
Input CSS here to be applied to the main row div.
After
Input CSS here to be applied :after the main row div.
Column Before
Input CSS here to be applied :before the specified column div.
Column Main Element
Input CSS here to be applied to the specified column div.
Column After
Input CSS here to be applied :after the specified column div.
Visibility
This option lets you control which devices your row 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.
Let』s Give Some Settings A Test Drive
Now that we have gone over all of the settings, let』s test out a few in combination to show you what』s possible when each setting is used creatively. In this example I will be touching on the Fullwidth Row setting as an introduction. The option to make a row 「Fullwidth」 is one of the most versatile options in the set. This will extend the width of the row to the edge of the browser, similar to a Fullwidth Section. Unlike a Fullwidth Section, however, FullWidth Rows can have column structures and they can house any module! In the example below I have created a 4 column row and added a square image to each column. Next I enabled the 「Make Row Fullwidth」 to extend the row to the edges of the browser window.

Next I reduced the 「Gutter Width」 size to 「1」 to remove the spacing between columns in the row.

Finally I removed the padding above and below the row by changing 「Custom Padding」 top and bottom values to 「0.」

The result is a complete transformation of the row, turning our normal 4 column row of images into a full-width and full-bleed image gallery that looks stunning against the green section below it. This same effect can be created using custom column background colors and text-based modules as well. The possibilities are endless!

The Divi Login Module

The Divi Login Module
How to add, configure and customize the Divi login module.

The login module displays a WordPress login form, styled in the Divi fashion, anywhere on your page. If you are using WordPress as a membership system, then adding a login form directly to a page can be quite useful (instead of redirecting people to the branded WordPress login form that lives outside your website』s theme).

View A Live Demo Of This Module
How To Add A Login Module To Your Page
Before you can add a login 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 login 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 「login」 and then click enter to automatically find and add the login 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 Login Form on a Membership Site Login Page
Since membership sites require the user to login access all or some of the content, the Login Module makes it easy to add a login form to your own membership login page. Also, you can choose to redirect users to this form instead of the default WordPress Login page.
Here is a simple login page with the Login Module I』m going to show you how to create:

Using the Visual Builder, add a new Standard Section to the membership login page with a fullwidth (1 column) row. Then insert the Login Module to the row.

Update the Login Settings as follows:
Content Options
Title: Login to the Membership Course Here
Content: [enter short description of the course or instructions for logging in]
Redirect To The Current Page: YES
Design Options
Form Field Background Color: #f0f0f0
Text Color: Dark
Header Font Size: 35px
Header Text Color: #888888
Body Font Size: 16px
Use Border: YES
Border Color: #0c71c3
Border Width: 1px
Custom Padding: 50px Top, 50px Right, 50px Bottom, 50px Left
Use Custom Styles for Button: YES
Button Text Size: 26px
Button Text Color: #ffffff
Button Background Color: #0c71c3
Button Border Width: 0px
Button Font: default, Uppercase
Add Button Icon: YES
Button Icon: add unlock icon
Only Show Icon On Hover for Button: NO

That』s it. Now the membership site has custom Login Form that users will get redirected to when needing to login to the course. No need to settle for the default WordPress login form anymore.

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

Title
The title will appear within the login box, above the login form.
Content
The content will be displayed within the login box, below the title. If you would like to add some additional description, then you can use the field. Otherwise, just leave it blank.
Redirect To The Current Page
Here you can choose whether the user should be redirected to the current page.
Use Background Color
If you would like to give your login form a solid background color, then select 「yes」 for this option and the background color you select in the next option will be used.
Background Color
Select a background color to be displayed as the background to your login box. If you have chosen to disable background colors in the previous option, then this color will have no affect.
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.
Login 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.

Form Field Background Color
The login form contains two input fields for username and password. You can use this setting to adjust the background color of these fields.
Form Field Text Color
The login form contains two input fields for username and password. You can use this setting to adjust the text color of these fields. If you have adjusted the form field background color you may also want to adjust the text color to ensure a harmonious color relationship.
Focus Background Color
When an input field is focused with a visitor』s mouse, the colors change to make it clear which field is active. Here you can define the background color of focused fields.
Focus Text Color
When an input field is focused with a visitor』s mouse, the colors change to make it clear which field is active. Here you can define the text color of focused fields.
Use Focus Border Color
If you would like to add a border to input fields when they are focused, you can enable this option.
Focus Border Color
Using this setting you can change the color of the border that appears on focused input fields.
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.
Text Orientation
Here you can adjust the alignment of your text.
Header Font
You can change the font of your header text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Header Font Size
Here you can adjust the size of your header text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your header text, choose your desired color from the color picker using this option.
Header Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Line Height
Line height affects the space between each line of your header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Font
You can change the font of your body text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Body Font Size
Here you can adjust the size of your body text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your body text, choose your desired color from the color picker using this option.
Body Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your body text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Line Height
Line height affects the space between each line of your body text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
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.
Login Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

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

The Divi Post Title Module

The Divi Post Title Module
How to add, configure and customize the Divi post title module.

The Post Title Module displays the title of your current post, and optionally the post Featured Image and meta data in an elegant fashion. This allows you to create more unique looking posts when building your posts using the Divi Builder.
View A Live Demo Of This Module
How To Add A Post Title Module To Your Page
Before you can add a post title 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 post title 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 「post title」 and then click enter to automatically find and add the post title 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: Styling a Post Title Module for a Blog Post
For this example, I』m going to show you just how easy it is to style a custom post title for a blog post.

The first thing you need to do is go to the 「Edit Post」 page from the WordPress dashboard. In the Divi Post Settings box at the top right, change the page layout to Full Width and hide the Post Title.

Using the Visual Builder, add Regular Section with a fullwidth (1 column) row. Then add the Post Title Module to the row.

Update the Post Title Settings as follows:
Content Options
Show Post Categories: NO
Show Comments Count: NO
Show Featured Image: YES
Featured Image Placement: Title/Meta Background Image
Design Options
Text Orientation: center
Text Color: Light
Use Text Background Color: YES
Text Background Color: rgba(0,0,0,0.35)
Title Font: Roboto (bold)
Title Font Size: 50px
Title Letter Spacing: 2px
title Line Height: 1em
Meta Font: Raleway Light
Meta Font Size: 24px
Meta Font Color: #e0ba67

Save Settings
That』s it. Now you never have to settle for another boring post title again!
Post Title 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 Title
Here you can choose whether or not display the Post Title.
Show Meta
Here you can choose whether or not display the Post Meta.
Show Author
Here you can choose whether or not display the Author Name in Post Meta.
Show Date
Here you can choose whether or not display the Date in Post Meta.
Date Format
Here you can define the Date Format in Post Meta. Default is 『M j, Y』
Show Post Categories
Here you can choose whether or not display the Categories in Post Meta. Note: This option doesn』t work with custom post types.
Show Comments Count
Here you can choose whether or not display the Comments Count in Post Meta.
Show Featured Image
Here you can choose whether or not display the Featured Image.
Featured Image Placement
Here you can choose where to place the Featured Image.
Background Color
Define a custom background color for your module, or leave blank to use the default 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.
Post Title 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.

Use Parallax Effect
If your featured image placement is set to 「title/Meta Background Image」, you can choose whether or not to use parallax effect for the featured image.
Parallax Method
Here you can choose which parallax method to use for the featured image – CSS or True Parallax.
Text Orientation
Here you can choose the orientation for the Title/Meta text.
Text Color
Here you can choose the color for the Title/Meta text.
Use Text Background Color
Here you can choose whether or not use the background color for the Title/Meta tex.
Text Background Color
If background color is enabled, choose your desired background color here.
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.
Meta Font
You can change the font of your meta text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Meta Font Size
Here you can adjust the size of your meta text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Meta Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your meta text, choose your desired color from the color picker using this option.
Meta Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your meta text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Meta Line Height
Line height affects the space between each line of your meta text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
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.
Post Title 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.

Adjusting Divi Button Styles In The Theme Customizer

Adjusting Divi Button Styles In The Theme Customizer
Change the look and feel of your buttons to give your site a unique look.

Divi』s Buttons Are Infinitely Customizable
We have decked out the Theme Customizer with every button customization option you could ever need. Using these customizer controls, you can create truly unique and stunning buttons for your website.To begin customizing your website』s buttons, you must first enter the Theme Customizer by clicking the Divi > Theme Customizer link within your WordPress Dashboard. Next click the 「Buttons」 panel to reveal the button settings. The button settings are separated into two sections: Buttons Styles and Button Hover Styles.

Button Style
Here you can adjust the general appearance of your buttons using the various customizer controls. You can change the color of your button text & background, adjust the button font size and style, and even create rounded buttons using the border-radius slider. In addition, you can change the default font and icon used within the buttons.

Button Hover Style
You can adjust the button』s hover style as well. When you make a hover style different from the normal button style, the effect will be transitioned during hover, creating a pleasing animation. This animation is triggered when the visitors hovers over the button with their mouse.

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.

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.

How To Use Divi Leads

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

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

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

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

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

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

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

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

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

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

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

The Divi Header & Navigation Theme Customizer Settings

The Divi Header & Navigation Theme Customizer Settings
Easily customize the look & feel, as well as the structure of your header.

Customizing The Header & Navigation Of Your Theme
To begin customizing your website』s Header & Navigation, 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 「Header & Navigation」 panel. Click the panel to open up the relevant settings and begin customizing.

Header Format
Here you can adjust your header』s general format, such as switching between the main layouts modes: Default, Centered, Centered Inline Logo, Slide-in, and Fullscreen. Choosing Centered will place your logo above your navigation menu and centered both within the header. Choosing Centered Inline Logo will place the logo in-line with your nav menu elements, centered between the links. You can also enable Vertical Navigation from within this section, which will create a drastically new look for your site, putting the navigation bar on the left of your content.

Primary Menu Bar
In this menu you can adjust the size, style and color of your primary navigation menu. This is the large white bar at the top of your page that contains your logo and your primary menu links. Within this panel you can do a lot of things very easily, such as adjust the height of your logo, the background color of the menu bar and the color of your links.

Make Full Width
This extends the menu the full width of the browser window.
Hide Logo Image
If you want, here you can completely hide the logo image from your menu.
Menu Height
Here you can change the menu height to whatever you want. Although, be careful not to make your menu height too large since you could be wasting valuable real estate on a menu instead of your homepage content.
Logo Max Height
Here you can increase or decrease the max width percentage of your logo to make it bigger or smaller.
Text Size, Letter Spacing, Font, Font Style, Text Color, Active Link Color
These options allow you to customize the menu links.
Background Color
This allows you to change the background color of your primary menu.
Dropdown Menu Settings
Your dropdown menu doesn』t have to inherit the style of the main menu. Here you can create a unique design for your dropdown menu. You can even add custom animation when displaying the dropdown menu.
Secondary Menu Bar
The secondary menu bar is the smaller of the two navigation bars that appears above your main navigation bar. This menu will not appear unless you have assigned a menu to the secondary menu location. Once enabled a smaller blue menu bar will appear. This panel allows you to customize that menu bar and the text within it, adjusting the background color, text color and text styles.

Fixed Navigation
The fixed navigation bar refers to the navigation bar as it becomes fixed to the top of your screen when you scroll. You will notice that as you scroll down your page, your menu bar remains fixed to the top of the screen and shrinks to provide more readable space on the screen. All of this is customizable from within the Fixed Navigation panel. You can adjust the height of the menu if you think it shrinks too small, and you can adjust the colors of the menu and the menu links independently from the menu』s non-fixed state.

Header Elements
Header elements are various optional things that appear in your navigation bar, each of which can be toggled on and off here, such as your social follow icons, the search icon, phone number and email address.

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.

The Divi Library

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

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

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

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

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

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

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.