Before you can add a video module to your page, you must first use the Divi Builder. Once the Divi theme installed on your Website, you will notice a button Use the visual builder above the publisher each time you create a new page.

Click on this button to activate Divi Builder and access all the Divi Builder modules. Then click on the button Use the visual builder to start the generator in visual mode. You can also click the button Enable Visual Builder when you browse your Website in the foreground if you are logged into your WordPress dashboard.

go to the visual builder.jpeg

Once you have entered Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside rows. If you are starting a new page, remember to add a row to your page first.

add the video.jpeg module

Locate the video slider module in the list of modules and click on it to add it to your page. The list of mods is searchable, which means you can also type "Video slider" and then press Enter to automatically find and add the video mod! Once the module is added, you will be greeted by the module options list. These options are separated into three main groups: Contents , Design et Advanced.

add the video.jpeg module

Fill the video cursor with content

how to fill the video content Divi module video.jpg

Before you adjust too many settings, it's probably best to go ahead and fill your video slider with video slides. This way when you make changes, you will be able to see how they affect the end result. To add a new video slide, you need to click on the link + Add a new item .

add a new video.jpeg element

Here you can download an .mp4 or Webm file. You can also insert a video URL on YouTube. When you have uploaded your file or added the YouTube link, just click the green button in the lower right corner and you will be returned to the main content tab of the video slider module. Repeat this process for each video you want to add.

Video Slider Module Content Settings

Now that your content has been added, there are a few more areas to explore. The three drop-down menus in the content tab where the settings have been grouped that will affect the entire module.

Element

Below the items, you can adjust the arrow and slider setting of the video slider module.

Cover

Here you can choose to show or hide the video overlays on the main video. This can be done by adding an overlay to each video slide or automatically generated by Divi.

Admin Label

In this drop-down list, you can add an admin tag that will appear in the back end builder, as well as the skeleton view of the visual builder.

Video Slider Module Design Parameters

video option design.jpeg

In this tab there is only one parameter group called Color Controls . Here you can change the color of the slider controls from light to dark, change the color of the play icon, and adjust the thumbnail overlay color.

Video Slider Module Advanced Settings

advanced parameter module.jpeg

In the Advanced tab of your video slider module, you can add a unique ID and css class. You can also add custom css to various predefined (and preselected) css selectors in custom css drop down video slider module. Finally, in the visibility drop-down list, you can adjust the visibility of your module on phones, tablets and desktops.

Individual video content settings

configure videos.jpeg

If you want to create specific settings for individual slides, these must be configured in the video slides themselves. Just click on the gear icon on that slide to open its unique settings.

individual video configuration.jpeg

Video

As demonstrated above, this is where you can add your video content.

Cover

From the overlay drop-down list, you can upload an image to overlay your video slide or choose to automatically generate one.

Individual video design settings

set up videos

On the Design tab of your video slide, you can change the color of your slide's arrow from light to dark.

individual video configuration

That's all for this tutorial, I hope it will allow you to use the video scrolling module on Divi.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEME [/vcex_button][/vc_column][vc_column width=” 1/2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Other Divi tutorials