Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Video Slider Module with the Website Page Designer

Video Slider Module with the Website Page Designer

One video is good but a collection of them is even better! What about introducing a video slider to your website, where your visitors can navigate to watch one video after the other?

The Page Designer lets you add a video slider module to your website pages. This option might be especially useful if you have tutorial videos about a certain topic or any compilation that makes sense to be watched together.

Add a Video Slider Module

Insert a module

Place a Video Slider module inside a row.

Populate your slider with videos

On the Content tab inside the video slider module settings, add as many videos as you need, by uploading files or including a video URL. The videos you’re uploading can have mp4 or Webm extensions. After you uploaded one video, click on the green arrow to go back to the main content tab, then upload another, repeating the process until you have all the videos you need in the module.

For each video, you can select a unique overlay, an image for the thumbnail, from a file, URL or automatically generated one.

Customize the Elements

You can choose to have the navigation arrows to toggle between the videos. The slider controls can either be a thumbnail track, as displayed above or dot navigation as shown below.

Overlay

Choose to show or hide the main video overlay image.

Background

Here you can select a background color that will be visible in the area of the module not covered by the videos.

Admin label

You can add a different label to the module to better recognize it or to describe it to other users who have access to edit the page.

Other Settings

Controls colors

In this option, you can adjust the slider controls from light to dark or the other way around, select a different color for the play icon and also for the thumbnail overlay.

Other features

The design tab also lets you customize other options such as the sizing, spacing, and the module shadow.

Advanced settings

Using this tab you are able to insert CSS code and select device visibility. Check this article to learn more about the Advanced settings.

Individual Video Settings

Customize Each Video

On the content tab, click on the settings of the video you want to configure. Here you can change the video, pick the overlay, adjust the design of the arrows, and even insert some CSS advanced code for this specific video.

 

Was this article helpful to you? Yes No

How can we help?