FURNITURE

Shape Divider

Shape divider is trendy and modern looking design elements between sections. Smart Slider 3 brings this amazing feature into slider and page creation.

COFFEE SHOP
Shape Divider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes.

STEAK BISTRO
Shape Divider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes.

previous arrowprevious arrow
next arrownext arrow
Slider

Shape Divider

Description: Create a nice looking site by adding trendy shapes to your sliders which connect them with the section the shape touches.

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

Minimum version: 3.3.0

Tags:

The shape divider slider example is a full-width slider with lots of layer animations. The basic idea was to create a portfolio slider, which has the shape divider at its bottom. The white color of the divider matches the background color of the section below the slider. This makes it seem as if the curved shape is a part of the white section below.

How to replace the layers in the background?

In Smart Slider 3 there are 2 editing modes. One of them is the content mode which works like a page builder, and you can achieve a good responsive behaviour. The other editing mode is the canvas, where you can move your layers freely on the canvas, and you can put the layers above or below other layers. You can also mix the editing modes, like in this example.

The animated layers in the background are in canvas mode, and they are below the content layer. Because of that you will need to open the layer list to select these layers. Once you selected a layer, you can move it, delete it or replace it.

Layer list and timeline
Layer list and animation timeline in Smart Slider 3 Pro

Use complex animations

The slider has lots of nice layer animations which can catch the visitors’ attention. The white heading layer creates the most interesting effect, the layers are above the shape dividers, thus the white heading seems to be a part of the divider. The parallax effect is also set for the slide background images, the result is stunning, you can easily achieve it.

The heading layer in the background is built up from 2 keyframes. The first keyframe has 300ms delay, and comes from 300px to their original position. The second keyframe has 200ms delay and it will finish the animation with a back out easing, and the text will go to the bottom.


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

Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro

Related Post: 12 Beautiful Full Width Slider Examples


Similar Sliders -

Full Page HotelCarousel DividerHeader IllustrationHero Slider