The fundamentals of using Slider Revolution.

Module Layout & Layer Area Sizing

Learn how to configure layout options for your modules as well as the size of your layer area.

Module Level Layout Configuration

There are several module [?] A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.

A "module" is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.

A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.

Multiple modules can be combined to form rich content such as complete sites and landing pages.
level options that allow you to configure both the layout of the module itself, as well as set layer [?] Layers are containers for visual, audio or layout items and are added to slides. For example, text, button, image, audio, video, group and row are all types of layers.

Layers are added to slides via the module editor.
dimensions throughout the module.

To access these options go to the Module General Options tab, Layout sub-section:

Note: Before proceeding you may wish to recap your reading on the Auto, Full-Width and Full-Screen layout sizing types.

Layer Area Size

What is Layer Area Size?

Layer area size determines the minimum amount of space that will be viewable in a module regardless of viewport size. This is the area you can safely assume layers will always be visible within.

A module may have extra space overhanging the left and right sides of the layer area that is visible when in a wide enough viewport, such as in a desktop size preview:

However these overhanging spaces may not be visible in narrower viewports, such as in a laptop size preview:

The current layer area size is denoted on the module editor [?] The "Module Editor" is the tool used to create & modify modules.

Through this visual, drag & drop, no-code interface you can add various types of layers, animation and special FX to your modules, as well as managing slides and configuring options.
canvas [?] The canvas is the point and click design space in the module editor. It forms the largest area of the module editor.

In this area layers can be selected, moved and resized. Animations can also be previewed.
by dashed blue lines:

Layer Area and Device Sizes

You may wish to adjust a module’s layer area size to suit your design. This can be done in the Layer Area Size panel:

Layer area size is set separately for each active device size. By default only the Desktop size is active, and the layer area width and height for that size can be set in the first option of the panel.

In this example only the Desktop size is active, and its the layer area size is 1240px wide and 700px high:

This means if the viewport is extended wider than 1240px, the layer area will stay at 1240px and the overhanging areas left and right will expand:

However if the viewport is narrowed below 1240px the layer area will be uniformly shrunk to fit:

If you wish, you can activate additional device sizes, (Laptop, Tablet & Mobile), and set their layer areas. This allows you to change up the layer area’s aspect ratio and/or height as the viewport width decreases.

For example, here the Mobile device size is activated and set to 480px wide by 720px high:

This means when the viewport is narrower the module layer area will switch from landscape dimensions into more suitable portrait dimensions instead:

We will cover working with different layer area sizes to create responsive layouts in more depth in our Responsive Layouts manual section.

Advanced Settings

The Advanced Settings panel provides a number of options for configuring the layout of the module itself:

Max Width

The Max Width option allows you to clamp a module’s width to an upper limit, regardless of viewport size:

The option can be set with either pixel(px) or percentage(%) values.

Note: This option is only available when using Auto layout sizing.

Min Height

Use the Min Height option to set the smallest height the module can be shrunk to:

Note: This option is only available when using Auto or Full-Screen layout sizing.

Wrapper Max Height

The Wrapper Max Height option clamps module height to an upper limit:

Note: This option is only available when using Full-Width layout sizing.

Keep Breakpoint Heights

If the Keep Breakpoint Heights option is toggled to ON, the heights specified per breakpoint will be maintained regardless of viewport width:

For example, if the Desktop layer area size was set to 1240px by 700px and the viewport width were reduced, only the width of the module would be shrunk while the height remained pinned at 700px.

Respect Ratio

By default, a module will never grow taller than its designated breakpoint height. 

However, if you toggle Respect Aspect Ratio to ON you can remove this restriction, allowing the module to grow as large as necessary to preserve aspect ratio:

Note: If both Keep Breakpoint Heights and Respect Aspect Ratio are toggled to ON, only Keep Breakpoint Heights will work. 

Grid = Module

If Grid = Module is toggled to ON, layer alignment will always be relative to the outer edges of the module, rather than to the layer area:

Note: This option is only available when using Full-Screen layout sizing.

Enable Layer Upscaling

If the Enable Layer Upscaling option is toggled to ON, the layer will expand to fill all available horizontal and vertical space, and proportionately upscale layer contents along with it:

Note: This option is only available when using Full-Width layout sizing.

Force Overflow Visible

When the Force Overflow Visible option is toggled to ON, layers that move outside the bounding box is the module will still be visible:

This allows you to create effects where certain objects protrude outside the module edges.

Fixed on Top

Toggling the Fixed on Top option to ON will on the module to the top of the page:

This functionality is great for making things like sticky headers and menus.

For a full guide on using this feature please read Fix Modules on Top of Page

Decrease Module Height

If using the Full-Screen sizing type, the Decrease Module Height panel will appear:

by Container

If you provide the selector of a given element of your page in the by Container option, the height of that element will be found then subtracted from the height of your module:

by PX or %

Set a fixed pixel(px) or percentage(%) amount by which the module height should be decreased in the by PX or % option:

Don’t Force Fullwidth

If you toggle Don’t Force Fullwidth to ON, the module will have full height but its width will match that of its parent element:

Ignore Mobile Height Changes

Toggle Ignore Mobile Height Changes to ON and the height of the module will be unaffected by the browser address bar:

Module Position Within Wrapper

Clear After

Toggle the Clear After option to ON if your module uses elements with float properties you need to clear:

Top & Bottom Margin

Add empty space above and below the module with the Margin Top and Margin Bottom margin options, respectively:

Note: This option is only available when using Auto or Full-Width layout sizing.

Module Layout & Layer Area Sizing


Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.