Stunning Slider Plugin.
1,0
Features Added
0
Bugs Resolved
7,0
Answered Tickets
2,0
Satisfied Customer
Slider

Shape Divider Block

Premium: Gain access to all slider templates with a single purchase.

Minimum version: 3.3.9

Tags:

This animated block gives nice looking design ideas. In the meantime, it shows how amazing the shape dividers are. There is a wave-like shape at the top of the slider, connecting it with the white section above. This shape highlights the oceanic theme of the whole slider. Below the top shape there is a heading layer with a nice split text animation.

There are four counter layers after the heading, creating some extra movement on the slide. The block’s last element is a bottom shape divider. It also looks like a wave and moves continuously, just like the waves of a real ocean.

Use structure

The four counter layers are in 4 columns, and above the counters you can see cool icons. You can choose other icons from 4 icon library, and you can change the color and the size, you can also put a link on it, or use a layer animation.

How to create counter layer?

1. Select the layer from the Layer list

2. Set up the layer

You can set a start value, where the count will start, and the value where the counter should end. You can set a Pre and Post label which will be before and after the layer. You can also set the title of the whole progress bar, which can be before and after the counter. Finally, add the animation duration and the delay, and play it with the timeline.

Timeline in Smart Slider 3

3. Design it

If you have set the counter layer, you can design it similarly to other layers in the Layer window → Design tab. You can design the font of the Counter and the Label separately.

Other cool feature for that example is the parallax effect in the background. This effect gives the illusion of depth when the user scrolls on the page. It creates a great user experience, and calls the visitors attention.


Related Post: Add Beautiful Section for your Website with Shape Dividers

Related Post: Everything You Need to Know about the Parallax Effect

Related Post: How to Create a Cool Text Animation


Similar Sliders -

Header IllustrationCarousel DividerFull Page HotelRotating Slider