How to add a video slider to your website
Your maxqsoft website was designed using WordPress. WordPress is difficult for beginners so the DIVI theme was utilize to make updating your website a piece of cake. Follow the easy steps out lined in the videos instructions and learn how to add a video slider to your website.
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.
Under elements you’e able to adjust the setting for the video slider module’s arrows and slider controls.
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.
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.
As demonstrated above, this is where you are able to add your video content.
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:
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]
Slider Arrows Color: Light
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:
Arrows: Show Arrows
Slider Controls: Use Thumbnail Track
Display Image Overlays on Main Video: Show
Slider Controls Color: Light
Play Icon Color: #ffffff
Things You Should Do Before Hiring a Web Designer First of all, congratulations in advance! You must be wondering, "What? Why?"....
The best Platform for affordable web design is wordpress and we are going to discuss why that is. In this fast-paced and...
How to add & customize the call to action module Your maxqsoft website was designed using Wordpress. Wordpress is difficult...
How to add & customize the tabs module Your maxqsoft website was designed using Wordpress. Wordpress is difficult for...
How to add & customize the Divi tabs module Your maxqsoft website was designed using Wordpress. Wordpress is difficult for...
How to add a blog to your website Your maxqsoft website was designed using Wordpress. Wordpress is difficult for beginners so...
How to add and configure image gallery Your maxqsoft website was designed using Wordpress. Wordpress is difficult for beginners...
How to add videos to your website Your maxqsoft website was designed using Wordpress. Wordpress is difficult for beginners so...
How to add or replace image on your website Your maxqsoft website was designed using Wordpress. Wordpress is difficult for...
How to manage your website buttons Your maxqsoft website was designed using Wordpress. Wordpress is difficult for beginners so...
How to manage your website contact form Your maxqsoft website was designed using Wordpress. Wordpress is difficult for beginners...
Adding A Custom Logo Image to your website Your maxqsoft website was designed using Wordpress. Wordpress is difficult for...
Using the Theme customizer & module customizer Your maxqsoft website was designed using Wordpress. Wordpress is difficult...
Learn how to manage and maintain your Maxqsoft website.
Your maxqsoft website was created using the wordpress content management system. WordPress is difficult for beginners so the DIVI theme was utilize to make updating your website a piece of cake.