How to Add Image Overlays to Your Divi Video Slider Module

Posted on March 2, 2022 by in Divi Resources 1 Comment

How to Add Image Overlays to Your Divi Video Slider Module
Blog / Divi Resources / How to Add Image Overlays to Your Divi Video Slider Module

A video slider is a great way to show lots of video content in a small space. By default, the video slides show a snapshot of the video. There are times when you want to give the video slides a different look. In this article, we’ll see how to add image overlays to your Divi Video Slider module. We’ll also see how to customize the hover overlay and play icon.

Let’s get started.

About the Video Slider Module

The Video Slider module can display MP4 or Webm videos. You can upload them to your media library, or link to them using their URLs so they can be hosted somewhere else. The Video Slider module is great for tutorials, courses, product reviews, music videos, and more.

You can have the videos display their default screenshot or add your own image. Adding your own images allows you to create a consistent design across your website regardless of the video’s content.

Each slide is a submodule that’s added within the module itself. You can style the module to create default settings and you can style each submodule individually. If you don’t style the submodule, it will use the default styling that you’ve set up in the regular module settings. Options include arrows, image overlays, custom icons, and hover overlays.

About the Video Slider Module

Adding the Video Slider Module to a New Page

Now, let’s add the Video Slider module to a page and see how to use and style it. I’m using the About page from the free Consultant Layout Pack that’s available within Divi. I’ll add the module between two of the sections.

Adding the Video Slider Module to a New Page

First, enable the Visual Builder and add a new single-column Row.

Adding the Video Slider Module to a New Page

The background styling is in the section, so we can move on to the module. Next, search for Video and click the Divi Video Slider module.

Adding the Video Slider Module to a New Page

Add your Videos to the Video Slider Module

The Video Slider module adds a default video submodule to get you started. Click the gear icon to open its settings.

Add your Videos to the Video Slider Module

Next, delete the default video, or select the icon to change the video. Now, you can select to upload an MP4 or Webm video or enter a URL for a video that’s hosted somewhere else. Click Add Video for the type you want to add.

Add your Videos to the Video Slider Module

Next, either upload the video to your media library and select it or enter the URL for the video you want to display.

Add your Videos to the Video Slider Module

Click Add New Video and choose the video for that slider module.

Add your Videos to the Video Slider Module

Repeat this process until you’ve added all your videos. Each video is a new slide. You can also name them by adding an Admin Label under the video selection area in their settings.

Add your Videos to the Video Slider Module

Default Video Slider Image Overlays

Next, let’s see how it works with the default overlay. This will help us see what the new overlay does when we add it. Since I added URLs from YouTube, my videos have YouTube controls, information, and links. The slides show under the current video. The current slide has a dark overlay.

Default Video Slider Image Overlays

Hovering over the main slide shows the navigation arrows and changes the play icon to red.

Default Video Slider Image Overlays

Hovering over a slide shows an overlay and a white play icon.

Default Video Slider Image Overlays

Add the Video Slider Image Overlays

Next, we’ll add an overlay to each video. First, we need to enable the overlay option. In the Slider Module’s Content settings, scroll down to Overlay and select Show Image Overlays on Main Video.

  • Show Image Overlays on Main Video: Yes

Add the Video Slider Image Overlays

Overlays are now enabled for every slide. You’ll notice that the player’s default settings have now been replaced with the Divi module’s settings for the current video. We can style each slide individually, or the module as a whole.

Styling the Video Slider

We can style each video individually or we can style the module. Videos will use their individual styling if it’s available. If not, then it will use the module styling. There are a few options that are only available in the module or video settings. I’ll show the styling options for both.

To style the module, select the Design tab. To style the slides individually, select their gear icons and then click on the Design tab. Repeat the process for each slide to customize each one.

Styling the Video Slider

Style the Video Slider Module Default Settings

We’ll start with the default Video Slider module settings. Every slide that isn’t styled individually will use these settings.

Play Icon Color

Select the Design tab. Under Controls, choose a custom color for the Play Icon. I’m using #e3332e. This is a shade of red that matches an icon that’s already used on this page template. The icon in the player and the thumbnails will use this color.

  • Play Icon Color: #e3332e

Style the Video Slider Module Default Settings

Icon

Next, select the Play Icon from the list. Search for Play and choose your favorite. I’ve selected the large triangle so it will stand out.

  • Icon: Large Triangle

Style the Video Slider Module Default Settings

Play Icon Font Size

Next, let’s change the Icon’s Size. The default is 96px. I’ve changed it to 160px to make it stand out. This only affects the large slide. The thumbnails are not affected by this option.

  • Use Play Icon Font Size: Yes
  • Play Icon Font Size: 160px

Style the Video Slider Module Default Settings

Thumbnail Overlay Color

Next, change the Thumbnail Overlay Color to rgba(243,244,239,0.73). This affects the hover overlay for both the main player and the slider thumbnails.

  • Thumbnail Overlay Color: rgba(243,244,239,0.73)

Style the Video Slider Module Default Settings

Style the Video Slider Module Slides

Next, we’ll style each slide individually. I’ll leave two at the default settings and style the other two.

Style a Video Slide

Open the slide you want to style by selecting its gear icon.

Style the Video Slider Module Slides

Overlay Image

Scroll down to Overlay and select Add Image.

  • Overlay: Add Image

Style the Video Slider Module Slides

Upload or choose an image from your media library.

Style the Video Slider Module Slides

Your slide will now display the image you selected instead of an image from the video.

Play Icon Color

Style the Video Slider Module Slides

Go to the Design tab and select a new Play Icon color. I’ve selected blue. Notice, this only affects the slide, not the thumbnail.

  • Play Icon Color: #0c71c3

Style the Video Slider Module Slides

Icon

Next, choose a new Icon for this slide. I’ve selected the broken arrow. This also only applies to the slide.

  • Icon: Broken Arrow

Style the Video Slider Module Slides

Style the Next Video Slide

Continue the process for each slide. I’ve opened my fourth slide in this example.

Overlay Image

Scroll down to Overlay and select the image you want.

  • Image Overlay: Add Image

Style the Next Video Slide

Play Icon Color

Go to the Design tab and select the Icon Color you want this slide to display. I’ve selected orange.

  • Icon Color: #e09900

Style the Next Video Slide

Icon

Next, choose the Icon you want to display. I’ve selected the filled-in circled arrow. When you’re done with your slides, close the module and save your work.

  • Icon: Filled-in Circled Arrow

Style the Next Video Slide

Video Slider Image Overlay Results

Here’s how the Divi Video Slider module looks on my page. I’ve created a few examples. This example shows the default settings with the play icon and hover overlay.

Video Slider Image Overlay Results

This example shows the custom image overlay with a custom play icon. I’m hovering over its thumbnail to show how its image and icon works separately from the slide.

Video Slider Image Overlay Results

This example shows the second slide with a custom image overlay and a play icon. I’m hovering over the slide to show the hover overlay as it appears over the custom image.

Video Slider Image Overlay Results

Here’s another example of how this can be used. Since you can add any image you want, you can use images to describe the content. This example would work for courses or tutorials. It just has a gradient background, but you could use any image you wanted to create featured images for your courses and tutorials.

Video Slider Image Overlay Results

Here’s another example. I’ve only changed the image overlays, but this gives the videos a completely different look and feel.

Video Slider Image Overlay Results

Ending Thoughts

That’s our look at how to add image overlays to your Divi Video Slider module. The Video Slider module is great for courses, tutorials, or any type of series you want to show within slides. Divi makes it easy to add custom image overlays to give each slide a different look than the video’s screenshot. You can style the slides independently, so they don’t have to look the same. You can also add a custom play icon and hover overlap to each slide or create a default icon and overlay for all the slides to use.

We want to hear from you. Do you add image overlays to your Divi Video Slider module? Let us know in the comments.

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Hostel Layout Pack for Divi

Get a Free Hostel Layout Pack for Divi

Posted on August 15, 2022 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new, free Divi Layout Pack from our design team to you. This time around, the design team has created a beautiful Hostel Layout Pack that’ll help you get...

View Full Post

1 Comment

  1. BUT YOU NEVER ANSWERED WHY OR HOW TO INSERT A SLIDER WITH ROTATING STRIPE, WITHOUT THE BIG VIDEO,

Join To Download Today