The Divi Video Slider Module

How to add, configure and customize the Divi Video Slider module.

The Divi Video Slider module is a simple way to display a collection of videos on your website.

You can display a portfolio of videos, training videos, tutorials and more.

Videos can be uploaded directly to your WordPress website or inserted using URLs for videos hosted on YouTube and/or Vimeo.

Watch a live demo of this module

How to add the Divi Video Slider module to your page

Add a new page or edit an existing page.
By default, the Gutenberg standard editor loads whenever you add a new post or WordPress page.
Click the purple button below the title of the page. Use the Divi Builder.

Add a page and upload the Visual Builder

Once you click, the page will be reloaded with the Visual Divi Builder.

When you reload the page, you will notice three options:

Create from scratch
Choose a predefined design
Create with AI

Create from scratch

This option loads the Divi Builder with a blank page layout. Choose this option if you want to start designing your page from scratch.

Choose a predefined design

This option allows you to choose from our large library of predefined Divi designs. You can choose between designs created by Divi, designs you have created and saved in your Divi library, and existing pages on your website that you can clone.

Create with AI

This option allows you to create a complete page layout using Divi IA. Using your text indications and information about your website, you can create the perfect outline of the page, build it and fill it with content and images quickly.

Add the Divi Video Slider module

Click the green + icon to insert a row.
Click the gray + icon in the row to open the Divi module library, which contains all the modules included in the Divi theme.
Find the Video Slider module and click it to upload it.
The module library is also searchable. Type the name of the module you want in the search bar at the top.

All options in the Divi Video Slider module explained

Settings appear automatically once you have added the video slider module. This is where the content and design styles of the module are configured. These configurations are organized into three groups through tabs at the top of the module: Content, Design and Advanced.

Tab Content

In this tab you will find the content options available for the Divi Video Slider module.

How to add a video to the Video Slider module

There are two ways to add videos to this module:

Uploading them directly to your website
Inserting a video from a URL

Note: If you upload your video, we recommend uploading both WebM and MP4 formats. WebM files have smaller sizes (saving space on your server) and better compression.

However, some browsers and devices do not support WebM, so uploading an MP4 file ensures your video plays across all browsers and devices.

Option 1: Upload a video to your website

When the Video Slider module is loaded, a demo video is automatically added. Click the gear icon next to the New Video switch to replace the demo video.
Click the trash can icon in the demo video within the module settings to delete it.
Click Add Video. This will open the WordPress media library, where you can search for videos already uploaded or upload a new one.
Once the video is selected, click the Upload Video button in the lower-right corner of the media library window.

Option 2: Insert video from URL

When the Video Slider module is loaded, a demo video is automatically added. Click the gear icon next to the New Video switch to replace it.
Click the trash can icon to delete the demo video.
Click Add Video. This will open the WordPress media library. In the left sidebar, click Insert from URL. Paste your video URL into the text box.
Click the Insert button in the lower-right corner.

Elements

This controls which elements are displayed with this module.

Show arrows - Turn this option on or off to show or hide navigation arrows.
Slider Controls - There are two options for slider controls:
- Thumbnail bar (where videos are displayed as thumbnails under the main video)
- Point navigation (displays a series of points at the bottom of the main video to indicate progress in pagination)

Overlay

Turn this option on or off to display image overlays over the main video.

Fund

In the Fund options group, you can configure:

Background color
Gradient of the background
Background image
Background video
Background pattern
Background mask

How to add a background color

Click the first tab, the paint bucket icon.
Click Add background color and choose a color from your site's palette, or use the dropper icon to select a new color.

How to add a background gradient

Click the second tab, the gradient icon.
Click Add background gradient.
To change the gradient colors, click on the gradient points and select a color from the palette or use the dropper. You can add more colors by clicking on the gradient bar.

Gradient options:

Gradient Type - Change the gradient type using the drop-down menu.
Gradient Direction - Change the direction by dragging the slider or writing a numerical value.
Gradient repeat - Active so that the gradient repeat.
Gradient unit - Change how the downgraduate stop points are calculated.
Place gradient on the background image - If there is a background image, you can put the gradient on top by activating this option.

How to add a background image

Click the third tab, the image icon.
Click the gray + icon to open the media library, where you can choose a photo already uploaded or upload a new one.

Background image options:

Use side effect - Active to apply an effect where the image moves faster than foreground content, creating a 3D illusion. By default it is disabled.
Background image size - Choose the size from the drop-down menu.
Background image position - Choose position from the drop-down menu.
Repeat background image - Choose whether and how the image is repeated.
Background Image Mix - Choose how the image is mixed with other layers of the module.

How to add a background video

Click the fourth tab, the video icon.
Click the gray + icon to open the media library, where you can select a video already uploaded or upload a new one.

Background video options:

Mp4 vs WebM - We recommend uploading both mp4 and webm formats because not all browsers support WebM. Uploading both ensures that the video is played across all devices and browsers.
Background video width - Defines the width of the video by writing a numerical value.
Highlight of the background video - Defines the height of the video by writing a numerical value.
Pause video when another video is played - If you want the background video to pause when another video is in playback, turn on this option. By default, the video is paused when it is not in view. If you want it to continue, turn it off.

How to Add a Background Pattern

Click on the fifth tab, the Pattern icon

Click Add Background Pattern

Choose the type of pattern you want from the drop-down menu

Fund Pattern Options

Pattern Color: Select the pattern color from your site's color palette or use the dropper icon to find a new color.
Transform Pattern: Transform the pattern horizontally or vertically, rotate or invest it.
Pattern Size: Here you can select the pattern size: real size, cover, adjust, stretch to fill or custom size. If you choose custom size, the following options will appear: width and height of the pattern. Drag the slider or type a numeric value to define these options.
Pattern Repeat Source: Select the source from which the pattern will be repeated.
Horizontal and Vertical Pattern Scrolling: Adjust the horizontal and vertical displacements of the pattern.
Pattern Repeat: Choose how the pattern is repeated: horizontally, vertically, and more.
Pattern Mixing Mode: Defines how the pattern layer interacts with the layers underneath it. Select one of the 16 mix modes available from the drop-down menu.

How to Add a Background Mask

Click on the sixth tab, the Mask icon

Click Add Background Mask

Select the type of mask you want from the drop-down menu

Background Mask Options

Mask Color: Choose the color of the mask from your site's color palette or use the dropper icon to choose a new color.
Transform Mask: Transform the mask horizontally or vertically, rotate or invest it.
Mask Aspect Ratio: Adjust the ratio between width and height of the mask.
Mask Size: Select mask size: real size, cover, adjust, stretch to fill or custom size. If you choose custom size, options for mask width and height will appear. Drag the slider or type a numeric value to define them.
Mask Mixing Mode: Defines how the mask layer interacts with the layers underneath it. Select one of the 16 mix modes available from the drop-down menu.

Divi Video Slider Background Mask settings

Management Label

The administration tag is where you can name the module that only you will see, to help you keep everything organized and easy to understand in the backend. By default, the administration tag will be the module name. You can change the text on the label to reflect what you want.

Design Tab

Here you will find all the styles and design options for the Divi Video Slider Module.

Controls

Playback Icon Colors: Determines the color of the playback icon.
Use Custom Font Size for the Playback Icon: If you want a custom font size for the playback icon, you can set it up here.
Thumbnail Overlay Color: Defines the color of the overlay in the video thumbnails under the main video.
Slider Control Color: Defines the color of slider controls, i.e. navigation arrows or navigation points.

Dimensions

Width: Defines the width of the module. For more information, see the official documentation.
Maximum width: Defines the maximum width of the module. For more information, see the official documentation.
Module Alignment: If a maximum width or width is defined, the module alignment can be adjusted with three options:
- Aligned to the Left
- Aligned to the Centre
- Aligned to the Right
Minimum Height: Defines the minimum value for module height. For more information, see the official documentation.
Height: Defines the height of the module. For more information, see the official documentation.
Maximum Height: Defines the maximum value for module height. For more information, see the official documentation.

Spacing

You can add margins or fillings to the module by entering numerical values.

The margin adds space outside the module, and the filling adds space within the module. To maintain equal proportions and values, click the string icon between the values you want to always be identical (e.g. above and below).
The default margin values are 0.
The default filling values are 0.

Edge

gregates an edge to the module. You can add a full edge or only on one side of the module. Adjust the width with the slider and select a color. Choose an edge style from the drop-down menu.

Rounded Corners: Type a numerical value to round the corners of the edge. The higher the number, the more rounded the corners will be. Corner values are automatically linked (the highlighted blue string indicates); if you want different values for each corner, click on the string to unlink them. If linked, they will be automatically updated when you change one.
Edge Styles: Adds an edge on all sides of the module or on individual sides (up, right, down, left).
Edge width: sets the edge thickness. For a thicker rim, increase the number. The width must be at least 1 px for display.
Edge Color: Choose the edge color from your site's color palette or use the dropper to select a new color.
Edge Style: select the style you want: solid, dotted, discontinuous, double, groove, relief, embedded, outstanding or none.

Shadow of Box

Add a shadow to the entire module. Once a shadow style is selected, you can customize the following options:

Horizontal Shadow Position: Defines the horizontal position of the shadow.
Vertical Shadow Position: Defines the vertical position of the shadow.
Shadow Blur Force: Defines how diffuse the shadow will be. The greater the value, the greater the blur and the shadow will look wider and softer.
Shadow Extension Force: Defines how dense the shadow is. Increasing this force increases the intensity of the shadow.
Shadow Color: Defines the color of the shadow.
Shadow Position: Defines whether the shadow will be inside or outside the module.

Filters

Adjust the filter in the module:

Nuance: defines the angle of the nuance of a color.
Saturation: defines the intensity of color saturation.
Brightness: Defines how bright the colors should be.
Contrast: Defines how marked the clear and dark areas are.
Invert: reverses nuance, saturation and brightness according to the specified value.
Sepia: gives a warmer, yellowish/brown tone.
Opacity: defines how transparent or opaque the background (color, gradient, image, etc.).
Blur: Defines the amount of Gaussian blur applied to the module.

Mixing Mode refers to how the module is mixed with the layers below. By default it is selected "normal".

Transform

Climbing
Move
Rotate
Sesgar
Points of origin

Browse these options using the Tab key. Configure each option by entering numerical values or dragging and expanding the box or circle.

You can block these values so that they are always identical by clicking the string icon at the bottom right.

Animation

Here you can apply animation to the module. Once you choose a style, you can adjust the following options:

Duration of animation- Define the time it takes an animation to complete a cycle.
Delay in animation- Define the time you should wait since the animation is applied to an item before you start running it. Animation can begin afterwards, immediately or in the middle of the animation.
Initial opacity of animation- Define the opacity value with which the animation begins.
Animation speed curve- Define the method of accelerating your animation. Speeding up and slowing down creates a smoother effect than a linear speed.
Repeat of animation- By default, animations are only played once. If you want the animation to be repeated continuously, select the option to repeat.

Advanced Tab

Within the Advanced tab, you will find options that can be useful for more experienced web designers, such as custom CSS.

Here you can apply custom CSS to your module. You can also assign custom classes and IDs to the module, which allow you to customize styles with more advanced CSS properties or apply CSS code using the module class.

ID and CSS Classes

Assign a specific ID or CSS class to this module. This is useful for applying custom CSS using your child theme stylesheet.

ID and CSS Class Settings

Custom CSS

Free CSS- Write free CSS using the "selector" selector to point to this module. Example: selector h1 {color: red;}
Module elements- You can apply custom CSS to specific parts of the module by pasting it into this tab. When you click, you will see individual sections to add custom CSS properties.

Conditions of Use

Display conditions allow you to choose when to display this module according to a set of conditions, as if the user has already bought on your site, which browser he uses, operating system, and more.

You can add one or more conditions.

Visibility

Disable in- Defines the visibility of the module. You can disable it (hide it) when the screen is phone, tablet or desktop, by checking the appropriate boxes.
Horizontal overflow- Defines what happens when the content exceeds the left and right edges of a block element:
- Visible: The content is displayed if it exceeds height.
- Scrolling: If the content exceeds height, a vertical scroll bar appears.
- Hidden: the content that protrudes is hidden.
- Automatic: The browser decides whether to display scroll bar.
Vertical overflow- Same as horizontal, but for the upper and lower edges.

Transitions

Controls the duration, delay and speed curve of the hover animation.

Transition time- Duration in milliseconds of the hover transition.
Transition delay- Delay in milliseconds in the transition of hover.
Transition speed curve- Define the speed curve of the hover animation.

Position

Defines the position of the module:

Relative(default) - The module is positioned according to the normal flow of the document, and the vertical and horizontal scrolling values apply relative to itself. It does not affect the position of other elements.
Absolute- The module is removed from the normal flow and does not create space in the design. It is positioned relative to its nearest positioned ancestor or the initial container.
Fixed- The module is removed from the normal flow and does not create space. It is positioned with respect to the browser window, useful for adhesive modules (sticky).
Vertical displacement- Defines the vertical position of the module.
Horizontal displacement- Defines the horizontal position of the module.
Index Z- Define the order of the module in the design layer. The highest values overlap the lowest values.

Displacement effects

Defines the behavior of the module when scrolling around the page. You can make the module fixed at the top, bottom or both and decide whether to transform while the user moves.

You can also enable vertical movement that allows you to adjust the speed of the element scrolling without affecting the elements around.

The motion trigger effect allows you to choose when the scrolling effect is triggered: when the top, middle or bottom of the element is in view.

How to stylize videos individually in the video slider module

In addition to general styles and settings, you can customize videos individually.

Open the video slider module settings.
Click the gear icon next to the video you want to customize.
Here you will see content, design and advanced options similar to general ones. Changes will only affect the selected video.
Click the arrow in the upper-left corner to return to the main module settings.
Save your design by clicking the green arrow in the lower-right corner.

Save your design

When you're done setting up and designing the module, click the green arrow in the lower-right corner to save. If you close without saving, you will lose the changes.

Save the page layout

To save the page layout you can use CMD+S on Mac or CTRL+S on PC. You can also use the Divi bottom bar by clicking on the purple icon with three dots to expand the bar and then the green save button.

Exit the visual builder

Once the changes are saved, click "Exit the visual builder" in the top management bar to exit.

Continue learning

How to create a playlist page with Divi Video Slider Module
How to add image overlays to your Divi video slider module
Using the thumbnail track vs. point navigation in the Divi video slider module
How to display/hide a video slider based on login status with Divi
6 practical tutorials of the video slider module for Divi

Popular Articles
How to Create an App for Restaurants (with or without Delivery)
Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...
APPS: Radio
The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...
APPS: Webhooks
The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...
APPS: Audio & Music
How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...
QR Promotions
This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...

Related Articles
The Divi Slider Module
Cómo agregar, configurar y personalizar el módulo de deslizamiento de Divi &amp;lt;br&amp;gt; El Módulo Deslizante de Divi puede colocarse en cualquier parte de tu sitio web. Los deslizadores pueden ser grandes, pequeños, de ancho fijo o de ...
The Divi Fullwidth Slider Module
How to add, configure and customize Divi full width slider module. Divi Full Width Slider Modulecan show calls to impact action, highlight important content from your website such as a popular page or publication, and divide textual content for ...
The Divi Post Slider Module
How to add, configure and customize the Divi Publications Slider module. &amp;lt; The Divi Post Slider Modulecan display recent blog posts, reviews, featured projects, inspiring quotes, upcoming events and more. They can be large, small, fixed ...
The Divi Email Optin Module
How to add, configure and customize the Divi email subscription module &amp;amp;lt;br&amp;amp;gt; Divi Email Subscription Modulesimplify the process of increasing your email subscribers by offering attractive registration forms and easy ...
The Divi Audio Module
Cómo agregar, configurar y personalizar el módulo de audio de Divi. &lt;br&gt; El Módulo de Audio de Divi facilita la inclusión de archivos de audio en tu sitio web. Es ideal para compartir archivos de música, episodios de podcast o mostrar ...

The Divi Video Slider Module | Scoreapps