(617) 221-8300
  • Facebook
  • Twitter
  • Instagram
  • Yelp
  • Reddit
  • Google
  • Pinterest
  • WhatsApp
  • Facebook
  • Twitter
  • Instagram
  • Yelp
  • Reddit
  • Google
  • Pinterest
  • WhatsApp
Ask the Egghead, Inc.
  • Home
  • About
    • Reviews
    • Awards
    • Careers
    • Status
  • Services
    • Website Design
    • SEO
    • Social Media
    • Managed Hosting
    • Pricing
  • Portfolio
  • Blog
  • Contact
  • Login
Select Page

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.

The post How to Add Image Overlays to Your Divi Video Slider Module appeared first on Elegant Themes Blog .

Recent Posts

  • What Is CentOS Stream Server Software?

    What Is CentOS Stream Server Software?

  • How to Choose the Best Domain Names for Your Business

    How to Choose the Best Domain Names for Your Business

  • How to Use The Divi Gradient Builder to Design Unique Circular Background Shapes

    How to Use The Divi Gradient Builder to Design Unique Circular Background Shapes

  • How to Add a Custom Size to Your Background Pattern with Divi

    How to Add a Custom Size to Your Background Pattern with Divi

  • Cloudways vs SiteGround: Which Host is Right For You?

    Cloudways vs SiteGround: Which Host is Right For You?

  • How to Install WordPress on AWS Web Hosting

    How to Install WordPress on AWS Web Hosting

  • AWS Web Hosting: A Review for WordPress Users

    AWS Web Hosting: A Review for WordPress Users

  • How to Create Subtle Background Pattern Masks with Divi (3 Examples)

    How to Create Subtle Background Pattern Masks with Divi (3 Examples)

  • How to Increase Site Speed Using SiteGround’s Free CDN

    How to Increase Site Speed Using SiteGround’s Free CDN

  • 6 Awesome Tutorials for Divi’s Testimonial Module

    6 Awesome Tutorials for Divi’s Testimonial Module

B2B_Companies_Massachusetts_2020
Web Design Certified by UpCity WordPress Web Development
Best Web Designers in Boston
Upcity Badge
Ask-the-Egghead-logo

Capability Statement

View/Download

Ask the Egghead

1201 Connecticut Avenue NW
Suite 627
Washington, DC 20036
(202) 750-1910

399 Boylston Street
Suite 685
Boston, MA 02116
(617) 221-8300

About Ask the Egghead

Ask the Egghead is a full service WordPress web design and development agency. An Egghead will help you develop ideas and projects, transform your organization, and grow your business.

Services

  • Website Design
  • Social Media
  • SEO
  • Hosting
  • Privacy Policy
  • Facebook
  • Twitter
  • Instagram
Designed by The Egghead © 2015-2022 Ask the Egghead, Inc.