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

Shape Divider Block

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: This animated shape divider block gives a nice looking design ideas. This shape highlights the oceanic theme of the whole slider.

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

Minimum version: 3.5.0.0

Tags:

Settings

The shape divider block has only one slide without any controls. This animated block cheers up your website, and can be a great separator between your sections.

When you scroll up or down, you can see 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. You can customize this effect in the Slides tab of the Slider settings.

Background parallax

Layers

You can see 3 different layer types on this block. There is a heading layer on the top, and four image and counter layers are below them, creating some extra movement on the slide. If you have set the counter layer, you can design it similarly to other layers in the Layer window → Style tab. You can design the font of the Counter and the Label separately.

Counter layer settings

The block’s first and last element is a shape divider. It also looks like a wave and moves continuously, just like the waves of a real ocean.

Animations

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 text animation.

Settings of the shape divider

Layout

The layout of this block is really simple. There is a heading layer on the top, then a row comes with 4 columns. The image and counter layers are in these columns, so the four images and counters can be next to each other.

Responsive

The animated shape divider block is fully responsive. The row wraps after 2 columns in mobile, so the layers are legible and have enough space. You can set this wrap after value in the settings of the row.

Wrap after 2 columns on mobile

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 13, 2021. For the latest result analyze now!

100

Desktop

First Contentful Paint
0.3 s
Speed Index
0.4 s
Largest Contentful Paint
0.8 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.034
96

Mobile

First Contentful Paint
1 s
Speed Index
1 s
Largest Contentful Paint
2.8 s
Time to Interactive
1.2 s
Total Blocking Time
20 ms
Cumulative Layout Shift
0.004

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

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


Similar Sliders -

Shape Divider SliderCoursesBroken Grid SliderMarketplace Block