The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchas Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $26. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

Adjust the CSS styling for your Layer Content

Responsive Styling

All options can be adjusted for the four available viewports unless specified in the documentation below.

Contents

1. Style

1.1 Font & Icon Styles

Font & Icon Style options can be edited for Text and Button Layers.

1. Font Size
Set the font-size for the text in pixels.

2. Line Height
The CSS line-height for the Layer.  This is useful for text with multiple lines.

3. Font Weight
Choose if your text should be "bold".

4. Letter Spacing
Optional spacing between letters.  Useful for certain font families.

5. Font Family
Choose between hundreds of available Google fonts.

6. Text Color
Set the color of the Layer's text.

Click the "More" button for additional font styling options

1. Italics
Choose if the text should appear in italics.

2. Text Decoration
The CSS text-decoration for the Layer.

3. Capitalize
Choose the CSS text-transform for the Layer.

4. Selectable
Choose if the text can be selected by the user or not.

1.2 Background

1. Background Color
Set the Layer's background to a solid or semi-transparent color or gradient.

2. Background Image
Set an optional background-image for the Layer.

3. Background Image Position
The CSS background-position of the image.

4. Background Image Sizing
The CSS background-size of the image.  "Cover" is recommend.

5. Background Image Repeat
The CSS background-repeat of the image.  Use "no-repeat" for regular images, and "repeat" for pattern-type backgrounds. 

The Layer's background is global and will be applied to all responsive viewports.

1.3 Spacings & Border

1. Margins
Set the Layer's top/right/bottom/left margin, and click the "lock" button if you want these values to always be honored regardless of responsiveness.

2. Paddings
Set the Layer's top/right/bottom/left padding, and click the "lock" button if you want these values to always be honored regardless of responsiveness.

3. Border Color
Set the a color for the optional border.

4. Border Style
Set this to "solid" if you'd like to display a border for the Layer.

5. Border Radius
Add an optional CSS border-radius to the Layer.

1.4 SVG Styles

1. SVG Color
Set the SVG icon's main color

2. Stroke Color
The color of the SVG stroke if a Stroke Size is set above 0px.

3. Stroke Size
An svg stroke adds a border/outline inside and outside the graphic's drawing.

4. Stroke Dashes
Converts the stroke to dashed lines.

5. Stoke Dash Spacing
The spacing between dashes if the Stroke Dash is set above 0.

SVG styles are global and will be applied to all responsive viewports.

2. Advanced Style

2.1 Box Shadow

1. Effect *
Enable the box-shadow for the Layer

2. Shadow on *
Choose if the shadow should be applied to the Layer's main container or the Layer's parallax container.

3. Offset-X
The "x" (horizontal) position of the Shadow

4. Offset-Y
The "y" (vertical) position of the Shadow.

5. Blur
The blur value for the Shadow.

6. Spread
The sizing of the Shadow.  This must have a value higher than "0" for the shadow to be visible.

7. Color *
The box-shadow's color.

* Will be applied globally to all responsive viewports.

Example CSS box-shadow:
Offset-X | Offset-Y | Blur | Spread | Color
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

2.2 Text Shadow

Text Shadow options can be edited for Text and Button Layers.

1. Effect *
Enable the text-shadow for the Layer

2. Offset-X
The "x" (horizontal) position of the Shadow

3. Offset-Y
The "y" (vertical) position of the Shadow.

4. Blur
The blur value for the Shadow.

5. Color *
The text-shadow's color.

* Will be applied globally to all responsive viewports.

Example CSS text-shadow:
Offset-X | Offset-Y | Blur | Color
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);

2.3 Blend Mode

1. Blend Mode
Add an optional CSS mix-blend-mode to the Layer.

2. Show in Editor
Disable this option if you'd like the hide the effect in the admin editor view.

Blend Mode is global and will be applied to all responsive viewports.

Popular Solutions