Divi 文档

The Divi Circle Counter Module

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

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

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

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

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

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

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

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

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

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

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

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

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

The Divi Button Module

The Divi Button Module
How to add, configure and customize the Divi button module.

View A Live Demo Of This Module
How To Add A Button Module To Your Page
Before you can add a button 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 button 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 「button」 and then click enter to automatically find and add the button 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 CTA Button to the Hero Section of a Landing Page.
There are countless ways to use the Button Module. For this example, I』m going to show you how to add a 「learn more」 button to the hero section of a landing page.

Let』s get started.
Use the visual builder to add a Standard Section with a fullwidth (1 column) layout. Add a Text Module to add and style the Headline and Subheadline. Then add the Button Module directly under the Text Module.

Update the Module Settings as follows:
Content tab
Button Text: Learn More
Button URL: [enter URL]
Design tab
Button alignment: Center
Text Color: Light
Use Custom Styles for Button: YES
Button Text Size: 20px
Button Text Color: #ffffff
Button Background Color: #0065cb
Button Border Width: 9px
Button Border Color: #0065cb
Button Border Radius: 100px
Button Letter Spacing: 2px
Button Font: Source Sans, Bold, Uppercase
Button Hover Letter Spacing: 2px

That』s it! This is just one of the countless ways you can use the button module.

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

Button Text
Input your desired button text.
Button URL
Input the destination URL for your button.
URL Opens
Here you can choose whether or not your link opens in a new window.
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.
Button 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.

Button Alignment
Here you can choose to have your button aligned to the left, right or center.
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.
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.
Button 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.
Button Relationship
Here you can define a custom rel attribute for the button, such as rel=」nofollow.」 Divi lets you pick from all of the most common link attributes.
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 Blurb Module

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

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

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

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

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

Now you have your first blurb finished.

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

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

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

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

CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.
Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Image/Icon Animation
This controls the direction of the lazy-loading animation.
Image Alt Text
If you did not choose to use an Icon, then this setting will appear. Alternate text provides any necessary information if the image does not load, appear properly, or in any other situation where a user cannot view the image. It also allows the image to be read and recognized by search engines.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

The Divi Blog Module

The Divi Blog Module
How to add, configure and customize the Divi blog module.

With Divi, even blogs are a module, and your 「blog」 can be placed anywhere on your website, and in various formats. You can combine blog and sidebar modules to create classic blog designs. 1 column, 2 column or 3 column blogs can all be built using blog and sidebar modules.

View A Live Demo Of This Module
How To Add A Blog Module To Your Page
Before you can add a blog 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 blog 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 「blog」 and then click enter to automatically find and add the blog 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 Blog Module with A Grid Layout in a Specialty Section with a Right Sidebar
For this example, I』m going to add a Blog Module to a blog page. This blog page has a fullwidth header with a search module below it. Under the Search Module, I』m going to add a specialty section with the Blog Module on the left side and a sidebar section on the right. The sidebar on the right has a recent posts widget, an Email Optin Module, and a Person Module.
Here is what the example page looks like.

Notice the blog module is in a grid layout on the left side of the specialty section.
Let』s get started.
Use the visual builder to add a Specialty Section with the following layout:

You』ll be prompted to add either a 1 column or 2 column row for the left side. Choose the 1 column row.

Then add the Blog Module to the row.

Update the Blog Settings as follows:
Content Options
Posts Number: 6
Read More Button: ON
Show Pagination: NO
Grid Tile Background Color: #ffffff
Design Options
Layout: Grid
Use Dropshadow: ON
Overlay Icon Color: #ffffff
Hover Overlay Color: rgba(224,153,0,0.51)
Header Font: Default
Header Font Size: 21px
Header Text Color: #333333
Header Letter Spacing: 1px
Header Line Height: 1.2em
Use Border: YES
Border Color: #f0f0f0
Border Width: 1px
Border Style: Solid
Advanced Options
Custom CSS (Read More Button):
color: #e09900;
display: block;
text-align:center;
margin-top: 10px;
border: 1px solid #ccc;
padding: 5px;
text-transform: capitalize;
letter-spacing: 1px;

The advanced Custom CSS for the read more button creates a custom look that fits the design well.

On the right sidebar section of the Specialty Section layout you will need to add a sidebar module which pulls in the recent posts widget. Below that you will need to add an Email Optin Module. And then below the Email Optin you need to add the Person Module with info about the author.
That』s it!
Blog 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
Define the number posts that you wish to display. You will need to have posts made for anything to show up inside of this module.
Select the categories that you would like to include in the post feed. Any post categories that you have created will show up here for you to select/deselect.
Included Categories
Choose which categories you would like to include in the feed.
Meta Date Format
Define the date format that you would like to display on your blog posts here. The default layout is a M j, Y formate (January 6, 2014) See the WordPress Codex on date formats for more options.
Content
Showing the full content will not truncate your posts on the index page. Showing the excerpt will only display your excerpt text.
Offset Number
Choose how many posts you would like to offset by. If you offset by 3 posts, for example, the first three posts in your blog feed will not be displayed.
Show Featured Image
This option allows you to choose whether or not you would like thumbnail images to appear in your blog module.
Read More Button
Here you can define whether to show 「read more」 link after the excerpt or not.
Show Author
Choose whether or not you would like to display the author of each blog post within the post meta area below the post title.
Show Date
Choose whether or not you would like to display the date on which each post was created within the post meta area below the post title.
Show Categories
Choose whether or not you would like to display post categories within the post meta area below the post title.
Show Comment Count
Choose whether or not you would like to display comment count within the post meta area below the post title.
Show Pagination
Choose whether or not you would like to display pagination for this feed. To enable numbered pagination, you will need to install the WP Page Navi plugin.
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.
Blog 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
You can either choose to display your blog posts in a grid or a full width layout.
Featured Image Overlay
If enabled, an overlay color and icon will be displayed when a visitors hovers over the featured image of a post.
Overlay Icon Color
Here you can define a custom color for the overlay icon.
Hover Overlay Color
Here you can define a custom color for the overlay.
Hover Icon Picker
Here you can define a custom icon for the overlay.
Text Color
If your blog is being placed onto a light background the Text Color should be set to 『Dark』. Visa versa, if your blog is being placed onto a dark background, the Text Color should be set to 『Light』.
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.
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.
Blog Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

Using Divi』s Blank Page Template

Using Divi』s Blank Page Template
Use the Blank Page template to create unique stand-alone landing pages.

Enabling The Blank Page Template
The blank page template disabled your header and footer and a specific page, leaving only what is built with the builder visible. This is a great way to create unique landing pages that are separate from the rest of your website. For example, you might create a sales landing page, a coming soon page, a newsletter optin page, or a maintenance mode page.When you create a new page, you will notice a settings box on the side of your screen called 「Page Attributes.」 Within this box, look for the 「Template」 option, and from the dropdown menu, select the 「Blank Page」 template.

Once you update your page, you will see that your header and footer has been removed. This gives you a blank canvas on your individual page that you can use to create truly unique designs. Check out this sleek landing page:

How about a coming soon page complete with a countdown timer and an optin box? There are so many possibilities!

The Divi Bar Counters Module

The Divi Bar Counters Module
How to add, configure and customize the Divi bar counter module.

Animated counters are a fun and effective way to display stats to your visitors. Animation is triggered using lazy-loading to make browsing the page truly engaging. You can place as many counters as you would like inside of this module.

View A Live Demo Of This Module
How To Add A Bar Counter Module To Your Page
Before you can add a bar 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 bar 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 「bar counter」 and then click enter to automatically find and add the bar 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 Bar Counters Module to Display Project Goals in a Case Study
One great ways to use the Bar Counters Module is to illustrate stats for case studies. Simply label each bar 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 Bar Module to display three project Goals.

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 Module.
Let』s get started.
Use the visual builder to add a Standard Section with a fullwidth (1 column) layout. Then add a Bar Counters Module to the row.

Update the Bar Counters Settings as follows:
Content Options
Use Percentages: ON
Background Color: #dddddd
Bar Background Color: #e07a5e
Design Options
Text Color: Dark
Title font: default
Title Font Size: 20px
Title Text Color: #405c60
Title Line Height: 2em
Percent Font: Default
Percent Font Size: 16px
Percent Text color: #ffffff
Percent Line Height: 2.5em

Now go back to the Content tab and select + Add New Item to add the first bar counter to the module.
Update the Individual Module Settings as follows:
Content tab
Title: Branding
Percent: 80
Save Settings

Add two more bar counters to the module and give each a Title and a Percent.

That』s it!

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

Use Percentages
By default, percentages are displayed within the colored bar counter. This text can be disabled using this setting, allowing the visual bar graph to speak for itself.
Background Color
This option allows you to adjust the background color of each bar counter. This settings applies to the negative space behind the filled bar color.
Bar Background Color
This option allows you to adjust the background color of the filled bar. This background color settings overlays the previous background color setting.
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.
Bar 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 text will appear 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. You can further customize your text color using the additional text color options that follow.
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.
Percent Font
You can change the font of your percent 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.
Percent Font Size
Here you can adjust the size of your percent 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.
Percent 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 percent text, choose your desired color from the color picker using this option.
Percent Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your percent 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.
Percent Line Height
Line height affects the space between each line of your percent 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.
Border Radius
Applying a border radius will round the corners of the bar within the bar counter. The higher the border radius, the more rounded the corners become.
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.
Bar Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. Here you can add custom top padding and bottom padding to the bar module.
Bar 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.

Title
The title defined here will appear above your the bar counter. Leave blank to have no title.
Percent
This value defines how filled the bar counter will be. You can input a value between 1% and 100%.
Background Color
This option allows you to adjust the background color of each bar counter. This settings applies to the negative space behind the filled bar color.
Bar Background Color
This option allows you to adjust the background color of the filled bar. This background color settings overlays the previous background color setting.
Individual Bar Counter Design Options

Label Color
Option changes the color of the bar』s title text that appears above the bar counter.
Percentage Color
This option changes the color of the percentage text that appears inside of tour bar counter.
Individual Bar Counter Advanced Options

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

The Divi Audio Module

The Divi Audio Module
How to add, configure and customize the Divi audio module.

The audio module allows you to embed an audio file + a custom audio player anywhere on your page. The audio player assumes the clean/modern style of the Divi theme. This is a great feature for musicians who want to show off their latest creations, or podcasters who want to post their latest shows.

View A Live Demo Of This Module
How To Add An Audio Module To Your Page
Before you can add an audio 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 audio 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 「audio」 and then click enter to automatically find and add the audio 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 Featured Podcast Episode to a Podcaster』s Site Homepage
For this example, I』m going to show you how to use the Audio Module to create a custom audio player for a feature podcast.
Here is the page with the Featured Podcast at the bottom:

Let』s get started.
Use the visual builder to add a Regular Section with a fullwidth (1 Column) row. Change the row setting to have a custom width of 800px. Then add an Audio Module to the row.

Update the Module Settings as follows:
Content Options
Title: [enter title]
Artist Name: [enter artist]
Album Name: [enter album]
Audio: [upload audio file]
background image: [upload 800 x 281 background image]
background image position: Bottom Center
Design Options
Text Color: Light

That』s it!
The audio module really is easy to use and looks great.

Audio 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 of the audio module is displayed within the audio player. This is typically the name of your song.
Artist Name
Here you can input an artist name. This will be displayed in the audio player below the title.
Album Name
If your audio file is a song that is part of a larger album, you can input an album name here. This name will appear below the artist name within the module.
Audio File
Define the audio file for use in the module. To remove an audio file from the module, simply delete the URL from the settings field. Click the 「upload」 button to upload an audio file from your computer to be used in the audio player.
Cover Art Image
Cover art images are displayed to the left, or above the audio controls (depending on your column width). Click the 「Upload」 button to upload an image from your computer to be used as your cover photo.
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.
Admin Label
This will change the label of the module in the builder for easy identification.
Audio 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 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.
Caption Font
You can change the font of your caption 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.
Caption Font Size
Here you can adjust the size of your caption 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.
Caption 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 caption text, choose your desired color from the color picker using this option.
Caption Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your caption 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.
Caption Line Height
Line height affects the space between each line of your caption 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.
Audio 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.

Divi Design Settings & Advanced Module Settings

Divi Design Settings & Advanced Module Settings
You can customize absolutely everything about any module using the advanced design settings.

Whenever you edit a module, row or section, you will notice three tabs in the settings popup: Content, Design, and Advanced. Everything you need to create awesome Divi Layouts and take full advantage of each module can be found in the Content tab. However, if you want even more control over the appearance of the module then you can venture into the Design tab. If you are a developer and you want to use your own CSS instead of using the design controls in the Design tab, then you can venture further into the Advanced tab. When combined, there is nothing that can』t be customized.
Design Settings
The Design settings vary from module to module. For each, we have added all the possible design settings that you could ever want into the Design tab. Due to the sheer breadth of design settings available for certain modules, we have separated them into labeled dropdowns that toggle each group of design settings. There is also a convenient Search Options box above all options to make finding a specific design option that much easier.
To locate and use the Design Settings, simply edit an existing module, row or section (or create a new one) to open up the settings popup. Next click on the Design tab to reveal the design options.

From within this tab you can do just about anything. Settings will vary depending on the type of module you are editing. Typically you will find options to adjust typography (such as text size, letter spacing, line height, etc), spacing adjustments (such as custom padding and margin values), color options (such as text color, overlay color, column background colors) as well as a slew of unique settings for certain elements. Utilizing these design options can create some truly unique.
Advanced Settings
In the Design tab, we have created so many options that you can do just about anything that can be done with CSS (without touching a line of code). If you are a developer, however, you might prefer to write your own code instead of using our custom design controls. In this case you can use the Advanced tab, which can be found right next to the Design tab in the modal settings window for modules, rows and sections.

In this tab you can add a custom CSS ID or CSS Class in order to target and apply your own CSS from your child theme』s style.css file.
If you want to remove the need and the hassle of creating Child Themes, you can easily target CSS to individual modules on individual pages by utilizing the options in the Custom CSS dropdown. Here we have broken down all of the structural elements of the module, and given you text area fields where you can type in your own CSS. Using this panel you can apply CSS to individual parts of the module. For example, you could apply custom CSS directly to a Blurb Icon, or create your own :after pseudo element right from the Divi Builder.
And finally, in the visibility dropdown, you are able to adjust the visibility of your module on phones, tablets, and desktops.

The Divi Accordion Module

The Divi Accordion Module
How to add, configure and customize the Divi accordion module.

The accordion module is a great way to consolidate information within a single system. Accordions are very similar to tabs, except that the items are displayed within a vertical list. When a new item within the list is opened, the previously-opened item is closed and the new item』s content is displayed.

View A Live Demo Of This Module
How To Add An Accordion Module To Your Page
Before you can add a accordion 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 accordion 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 「accordion」 and then click enter to automatically find and add the accordion 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: Showcasing Product Features Using the Accordion Module
For this example, I』m going to show you how to add product features to a product page using the Accordion Module.

Here is the toggle module in action:

Let』s get started.
Use the visual builder to add a Regular Section with a 1/2 1/2 (2 column) row. Edit the section settings to change the background color to #d94b6a (pink).
On the left column, add your product image.

On the right column, add a Text Module to serve as a header above the Accordion Module.

Finally, add the Accordion Module directly under the Text Module on the right column.

Update the Accordion Settings as follows:
Content Options
Open Toggle Background Color: #ffffff
Closed Toggle Background Color: rgba(255,255,255,0.83)
Design Options
Icon Color: #d94b6a
Open Toggle Text Color: #333333
Closed Toggle Text Color: #333333
Toggle Font: Raleway
Toggle Font Size: 20px

Save Settings
Under the Content tab, click + Add New Item to add your first accordion to the module.
Update the Individual Accordion Settings as follows:
Content Options
Title: [enter title]
Content: [enter content]

Note: Since we already configured the design options for the Accordion Module Settings, there is no need to update the design of the individual accordion settings unless you want to override the Module settings.
Now duplicate the accordion item you just created twice and update the Title and Content for each of the duplicates as needed.

That』s it! The accordion looks great and keeps the content compact, fitting nicely in the section of the page.

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

Open Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of opened toggles. Select your desired color from the color picker to apply it to your module.
Closed Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of closed toggles. Select your desired color from the color picker to apply it to your module.
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.
Accordion 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
Here you can adjust the color of the icon that appears inside of each toggle, to the inner right of the toggle rectangle. If you are adjusting the background color of your toggle, you may want to adjust the icon color to better compliment your custom color.
Open Toggle Text Color
The text color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the text color of opened toggles. Select your desired color from the color picker to apply it to your module.
Closed Toggle Text Color
The text color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the text color of closed toggles. Select your desired color from the color picker to apply it to your module.
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.
Toggle Font
You can change the font of your toggle 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.
Toggle Font Size
Here you can adjust the size of your toggle 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.
Toggle 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 toggle text, choose your desired color from the color picker using this option.
Toggle Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your toggle 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.
Toggle Line Height
Line height affects the space between each line of your toggle 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.
Accordion 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
The title will be displayed when the item is closed within the accordion, as well as above the accordion content text when the item has been opened.
Content
The content is displayed within the item box when the accordion item has been opened, below the title.
Open Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of opened toggles. Select your desired color from the color picker to apply it to your module.
Closed Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of closed toggles. Select your desired color from the color picker to apply it to your module.
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.
Individual Accordion Design Options

How To Update Your Divi Builder WordPress Plugin

How To Update Your Divi Builder WordPress Plugin
Using our Elegant Updater Plugin, you can update the Divi Builder right from your dashboard.

Updating Your Themes & Plugins
Before you can update, you must first authenticate your Elegant Themes subscription by inputting your Username and API Key into the Updates tab of your theme or plugin settings. Only members with active Elegant Themes accounts have access to the latest versions of our products. Your Username is the username you use when logging in to ElegantThemes.com, and your API Key can be found by logging into your Elegant Themes account and clicking on the Account > Your API Key link. Once you have authenticated your account, you can click the update link when you receive an update notification to automatically update your theme or plugin
Update Notifications
When new updates become available for any of our themes or plugins, a notification will appear in the Dashboard > Updates page of your website』s WordPress Dashboard.

Authenticating Your Membership
Before you can update your theme or plugin, you must first authenticate your Elegant Themes subscription. Only members with active accounts have access to product updates. To authenticate your account, you will be asked to input two pieces of information into your theme or plugin settings panel: 1) Your Username and 2) Your API Key. Your username is the same username you use when logging in to your ElegantThemes.com account, and your API Key is a unique identifier used to authenticate your account that is only available to you when logging in. To locate your API Key, log in to the Elegant Themes members area and click on the Account > Your API Key link. Copy the API Key displayed on the page. You will by pasting this key into your Theme or Plugin options page.

Once you have copied your API Key, you will need to use it to authenticate your account by pasting it into your theme or plugin options page. Log in to your website』s WordPress Dashboard and navigate to your theme or plugin options page. For Divi, this can be found by clicking the Divi > Plugin Options link.

Once you have loaded your theme or plugin options page, look for the Updates tab. Click the Updates tab to reveal the Username and API Key fields. Type your username into the Username field and paste the API Key you copied earlier into the API Key field. You should confirm that you have not copied any extra white spaces by mistake. Click save to complete the account authorization.

Once you have entered your credentials, you are now ready to update your plugin. Click on the Dashboard > Updates tab and update your theme or plugin normally using the WordPress update interface. If you do not see any update notifications, or you receive an authentication error when updating, try waiting a bit and then check back later. Sometimes WordPress will cache update notifications and it can take some time for them to appear correctly.