The fundamentals of using Slider Revolution.

Generic filters

Before & After Quick Start

Get started with the basics of creating before & after effects in your modules.

What Does the Before & After Addon Do?

The Before & After addon allows you to create two versions of any given slide: a “before” version and an “after” version:

When the slide is viewed it will show a draggable divider that can be used to transition back and forth between the two versions:

In this guide we’ll step through how to get started with the most basic form of before & after effect.

Getting Started

To get started with the Before & After addon you’ll first need to install and enable it.

The process for doing this is the same as with all addons, so please begin by following the steps in our guide on how to Browse, Install and Enable Addons.

Activate Per Slide

After installing and enabling the Before & After addon, you’ll need to activate it within your module.

The Before & After addon is activated on a per slide basis. This allows you to create modules where some slides can have a before & after effect while others don’t, giving you complete control.

For each slide on which you want to create a before & after effect, go to the Slide Options tab, then the Before After sub-section, and in the General Settings panel toggle the Active option to ON:

Basic Before & After Effect

To create a before & after effect in the most simple way, all you need to do is add two backgrounds to your slide: one for the slide’s “before” environment and one for its “after” environment.

To do this go to the Slide Options tab, then the Background sub-section. You should see that there are now two tabs showing above the standard Background sub-section, one labeled Before and the other After:

Note: If you just enabled the Before & After addon and don’t see the above tabs, save your module and refresh the page.

These two tabs give you independent areas in which you can separately configure how the background should look in the Before environment and the After environment.

For example, here the Before background is configured with a simple red/orange gradient:

While the After background uses a simple purple gradient:

Saving and previewing the module at this time gives a simple before & after effect between these two backgrounds:

The next thing you’re likely to want to do is add extra layers to your slide. But before you can do that effectively you’ll need to know how to switch between viewing the Before and After environment. 

Viewing the Before & After Environments

There are two ways to switch between viewing the slide’s Before and After environments, also referred to as “modes”.

You can either use the view switcher, which you will find on the right end of the top toolbar:

Or you can switch between the Before and After tabs we saw earlier in the Background sub-section, which effectively works in the same way as the view switcher.

Adding Layers

When you add a layer it will only appear in whichever environment you are viewing at the time.

So if you are viewing the Before environment and you add a layer, it will become part of that Before environment. For example, adding a text layer:

And conversely if you add a layer while viewing the After environment, it will become part of that After environment. For example, adding another text layer:

This will create an effect something like this:

Switch Layer Between Environments

If, after adding a new layer, you want to move it from one environment into the other, select the layer and go to the Layer Options tab, Before After sub-section, and change the setting of the Environment option:

Up Next: More on Before & After Effects

That covers the basics of setting up a before & after effect and adding layers to it. 

But as always with Slider Revolution there’s plenty more you can do, so up next we’ll dig further into the configuration options available in the Before & After addon.

Before & After Quick Start


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