Slider Revolution Magento 2.x Extension Documentation

Layer Styles & Positioning

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.

  • 1. Style Template
  • 2. Font Family
  • 3. Font Size
  • 4. Line Height
  • 5. Text Color
  • 6. Bold Text
  • 7. Letter Spacing
  • 8. Layer Tag
  • 9. Horizontal Align
  • 10. Vertical Align
  • 11. Horizontal Offset
  • 12. Vertical Offset
  • 13. Layer Width
  • 14. Layer Height
  • 15. Text Wrapping
  • 16. Image Sizing

1. Style Template

Automatically apply styling from a list of style template presets.

2. Font Family

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

3-4. Font Size / Line Height

Font-size can be set in pixels, and line-height is useful for paragraphs of text.

6-7. Font Weight / Letter Spacing

Make your text bold or add some spacing between the letters.

8. Layer Tag

Choose which type of HTML tag should be used for the Layer. Usually “div” is best, but you can also use H1, H2, etc. for enhanced SEO.

9-10. 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.

11-12. 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.

13-14. Layer Width / Height

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

15. Text Wrapping

Meant for Layers where text should wrap at a certain screen size.  Apply a fixed width (#11)  to use the text-wrapping option.

16. Image Sizing

Useful for applying a “cover” or “contain” background-size position to Image Layers

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

  • 1. Font Opacity
  • 2. Italics
  • 3. Underline
  • 4. Text Transform
  • 5. Layer Selectable

1. Font Opacity

Enter a number between 0-1, such as “0.75”.

4. Text Transform

Capitalize each word, or convert the text to uppercase or lowercase automatically.

5. Layer Selectable

Choose if the text can be highlighted by the user for copy/paste

Blend Mode Example:
Image Background Example:
  • 1. Padding Top
  • 2. Padding Right
  • 3. Padding Bottom
  • 4. Padding Left
  • 5. Margin Top
  • 6. Margin Right
  • 7. Margin Bottom
  • 8. Margin Left
  • 9. Text Align
  • 10. Layer Selectable

1-4. Paddings

Useful for applying a background to the Layer, and also helpful for improving readability.

5-8. Margins

Useful for apply space between columns and rows.

9. Text Align

Set the text-align for your HTML/Text Layers

10. Overflow

Applicable for content placed inside a fixed-sized container (via Layer Width/Height).

  • 1. Border Color
  • 2. Border Opacity
  • 3. Border Style
  • 4. Border Width Top
  • 5. Border Width Right
  • 6. Border Width Bottom
  • 7. Border Width Left
  • 8. Border Radius Top Left
  • 9. Border Radius Top Right
  • 10. Border Radius Bottom Right
  • 11. Border Radius Bottom Left

2. Border Opacity

Enter a number between 0-1, such as “0.75”. Or for no background color (i.e. “transparent”), enter the number “0”.

3. Border Style

Choose “solid” for a regular border, and “none” for no border.

4-7. Border Width

Border sizes in pixels for each side.

8-11. Border Radius

Use to achieve rounded corners for your layers. Applicable for when the layer also has a background color applied (see “Background” tab above).

  • Quick Tip:
    Enter "50%" for all 4 "Border Radius" fields to create a perfect circle.
  • 1. Opacity
  • 2. scaleX
  • 3. scaleY
  • 4. skewX
  • 5. skewY

1. Opacity

Apply a transparency level to the entire layer. Enter a number between 0-1, such as “0.75”.

1-3. scaleX, scaleY *

Zoom the layer’s width. Click here for an example of “scaleX”, and here for an example of “scaleY”.

* These transforms work best when both have the same values applied (i.e. scaleX = 1.5, scaleY = 1.5).

4-5. skewX, skewY

Applies a 2D angle to the layer. Click here for an example of “skewX”, and here for an example of “skewY”.

  • 1. rotationX
  • 2. rotationY
  • 3. rotationZ
  • 4. Horizontal Origin
  • 5. Vertical Origin

1-2. rotationX, rotationY

Rotate the layer in 3D space:

3. rotationZ

Can be used in combination with #1 and #2 above, but can also be used by itself for a traditional rotation (i.e. non-3D).

4-5. Horizontal/ Vertical Origin

Usually “50%” is best. Click here for more information.

  • 1. 3D Perspective
  • 2. translateZ

1. 3D Perspective

Adds depth to an object in 3D space. Click here for additional information.

1. translateZ

The layer’s z-axis position in 3D space. Click here to see an example.

  • 1. Blur
  • 2. Grayscale
  • 3. Brightness
  • 4. Blend Mode

1. Blur

Adds Blur Effect to the Layer and the Blur effect’s strength will never become higher than “10px”

2. Grayscale

Adds Grayscale Effect to the Layer and can be adjusted within the range of 0% to 100%

3. Brightness

The Brightness of the Layer can be adjusted within the range of 0% to 150%

4. Blend Modes

This feature allows you to Blend the color of the Layer with its background. More explanation here regarding the types of Blend Modes

The options here can be applied to SVG Layers, and are for the SVG’s “stroke”.  This is similar to a CSS border, but not exactly.  Instead, it’s more similar to applying a “Layer Style -> Stroke” in Photoshop.

  • 1. Stroke Color
  • 2. Stroke Opacity
  • 3. Stroke Width
  • 4. Stroke Dash Array
  • 5. Stroke Dash Offset

3. Stroke Width

Similar to the CSS “border-width” property in that it’s the amount of pixels used for the stroke.

4. Stroke Dash Array

The amount of dashes to apply to the stroke.

5. Stroke Dash Offset

Rotate the orientation of the stroke dashes.

Apply sharp corners to the sides of your layers. The screenshot to the right is a useful example of this, where the layer is positioned at the bottom of the slider.

Advanced CSS is in relation to the selected layer style (circled in the screenshot below).

Choose “Template” to modify the CSS for the currently selected predefined layer style.

CSS entered here will be attached to the predefined layer style (i.e. will carry over when used for additional layer content).

Style from Options:

CSS styles automatically applied from the layer’s chosen settings.

Additional Custom Styling:

Add additional CSS that can’t normally be applied through the layer’s WYSIWYG editor.

Choose “Layer” to add CSS to this specific layer only.

CSS entered here will not be attached to the predefined style, and therefore will not carry over when the predefined layer style is used for other layers.

The advanced styling section has two possible “states” where styles can be applied.

The first is “idle”, which will be the default styles for the layer, and the second is “hover”, where you can change the layer’s styles for its mouseover state.

To setup some special styles for the layer’s “hover” state, set “Layer Hover” to “ON”, as shown in the following screenshot:

  • Quick Tip:
    Use the "Force Animation" to ensure that hovers are always honored regardless of the Layer's default animation.

Then once “Layer Hover” is set to “ON”, you’ll see settings for the two states that can be toggled.

Then you’ll have the ability to set specific styles for both the layer’s “Idle” state (default appearance), and its “Hover” state (mouseover appearance).

For convenience, click the “copy” button to copy over styles from one state to the other.

For example, if you’ve applied multiple styles to the “idle” state, but only want to adjust the border-color for the “hover” state, click the “hover” state button, then click the “copy” button, and then choose “copy from “idle”.

Special Hover Settings
  • 1. Animation Speed
  • 2. Animation Easing
  • 3. Hover Mouse Cursor
  • 4. z-index Layer Order

1-2. Animation Speed / Easing

Idle styles will automatically animate when converted to their hover styles.

“Animation Speed” is in milliseconds, and a number between 200-500 is usually best.

“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. Mouse Cursor

The most common choice for a hover mouse cursor is “pointer”, which will be a hand symbol.  Other common choices are “auto” and “default”.

4. Z-Index

Specify a z-index for the Layer to help avoid visual and hotspot collisions with other Layers.  Lower numbers (starting with 0) represent the lowest in the stacking order, and a high number such as “99” will ensure that the Layer is always displayed on top of all other Layers.

The “Toggle” option is great for switching between content on a mouse click.  In the following example, we’ll use the “Toggle” option to setup a “FullScreen” button with two different icon states.

1. Add a Text/HTML Layer

2. Enable the Layer's "Toggle" option

3. Add two icons, one as the regular state ("Untoggled Content"), and one as the "Toggled Content" state

4. Add a "Toggle FullScreen" Action