Slide Layers

Type in some regular text to be used for the layer’s content.

Add an image to be used for the layer’s content.

Add a video to be used for the layer’s content. The type of video can be YouTube, Vimeo and HTML5 Video.

Add a button to be used for the layer’s content.

You can set the text color, size and location of layer.

Alignment can be based on Layers Grid Size or the entire size of the slider, which is set in the layer’s Behavior section.

Offset positions from initial alignments. For example, a “Horizontal Alignment” of “center” with a “Horizontal Offset” of 50px would equal 50px to the left of center.

Click the “more” button to activate the advanced styling section.

Choose from 30+ prebuilt animations.

“Easing” is what gives a web animation that “real life” type of movement. Choose between over 35 options to see which one you like best. The most commonly used options are “Power2.easeOut”, and “Power3.easeOut”.

The time when the Layer will begin to animate into view.

How long the animation will last from start to finish in milliseconds (1000 = 1 second).

An optimal number will depend on your chosen animation.  For example, when using a simple “Fade”, a number between 300-500 is usually best, but for more complex animations (especially when using an “easeInOut” easing), a higher number such as 500-1000 will work well.

For text-based layers, you can animate words, letters or lines one by one with this option.

Choose “No Split” to just animate the entire layer at once.

Choose which direction to animate your splitted words/letters/lines.  Options are “forward”, “backward”, “middle to edge” and “edge to middle” or “random”.

When animating by words, letters or lines, the essence of the effect is that each will animate one after the other.  The delay value here is the amount of time that will be used for this sequenced animation.

The delay value is in milliseconds.  A number between 5-30 usually works best.

Apply continuous, animated movement to the layer even after it’s initially animated into view.

Choose when the layer should be visible such as per device, above a certain screen width, or on mouse hover.

An “Action” is essentially something that happens when the user interacts with the Layer’s content (clicking the layer, or mouse hovers).

Layer attributes can help with adding advanced Custom CSS for a specific Layer, and are also useful for enhancing accessibility. For example, a custom class could be added to a Layer, and then some CSS could be applied to the Layer

Apply a “Parallax Level” (1-10) or “3D Depth” to the layer.

Choose to make the layer responsive by default (layer will resize when slider resizes).

If the layer contains additional content, the slider will attempt to resize all nested elements.

Layer will always be aligned and positioned based on the slider’s grid size

Alignment and positioning of Layers will always be based on the slider’s actual size