Dot navigation is likely one of the maximum not unusual sorts of navigation discovered inside sliders. That is true irrespective of the content material of the slider. Dot navigation supplies a easy and intuitive manner for customers to navigate during the slider’s content material. Thankfully, Divi’s Video Slider module features a dot navigation possibility. On this article, we’ll see permit dot navigation to your Divi’s Video Slider module. We’ll additionally discover a couple of combos of choices alongside the way in which.
Let’s get began.
Divi Video Slider Default Navigation
First, let’s take a look at how navigation works throughout the Video Slider module. By means of default, each slide is displayed as a thumbnail underneath the video participant. The present slide is darkened with an overlay. On this instance, the slide at the a ways left is the lively slide.
Deciding on a slide’s thumbnail navigates the video participant to that slide. On this instance, the 3rd slide from the left is the lively slide. The thumbnail is darker to turn that it’s the lively slide. All I’ve accomplished is clicked its thumbnail.
We will additionally navigate with the arrows that seem after we hover over the lively slide. Those take us to the former or subsequent slide. Those are useful if you wish to pass ahead or backward during the slides one slide at a time. That is supreme for navigating a couple of slides. You probably have a large number of slides, it might probably take a little time to discover a sure video.
What’s Dot Navigation?
Dot navigation is a small set of dots that seem on the backside of the video slide. Every dot represents a video slide throughout the slider. Clicking on a dot unearths that slide within the video participant. The dot for the lively slide is brighter than the opposite dots. It’s a good way to peer what number of slides there are, the place the slider is throughout the record of slides, and to navigate to a selected slide temporarily.
Dot navigation is particularly useful if you have a large number of slides, or you need to preserve house. Navigation is advanced, similar to the thumbnail navigation, whilst the usage of much less house throughout the format and lowering visible muddle.
When the consumer desires to peer a definite slide, they don’t want to wait till the slider displays it to them once more, or use the arrows to turn during the slides till they get to the only they wish to see. They are able to merely make a selection the slide they wish to see by means of clicking on its dot.
Enabling Dot Navigation within the Video Slider
Thumbnails glance nice, however they do take more room. Every so often we wish a smaller footprint for our Video Slider module or a much less cluttered design. When it’s enabled, dot navigation replaces the thumbnail navigation, giving us that cleaner and not more cluttered design. We will use it without or with the navigation arrows.
To permit dot navigation within the Video Slider module, first, permit the Visible Builder by means of clicking the hyperlink on the most sensible of your web page. Subsequent, hover over the Video Slider module and click on the tools icon to open its settings.
Scroll all the way down to Parts. Right here, you’ll see an method to permit or disable the arrows, and a dropdown field classified Slider Controls.
Click on at the dropdown field to peer your choices.
Make a choice Use Dot Navigation and also you’ll see the thumbnails got rid of and dots added to the principle slide.
- Slider Controls: Use Dot Navigation
Your Video Slider now has a more effective glance and takes much less house. You’ll see a dot for each and every slide, so you probably have a large number of slides it’ll be extra noticeable.
Mild or Darkish Dot Navigation
The default dot navigation colour is white. This works nice for darkish video pictures and overlays, however it may be laborious to peer if the ones pictures or overlays are mild. Thankfully, you’ll be able to exchange them to fit your wishes with one easy keep an eye on.
Within the Design tab of the Video Slider settings, pass to Slider Controls Colour and make a selection Darkish from the dropdown field.
- Slider Controls Colour: Darkish
The darkish Slider Controls Colour works particularly smartly with mild pictures or a Thumbnail Overlay Colour like the only within the instance beneath. Make sure to check your dot navigation colour choices to peer which goes highest along with your symbol and overlay colours.
Video Slider Dot Navigation With out Arrow Navigation
Converting from thumbnail to dot navigation provides every other set of navigation buttons to the slide itself. Each arrows and dots now seem when the consumer hovers over the slide, and the dots are all the time visual. Because the consumer will all the time see the dots, you may come to a decision to not come with the arrows.
Thankfully, you’ve gotten the method to disable the arrows. Within the Video Slider module’s Content material settings, you’ll see a bit known as Parts. This phase has a surroundings known as Display Arrows. That is enabled by means of default. Merely click on to disable it.
- Display Arrows: No
The video slider now displays the slides with handiest the dot navigation after I hover over them.
Video Slider Dot Navigation Examples
Let’s see how the Divi Video Slider module appears to be like inside a Divi format the usage of dot navigation. For my examples, I’m the usage of the About web page from the free Café Layout Pack that’s to be had inside Divi. This web page features a Video module that’s positioned over background pictures of espresso pictures for the café surroundings.
Right here’s the About web page format:
Right here’s a close-up view of the phase I’m customizing. You’ll see the photographs within the background. If we’re no longer cautious with the design, we will be able to make it glance cluttered simply.
Simplifying the Design
First, I changed the Video module with a Video Slider module. Subsequent, I created 4 slides and added symbol overlays to each and every slide. I’ve left default navigation enabled. It really works, however the thumbnail navigation appears to be like a bit of cluttered with this background. There are too many pictures inside a small house and it turns into complicated in no time. The unique Video module regarded cleaner. Dot navigation will repair this.
Right here’s the Video Slider module with dot navigation enabled. It has the better and cleaner glance of the Video module and it’s nonetheless usable as a video slider. Apart from the additional dots at the symbol, it appears to be like the similar as the unique Video module.
Converting the Design on Cellular
The dots could be too small or tough to make use of to your video slider when used with smartphones. On this case, you’ll be able to use thumbnail navigation simply on telephones and stay dot navigation on desktops and capsules.
Within the Slider Controls settings, click on at the pill icon to open the display screen dimension choices. Make a choice the telephone icon after which make a selection Use Thumbnail Monitor. This turns on the thumbnail navigation for telephones, leaving desktops and capsules showing dot navigation. Customers now have a very easy manner of navigating during the slides irrespective of the display screen dimension in their instrument.
Finishing Ideas
That’s our take a look at permit dot navigation to your Divi’s Video Slider module. Dots supply a easy and blank design that works nice for any format. The dots are intuitive, so customers already know the way to navigate with them. Opting for between mild and darkish colour choices will give you some flexibility in order that they’ll paintings smartly along with your pictures and overlays. Divi’s Video Slider dot navigation is a wonderful selection if you need a blank and minimum search for your video sliders.
We wish to pay attention from you. Do you utilize dot navigation inside your Divi Video Slider module? Tell us about it within the feedback beneath.
The publish How to Enable Dot Navigation on Your Divi’s Video Slider Module gave the impression first on Elegant Themes Blog.
WordPress Web Design