Thumbnail Observe vs Dot Navigation is a type of issues we need to believe when including a Video Slider module to our Divi layouts. Each are just right alternatives, however every one is healthier suited to sure scenarios. On this article, we’ll take a look at the usage of Thumbnail Observe vs Dot Navigation in Divi’s Video Slider module to lend a hand you make a decision which to make use of for your state of affairs.
Thumbnail Observe and Dot Navigation
The Thumbnail Observe and Dot Navigation make it simple to navigate during the video slides inside the Divi Video Slider module. Each show the present video inside the video participant, however their navigation may be very other.
Each sorts of navigation paintings neatly, however there are occasions when one is a more sensible choice than the opposite. We’ll discover this concept as we move. The instance under displays each sorts of navigation.
Converting Between Thumbnail Observe and Dot Navigation
It’s simple to switch between Thumbnail Observe and Dot Navigation. Permit the Visible Builder on the most sensible of the display screen. Hover over the Video Slider module and click on the grey tools icon.
Scroll all the way down to Components. You’ll see a surroundings referred to as Slider Controls that features a dropdown field. This dropdown incorporates each navigation choices. Merely click on at the possibility you wish to have. Use Thumbnail Observe is the default surroundings. That’s the navigation noticed within the symbol under.
Slider Controls:
- Use Thumbnail Observe
- Use Dot Navigation
I’ve now decided on Use Dot Navigation. The thumbnails were got rid of and dots now seem at the video’s symbol.
A Take a look at Thumbnail Observe
Thumbnail Observe presentations a thumbnail symbol of the slides beneath the video participant. Soaring on a thumbnail displays the play icon and divulges left and proper arrows. I’m soaring over the second one thumbnail from the left on this instance.
Clicking on a thumbnail displays that video within the video participant. The thumbnail for the present video displays an overlay.
Clicking on an arrow within the Thumbnail Observe scrolls the thumbnails to the former or subsequent set of thumbnails. This permits customers to simply see the thumbnails and select their video within the Video Slider.
You may have keep watch over over the Thumbnail Observe’s overlay and keep watch over colour. Select any colour for the Thumbnail Overlay Colour. Make a choice between Gentle and Darkish choices for the Slider Controls Colour.
- Thumbnail Overlay Colour: select customized colour
- Slider Controls Colour: select Gentle or Darkish
When to Use Thumbnail Observe
Since Thumbnail Observe presentations pictures, it’s absolute best to apply it to a web page, or inside a location on a web page, that doesn’t have a large number of pictures. Use it with white area. It’s best when you wish to have to attract consideration to the slides.
The place Thumbnail Observe is Excellent
Listed here are a few examples. It really works neatly within the examples under as a result of there aren’t a large number of pictures within the space round it and it has sufficient white area to split it from the opposite parts.
On this instance, I’m the usage of the Room web page within the free Bed and Breakfast Layout Pack. I’ve changed the Video Module and Symbol modules with a unmarried Video Slider module. That is the very best use of the Video Slider module with Thumbnail Observe. The thumbnails display what the slides are, so the customer can simply see the room they’re fascinated with.
Dot Navigation isn’t best for this format. It doesn’t draw consideration to the rooms, which is the function of this web page.
Within the instance under, I’ve positioned the Video Slider module with the Thumbnail Observe inside the House web page of the free Consultant Layout Pack that’s to be had inside Divi. There may be white area between the Video Slider and the modules above and under it. The module has the overall width of the format, so there’s various display screen width for the navigation thumbnails.
The Dot Navigation additionally works neatly right here, however it doesn’t draw consideration to the video slides. It wishes additional information, akin to a name to explain it.
The place Thumbnail Observe is Now not Excellent
Thumbnail Observe isn’t best when there isn’t a large number of area for the thumbnails and there’s a large number of pictures round it.
On this instance, I’ve moved the Video Slider module to a small column subsequent to a picture with graphics. The video slider does glance just right right here, however the thumbnails are tricky to peer. The video slider turns into misplaced within the visuals, so this isn’t a location you’d wish to position it should you sought after to attract consideration to the movies.
Dot Navigation suits neatly right here. It has a minimum design that doesn’t remove from the weather round it. This can be a sensible choice if you wish to use the movies as smaller, supporting parts.
A Take a look at Dot Navigation
Dot navigation provides a dot to the featured symbol for every slide. The dot for the present slide is brighter than the others.
Clicking on a dot selects that dot’s video. Within the instance under, I’ve decided on the ultimate dot. The video participant now displays the picture of that video slide. I’m soaring over the video symbol, which displays an overlay and makes the dots more uncomplicated to peer with my colour scheme.
You’ll be able to choose from mild and darkish colours for the dots. This allows you to make the dots extra visual according to the colours or overlays of your video’s featured pictures. I’ve decided on the darkish possibility for the instance under.
- Slider Controls Colour: select Gentle or Darkish
When to Use Dot Navigation
Dot Navigation is perfect the slides within the video slider don’t seem to be the primary focal point, or when you wish to have to stay the web page transparent of visible muddle. It assists in keeping the web page easy, however it’s nonetheless simple to navigate between the slides.
The place Dot Navigation is Excellent
Listed here are a couple of examples of Dot Navigation. It really works neatly the place there isn’t a large number of area, you wish to have to stay the web page blank, or the function isn’t to attract consideration to each and every video within the Video Slider.
For this case, I’ve added a Video Slider module to the Testimonials phase. This phase contains a number of written testimonials together with the Video Slider. The function of this web page is to advertise the products and services. The movies are only one form of testimonial to lend a hand toughen the sale. There’s no wish to draw consideration to each and every slide. The consumer can view as many as they would like. I’m the usage of the House web page for the free Flooring Layout Pack.
Thumbnail Observe does glance great, however it may well be distracting on this format, and it isn’t wanted according to the aim of the web page. We don’t need our testimonials distracting from our name to motion.
Right here’s every other instance. This one makes use of the Weblog web page from the unfastened Blogger Format Pack. I’ve changed the Weblog Publish module with a Video Slider module. This case contains a large number of video slides and pictures across the slider. The format appears to be like blank and simple to navigate. The function isn’t to concentrate on each and every put up, however to offer the consumer a solution to see them in the event that they wish to.
Thumbnail Observe nonetheless appears to be like just right right here, however the web page turns into too cluttered with a large number of slides.
The place Dot Navigation is Now not Excellent
Dot Navigation isn’t best once we wish to draw consideration to the video slides. For this case, I’m the usage of the Touchdown web page for the free Clothing Store Layout Pack. I’ve changed the WooCommerce product pictures within the New Arrivals phase with a Video Slider. On this case, we wish to see the brand new merchandise. The realm across the slider is empty. This web page design isn’t best for conversions.
The Thumbnail Observe works higher right here. The focal point is at the merchandise, which is the place we would like it.
Finishing Ideas on Thumbnail Observe vs Dot Navigation
That’s our take a look at Thumbnail Observe vs Dot Navigation in Divi’s Video Slider module. Each sorts of navigation paintings neatly, however it’s absolute best to make use of them of their best scenarios. There are occasions when one works absolute best for our designs. On the whole, you’ll call to mind Thumbnail Observe vs Dot Navigation with those elementary concepts:
- Use Thumbnail Observe for better spaces or to attract consideration to the video slides.
- Use Dot Navigation for smaller spaces or when you wish to have to stay the format blank.
We wish to listen from you. Do you favor Thumbnail Observe or Dot Navigation? Tell us within the feedback.
The put up Using Thumbnail Track vs. Dot Navigation in Divi’s Video Slider Module seemed first on Elegant Themes Blog.
WordPress Web Design