Using Thumbnail Track vs. Dot Navigation in Divi’s Video Slider Module

Last Updated on September 2, 2022 by Leave a Comment

Using Thumbnail Track vs. Dot Navigation in Divi’s Video Slider Module
Blog / Divi Resources / Using Thumbnail Track vs. Dot Navigation in Divi’s Video Slider Module

Thumbnail Track vs Dot Navigation is one of those things we have to consider when adding a Video Slider module to our Divi layouts. Both are good choices, but each one is better suited for certain situations. In this article, we’ll look at using Thumbnail Track vs Dot Navigation in Divi’s Video Slider module to help you decide which to use in your situation.

Thumbnail Track and Dot Navigation

The Thumbnail Track and Dot Navigation make it easy to navigate through the video slides within the Divi Video Slider module. Both display the current video within the video player, but their navigation is very different.

Both types of navigation work well, but there are times when one is a better choice than the other. We’ll explore this idea as we go. The example below shows both types of navigation.

Thumbnail Track and Dot Navigation

Changing Between Thumbnail Track and Dot Navigation

It’s easy to change between Thumbnail Track and Dot Navigation. Enable the Visual Builder at the top of the screen. Hover over the Video Slider module and click the gray gear icon.

Thumbnail Track and Dot Navigation

Scroll down to Elements. You’ll see a setting called Slider Controls that includes a dropdown box. This dropdown contains both navigation options. Simply click on the option you want. Use Thumbnail Track is the default setting. That’s the navigation seen in the image below.

Slider Controls:

  • Use Thumbnail Track
  • Use Dot Navigation

Thumbnail Track and Dot Navigation

I’ve now selected Use Dot Navigation. The thumbnails have been removed and dots now appear on the video’s image.

Thumbnail Track and Dot Navigation

A Look at Thumbnail Track

Thumbnail Track displays a thumbnail image of the slides under the video player. Hovering on a thumbnail shows the play icon and reveals left and right arrows. I’m hovering over the second thumbnail from the left in this example.

A Look at Thumbnail Track Thumbnail Track vs Dot Navigation

Clicking on a thumbnail shows that video in the video player. The thumbnail for the current video shows an overlay.

A Look at Thumbnail Track Thumbnail Track vs Dot Navigation

Clicking on an arrow in the Thumbnail Track scrolls the thumbnails to the previous or next set of thumbnails. This allows users to easily see the thumbnails and choose their video in the Video Slider.

A Look at Thumbnail Track Thumbnail Track vs Dot Navigation

You have control over the Thumbnail Track’s overlay and control color. Choose any color for the Thumbnail Overlay Color. Select between Light and Dark options for the Slider Controls Color.

  • Thumbnail Overlay Color: choose custom color
  • Slider Controls Color: choose Light or Dark

A Look at Thumbnail Track Thumbnail Track vs Dot Navigation

When to Use Thumbnail Track

Since Thumbnail Track displays images, it’s best to use it on a page, or within a location on a page, that doesn’t have a lot of images. Use it with white space. It’s ideal when you want to draw attention to the slides.

Where Thumbnail Track is Ideal

Here are a couple of examples. It works well in the examples below because there aren’t a lot of images in the area around it and it has enough white space to separate it from the other elements.

In this example, I’m using the Room page in the free Bed and Breakfast Layout Pack. I’ve replaced the Video Module and Image modules with a single Video Slider module. This is the perfect use of the Video Slider module with Thumbnail Track. The thumbnails show what the slides are, so the visitor can easily see the room they’re interested in.

When to Use Thumbnail Track

Dot Navigation isn’t ideal for this layout. It doesn’t draw attention to the rooms, which is the goal of this page.

When to Use Thumbnail Track Thumbnail Track vs Dot Navigation

In the example below, I’ve placed the Video Slider module with the Thumbnail Track within the Home page of the free Consultant Layout Pack that’s available within Divi. There is white space between the Video Slider and the modules above and below it. The module has the full width of the layout, so there’s plenty of screen width for the navigation thumbnails.

When to Use Thumbnail Track

The Dot Navigation also works well here, but it doesn’t draw attention to the video slides. It needs more information, such as a title to describe it.

When to Use Thumbnail Track Thumbnail Track vs Dot Navigation

Where Thumbnail Track is Not Ideal

Thumbnail Track is not ideal when there isn’t a lot of space for the thumbnails and there is a lot of images around it.

In this example, I’ve moved the Video Slider module to a small column next to an image with graphics. The video slider does look good here, but the thumbnails are difficult to see. The video slider becomes lost in the visuals, so this isn’t a location you’d want to place it if you wanted to draw attention to the videos.

When to Use Thumbnail Track

Dot Navigation fits well here. It has a minimal design that doesn’t take away from the elements around it. This is a good choice if you want to use the videos as smaller, supporting elements.

When to Use Thumbnail Track

A Look at Dot Navigation

Dot navigation adds a dot to the featured image for each slide. The dot for the current slide is brighter than the others.

A Look at Dot Navigation Thumbnail Track vs Dot Navigation

Clicking on a dot selects that dot’s video. In the example below, I’ve selected the last dot. The video player now shows the image of that video slide. I’m hovering over the video image, which shows an overlay and makes the dots easier to see with my color scheme.

A Look at Dot Navigation Thumbnail Track vs Dot Navigation

You can choose between light and dark colors for the dots. This lets you make the dots more visible based on the colors or overlays of your video’s featured images.  I’ve selected the dark option for the example below.

  • Slider Controls Color: choose Light or Dark

A Look at Dot Navigation Thumbnail Track vs Dot Navigation

When to Use Dot Navigation

Dot Navigation is ideal the slides in the video slider are not the main focus, or when you want to keep the page clear of visual clutter. It keeps the page simple, but it’s still easy to navigate between the slides.

Where Dot Navigation is Ideal

Here are a few examples of Dot Navigation. It works well where there isn’t a lot of space, you want to keep the page clean, or the goal isn’t to draw attention to every video in the Video Slider.

For this example, I’ve added a Video Slider module to the Testimonials section. This section includes several written testimonials along with the Video Slider. The goal of this page is to promote the services. The videos are just one type of testimonial to help support the sale. There’s no need to draw attention to every slide. The user can view as many as they want. I’m using the Home page for the free Flooring Layout Pack.

When to Use Dot Navigation

Thumbnail Track does look nice, but it could be distracting in this layout, and it isn’t needed based on the purpose of the page. We don’t want our testimonials distracting from our call to action.

When to Use Dot Navigation

Here’s another example. This one uses the Blog page from the free Blogger Layout Pack. I’ve replaced the Blog Post module with a Video Slider module. This example includes a lot of video slides and images around the slider. The layout looks clean and easy to navigate. The goal isn’t to focus on every post, but to give the user a way to see them if they want to.

When to Use Dot Navigation Thumbnail Track vs Dot Navigation

Thumbnail Track still looks good here, but the page becomes too cluttered with a lot of slides.

When to Use Dot Navigation

Where Dot Navigation is Not Ideal

Dot Navigation is not ideal when we want to draw attention to the video slides. For this example, I’m using the Landing page for the free Clothing Store Layout Pack. I’ve replaced the WooCommerce product images in the New Arrivals section with a Video Slider. In this case, we want to see the new products. The area around the slider is empty. This page design isn’t ideal for conversions.

When to Use Dot Navigation

The Thumbnail Track works better here. The focus is on the products, which is where we want it.

When to Use Dot Navigation

Ending Thoughts on Thumbnail Track vs Dot Navigation

That’s our look at Thumbnail Track vs Dot Navigation in Divi’s Video Slider module. Both types of navigation work well, but it’s best to use them in their ideal situations. There are times when one works best for our designs. In general, you can think of Thumbnail Track vs Dot Navigation with these basic ideas:

  • Use Thumbnail Track for larger areas or to draw attention to the video slides.
  • Use Dot Navigation for smaller areas or when you want to keep the layout clean.

We want to hear from you. Do you prefer Thumbnail Track or Dot Navigation? 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

How To Migrate Your Website To Divi 5 (Public Alpha)

How To Migrate Your Website To Divi 5 (Public Alpha)

Posted on October 9, 2024 in Divi Resources

Divi 5 Public Alpha is available, so you’re probably excited to explore its new features and improvements. Transitioning from Divi 4 to Divi 5 involves a few important steps. This post will help you migrate smoothly from Divi 4 to Divi 5 Public Alpha, allowing you to take full advantage of Divi...

View Full Post
New Starter Site For Stylists (Quick Install)

New Starter Site For Stylists (Quick Install)

Posted on October 7, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today