Manual

The fundamentals of using Slider Revolution.

Create a Blank Module

There are two ways to create new modules in Slider Revolution. Let's take a look at the first of those two ways: creating a blank module.

Create a Blank Module

Table of Contents

Learn How to Create Blank Modules

There are two ways to make new modules [?] 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.
in Slider Revolution. In this guide we’re going to be covering the first of those two ways: creating blank modules.

Creating Modules (Video Tutorial)

Everything covered in this ‘Creating Blank Modules’ sub-section of the manual can also be learned by watching the tutorial video below:

If you watched the above video you can also skip the Create Modules from Templates part of this manual and proceed to Basic Editing.

Or continue reading to learn how to create a blank module:

Why Create a Blank Module?

Creating a blank module allows you to create a design space with nothing inside it except the bare bones essential defaults. You should choose this way of creating a module when you want to build your design up from scratch.

How to Create a Blank Module

In the main Slider Revolution interface click the button labeled New Blank Module.

New Blank Module

After clicking the New Blank Module button you’ll be taken into the Slider Revolution 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.
. Once there, the Module Creation Guide will automatically launch to help you with basic configuration of your new module.

If you don’t need any assistance with initial settings you can click the Quit Guide button. Otherwise click the Start Guide button to proceed.

The Module Creation Guide

The module creation guide has three pages each of which helps you choose one of three important initial settings.

Let’s take a look at these three settings and which option you should select for each.

Setting 1: Module Type

What Module Type Controls

On the first page of the creation guide you can choose which type of module you would like to create: Slider [?] A slider is a type of module that contains multiple slides. You can only see one slide at a time, a distinguishing features that makes sliders different from carousels.

The slides of a slider can be panned through either by using navigation controls such as arrows and tabs, or by clicking and dragging. They can also be set to automatically transition from one slide to the next.
, Scene [?] A scene is a type of module that has only a single slide. Because it has only one slide that also means it doesn't have any navigation elements.

Scene type modules are a great way to create more static type content like website headers, menus and text content displays. For example, if you want to build full sites and landing pages with Slider Revolution, you will probably stack many scene type modules on top of each other.
or Carousel [?] A carousel is a type of module that contains multiple slides. However, unlike a slider, you can see multiple slides at the same time.

Carousel slides appear next to each other horizontally and can be panned through either by using navigation controls such as arrows and tabs, or by clicking and dragging. They can also be set to automatically transition from one slide to the next.
.

Here’s a quick summary of what each of these module types are:

  • A slider has multiple slides with only one visible at a time
  • A scene has just a single slide
  • A carousel also has multiple slides but more than one can be seen at a time

And here’s a full definition overview of what each of these module types are:

Slider

A slider is a type of 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.
that contains multiple slides [?] A "slide" in Slider Revolution is a container into which multiple layers can be added, with layers in turn acting as containers for various forms of media such as images, text, video, audio, buttons, and special effects.

Slides are added to modules and edited via the module editor.

Within the module editor, each slide has its own animation timeline, background and collection of layers.

A single module can have one or many slides. A module with one slide is called a scene, and a module with multiple slides is called a slider or carousel.
. You can only see one slide at a time, a distinguishing features that makes sliders different from carousels [?] A carousel is a type of module that contains multiple slides. However, unlike a slider, you can see multiple slides at the same time.

Carousel slides appear next to each other horizontally and can be panned through either by using navigation controls such as arrows and tabs, or by clicking and dragging. They can also be set to automatically transition from one slide to the next.
.

The slides of a slider can be panned through either by using navigation controls such as arrows and tabs, or by clicking and dragging. They can also be set to automatically transition from one slide to the next.

Example slider. Note the arrow and tab navigation controls.
Create a Blank Module

Scene

A scene is a type of 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.
that has only a single slide [?] A "slide" in Slider Revolution is a container into which multiple layers can be added, with layers in turn acting as containers for various forms of media such as images, text, video, audio, buttons, and special effects.

Slides are added to modules and edited via the module editor.

Within the module editor, each slide has its own animation timeline, background and collection of layers.

A single module can have one or many slides. A module with one slide is called a scene, and a module with multiple slides is called a slider or carousel.
. Because it has only one slide that also means it doesn’t have any navigation elements.

Scene type modules are a great way to create more static type content like website headers, menus and text content displays. For example, if you want to build full sites and landing pages with Slider Revolution, you will probably stack many scene type modules on top of each other.

An example of a site built entirely with scene type modules
Create a Blank Module

Carousel

A carousel is a type of 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.
that contains multiple slides [?] A "slide" in Slider Revolution is a container into which multiple layers can be added, with layers in turn acting as containers for various forms of media such as images, text, video, audio, buttons, and special effects.

Slides are added to modules and edited via the module editor.

Within the module editor, each slide has its own animation timeline, background and collection of layers.

A single module can have one or many slides. A module with one slide is called a scene, and a module with multiple slides is called a slider or carousel.
. However, unlike a slider [?] A slider is a type of module that contains multiple slides. You can only see one slide at a time, a distinguishing features that makes sliders different from carousels.

The slides of a slider can be panned through either by using navigation controls such as arrows and tabs, or by clicking and dragging. They can also be set to automatically transition from one slide to the next.
, you can see multiple slides at the same time.

Carousel slides appear next to each other horizontally and can be panned through either by using navigation controls such as arrows and tabs, or by clicking and dragging. They can also be set to automatically transition from one slide to the next.

An example of a carousel module
Create a Blank Module

Which Module Type Option to Choose

Choose Slider or Carousel when you want to make rotating, slideshow type content.

Choose Scene to make non-rotating content such as hero units [?] Hero units are large displays that occupy the top section of a site. They are designed to make a big impact on the visitor as soon as they land on your site.

When creating hero unit modules there is no restriction on the layout type, you can use any of the three options: slider, carousel or scene.

The distinguishing feature of hero units is they are the first major piece of content in a site, usually full width, and typically take up a large portion of, if not all, the screen's available height.
, headers, navigation bars, post displays or video players.

Once you’ve chosen your module type, click the Next Step button in the bottom right corner of the Module Creation Guide window to continue.

Setting 2: Module Size

What Module Size Controls

The second page of the creation guide allows you to control the default width and height of your module. There are three options to choose from: AutoFull-Width, and Full-Screen.

Option 1: Auto

If you choose the auto option your module will widen or narrow to fit the container in which it’s posted. For example, if the articles on your site are 800 pixels wide and you post your module in one of these articles, it too will be constrained to a width of 800 pixels.

The height of an auto sized module will automatically adjust along with the width, maintaining its aspect ratio.

When to Choose Auto

Auto size is great for modules meant to be used inline, such as slideshows or videos added to posts.

Option 2: Full-Width

If you choose full width the module will always break out of the container in which it’s posted, regardless of that container‘s size, and take up the full width of the browser viewport.

The height of a full width module is typically fixed, however it can optionally be configured to maintain its aspect ratio in layout settings.

When to Choose Full-Width

Full width size is excellent for things like headers and banner style content. For example, hero units across the top of your site or product showcases part way down the page.

Option 3: Full–Screen

With the full screen size option your module will set itself to the exact width and height of the browser viewport.

Note: In this context full screen doesn’t mean you‘ll only be able to see the module and nothing else, like when you set a YouTube video to full screen for example. Rather, it just refers to the initial width and height of the module. Visitors will still be able to scroll up and down in order to view content above or below the module.

When to Choose Full–Screen

Full screen size is perfect for creating strong visual presentations that capture attention when a visitor first lands on your site. For example, large video backgrounds or image based portfolio displays.

Once you’ve chosen your module type, click the Next Step button in the bottom right corner of the Module Creation Guide window to continue.

Setting 3: Content Resizing

What Content Resizing Controls

On the third and final page of the module creation guide you can decide how your content should resize depending on the dimensions of a visitor’s browser viewport. These are the settings that help you make sure your designs look great on computers, tablets and phones regardless of their screen size.

Once again there are three options: Classic Linear ResizingIntelligent Inheriting, and Manual Custom Sizes.

Option 1: Classic, Linear Resizing

This is the simplest of the three options for resizing, because your module will maintain its aspect ratio and simply shrink or grow depending on browser viewport size. Nothing about the layout of the layers within the module will change.

While this is the easiest way to handle resizing, be aware that shrinking every layer proportionally may make them hard to see on smaller screens.

When to Choose Classic, Linear Resizing

Choose this option if your module contains content that will still be functional if proportionally shrunk to a small size. For example, simple video playing modules, audio players, or basic image slideshows.

Example of a layout remaining the same across different screen sizes.

Option 2: Intelligent Inheriting

With the intelligent inheriting resizing approach Slider Revolution will automatically create four different sized versions of your module, each with a layout adjusted to suit progressively smaller screen sizes.

Example of a layout adjusted to suit different screen sizes.
When to Choose Intelligent Inheriting

Choose this option if you would like layers to stay as large and visible as possible on smaller screens, but would prefer to automate the majority of the required layout adjustments.

Note: even when using intelligent inheriting you may still wish to make some manual tweaks to the automatically generated layouts.

Option 3: Manual Custom Sizes

Like intelligent inheriting, the manual custom sizes option activates four different sized versions of your module, but the difference is it will be up to you to create the layouts for each of these four versions.

Example of some of the settings available for you to create responsive layouts.
When to Choose Manual Custom Sizes

Choose this option if you would like to take an extra thorough approach and specify the exact size and position of the module’s layers in each of its four layouts.

And You’re Ready to Start Designing

Once you complete the module creation guide you’ll see your blank module with an empty slide all ready for you to start the design process.

Up Next: Creating Modules from Templates

What if you don’t want to start your module from scratch? What if instead you want to hit the ground running and start with one of the many templates included with Slider Revolution?

That’s what we will cover in the next part of the manual, where you’ll learn how to Create a Module From a Template.

Create a Blank Module