Demystifying the Slider Revolution Builder and Templates [Tutorial]

In this tutorial, learn how to use Slider Revolution templates to create beautiful and completely customizable designs for your WordPress website.

You want to create a website that’s so impressive that visitors can’t help but think: 

“If this is what the site is like, I can’t wait to see how amazing the products/services are.”

But in order to design a website with that kind of wow factor, doesn’t it need to be painstakingly custom-coded? Nope. 

That’s the great thing about the Slider Revolution plugin and its templates. You don’t have to spend tons of time or money on a heavily coded bespoke website in order to get amazing results. A lot of the work is already done for you. 

All you need is a good working knowledge of how to modify the templates with your own content. And the best way to do that is to deconstruct the Slider Revolution template layer by layer.

Table of Contents

Tutorial: Deconstructing the Slider Revolution template

In this tutorial, we’re going to use the Portal Effect Hero Slider template to demonstrate how you go from this: 

To this:

Let’s start with a bird’s-eye view of the Slider Revolution plugin and then make our way through the various levels of the template. 

1. The Slider Revolution WordPress plugin 

Before you can insert a Slider Revolution design into your website, you have to first create it. 

To do this, find the Slider Revolution link in WordPress:

Click on the link to open up the plugin.

Learn more about this topic:

2. Modules: The containers for your designs

Slider Revolution modules work just like other contained sections within WordPress. You’ll need to create a new module for every Slider Revolution design you create. 

From the Slider Revolution plugin page, select “New Module from Template”:

There are two other options available. 

“New Blank Module” enables you to design a slider, carousel, or other Slider Revolution container from scratch. Use “Manual Import” if you have an external template or design to import.

Learn more about this topic:

3. Templates: Completely customizable cutting-edge designs

When you purchase a Slider Revolution license, you get access to over 200 professionally-designed and fully customizable templates. 

Despite the name Slider Revolution, there are templates for all kinds of content:

  • Sliders
  • Carousels
  • Hero images
  • Websites

You’ll also find modules with different types of content: 

  • Blog posts
  • Social media
  • eCommerce

When you find one that’s closest to the layout, style, and effects you are looking for — or that simply inspires you — hover over it and click the plus sign (“+”):

Make sure your WordPress installation and setup meets the list of Requirements. Then click  “Install template” to add the template to your module.

By the way, if the template you want to use requires a certain addon, it will be installed along with the template automatically.

Use the right side of the editor’s toolbar to adjust the template module’s settings. Here are some tips to help you get acquainted with the editing features:

Zoom

The magnifying glass with the percentage underneath it allows you to control the zoom.

So if you want to hone in on more specific details when editing or zoom out to view the module in full, use this tool.

Responsive view

All of Slider Revolution’s module templates are responsive in design. In order to ensure that the edits you make continue to be responsive — or to customize the design from device to device — click the desktop icon to change the view: 

Module settings

The general settings for the module live under the gear widget: 

This section allows you to edit: 

  • Module name
  • Layout type: Slider, scene, carousel
  • Responsive breakpoints and sizing rules
  • Overlay
  • Background
  • Content source
  • Slide animation style and rules
  • Scroll triggers
  • Mouse interactions

And if you feel inclined to do some custom coding, there’s an area for you to add custom CSS or jQuery.

Navigation settings

If you’re using a template with navigation — i.e. arrows, progress bar, bullets, or tabs — the settings to the right of general settings is where you’ll edit it. 

From this toolbar, you can edit the style, design, positioning, interaction rules, and more for your navigational icons.

Learn more about this topic:

4. Slides: Background designs and animations

A slide is the background element that fills the module. 

In order to create sliders, carousels, and other animated graphics in Slider Revolution, you have to use numerous slide images or videos to create the effect. That’s not always needed, but for something like a portal effect, it is.

Click on the Slides button in the top-left part of the toolbar to locate your slide manager: 

If you’re using a template, then the slides have already been set up for you. Click through each one and you’ll see how each of the “portals” that appear on the site are just individual slides.

To edit each of the slides, click on the icon to the right of the navigational settings. 

From here, you can edit anything having to do with the background design. For instance: 

  • Content: Image, video, or color
  • Transition effect, timing, and settings
  • Color filter
  • Slide length 
  • Looping
  • Parallax 
  • Scroll effects

To get a better idea of the difference between a Slider Revolution slide and the other content in your module, play around with the slide animations: 

As you hover over the various transition effects, notice how the text, portal image, and button never change. That’s because they exist on a different layer.

There’s one other feature under the Slide Manager you should take note of: Global Layers. Think of this as a master overlay for all of your slides.

When you edit the slides within your Slider Revolution template, you won’t see the global layers in the visual editor. It’s only when you open up the Global Layers “Slide” that you will see these elements: 

You can edit the content of your Global Layers just as you do the layers on your individual slides (which we’ll look at next). The Global Layers tool is useful if you want to apply the same content and media to every slide — like a logo, navigation links, or CTA button.

Learn more about this topic:

5. Layers: Eye-catching content to pair with your designs

To edit the content within your template, you’ll work with layers.

Layers are not much different from the content blocks you use in WordPress and its page builder plugins. With Slider Revolution, though, you have more control over where those elements go, how they look, and how they behave.

Open the slide you want to edit. To add a completely new layer, go to the toolbar and open up the layer options:

From here, you can add elements like: 

  • Text
  • Image
  • Button
  • Shape
  • Video
  • Audio
  • Icon

You can also add a row as well as group content together. 

To edit existing layers and elements within your template, hover over the graphic and select the one you want. You can also select it from the controller beneath the graphic: 

With your layer selected, there are a number of ways to edit it. 

The first is to adjust the timing. That’s what the bottom area is for — so you can visualize each layer, how it relates to the rest, and to adjust its timing.

You have the ability to change when the layer appears on the screen as well as for how long. You can do this by manipulating the corresponding box in the editor or you can use the settings on the right sidebar.

To see your changes reflected in the slider, click the “Play” arrow icon button or hit the spacebar on your keyboard.

The other settings for your layers are under the icon at the right end of the toolbar. Just make sure you have the correct layer selected before making any edits.

These settings allow you to edit: 

  • Content within the layer — like text, image, video, etc. 
  • Colors
  • Fonts
  • Icons
  • Backgrounds
  • Borders
  • Spacing
  • Size and positioning
  • Shadows, blends, and filters
  • Animations
  • Hover and scroll transformations
  • Actions

Unlike the other parts of your module, you can set your layers to be visible on some devices and not others. This way, if you want different content displayed to mobile visitors than desktop — or perhaps in a different format or order — you can do that through these settings.

You can also custom-code your layers, if you prefer.

Learn more about this topic:

6. AddOns: Level up your special effects

Many Slider Revolution templates come with built-in special effects. For instance, each of the slides in the Portal Effect Hero Slider uses an advanced “fluid” transition animation. 

If you want to experiment with other special effects for your slides or layers, all you have to do is activate them. 

Go back to the main Slider Revolution page in WordPress. To the right of the module creation buttons is one called “AddOns”: 

You can explore and activate any of the AddOn special effects you want to use there. Once activated, you’ll be able to find your new special effects under the relevant settings in the Slider Revolution editor. 

For instance, you’ll find the “Advanced Transitions” addon under Slide Options > Animations because it’s a slide-specific animation. “Bubble Morph”, on the other hand, appears under Layer Options as a new layer type.

If you haven’t fully enabled the AddOn yet, the blue button on the right will let you know to do so. You can then apply the effect to the relevant module, slide, or layer. 

Learn more about this topic:

Unlock the power of Slider Revolution

Want to build the kind of website that brings you the recognition you deserve? With Slider Revolution’s beautiful and customizable templates, you can. Now that you know how to edit them, what will you create with Slider Revolution?

Demystifying the Slider Revolution Builder and Templates [Tutorial]

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

SR Staff

We're a passionate bunch of designers and developers writing about the ins and outs of web design.

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.