Author 诗语

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

Divi makes it easy to add a Video Slider to your page. This is a great way to organize collections of videos from just about any source. The video gallery also allows you to customize video thumbnail images and play button to add a clear, custom style to your embeds.
How to Add a Video Slider Module to Your Page
Before you can add a video 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 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 video 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 「video slider」 and then hit enter to automatically find and add the video 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.
Populating the Video Slider with Content

Before adjusting too many settings it』s probably a good idea to go ahead and populate your video slider with video slides. That way when you make changes you』ll actually be able to see how they affect the end result. To add a new video slide you will need to click the + Add New Item link.

Here you can either upload a .mp4 or Webm file. You can also insert a video url from YouTube. When you』ve either uploaded your file or added the YouTube link simply click the green check button in the bottom right hand corner and you will return to the video slider module』s main content tab. Repeat this process for each video you』d like to add.
Video Slider Module Content Settings
Now that your content has been added, there are a few other areas to explore. The three content tab dropdown menus where settings have been grouped which will affect the entire module.
Elements
Under elements you』e able to adjust the setting for the video slider module』s arrows and slider controls.
Overlay
Here you can choose to show or hide video overlays on the main video. This can be done by adding an overlay to each video slide or auto-generated by Divi.
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.
Video Slider Module Design Settings

In this tab there is just one group of settings called Controls Colors. Here you can change the slider controls color from light to dark, change the color of the play icon, and adjust the thumbnail overlay color.
Video Slider Module Advanced Settings

In the Advanced tab of your video slider 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.
Individual Video Content Settings

If you want to create specific settings for individual slides, these will need to be configured inside the video slides themselves. Simply click on that slide』s gear icon to open up it』s unique settings.
Video
As demonstrated above, this is where you are able to add your video content.
Overlay
In the overlay dropdown you can upload an image to overlay your video slide or choose to have Divi generate one automatically.
Individual Video Design Settings

In the design tab of your video slide you are able to change your slide arrow color from light to dark.
Use Case Example: Adding a Video Slider to showcase tutorial videos for a Course Page
For this example, I』m going to show you how to use a video slider to showcase a series of tutorial videos for a online course page..

Let』s get started.
Use the visual builder to add a Regular Section with a fullwidth (1 column) row. Then add a Video Slider Module to the row.

The first thing you need to do when the Video Slider Settings modal pops up is select + Add New Item in order to add your first video to the module.
Update the Individual Video Settings as follows:
Content tab
Video MP4/URL: [enter URL or upload video]
Video Webm: [enter URL or upload video]
Image Overlay URL: [insert custom image to serve as overlay]
Design tab
Slider Arrows Color: Light

Save Settings
Repeat this step to add the rest of the videos needed for the unit.
Once all of the videos and custom image overlays have been added, go back to the Video Slider Settings and update the options as follows:
Content tab
Arrows: Show Arrows
Slider Controls: Use Thumbnail Track
Display Image Overlays on Main Video: Show
Design tab
Slider Controls Color: Light
Play Icon Color: #ffffff

That』s it!

The Divi Toggle Module
How to add, configure and customize the Divi toggle module.

Toggles are a great way to consolidate information and improve user experience on your page. Using Divi, you can create any number of toggles that will look great inside any sized column.
View A Live Demo Of This Module
How to Add a Toggle Module to Your Page
Before you can add a toggle 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 toggle 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 「toggle」 and then hit enter to automatically find and add the toggle 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: FAQ Page
An FAQ page is one of the best places to consolidate information using the Toggle Module. It allows the user to quickly identify what question they want to without having to read through tons of text. For this example I』m going to show you how you can use the Toggle Module to design a modern FAQ section for your FAQ page in minutes.

Using the Visual Builder, add a new section with a fullwidth (1 column) row. Then add a Divider module to the row. Under the Content tab of the Divider Module Settings, select the option to 「Show Divider」.

Under the Design Tab, enter the following options:
Color: #000000 (black)
Divider Style: Solid
Divider Position: Vertically Centered
Divider Weight: 4px
Height: 1

Next add a Toggle Module under the Divider I just created in the same row. In the Toggle Module Settings, update the following:
Content tab
Title: [enter your title]
Content: [enter your content]
State: Close
Open Toggle Background Color: #ffffff
Closed Toggle Background Color: #ffffff
Background Color: #ffffff
Design tab
Icon Color: #000000
Open Toggle Text Color: #000000
Closed Toggle Text Color: #000000
Title Font: Open Sans, Bold
Title Font Size: 24px
Title Text Color: #000000
Body Font: Open Sans
Body Font Size: 18px
Body Text Color: #666666
Body Line Height: 1.6em
Use Border: YES
Border Width: 0px
Custom Padding: Top 2px, Bottom 2px

After you have saved your setting for the Toggle Module, duplicate the Divider Module you created and place it underneath the Toggle Module. This will frame the Toggle with a top and bottom divider line. After that, duplicate your Toggle Module and place it after the bottom divider line. Since this is a duplicate Toggle Module, all the design settings have carried over to the new Toggle and all you need to do is update the content of the new Toggle Module. Then continue the process of duplicating divider modules and Toggle Modules and updating the content of your Toggles until you have all the FAQ section completed.
That』s it. Now you have a modern FAQ section using the Toggle Module to consolidate your questions and answers.

Now that you』ve seen the toggle module in action, dive into ALL of it』s settings in the sections below. We』ve provided a detailed rundown of what you will find inside each tab of the module』s settings and an explanation of what each one does.
The Toggle Module Content Settings

The toggle module』s content tab is organized into the following groups of settings (which also toggle!).
Text
This is where you are able to add the toggle title and content.
State
You can choose whether or not you want your toggle to appear open or closed by default with this setting.
Background
Here you can change the open toggle background color and the closed toggle background color. You can also easily make them the same thing by setting the background color option. There is also the option to set or upload a background image.
Admin Label
By default, your toggle module will appear with a label that reads 『Toggle』 in the builder. The Admin Label allows you to change this label for easy identification.
The Toggle Module Design Settings

The toggle module』s design settings have been grouped into the following dropdown toggles under the design tab.
Icon
This is where you can change the toggle icon color.
Text
Here you』re able to set the color for open and closed toggle text.
Title Text
Here you can adjust the title text font, weight, size, color, spacing, line height, and more.
Body Text
Here you can 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 toggle. You can also change these values for desktop, tablet, or mobile devices.
The Toggle Module Advanced Settings

In the Advanced tab of your toggle 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.

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 Video Module
How to add, configure and customize the Divi video module.

Adding videos to your page in Divi is simple using the Video module. The module allows you to embed videos from just about any source, as well as customize the thumbnail image and play button to add a clearner style to the embed.
View A Live Demo Of This Module
How To Add A Video Module To Your Page
Before you can add a video module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

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

Locate the video 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 「video」 and then click enter to automatically find and add the video 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 Video to Your Landing Page
Adding a video to your landing page is a great way to promote your products and increase conversions. In this example, I』m going to show you how you can use the video module to add a video to your landing page. I』ve put a red circle where the video needs to go.

Using the Visual Builder, I add a new section with a fullwidth (1 column) row. In the row settings, under the Design tab, I select the option to 「Use Custom Width」. For the Custom Width option that shows up, I enter a custom width of 767px. This makes sure the video module I』m going to add in this row doesn』t exceed this width and become too large on larger screen sizes.

Next, I add the Video Module to the row. Under the Content tab of the Video Module Setting, I enter the video URL of the video I want to embed on my landing page. I』m using the URL of a youtube video for this example.

Then I add an Image Overlay URL for my video by clicking the 「Generate From Video」 button. This automatically pulls an image from the video to serve as an overlay with a new custom video icon.

Under the Design tab, I change the color of the play icon to match my landing page.

Now I have a video for my landing page that looks clean and matches my design.

Now that you』ve seen the video module in action, dive into ALL of it』s settings in the sections below. We』ve provided a detailed rundown of what you will find inside each tab of the module』s settings and an explanation of what each one does.
Content Options

Video URL
The Divi Video module lets you add video using two different methods. You can either upload your own video file from your computer by clicking the 「Upload Video」 button and selecting the desired file, or you can input any Video URL from a third party video source such as Youtube or Vimeo. Simply copy and paste the URL from your browser and paste it into the Video URL field and Divi will take care of the rest!.
Image Overlay URL
If you would like to define a custom video thumbnail image, which will be placed over the standard video interface with a custom play button to create a cleaner and more stylized appearance, then you can choose to do so using the Image Overlay field. This field allows you to either upload your own custom image, or let Divi automatically generate one from your video URL. Most of the video providers support this option, such as Youtube and Vimeo. Simply click the 「Generate From Video」 button and let Divi take care of the rest!
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.
Design Options
Play Icon Color

If you designate an image overlay for your video module, the video displayed contains a play icon over the video. You can designate the color of this icon here to match the color scheme of your page.
Advanced Options

CSS ID and Classes
This can be used to add a unique CSS ID or Class to your 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 video module.
Visibility
If you want to hide your video module on certain devices, you can select which devices on which you want the video module to be disabled.

How To Update The Divi Theme
Our themes support automatic updates using our updater plugin.

Updating Your Themes & Plugins
Elegant Themes products can be updated normally through the WordPress update system. When new versions of our themes or plugins become available, update notifications will appear in the Dashboard > Updates page of your WordPress Dashboard, as well as within the Themes & Plugins manager. It is important to always keep your themes and plugins updated to ensure compatibility with the latest version of WordPress, to keep your website secure, and to take advantage of the latest and greatest features! Before you can update, you must first authenticate your Elegant Themes subscription by inputting your Username and API Key into the Updates tab of your theme or plugin settings. Only members with active Elegant Themes accounts have access to the latest versions of our products. Your Username is the username you use when logging in to ElegantThemes.com, and your API Key can be found by logging into your Elegant Themes account and clicking on the Account > Your API Key link. Once you have authenticated your account, you can click the update link when you receive an update notification to automatically update your theme or plugin.
Update Notifications
When new updates become available for any of our themes or plugins, a notification will appear in the Dashboard > Updates page of your website』s WordPress Dashboard.

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

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

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

Once you have entered your credentials, you are now ready to update your theme. Click on the Dashboard > Updates tab and update your theme or plugin normally using the WordPress update interface. If you do not see any update notifications, or you receive an authentication error when updating, try waiting a bit and then check back later. Sometimes WordPress will cache update notifications and it can take some time for them to appear correctly.
Managing API Keys
API keys can be managed with the Elegant Themes member』s area. Here you can add new API Keys as well as deactivate keys that you have generated in the past. If you are using Divi on different client websites, it』s often a good idea to generate a new key for each site. If your relationship with the client is terminated, you can deactivate their API key.

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.

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