Divi 文档

The Divi Testimonial Module

The Divi Testimonial Module
How to add, configure and customize the Divi testimonials module.

Testimonials are a great way to encourage trust from your visitors. Using the Divi testimonial module, you can quickly add testimonials to your join & sales pages. testimonials are usually compelling quotes from your customers. Each testimonial has a quote, the name of it』s author, and a link to their website (which is optional). These are great when used in conjunction with the pricing tables module on sales pages.
View A Live Demo Of This Module
How to Add a Testimonial Module to Your Page
Before you can add a testimonial 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.

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 testimonial 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 「testimonial」 and then hit enter to automatically find and add the testimonial 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: Testimonial Section for Product Landing Page
Adding a testimonial section is one of the best ways to promote your product or service. For this example, I will show you how to use the Testimonial Module to create a testimonial section at the bottom of a landing page to promote your product or service. The headline of the testimonial section is 「Happy Customers」. It is important to have an effective title that is both creative and to the point. The three testimonials are kept short in a three column layout followed by a CTA button at the bottom of the page.

To add the testimonial section to the page, use the visual builder to add a standard section with a three column row. Then add a testimonial module to the first column of your row.

Update your Testimonial Module Settings with the following:
Content tab
Author Name: [enter name]
Job Title: [enter title]
Company Name: [enter company]
Content: [enter testimonial content]
Portrait Image URL: [upload 90×90 image]
Quote Icon: Hidden
Use Background Color: NO
Design tab
Text Color: Light
Text Orientation: Center
Body Font: Roboto Light
Body Font Size: 20px
Body Line Height: 1.5em

Now that you have your first Testimonial Module created, duplicate it twice and drag the duplicated modules to to fill the second and third columns.

Since all of you design settings have carried over to the duplicated modules in the second and third row, all you need to do is go back and update the content for each.
That』s it.
The Testimonial Module Content Settings

The content tab settings are further organized into groups which you can toggle open to reveal more options. This makes finding the setting you』re looking for much easier. You can also use the search bar at the top to search all settings tabs at once for whatever setting you want. It will take you right to it!
Text
This is where you』re able to add the testimonial author』s name, job title, company, and the testimonial content itself.
Image
If you have a profile picture or some other type of image to accompany your testimonial this is where you will add it.
Link
Here you can add the author or company url and control how it opens.
Elements
Here you can choose to make the quote icon visible or hidden.
Background
Here you can choose to add a background color or image to your testimonial.
Admin Label
In this dropdown you can add an admin label that will appear in the back end builder as well as the visual builder』s skeleton view.
The Testimonial Module Design Settings

The design tab settings are organized into the following groups to make finding the setting you』re after easy. And remember, you can also use the search bar to find any setting even faster!
Quote Icon
This is where you』re able to adjust the quote icon』s color.
Portrait
The portrait settings allow you to adjust the border radius, portrait width, and portrait height for the image you may have added in the content tab.
Text
These settings allow you to change the text color and orientation.
Body Text
These settings allow you to adjust the body text font, weight, size, color, spacing, line height, and more.
Border
Here you can choose to use a border. And if you do choose to use a border, you』re also able to select it』s color, change it』s width, and choose it』s style.
Spacing
In the spacing area you』re able to add custom padding to the top, right, bottom, or left of the testimonial. You can also change these values for desktop, tablet, or mobile devices.
The Testimonial Module Advanced Settings

In the Advanced tab of your testimonial module you are able to add a unique css id and class. You are also able to add custom css to various pre-defined (and pre-selected) css selectors within the video slider module in the custom css dropdown. And finally in the visibility dropdown you are able to adjust the visibility of your module on phones, tablets, and desktops.

The Divi Tabs Module

The Divi Tabs Module
How to add, configure and customize the Divi tabs module.

Tabs are a great way to consolidate information and improve user experience on your page. Using Divi, you can create any number of tabs that will look great inside any sized column. At ¼ columns, tab buttons are stacked and remain visible. At larger sizes, tab buttons lay in a horizontal row. Any kind of content can be placed within a tab as tab content is controlled using the standard WordPress post editor.
View A Live Demo Of This Module
How To Add A Tabs Module To Your Page
Before you can add a tabs 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 tabs 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 「tabs」 and then click enter to automatically find and add the tabs 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 Tabs to Organize Product Features
Tabs are great for consolidating and organizing your content. One common use for tabs is to showcase features of a product. If your product has three or more features, organizing them into tabs will create a better user experience, allowing the user to easily digest the content.
For this example, I』m going to show you how to add a Tab Module to a product page for the purpose of showcasing the product features.

First add a new section and a new row with a 1/2 1/2 column layout. On the left column, add your 510 x 510 product image using the Image Module.

On the right column, add the Tabs Module. Under the Content Tab of the Tabs Module Settings, click 「add a new item」 to bring up the settings for your first specific tab. Update the tab settings under the Content tab as follows:
Title: [add the title or label of your tab]
Content: [add the main body content of your tab]

Save the tab settings and repeat this process to create two more tabs.

Once your tabs have been created, go to the Design tab of your Tabs Settings and change the Tab Text Color to #0c71c3 (blue).

Now you have a effective Tabs Module you can use to display information on your products.

Tabs 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 tabs to your Tabs Module. Clicking 「add new item」 will open a completely new list of design settings (including Content, Design, Advanced) for your new tab. See below for individual tab settings.
After you add your first tab, you will see a gray bar appear with the title of your tab shown as a label. The gray bar also has three buttons that allow you to edit the settings of the tab, duplicate the tab, or delete the tab.
If you have customized the settings for your first tab and want to keep the style throughout the rest of your tabs, click the duplicate icon/button. You will see a new gray bar appear beneath the first tab. Click to edit the content of the new tab and repeat this process for the rest of your tabs.
Active Tab Background Color
This option allows you to add a background color to your active tabs. A tab is considered active when it has been clicked or selected. By default your active tab background color is white and matches the default white background color of your tab content.
Inactive Tab Background Color
This option allows you to add a background color to your inactive tabs. A tab is considered inactive when it has not been clicked or selected. By default your inactive tab background color is gray in contrast to the default white background color of the active tab. This background color contrast for active and inactive tabs allow for easier navigation between tabs.
Background Color
This option allows you to change the background color of the tab module content.
Background Image
This option allows you to add a background image of the tab module content.
Admin Label
By default, your video module will appear with a label that reads 『Video』 in the builder. The Admin Label allows you to change this label for easy identification.
Tabs 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.

Tab Text Design Options
These options control the style of your tab text (or title) for all tabs in your module. Options include tab font, tab font size, tab text color, tab letter spacing, and tab line height.
Body Text Design Options
These options control the style of your tab modules body text (the text entered in the content of your individual tabs). Options include body font, body font size, body text color, body letter spacing, and body line height.
Use Border
Select 「YES」 for this option if you would like to add a border to your tabs module. Once 「YES」 is selected, you will see additional styling options for your border including border color, border width, and border style.
Tabs 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 and Classes
This can be used to add a unique CSS ID or Class to your tabs module. These can then be used in your stylesheet or within the Theme Options Custom CSS box to apply custom styling to the module. CSS ID』s can also be targeted with anchor links to link to certain areas of your page.
Custom CSS
Here you can add custom CSS to your tabs module.
Visibility
Here you can choose to hide (or disable) your tabs module on certain devices. You can choose to disable the module on phone, tablet, and/or desktop.
Individual Tabs Content Options

Title
This option serves as the title of your tab. This will be the text in the actual tab that users click to toggle through the live tag module.
Content
This is where you enter the body text of your tab using the built-in wysiwyg editor.
Background Color
Here you can add a background color for your tab.
Background Image
Here you can add a background image for your tab.
Individual Tabs Design Options

Tab Text
This option allows you to design the tab text which is the title of your tab. Options include font, font size, text color, letter spacing, and line height.
Body Text
This option allows you to design the body text of your tab. Options include font, font size, text color, letter spacing, and line height.
Individual Tabs Advanced Options

Custom CSS
Here you can add custom CSS to the specific tab your are editing. This CSS will be applied to this tab only.

Spam Protection Providers

Spam Protection Providers
Detailed instructions for obtaining api keys from the spam protection services supported by some Divi modules.

Divi』s Contact Form and Email Optin modules support the use of a 3rd-party spam protection service. This page provides instructions for each of the supported providers.
Google reCAPTCHA
To use reCAPTCHA with Divi you need a site key and site secret. First, click the blue button on the top right side of the page labeled 「Admin console」.

After logging in using your Google account you will see the reCAPTCHA Admin console. API keys are assigned per website domain. Click the plus icon located in the blue bar at the top right of the page.

Fill out the form making sure to choose reCAPTCHA version 3 and then click the submit button.

Finally, after submitting the form you will be redirected to a page that provides your key and secret. Copy and paste those into the appropriate fields in your Divi module settings.

The Divi Social Media Module

The Divi Social Media Module
How to add, configure and customize the Divi social follow module.

The social media module lets you create icon-based links that point to your online social profiles, such as Facebook, Twitter and Google+. These icons are integrated into the theme, in the clean style of Divi using our Elegant Icons, which make them preferable to use over third party plugins. You can add links to multiple social profiles within each module, and you can add the module anywhere on the page.
View A Live Demo Of This Module
How To Add A Social Media Module To Your Page
Before you can add a social media 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 social media 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 「social media」 and then click enter to automatically find and add the social media 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 Matching Social Media Icons to a Contact Page
A website』s contact page is the perfect spot to showcase your online social profiles. This provides more avenues for users to stay connected and promote your blog or business. For this example, I』m going to show you how to add social media icons to match the current design of a contact page.

Using the visual builder, add a new Regular Section with a one column fullwidth row. Insert a Social Media Module to your column.
In the Content tab of the Social Media Follow Settings, click the 「add new item」 button to add a new social network to your module. Under the specific Social Network Settings, update the following:
Content Options
Social Network: Facebook
Account URL: [enter the URL of your facebook account]
Design Options
Icon Color: #d94b6a (matching color)

Next, duplicate that Social Network to add four more networks (Twitter, Google+, LinkedIn, and Instagram). Because you duplicated the network, the custom icon color carried over so all you need to do is update each Network and Account URL.

Now you have Social Media icons that match the design of the contact page.

Social Media 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 networks to your module. Clicking 「add new item」 will open a completely new window of options specific to your new network (under Content, Design, and Advanced tabs). See below for individual social media network settings.
After you add your first network, you will see a gray bar appear with the title of your network shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the network.
Link Shape
Here you can choose the shape of your social network icons to either rounded rectangle or circle.
Url Opens
Choose to open your network url in a new tab or in the same window.
Follow Button
Here you can choose whether or not to include the follow button next to the icon.
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.
Social Media 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.

For this module, the Design options consist of only one item – Text Color.
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.
Social Media 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.

Social Network
Here you can choose the social network you are wanting to display.
Account URL
This is where you enter the URL for this social network link. If you chose Facebook as your network, this is where you would put the URL of your Facebook page.
Individual Social Media Design Options

Icon Color
Divi conveniently has the standard colors for each social network set by default. Here you can easily change this icon color to whatever you want.
Individual Social Media Advanced Options

The Divi Slider Module

The Divi Slider Module
How to add, configure and customize the Divi slider module.

Sliders can be placed anywhere, spanning the full width of whatever column structure they are in. Divi sliders support parallax backgrounds, as well as video backgrounds!
View A Live Demo Of This Module
How To Add A Slider Module To Your Page
Before you can add a slider 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 slider 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 「slider」 and then click enter to automatically find and add the slider 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 Slider to your page to Promote Product Features
A slider is a great way to showcase your product or service features. The combination of images and content can really give your products a professional feel that stands out.
For this example I』m going to add a slider to showcase a few product features. Each slide will have a background image, a slide image, and a content section.

Using the Visual Builder, add a new section with a fullwidth (1 column) row. Then insert a slider module to your new row. In the Content tab of the Slider Settings, click + Add New Item to create your first slide.

In the slide settings for your first slide, update the following options:
Content Options
Heading: [enter the slide heading]
Button Text: [enter the button text]
Content: [enter the main slide text content]
Button URL: [enter the destination URL for the Slide button]
Slide Image: [upload a png image of your product feature]
Background Image: [enter the image that will serve as a background for the slide]
Note: By default, the slide image will display on the left and the slider text content and button will be displayed on the right.
Design Options
Use Background Overlay: YES
Background Overlay Color: rgba(0,0,0,0.2) *this overlay slightly darkens the background image to make the text more readable.

Save Slide Settings
Now duplicate the slide you just created and update the new slide with new content as needed. Repeat this for all slides you want to add.

That』s it. For this example I』m only including two slides, but the result is a good looking slide that matches the design of the site, effectively showcases your product, and engages the user to click the button for more information on the product.

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

Arrows
Choose whether or not you would like to display left and right navigation arrows.
Controls
Choose whether or not you would like to display the circle buttons/slide indicators at the bottom of the slider.
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.
Slider 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.

Remove Inner Shadow
By default an inner shadow is displayed within the slider. If you would like to disable this shadow, you can do so using this setting.
Parallax Effect
Enabling this option will give your background images a fixed position as you scroll. Keep in mind that when this setting is enabled, your images will scale your images to the browser height.
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.
Top Padding
This setting controls the inner space between top of the module and the text content within the module. If you would like to increase or decrease this space, input your desired value here. For example, to reduce the space and the overall size of the slider, you could enter a value of 100px. Alternatively, you could enter a percentage value, such as 10%, to make the height more dynamic.
Bottom Padding
This setting controls the inner space between bottom of the module and the text content within the module. If you would like to increase or decrease this space, input your desired value here. For example, to reduce the space and the overall size of the slider, you could enter a value of 100px. Alternatively, you could enter a percentage value, such as 10%, to make the height more dynamic.
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.
Slider 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.

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.
Automatic Animation
If you would like the slider to slide automatically, without the visitor having to click the next button, enable this option and then adjust the rotation speed below if desired.
Automatic Animation Speed (in ms)
Here you can designate how fast the slider fades between each slide, if 『Automatic Animation』 option is enabled above. The higher the number the longer the pause between each rotation.
Continue Automatic Slide on Hover
Turning this on will allow automatic sliding to continue on mouse hover.
Hide Content On Mobile
As the size of the screen gets smaller on mobile devices, screen real estate becomes more precious. Sometimes it』s a good idea to disable some less important slider elements to reduce the size of the slider and make it more readable. Enabling this setting will hide the slider』s text content on mobile.
Hide CTA On Mobile
As the size of the screen gets smaller on mobile devices, screen real estate becomes more precious. Sometimes it』s a good idea to disable some less important slider elements to reduce the size of the slider and make it more readable. Enabling this setting will hide the slider』s call to action buttons on mobile.
Show Image / Video On Mobile
As the size of the screen gets smaller on mobile devices, screen real estate becomes more precious. Sometimes it』s a good idea to disable some less important slider elements to reduce the size of the slider and make it more readable. Enabling this setting will show slide images and videos on mobile (they are disabled by default).
Disable On
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.
Individual Slider Content Options

Heading
Define the title text for your slider here.
Button Text
If you would like to display a button below your slider content enter the button text here. Leave this blank if you do not wish to display a button.
Content
Enter the body content of your slider here. Note that the amount of text you enter here will determine the height of your slides.
Button URL
If you display a button, insert a valid web URL in this field to define the destination link.
Slide Image
If you add a slide image, it will appear to the left of your slide text on top of your slide background. If you do not specify a slide image you will be left with a centered, text only slide. Because the height of each slide is determined by the text, if your slide image is tall enough it will drop below the bottom of the slide, creating bottom aligned image. See an example of this on the third slide on this page.
Note the height of a slide with a slide image could be determined by a taller slide in the slider so make sure your slide image is tall enough to accommodate if you wish to have a bottom aligned image. For legibility reasons, slide images will only appear in sliders that are in ⅔ column, ¾ column, or 1 column widths. Also, slide images will not display on browser widths of less than 768 pixels. The widths of slide images are defined below. We recommend that your slide images are at least this wide.
Slide Video
If you add a slide video, it will appear to the left of your slide text on top of your slide background. If you do not specify a slide video you will be left with a centered, text only slide. Because the height of each slide is determined by the text, if your slide image is tall enough it will drop below the bottom of the slide, creating bottom aligned image. See an example of this on the third slide on this page.
Pause Video
Allow video to be paused by other players when they begin playing
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.
The height of a slide is determined by the amount of text content that you add. If you have multiple slides, the slider will take on the height of the tallest slide.
The width of your slider is determined by the browser width. Based on standard screen sizes we recommend that your images are at least 1280px by 768px.
Background Image Position
By default, background images are displayed in the center of the slide. You can use this setting to change the positioning to top, bottom, left, right, or any of the four corners of the slide.
Background Image Size
By default, background images will be scaled up proportionally to ensure that they fill the entire slide. However, you can use this option to change the default behavior. 「Cover」 is the default behavior, which will scale the image to cover the entire slide area. 「Fit」 will also force the image to cover the entire area, however, it will force the image』s height and width to match the height and width of the slider. This may result in a skewed image, but it will prevent image cropping. 「Actual Size」 will not scale the image at all and will display it at its native size.
Background Color
If you would simply like to use a solid color background for your slide, use the color picker to define a background color.
Background Video MP4
All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .MP4 version here. Important Note: Video backgrounds are disabled from mobile devices. Instead, your bkacground image will be used. For this reason, you should define both a background image and a background video to ensure best results.
Background Video WEBM
All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .WEBM versions here. Important Note: Video backgrounds are disabled from mobile devices. Instead, your bkacground image will be used. For this reason, you should define both a background image and a background video to ensure best results.
Background Video Width
In order for videos to be sized correctly, you must input the exact width (in pixels) of your video here.
Background Video Height
In order for videos to be sized correctly, you must input the exact height (in pixels) of your video here.
Individual Slider Design Options

Use Background Overlay
When enabled, a custom overlay color will be added above your background image and behind your slider content.
Background Overlay Color
Use the color picker to choose a color for the background overlay.
Use Text Overlay
When enabled, a background color is added behind the slider text to make it more readable atop background images.
Text Overlay Color
Use the color picker to choose a color for the text overlay.
Text Overlay Border Radius
Border radius affects how rounded the corners of the text overlay box are. By default, the corners have a slightly rounded edge of 3 pixels. You can reduce this value to 0 to create a rectangular box or increase the value to make the corners even more rounded.
Arrows Custom Color
When hovering over a slider module, arrows appear that allow the visitor the navigate through each slide. By default, these arrows inherit the slide』s main text color. However, you can define a custom color for these arrows using this setting.
Dot Nav Custom Color
Within each slider, dot navigation elements appear below the slider content. These items allow the user to navigate through the slider. You can define a custom color to be used for these elements using the color picker in this setting.
Slide Image Vertical Alignment
This setting determines the vertical alignment of your slide image. Your image can either be vertically centered, or aligned to the bottom of your slide.
Text Color
If your Slide Background is dark, the Text Color should be set to 『Light』. Visa versa, if the Slide Background is light, the Text Color should be set to 『Dark』.
Header Font
You can change the font of your header text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Header Font Size
Here you can adjust the size of your header text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your header text, choose your desired color from the color picker using this option.
Header Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Line Height
Line height affects the space between each line of your header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
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 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.
Individual Slider Advanced Options

The Divi Fullwidth Slider Module

The Divi Fullwidth Slider Module
How to add, configure and customize the Divi fullwidth slider module.

Divi allows you to place sliders into full width sections, making your sliders span the entire width of the browser. Divi sliders support parallax backgrounds, as well as video backgrounds!

View A Live Demo Of This Module
How To Add A Fullwidth Slider Module To Your Page
Before you can add a fullwidth slider 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 fullwidth slider 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 「fullwidth slider」 and then click enter to automatically find and add the fullwidth slider 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 Fullwidth Slider hero section to your homepage
A fullwidth slider is a great way to showcase multiple CTA』s above the fold on your homepage. The combination of images and content can really give your hero section a professional feel that stands out.
For this example I』m going to add a fullwidth slider to serve as the main hero section of a homepage.

Using the Visual Builder, add a Fullwidth Section to the top of your webpage. Then insert the Fullwidth Slider module to your new section. In the Content tab of the Fullwidth Slider Settings, click + Add New Item to create your first slide.

In the slide settings for your first slide, update the following options:
Content Options
Heading: [enter the slide heading]
Button Text: [enter the button text]
Content: [enter the main slide text content]
Button URL: [enter the destination URL for the Slide button]
Background Image: [enter the image that will serve as a background for the slide]
Design Options
Use Background Overlay: YES
Background Overlay Color: rgba(0,0,0,0.2) *this overlay slightly darkens the background image to make the text more readable.

Save Slide Settings
Now duplicate the slide you just created and update the new slide with new content as needed. Repeat this for all slides you want to add.

That』s it. For this example I』m only including two slides, but the result is an effective fullwidth hero slider with multiple calls to action that engages the user to click the button for more information. Since this is your main call to action for your website, I suggest performing split tests to your fullwidth slider using Divi Leads and see which one converts better.

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

Arrows
Choose whether or not you would like to display left and right navigation arrows.
Controls
Choose whether or not you would like to display the circle buttons/slide indicators at the bottom of the slider.
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.
Fullwidth Slider 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.

Remove Inner Shadow
By default an inner shadow is displayed within the slider. If you would like to disable this shadow, you can do so using this setting.
Parallax Effect
Enabling this option will give your background images a fixed position as you scroll. Keep in mind that when this setting is enabled, your images will scale your images to the browser height.
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.
Top Padding
This setting controls the inner space between top of the module and the text content within the module. If you would like to increase or decrease this space, input your desired value here. For example, to reduce the space and the overall size of the slider, you could enter a value of 100px. Alternatively, you could enter a percentage value, such as 10%, to make the height more dynamic.
Bottom Padding
This setting controls the inner space between bottom of the module and the text content within the module. If you would like to increase or decrease this space, input your desired value here. For example, to reduce the space and the overall size of the slider, you could enter a value of 100px. Alternatively, you could enter a percentage value, such as 10%, to make the height more dynamic.
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.
Fullwidth Slider 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.
Automatic Animation
If you would like the slider to slide automatically, without the visitor having to click the next button, enable this option and then adjust the rotation speed below if desired.
Automatic Animation Speed (in ms)
Here you can designate how fast the slider fades between each slide, if 『Automatic Animation』 option is enabled above. The higher the number the longer the pause between each rotation.
Continue Automatic Slide on Hover
Turning this on will allow automatic sliding to continue on mouse hover.
Hide Content On Mobile
As the size of the screen gets smaller on mobile devices, screen real estate becomes more precious. Sometimes it』s a good idea to disable some less important slider elements to reduce the size of the slider and make it more readable. Enabling this setting will hide the slider』s text content on mobile.
Hide CTA On Mobile
As the size of the screen gets smaller on mobile devices, screen real estate becomes more precious. Sometimes it』s a good idea to disable some less important slider elements to reduce the size of the slider and make it more readable. Enabling this setting will hide the slider』s call to action buttons on mobile.
Show Image / Video On Mobile
As the size of the screen gets smaller on mobile devices, screen real estate becomes more precious. Sometimes it』s a good idea to disable some less important slider elements to reduce the size of the slider and make it more readable. Enabling this setting will show slide images and videos on mobile (they are disabled by default).
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.
Individual Fullwidth Slider Content 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.
Image Alt Text
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.

The Divi Sidebar Module

The Divi Sidebar Module
How to add, configure and customize the Divi sidebar module.

Divi lets you create an unlimited number of widget ready areas on the fly. Sidebars can then be added to any page, allowing you to create unique sidebars for different section of your website.
View A Live Demo Of This Module
How To Add A Sidebar Module To Your Page
Before you can add a sidebar 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 sidebar 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 「sidebar」 and then click enter to automatically find and add the sidebar 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 Sidebar to Your Blog Page
The Sidebar Module allows you to insert a sidebar (and all its built in widgets) anywhere on your page. Actually, you can add any widget area as well using the Sidebar Module. For this example, I』m going to show you how to insert a custom sidebar to your blog page using the specialty section to display the Search and Recent Posts WordPress widget.

This blog page has a fullwidth header to display the title of the blog at the top of the page. Underneath the fullwidth header module is a specialty layout with a blog module on the left and a right vertical sidebar area on the right.
Using the specialty section allows you to add complex column variations next to full-spanning vertical sidebars, without adding unwanted breaks to the page. This is perfect for a blog with a sidebar.
First you need to make sure you have the widgets set up in the Widgets page of you WordPress dashboard. For this example, I』m adding the Search widget and the Recent Posts widget to the Sidebar widget.

Next deploy the Visual Builder to edit the blog page. Add a Specialty Section to your page (just under your header) with the following layout:

Once you add a specialty section to the page, you will notice that one area (on the left) has an 「add module」 button. For this example, this is where the Blog Module with a grid layout was added to display the blog posts.

The other (on the right) has an 「insert row」 button. The 「insert module」 area represents your vertical sidebar. This is where you will enter the Sidebar Module. You can add as many modules here, in a single row, and they will span the vertical width of the section, adjacent to the column structure you build next to it. In fact for this example, the blog page already has an Email Optin Module and a Person Module in this vertical sidebar area of the Specialty layout.
Now let』s add the Sidebar Module to the top of the other modules in your vertical sidebar area.

In the Sidebar Module Setting, update the following:
Content tab
Widget Area: select Sidebar
Design tab
Orientation: Right (because the sidebar is on the right)
Remove Border Separator: YES
Text Color: Dark
Header Font Size: 26px
Head Letter Spacing: 3px
Header Line Height: 1.1em
Advanced tab
Under the Custom CSS section add the following CSS to the Widget text area. This will make the Sidebar Widgets design match the site design:
background: #fff;
padding: 20px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);

Save Settings
Now you can see that the Sidebar Module is pulling the Sidebar widget items (Search and Recent Posts) and displaying them on your vertical sidebar area of your specialty section.

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

Widget Area
The Sidebar Module uses widget ready areas that you can create within the Appearances>Widgets tab. You can select any of your custom widget areas from this dropdown menu.
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.
Sidebar 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.

Orientation
Here you can choose which side of the page your sidebar will be on. This setting controls text orientation and border position.
Remove Border Separator
Here you can remove the thin gray border that separates your sidebar from your page content.
Text Color
Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.
Header Font
You can change the font of your header text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Header Font Size
Here you can adjust the size of your header text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your header text, choose your desired color from the color picker using this option.
Header Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Header Line Height
Line height affects the space between each line of your header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
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.
Sidebar 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 Selective Sync In Divi

Using Selective Sync In Divi
Select which part of the global library item you would like to sync.

Sync Only Parts Of A Global Library Item
Selective Sync allows you to save individual settings when saving a new global library item. You can choose to selectively sync any or all of the Content, Design, or Advanced tabs. For example, if you save a new module to the library as a global item, you can edit the settings to only sync the Design Settings, then only these settings will be added to the library. This is especially useful if you are delving into the Design or Advanced Tabs, and would like to use your unique styles for multiple modules on your website while at the same time adding unique content in the Content tab for each.
A simple example would be to create a uniquely-styled Header Module that is added to every page on your website. In this example you may want to have a unique combination of Design Settings shared across your entire website, but at the same time you need to be able to add unique title text to each module to represent the current page. In this example, choosing to selectively sync only the Design Settings makes the most sense.
Using Selective Sync
Using the Visual Builder, save a new item to your library and check the box to make it a global item. Then click to edit the settings of your module. You will see a small sync icon to the left of all the options within the Content, Design, and Advanced tabs. Click this icon to enable or disable the option to selectively sync any or all of the settings for the current global library item and click save. Only the options that you have selected will be editable within the library. When you add the global library item to your page, only the settings you have checked to be synced will be present.

Whenever you edit a global module, you can easily identify which options are currently being synced by the green color of the sync icon. Icons that are green are options that are currently being synced within the global module. Red means the item isn』t synced. Options edited with the green (enabled) sync icons are shared by all instances of the global item.
The Power of Selectively Sync
Using Selective Sync in combination with global modules can be extremely powerful. Let』s dig a little deeper. Let』s say you have a Fullwidth Header module at the top of all of your pages. This is quite common. Each header module has a different title in the 「Content」 settings to represent the current page. You have also used the 「Design」 settings to give your header a unique look by adjusting the title font style to Bold & All Caps, and you have increase the Custom Padding on the top and bottom of the header to make the header module larger. You want all of you header modules on each page to use this unique style, but you need each page to have unique titles. In this case, you can create a Global Fullwidth Header module and choose to selectively sync only the options in the 「Design」 tab. Now whenever you add this global module to a new page, the 「Design」 settings will be synced, but your 「Content」 settings will remain unique for the current module.
If you ever want to change the style of the headers on all your page, you can modify the synced 「Design」 settings shared by these global modules and the changes will be reflected on every single page that global header has been used! Wow, that saves you an incredible amount of time!
This same theory could be applied to the 「Advanced」 tab as well. Let』s say that you have created a Slider Module and used the 「Advanced」 tab to apply a unique animation to the slider』s button. You want to use this new unique animation on all of the Slider Modules on your website. In this case, you can create a new Global Slider Module and selectively sync the 「Advanced」 settings which include your custom CSS animation. Add this slider to your page and adjust the 「Content」 and 「Design」 settings freely, while keeping your unique Custom CSS synced across the entire series of modules. If you ever want to adjust the 「Advanced」 settings for this series of global modules, you only have to do it once. Editing the 「Advanced」 settings in one module updates for all implementations of this Global Slider Module.

An Overview Of Divi Sections

An Overview Of Divi Sections
Sections are the builder』s largest building blocks, and can be used in various ways.

Sections are the biggest building block in the Divi builder. You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas. In Divi, everything you build starts with a section. This content wrapper has various settings that can be used to do some really awesome things.
How To Add A Section To Your Page
Before you can add a section 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 blue plus button to add a new section to your page. You will be greeted with a popup that allows you to add any of Divi』s three section types. These types include: Standard, Specialty and Fullwidth.

Once the section has been added, you will be greeted with the section』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Section Content Options
Within the content tab you will find all of the section』s content elements. For sections, these content elements are limited to background elements such as background images and videos.

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 Color
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 Video MP4
All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .MP4 version here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the MP4 video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.
Background Video WEBM
All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .WEBM version here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the WEBM video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.
Background Video Width
In order for videos to be sized correctly, you must input the exact width (in pixels) of your video here.
Background Video Height
In order for videos to be sized correctly, you must input the exact height (in pixels) of your video here.
Admin Label
In this dropdown you can add an admin label that will appear in the back end builder as well as the visual builder』s skeleton view.
Section Design Options
Within the design tab you will find all of the section』s styling options, such as sizing and spacing. This is the tab you will use to change how your section looks. Every Divi section type has a long list of design settings that you can use to change just about anything.

Show Inner Shadow
Here you can select whether or not your section has an inner shadow. This can look great when you have colored backgrounds or background images.
Use Parallax Effect
If enabled, your background image will stay fixed as your scroll, creating a fun parallax-like effect. You can also choose between two parallax methods: CSS and True Parallax.
Custom Padding
Here you can adjust the padding of the section to specific values, or leave blank to use the default padding.
Section 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 your section. You can also apply custom CSS classes and IDs to the section, which can be used to customize the section within your child theme』s style.css file.

CSS ID
Enter an optional CSS ID to be used for this section. 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 section. 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 be applied to the section here. 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 section appears on. You can choose to disable your section on tablets, smart phones or desktop computers individually. This is useful if you want to use different sections on different devices, or if you want to simplify the mobile design by eliminating certain sections from the page.
Using Fullwidth Sections
Fullwidth sections give you access to a new set of Fullwidth Modules. These modules act a little differently because they take advantage of the full width of the browser. Fullwidth modules can only be placed within Fullwidth sections.

Once you add a new fullwidth section to your page, you can click the 「Add Modules」 button within the section to add a fullwidth module. Unlike normal section, there is no concept of rows or columns, since the fullwidth modules always takes advantage of 100% of the screen. Fullwidth modules are a great way to add a visual break to the page!

A great example of a fullwidth module is the fullwidth slider. This fullwidth slider works just like a normal slider, except that it expands to 100% width. Displaying a slider at such a scale can be quite stunning, just check our the divi demo for an example.

Using Specialty Sections
Specialty sections were created to allow for more advanced column structures. Unlike normal sections, when you use a specialty section, you can add complex column variations next to full-spanning vertical sidebars, without adding unwanted breaks to the page. These types of layouts are not possible using normal sections.

Once you add a specialty section to the page, you will notice that one area has an 「add module」 button, while the other has an 「insert row」 button. The 「insert module」 area represents your vertical sidebar. You can add as many modules here, in a single row, and they will span the vertical width of the section, adjacent to the column structure you build next to it. Clicking 「insert row」 will allow you to insert additional rows to the left/right of your sidebar. In a way, this can be thought of as adding rows within rows!

The result is the ability to create just about any column structure that you could dream of, and no matter what structure you choose, we have made sure that the combination will look great! Here is an example of a page layout created using specialty sections. As you can see, the effect is a dual-sidebar layout, with two vertical-spanning rows on the left/right of a complex column structure in the middle.

The Divi Search Module

The Divi Search Module
How to add, configure and customize the Divi search module.

Using the search module, you can place a search form anywhere on your site. This search form will allow your visitors to search through all of your website』s content, including all pages and blog posts. This gives you the functionality of the WordPress search widget along with the flexibility of the Divi Builder. Not only can you control the search forms location on the page, you can also customize its design.
View A Live Demo Of This Module
How To Add A Search Module To Your Page
Before you can add a search 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 search 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 「search」 and then click enter to automatically find and add the search 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 Custom Search Module to a Fullwidth Blog Page
For this example, I』m going to show you how to add a Search Module to be a main call to action at the top of a blog page. This allows users to easily search the content of your blog without any clutter.
This page has a fullwidth header at the top with the search module directly below it. Under the search module is a Blog Module using the grid layout.

Using the Visual Builder, add a new standard section to the blog page with a fullwidth (1 column) row. Then insert the Search Module into the row.
Update the Search Module Settings as follows:
Content Options
Placeholder Text: Search our blog…
Hide Button: YES
Design Options
Input Field Background Color: #f8f8f8
Placeholder Color: #888888
Input Font Size: 16px
Input Text Color: #888888
Input Line Height: 1em
Custom Padding: 20px Top, 20px Bottom

Save Settings
Now go back to edit the width of the row containing your search module. Under the Design tab of the Row Settings, give the row a custom width of 300px. This will keep the search module compact and centered on the page.

That』s it!
Search 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.

Placeholder Text
Type the text you want to use as placeholder for the search field.
Hide Button
Turning this on will hide the Search button.
Exclude Pages
Turning this on will exclude Pages from search results.
Exclude Posts
Turning this on will exclude Posts from search results.
Exclude Categories
Choose which categories you would like to exclude from the search results.
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.
Search 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.

Input Field Background Color
Here you can change the background color of the search bar.
Placeholder Color
Before the search field is used, placeholder text exists inside of the field. If you have adjusted the field background color, you may also want to adjust the placeholder text color to ensure that it is readable.
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.
Text Orientation
This controls the how your text is aligned within the module.
Input Font
You can change the font of your input 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.
Input Font Size
Here you can adjust the size of your input 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.
Input 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 input text, choose your desired color from the color picker using this option.
Input Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your input 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.
Input Line Height
Line height affects the space between each line of your input 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.
Button and Border Color
This will change the search button』s background and border color.
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.
Button Font Size
Here you can adjust the size of your button 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.
Button 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 button text, choose your desired color from the color picker using this option.
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 Line Height
Line height affects the space between each line of your button 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.
Max Width
By default, search bar max width is set to 100%. This means that the search bar will be displayed at its natural width unless the width of the search bar exceeds the width of the parent column, in which case the search bar will be limited to 100% of the width of the column. If you would like to further restrict the max width of the search bar, you can do so by entering your desired max width value here. For example, a value of 50% would limit the width of the search bar to 50% of the width of the parent column.
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.
Search 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.