Layer Settings

When styling your layer, choose from one of the 100+ styles that’s closest to your desired styling. Then this will act as a “preset” of styles that can be further adjusted with the WYSIWYG editor.

When editing your layers, you’ll start of with a predefined layer style. And additional settings adjustments you make will only be applied to the current layer.

However, once you’ve made adjustments for a specific layer, you can save your adjustments as a new “predefined” layer style to use for additional layers.

1. Save: Override the current preset style with your layer’s current settings (original predefined style will be permanently modified).

2. Save As: Create a new preset style based on the current layer settings (original predefined style will not be overridden).

3. Rename: Change the title of the currently selected preset style for your own convenience.

4. Reset: Revert currently adjusted settings to the predefined layer styles original settings.

5. Delete: Permanently delete the current predefined layer style (can not be undone!).

After adding your layer to the slide, use the “Style” section to format text, adjust layer positioning, and also apply additional CSS styles to your layer content.

2. Font Family

Setup your Google Fonts from the slider’s settings section.

7-8. Horizontal / Vertical Aign

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

* Layer content should always be positioned within the “Layers Grid”.  Otherwise the content may bleed off the screen when the slider is resized.  Click here for a visual example.

9-10. Horizontal / Vertical Offsets

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

9-10. Layer Width / Height

Entering pixel values will give the layer a predefined size. Or for text layers, enter “auto” for automatic sizing.

13. Text Wrapping

Used in combination with a defined pixel width.. For example, if your layer’s width (#11) is 200px, use the Text-Wrapping option to automatically wrap long lines of text.

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

When setting your layer animations, choose from one of the 30+ animation templates that’s closest to your desired look.  Then this will act as a “preset” of settings that can adjusted further.

When editing your animations, you’ll start of with a predefined animation template, and additional settings adjustments you make will only be applied to the current layer.

However, once you’ve made adjustments for a specific animation, you can save your adjustments as a new “Animation Template” to use for additional layers.

1. Save: Override the current preset animation with your adjusted current settings (original animation template will be permanently modified).

2. Save As: Create a new Animation Template based on the current settings (original predefined Animation Template will not be overridden).

3. Rename: Change the title of the currently selected Animation Template for your own convenience.

4. Reset: Revert currently adjusted settings to the predefined Animation Template’s original settings.

5. Delete: Permanently delete the current predefined Animation Template (can not be undone!).

After adding a layer to the slide, and selecting it in the preview canvas, when you click the “Animation” tab, you’ll see a live preview of the layer’s animation.

Click the “Pause” button to stop the admin preview.  And then click the same button to preview your animation once again.

Every content layer has a “Start” animation that will happen when the layer first appears, and an “End” animation for when the layer disappears.

The actual time when these animations take place will depend on the layer’s “Visible Timeline”, which is set in the Layers Timing and Sorting part of the slide’s admin.

1. Animation Template

Choose from over 30+ prebuilt animations.  And preview each option by clicking the “Play” button next to the “Animation” tab.

2. Animation Easing

“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”.

3. Animation Speed

4. Animate by Words, Letters or Lines

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.

5. Split Animation Delay

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.

Click the “+” button as shown in the following screenshot to edit the “Start” or “End” animation’s advanced settings.

START Animation Settings = Animate FROM these settings

END Animation Settings = Animate TO these settings

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

1. Loop Animation

Visual Examples: Pendulum | Slide Loop | Pulse | Wave

2. Loop Speed

The amount of time the animation should last before it loops again in seconds.  A number between 2-5 usually works best.

3. Loop Easing *

“Easing” is what gives a web animation that “real life” type of movement.  For Loop animations, try one of the “easeInOut” options such as “Power1.easeInOut” for a smooth, continuous motion.

* not available for “Wave”, as this animation only works best with a predefined easing.

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

Show/hide layer on screens higher than 1024px width (regular desktop view).

Show/hide layer on screens 1024px wide or higher (tablet landscape).

Show/hide layer on screens 768px wide or higher (tablet portrait / smartphone landscape).

Show/hide layer on screens 360px wide or higher (smartphone portrait).

Layer will be hidden according to slider’s Hide Element Under Width -> Predefined Layers value in the slider’s main settings.

Layer will only be shown when the user hovers their mouse over the screen (for mobile devices, the hover equivalent would be a finger “tap”).

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

If the layer contains additional content (raw HTML, shortcode from other plugin, etc.), the slider will attempt to resize all nested elements.

Layer Alignment is particularly useful for when using Full Width slider, as sometimes you want your content to align to the sides of the screen as opposed to your slider’s “Layers Grid” size.

In the following example, the layer has a “top left” alignment, with an “Offset X” of 115px and an “Offset Y” of 65px.

The example slider below has a “Full Width” Slider Layout and a “Layers Grid” of 600×400.  When the screenshots were taken, the screen size was 900px wide, so the slider had also “responded” to this width.

In the following example, the layer has a “top left” alignment, with a 50px offset from the top and left.

Responsive Offset: ON

When the slider is resized down by 50%, the Layer’s original “Offset” values are also reduced by 50%.

Responsive Offset: OFF

When the slider is resized down by 50%, the Layer’s original “Offset” values are NOT reduced or changed.

Slider Revolution 5.4.2 introduced a new way of hyperlinking Layers, called “Actions”.

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

Useful for building custom navigation, such as a special slider menu, etc.

Useful for building a special “play/pause” button to control the slider’s autoplay.

Useful for applying to a “Read More” button, which would then scroll to additional content below the slider.

Use the “Scroll Offset” option to scroll additional pixels below the slider.

Add interactivity to your slides by controlling Layer visibility with these options (i.e. clicking one Layer shows another Layer).

“Target” Layer will be initially hidden, and then animated into view when current Layer’s Action is triggered (on-click or hover).

“Target” Layer will animate out of view when current Layer’s Action is triggered (on-click or hover).

“Target” Layer will alternately animate into and out of view as current Layer’s Action is triggered (on-click or hover).

Useful for building a special “play/pause” button for a Video.

For example, you could add a special Class to the Layer for your custom CSS, and then toggle this class on and off with this Layer Action.

Layer attributes can help with adding advanced Custom CSS for a specific Layer.  Example usage:

1-4. ID, Class, Title, Rel: Add a custom attribute to the Layer for advanced usage.

5: Image Alt Text: Add “Alt” text for Layer Images for maximum SEO.

From Media Library: Alt text will be taken from “WP Main Menu -> Media -> Library -> Select Image -> Alt Text”.

From Filename: Image’s filename will be used for the Alt text.

Custom: Enter a custom value (field #6 above) for the Alt text.

Choose which version of the image should be loaded and also if the image should be Lazy-Loaded.

1. Lazy Loading: 

Default Settings – Image will be loaded according to the slider’s global Lazy Load setting.

Force Lazy Loading – Lazy Load the image regardless of global Lazy Load setting.

Ignore Lazy Loading – Do not Lazy Load the image regardless of global Lazy Load setting.

2. Source Type:

Choose which version of the image should be loaded.  Often “Original” can equal a very large file size, so usually “Large” or “Medium” is a good choice for optimal loading performance.

Choose “Default Setting” to use the slider’s global Image Source Size setting.  Or override the default setting with one of the other choices.

The Layers Timing & Sorting section is a visual representation of the slide’s animation sequence.  It’s also where you can adjust the z-index depth for each Layer (i.e. Text Layer should appear on top of Image Layer, etc.).