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 Purchase 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 $29. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

Setup the Module's Layout/Size, Responsive Breakpoints and Background

Contents

1. Layout

1. Type
Choose 'Slider' for a Module with multiple Slides, "Scene" for a single-scene Module, and Carousel for a Module with multiple Slides presented as a traditional slider carousel.

2. Sizing
Choose 'Auto' to have the Module inherit the same width as your page's content container, 'Full Width' to have the module always stretch across the page, and 'Full Screen' to have the module adapt to the same size as the window.

2. Breakpoints

How the Breakpoints Work

Breakpoints are essentially "reset" points for the module's resizing.  They are similar to CSS media queries, where content sizing/styles can be adjusted depending on the screen size.

1. Enable/Disable
Activate a breakpoint for the device size.  The module will then be resized based on the width (#2) and height (#3).

2. Width
The width the Module should adapt to when the breakpoint occurs.

3. Height
The height the Module should adapt to when the breakpoint occurs.

3. Advanced Sizes

1. Max Width
Set an optional maximum width for the module, regardless of the size of the container its placed inside.

2. Min Height
Set an optional minimum height for the Slider.

3. Wrapper Max Height
Set an optional minimum height for the Slider.

4. Keep Breakpoint Heights
The Module's height will always equal the height(s) set in the breakpoints.

5. Respect Aspect Ratio
Normally a module's height will never grow larger than its designated breakpoint height. Enabling this option effectively removes this restriction.

6. Grid = Module
The Layer's Area values will always equal the same size as the Module's outer container, which is based on how the Module fits inside your web page's content container.

7. Force Overflow Visible
Allow content to bleed outside the Module's outer container.

8. Fixed on Top
The Module will always be positioned at the top of the page. Useful for "sticky" menus.

4. Fullscreen Options

For FullScreen Layouts, you may want the Module to fit perfectly inside the window's viewport between a top menu, footer or other content. #1 and #2 below can be used to achieve this.

1. by Container
Enter a jQuery selector for the content you wish to make space for. For example, this could be your main menu's tag name or class name.

2. by PX or %
Decrease the Fullscreen Module's height by a specific amount of pixels.

3. Don't Force Fullwidth
Useful for when you'd like a "Full screen height" but still want your Module to fit inside the page's content container, which may have a boxed width.

5. Module Position within Wrapper

1. Align
Useful if the module has a max-width and is placed inside a page's content container that's larger than the module's width.

2. Top/Bottom Margin
Add space above and below the module relative to the other content on your web page.

6. Module Background

Set the module's main background to transparent or a color/gradient

Or enable "Use Image" to apply a global background image to the Module

7. Border, Overlay & Shadow

1. Overlay
Add an optional mesh-type overlay to the Module for additional styling.

2. Shadow Type
Add one of 8 predefined shadow graphics to give the Module a 3D visual.

3. Gap (Border)
A value entered here will act as CSS padding for the module.

Popular Solutions