Divi 文檔

The Divi Portfolio Module

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

With the Portfolio Module you can show off your work anywhere on your site in any column structure.
View A Live Demo Of This Module
How To Add A Portfolio Module To Your Page
Before you can add a portfolio module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the 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 portfolio module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「portfolio」 and then click enter to automatically find and add the portfolio module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Adding a Portfolio Module to a Portfolio Page
For this example, I』m going to show you how to showcase a portfolio on a portfolio page.

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

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

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

Posts Number
Control how many projects are displayed. Leave blank or use 0 to not limit the amount.
Include Categories
Choose which categories you would like to display. Projects from categories that are not selected will not appear in the list of projects.
Show Title
Choose whether or not the title of each project is displayed when you hover over the project item.
Show Categories
Here you can turn the category links on or off.
Show Pagination
Here you can enable or disable pagination for this feed.
Background Color
Define a custom background color for your module, or leave blank to use the default color.
Background Image
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Portfolio Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Layout
Choose which layout you would like to use. 「Grid」 will display all of your items in a multi-column and multi-row layout. Fullwidth will display each project on its own line using large, un-cropped and full width images.
Zoom Icon Color
When hovering over an item within the portfolio 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 portfolio module, an overlay color fades in on top of the image and below the portfolio』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 portfolio items within the module.
Text Color
Here you can choose whether your text should be light or 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.
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.
Portfolio Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

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

The Divi Person Module

The Divi Person Module
How to add, configure and customize the Divi person module.

The Person Modules is the best way to create a personal profile block. This is a great module to use on About Me or Team Member pages where you want to create a bio of individual people. This module combined text, imagery and social media links into a single, cohesive module.
View A Live Demo Of This Module
How To Add A Person Module To Your Page
Before you can add a person 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 person 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 「person」 and then click enter to automatically find and add the person 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 「Our Team」 Section to an About Page
The about page is good place to feature your team members using the Person Module. This adds a personal touch and can help build trust with new clients.
For this example I』m going to show you how to use the Person Module to add an 「Our Team」 section to an about page for a small business. I』m going to use a three person, three column layout which keeps the section more compact and fits the overall design of the page.

Using the Visual Builder, insert a new standard section with a three column (1/3 1/3 1/3) row. Then add a Person Module to the first column.

Update the Person Module Settings as follows:
Content Options
Name: [Enter Person』s Name]
Position: [Enter Person』s Job Position]
Enter Social Media Profile URLs
Description: [Enter a short bio]
Image: [Enter a 600 x 600 image] I』m using a custom circle image for this example
Design Options
Icon Color: #fcbf00
Icon Hover Color: #e0a831
Header Font: Roboto, bold, capitalize
Header Font Size: 30px
Header Text Color: #505050
Header Letter Spacing: 1px
Header Line Height: 1.5em
Body Font Size: 18px
Body Line Height: 1.4em
Custom Padding: 15px Top, 15px Right, 15px Bottom, 15px Left
Advanced Options (Custom CSS)
Main Element:
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);

Save Settings
Now duplicate the Person Module you just created two times and drag the duplicated modules to the second and third columns of the row. Since the design has carried over for each of the duplicated Person Modules, all you have to do is update the content with the person』s image, title, position, social media URLs, and description.
That』s it!

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

Name
This is the name of the person you are featuring. The name is displayed at the top of the module in larger text.
Position
Position is displayed below the name in smaller text. This is often used to denote the professional position of a person within a corporate team. For example, Nick Roach, 「Graphic Designer.」
Facebook Profile URL
Input the URl to your Facebook page, or leave it blank to disable the Facebook icon.
Twitter Profile URL
Input the URl to your Twitter page, or leave it blank to disable the Twitter icon.
Google+ Profile URL
Input the URl to your Google+ page, or leave it blank to disable the Google+ icon.
LinkedIn Profile URL
Input the URl to your LinkedIn page, or leave it blank to disable the LinkedIn icon.
Description
Input the main text content for your module here.
Image URL
Here you can upload a photograph to be used in the bio.
Background Color
Define a custom background color for your module, or leave blank to use the default color.
Background Image
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Person Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Icon Color
This option controls the color of the social media icons that appear within each person』s profile. By default these icons are gray, buy you can change that color using this setting.
Icon Hover Color
You can also change the hover color of the social media icons. Select your desired color using the color picker in this setting.
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.
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.
Person 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.
Animation
By default, images are animated in as you scroll down the page. Here you can choose the direction of the animation, or disabled it desired.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

How To Create One-Page Websites With Divi

How To Create One-Page Websites With Divi
Divi makes it easy to create beautiful one-page websites.

Divi』s Single Page Sidebar Navigation Makes It Easy
When you create a new page, you can easily enable Divi』s Single Page navigation option, giving your visitors a visual and clickable representation of their progress on the page. You can also use custom anchor links and Section ID』s to create one-page menus for the complete One-Page package.

View A Live Demo Of This Feature
Enabling Single Page Navigation
Enabling Single Page Navigation is easy, and it can be done on a per-page basis. Whenever you create or edit a page, look for the 「Divi Settings」 box to the right of your text editor. Within this box you will see the Dot Navigation option. Select 「On」 from the dropdown menu, and then save the page. You will now notice that a floating navigation bar has been added to the right side of your page. The Dot Navigation bar automatically adds a clickable link to each section on your page. When you add a new section, a new circle link (or dot) will be added automatically to your floating side nav. Users can click the dots to skip to different sections on the page. It also makes it easier to identify where the visitor is on the page, making long-format pages easier to understand and navigate.

Create Custom Menu Links For One-Page Websites
In addition to side navigation, it』s also possible to transform your main header navigation into one-page navigation. If you are creating a one-page website, then you don』t want your menu links to point to separate pages. Instead, these links can point to relevant sections on the same page. When clicked, they can take you to the relevant section on the page using a smooth scrolling effect. This can be accomplished using custom ID』s. Any element on the page that is built with the builder can be assigned an ID. You can assign an ID to a section by clicking on the section settings icon, and looking for the 「CSS ID」 setting. Once an ID has been assigned, you can then link to it from the navigation menu. For example, let』s say you have a section called 「About Us」 and you want it to link to the part of your page that describes your company. Edit the section that contains your About Us content, and enter 「aboutus」 into the 「CSS ID」 field and click 「Save.」 Now that an ID has been assigned, we can point a link to it.

Pointing A Menu Link To An ID
To create a custom menu link, you will need to add a new link to your menu using the 「Appearances > Menus」 tab in your WordPress Dashboard. If you are unfamiliar with the Menus system, check out this great tutorial. Once you have created a new menu and assigned it to the Main Navigation location, you can start adding links to your header. In this case, we will be creating a custom link by clicking the 「Link」 tab on the left hand side of the page. Once clicked, you will be given two fields (URL and Link Text). For the 「Link Text,」 simply enter the text that you would like to show up in your menu (For example, 「About Us」). For the URL, we need to link to the ID that we assigned to our section earlier. In this case, we added the id 「aboutus」 but you can add any ID name that you like. Since we used the ID 「aboutus,」 we can link to that ID by creating a URL pointing to 「/#aboutus」. You can use this same method to create as many custom links as you want. Simply enter a URL of 「/#」 followed by the ID that you want to target.

The Divi Number Counter Module

The Divi Number Counter Module
How to add, configure and customize the Divi number counter module.

The number counter is a great way to display numbers in a fun and engaging way. This module is commonly used to display statistics about yourself or your company. For example, display your customer count or Facebook followers is a great way to showcase social proof.

View A Live Demo Of This Module
How To Add A Number Counter Module To Your Page
Before you can add a number 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 number 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 「number counter」 and then click enter to automatically find and add the number 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 Number Counter Module to Display Project Results in a Case Study
One great ways to use the Number Counter Module is to illustrate stats for case studies. Simply label each number counter with a certain result metric so the user can easily see the success of the project. In this example, I』m using the Number Counter Module to display four project results.
As you can see the, the top of the page includes the three project goals using the Bar Counter Module and the bottom of the page includes the results of the case study using the Number Counter Modules.

The section of the page showing the results of the case study using the Number Modules requires the use of a Specialy Section. Using the Visual Builder, add a Specialty Section to the page and select the following layout:

Select a 1 column layout for the right side of the section and enter the Headline and text needed for the case study results.

Insert a 2 column layout directly under the 1 column layout on the right side of the section.

Now add your first Number Counters Module to the left column.

Update the Number Counters Settings as follows:
Content Options
Title: New Visitors
Number: 54210
Percent Sign: OFF
Design Options
Text Color: Dark
Title font: default
Title Font Size: 20px
Title Text Color: #405c60
Title Line Height: 1em
Number Font: Default, Bold
Number Font Size: 60px
Number Text color: #e07a5e
Number Line Height: 72px

Save Settings
Duplicate the Number Counters Module and drag it into the adjacent right column and update the Title and Number options.

Duplicate the row that holds the two Number Counters Modules so that two more number counters are displayed below.

Then update the Title and Number options for those as well. Now you have all four number counters complete.

Don』t forget to add the 667 x 320 image to the left column/side of the specialty section.
It is finished! The combination of Number Counters and Bar Counters on this case study page really makes the content engaging.

Number 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 counter. This will be displayed below the number in smaller text.
Number
This is the number that the counter will count to. As you scroll down the page and reach the counter, the number will quickly count up from 0 until it reaches the number you define here. Only number values can be placed here.
Percent Sign
Here you can choose whether the percent sign should be added after the number set above.
Background Color
Define a custom background color for your module, or leave blank to use the default color.
Background Image
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Number Counter Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Text Color
Here you can choose whether your title 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.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Number 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.

The Divi Email Optin Module

The Divi Email Optin Module
How to add, configure and customize the Divi email optin module.

Growing your mailing list is easy using Divi』s Email Optin module. The email optin module now supports 20 of the most popular email marketing providers.

View A Live Demo Of This Module
How To Add An Email Optin Module To Your Page
Before you can add a email optin 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 email optin 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 「email optin」 and then click enter to automatically find and add the email optin 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.
Configuring Email Accounts
Before you can use the email optin module, you will first need to connect it to an email provider. These providers can be added and managed within the module settings. Once you add a new email provider, it will appear in the module settings whenever you edit an email optin module on your website.

To add a new email provider, first select your email provider from the Select Provider list. Next, click the Add button to link the module to your email account.
View Documentation For Supported Email Providers
Configuring Spam Protection Accounts
The email optin module gives you the option to utilize a 3rd-party service for spam protection. Spam protection providers can be added and managed within the module settings. Once you add a new spam protection provider, it will appear in the module settings whenever you edit an email optin or contact form module on your website.

To add a new spam protection provider, first select your provider from the Select Provider list and then click the Add button. Now you should see some new fields appear for api keys, secrets, etc (it varies by provider). You can find the keys/secrets in your account on your spam provider』s website.
View Documentation For Supported Spam Protection Providers
Use Case Example: Adding An Email Optin to the Bottom of a Blog Post
A common place to add an email optin form is just below your post content.For this quick example, I』m going to show you just how easy it is insert and style a Email Optin Module below a blog post using the Visual Builder.

Using the Visual Builder, add Standard Section with a one-half one-half (2 column) row under the section containing the post content.
Since this example is going to be an e-book offer with the optin, add an Image Module to the left column and upload an image of the book. Set the image alignment to 「Center」 and set the image max width to 300px.

Then add the Email Optin Module to the right column.

Update the Email Optin Settings as follows:
Content Options
Title: 「New Subscribers Get A FREE Copy of My E-Book」Button Text: 「Subscribe」Content: 「A Gripping Story that Will Leave You on the Edge of Your Seat.」Service Provider: [select service provider]Select List or Feed Title
Design Options
Form Field Background Color: #f1f1f1Focus Background color: #ffffffUse Focus Border Color: YESFocus Border Color: #02b875Text Color: DarkText Orientation: CenterHeader Font: PT SansHeader Font Size: 35pxHead Line Height: 1.3emBody Font Size: 18pxCustom Padding: 20px Right, 20px LeftUse Custom Styles for Button: YESButton Text Size: 26pxButton Text Color: #ffffffButton Background Color: #02b875Button Border Width: 2Button Border Color: #02b875Button Letter Spacing: 1pxAdd Button Icon: YesButton Icon: [add icon]

That』s it. If you want to take your email opt-ins to the next level you can get Bloom, Divi』s email opt-in and lead generation plugin specially built to help you grow your email list.
Email Optin Content Options
Within the content tab you will find all of the module』s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Title
Insert the title of your signup form here.
Button Text
Specify the signup button text here.
Content
This field is where you can enter the SignUp Module content.
Email Account
Service Provider
Here you can choose which mailing list provider you are using. See the section on this page titled 「Configuring Email Accounts」 above for more details.
Spam Protection
Service Provider
Here you can choose which spam protection provider you are using. See the section on this page titled 「Configuring Spam Protection Accounts」 above for more details.
Use Background Color
If enabled, a background color will be applied to the module. If a background color has been enabled, additional padding is added inside the module to separate the text content from the visible edge of the module. If a background color is not enabled, the background of the module becomes transparent and the additional padding is removed.
Background Color
You can make your Signup tile any color you wish by using the color selector. Select the same color as its section background to create the appearance of a full width or borderless effect.
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.
Email Optin 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 email optin 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 email optin 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
If the Background Color is dark, the Text Color should be set to 『Light』. Visa versa, if the Background Color is light, the Text Color should be set to 『Dark』.
Text Orientation
This dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified.
Header Font
You can change the font of your header text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Header Font Size
Here you can adjust the size of your header text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your header text, choose your desired color from the color picker using this option.
Header Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Line Height
Line height affects the space between each line of your header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Font
You can change the font of your body text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Body Font Size
Here you can adjust the size of your body text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your body text, choose your desired color from the color picker using this option.
Body Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your body text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Line Height
Line height affects the space between each line of your body text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
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.
Email Optin 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.

Adding Custom Fields To The Divi Email Optin Module

Adding Custom Fields To The Divi Email Optin Module
Adding custom fields to the Divi Email Optin module allows you to create custom subscribe forms and collecting additional information from your subscribers.

The Divi Email Optin module supports various email providers. Within each email provider, you can create custom data fields that can store different pieces of information about your email subscribers. This data can then be used to segment your email lists or create email autoresponders. By default, all email providers support the following fields: Name & Email. If you want to collect additional information, you will need to configure new custom fields.
Once a custom column of information has been created for your list within your email provider, a custom field can be added to your email optin module. When a visitor fills out that custom field, the data they input will be saved to your list in the subscriber』s user profile within your email provider』s system.
Adding Custom Fields In Your Email Provider
Each email provider works differently. Before you can add custom fields to your module, you will first need to log in to your email provider account and create the custom fields that you would like to use. Please refer to the following directions for your email provider to learn how to create custom fields. After that, continue down the page for more instructions on how to add those fields to your email optin module.
ActiveCampaign
ActiveCampaign has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Aweber
Aweber has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
CampaignMonitor
CampaignMonitor has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
ConstantContact
Unfortunately ConstantContact does not support custom fields. If you need to use custom fields for your list, we suggest using a different provider that is more capable.
Convertkit
Convertkit has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Emma
Emma has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Feedblitz
Feedblitz doesn』t require you to add custom fields within their platform. Once they receive data from a custom field that you add to your email optin module, they will automatically save that data within their system. Continue on to learn how to add custom fields to your email optin module.
GetResponse
GetResponse has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
HubSpot
HubSpot has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
iContact
iContact has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Infusionsoft
Infusionsoft has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
MadMimi
MadMimi has a great tutorial about how to add custom fields to your account. You can learn more here.
MadMimi doesn』t require you to add custom fields within their platform. Once they receive data from a custom field that you add to your email optin module, they will automatically save that data within their system. Continue on to learn how to add custom fields to your email optin module.
MailChimp
MailChimp has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
MailerLite
MailerLite has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
MailPoet
MailPoet has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Mailster
Mailster has a great tutorial about how to add custom fields to your account. You can learn more here.
Mailster doesn』t require you to add custom fields within their platform. Once they receive data from a custom field that you add to your email optin module, they will automatically save that data within their system. Continue on to learn how to add custom fields to your email optin module.
Ontraport
Ontraport has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
SalesForce
has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
SendinBlue
SendinBlue has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Divi and in Bloom when you add new custom fields. To learn more, continue to step two.
Adding Pre-Defined Custom Fields To The Email Optin Module
Most email providers will send Divi all of your custom field data, and the email optin module will be populated with a list of your available custom fields. Once you have added custom fields as described above, they will become available via the Content > Fields > Use Custom Fields option.

To add a new custom field, click the plus button and then choose your desired field from the Content > Field > Field dropdown menu.

You can then continue on to the Field Options to configure additional settings for your field. Here you can do things like add links to your input labels and re-organize field items.

Adding Manual Custom Fields To The Email Optin Module
Some email providers do not send Divi your custom field data. For these providers, you must configure your fields manually. These providers include: Aweber, Mailster, SendinBlue and MadMimi.
If you are using one of these providers, you will be able to manually select your field type and create your field items after selecting your custom field.

Adding Links To Your Checkboxes
A common use of checkbox custom fields is to record consent for data privacy regulations like the GDPR. In these cases, you may wish to link to your privacy policy or terms of service from a checkbox field item. All checkboxes and radio buttons support custom links. To add a link to a given field item, simply click the link icon and add your link text and link URL:

Creating Mega Menus In Divi

Creating Mega Menus In Divi
Mega menus are a great way to consolidate your excessive menu items.

Mega menus allow users to see more links all at once without the hassle of scrolling, hovering, and remembering the contents of your menu. A good way to think about Mega Menus is that they are drop down menus within drop down menus. So instead of your normal dropdown menu which shows a submenu when hovering over your main parent links in your navigation bar, a megamenu allows you to have additional parent links and submenus within the dropdown menu.
How To Add A Mega Menu To Your Navigation Bar
Log in to your WordPress dashboard and go to Appearances > Menus.

Create a menu with four parent links with each of the parent links having their own submenu links. In the example below I』m adding three submenu items under each of the four parent menu links.

Create an additional link to serve as your megamenu link. For the example below I』m calling this link 「Features」. Then drag the four parent menu links (each with their submenu links) over under the Features link.

Now in order to make your Megamenu you have to add a special CSS class to the main top tier link called 「Features」. You can do that by clicking the screen options link of the top your page and making sure the CSS class option is checked.

Finally, you need to add a css class to the 「Features」 link you just created. Click the arrow on the right of the 「Features」 menu item to toggle the additional configuration options. Find the text box labeled CSS Classes and enter the class 「mega-menu」.

Now when you reload your page you can see that all those previous menus have been placed in the one giant menu under this one link, the Mega Menu.

The Divi Map Module

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

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

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

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

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

After you have obtained an API key, you must copy/paste it into the theme options panel by navigating to: Divi>>Theme Options>>General Settings>>Google Maps API Key
How To Add A Map Module To Your Page
Before you can add a map module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Locate the map module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「map」 and then click enter to automatically find and add the map module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Add a Map Module to a Contact Page
A map module is a great way to showcase your company location on your contact page. And the ability to add multiple pins to your map to showcase different company locations and information is a helpful and engaging feature.
For this example, I』m going to add a Map Module to showcase the company location and information by adding a custom pin to the map.

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

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

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

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

+ Add New Item
This is where you add new pins (or locations) to your Map Module. Clicking 「add new item」 will open a completely new list of design settings (including Content, Design, Advanced) for your new pin. See below for individual pin settings.
After you add your first pin, you will see a gray bar appear with the title of your pin shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the pin.
Google API Key
The Maps module uses the Google Maps API and requires a valid Google API Key to function. Before using the map module, please make sure you have added your API key inside the Divi Theme Options panel. Learn more about how to create your Google API Key here.
Map Center Address
Enter an address for the map center point, and the address will be geocoded and displayed on the map below. This is useful if you have multiple pins, and you want to have the map zoomed in to a specific, more focused location. You can simply type in an address in a standard format, such as 「1235 Sunny Road, Some City, State, 88343.」
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Map Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Mouse Wheel Zoom
Here you can choose whether the zoom level will be controlled by the mouse wheel or not. Often times it』s better to disable this option so that visitors are not disrupted as they scroll down the page and get their mouse wheel stuck inside the map』s iframe. This is especially true for fullwidth map modules.
Draggable Zoom
Here you can choose whether or not the map will be draggable on mobile devices.
Use Grayscale Filter
Enabling this option will turn your map into a grayscale image.
Map Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

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

Adding A Custom Logo Image In Divi

Adding A Custom Logo Image In Divi
It』s easy to upload a custom logo image via Divi』s Theme Options.

The Divi Theme Logo
Your company logo is placed at the top of every page within the Divi Theme Header.

You can define your own logo image from within the Divi Theme Options page in your WordPress Dashboard. To locate the Divi Theme Options, click the Divi > Theme Options link in your WordPress Dashboard.

Within the Theme Options, under the General > General tab, locate the 「Logo」 field. In the field, input the full URL to your logo image. You can use the 「Upload Image」 button below the field to upload your logo image if you haven』t already done so. After installing, copy and paste the URL to the file into the field and click 「Save」 to save your settings.

If you don』t already have a logo image, then you can use the included logo.psd file as a starting point. If you have Photoshop, this file can be opened and the logo』s text can be easily edited using Photoshop』s type tool. If you don』t have Photoshop, then you can use included logo_blank.png file as a blank canvas in a different graphic design program. These files (logo.psd and logo_blank.png) are located within the Theme Package inside the /psd/ folder.

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.

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.