Slider Revolution WordPress Plugin Review & How To Guide

Slider Revolution is a premium slider available as a WordPress plugin and Magento extension. It’s gained huge popularity in the WordPress community due to it’s wide range of features and ease of use.

In this overview we’re going to cover the main features of the Slider Revolution WordPress Plugin, and then we’ll show you just how easy it is to make your own sliders from scratch.

Get Slider Revolution

Slider Revolution: What Makes This Plugin So Great

There are tons of great features built into Slider Revolution to make creating custom sliders for your website easy. Here are a few of our favorites.

Layouts & Responsiveness

Slider Revolution has changed it’s focus a bit to be more than just a slider. Since the version 6 update you can of course create stunning animated sliders, as well as carousels and scenes (a single slide used like a page builder row). The plugin is also responsive ready with a new intelligent inheriting option. So rather than your slider simply shrinking on mobile devices elements will resize or shrink so that your within your slider or module is legible and optimize according to device.

Multiple Content Sources

Want to create a slider for your posts? Or for your WooCommerce products? Not a problem – choose from 9 different content sources when creating your slider.

As of writing this post Slider Revolution supports content based on:

• Default/custom: upload your own images/video
• Posts: choose from your blog posts, custom post types, specific post IDs, or use the current post/page (great if you want to add a featured slider to blog post or portfolio item)
• WooCommerce: display your products
• Social media: specifically Flickr, Instagram, Twitter, Facebook, YouTube or Vimeo

Easy Options

Slider Revolution makes it easy for your to create custom sliders by adding in options for just about everything. Choose your slide delay, navigation arrows, custom fonts, add parallax backgrounds, slider location (add margins), add media layers, insert buttons, select slide transitions and more all using the drop-down menus throughout the plugin.

And on top of that you can customize just about everything and even save your own presets to make reusing font styles, slide transitions, layer animations and more super easy.

Media Support

Add text, links, images, videos and audio with a few clicks of your mouse. This gives you the ability to create information rich slides that your readers and clients will be able to identify with. Plus each of these media types is added as its own layer with unique animations, timing and styles that you set using Slider Revolution’s super options.

Slider Revolution Installation

First you’ll need to get a copy of the Slider Revolution WordPress Plugin. There are a few different methods to install the plugin depending on if you purchased your own copy of the plugin or if it was included with your premium theme.

1. Install Your Copy of Slider Revolution

If you purchased your own copy of Slider Revolution from CodeCanyon you’ll need to install the plugin yourself. To download the plugin files log into your Envato account and go to your downloads page (you can get to this page by hovering on your username). Then locate your copy of Slider Revolution and select the download option for “Installable WordPress file only.”

Next, log into your WordPress site and navigate to Plugins > Add New.

Then click on the “Upload Plugin” button at the top left of your screen.

From here, use the “Choose File” button to select the plugin file you just downloaded from CodeCanyon, and click the “Install Now” button.

After that just activate the plugin and you’re ready to start building sliders!

Note: You can also install your plugin via FTP by logging into your server and uploading the extracted (unzipped) plugin to your folder located at wp-content/plugins.

2. Install Slider Revolution Included with a Premium Theme

Many premium themes include copies of premium plugins with the theme download. If this is how you want to install your copy of Slider Revolution then you will need to reference your theme’s documentation.

Most theme developers do their best to make the bundled plugin installation process easy. For example, by including a notice bar or activation panel.

In our guide we’re using the Total WordPress theme. After installing and activating Total you should see an onscreen prompt that recommends you install Slider Revolution (and other plugins included with the theme).

Just click the link to go to the recommended/bundled plugins page, then click to install and activate your plugins.

Total also includes a custom option in the demo importer to install and activate Slider Revolution when importing sample data. If Slider Revolution was used to create the demo you’re importing you should be prompted to install the plugin as seen above.

Then just be sure the option to “Import Sliders” is selected, and the theme will automatically import any custom sliders from the demo. Easy!

Slider Revolution User Guide

After you’ve installed the plugin, it should add a menu item to your main WordPress dashboard. Click on this to be taken to the main Slider Revolution slider management page.

From here you can create or edit sliders, import templates, activate your license if you purchased your own copy of the plugin.

Slider Revolution Plugin License Activation

If you purchased Slider Revolution yourself you can activate it to unlock all of the slider features. To locate your license you’ll need to go back to CodeCanyon and visit the Slider Revolution plugin page.

From here click on the “Support” tab to view all of your purchased licenses. Copy your license key and go back to your WordPress dashboard.

Clicking on the bell icon.

Then enter your license key. To receive support from the plugin author as well as unlock the premium Slider Revolution Module Templates & Addons you will need to purchase your own license.

Slider Revolution Global Settings

Before you begin building we recommend visiting the Global Settings option (which is a submenu item underneath Slider Revolution).

There are plenty of important options here for default responsive grid settings (which are applies when building new sliders), custom font loading URL, database creation for the plugin and more. But there are two options we recommend you tweak.

The first option your should consider editing is the Permission which you can use to restrict plugin access to admins only. This is an easy way to ensure you, your web designer or other admins are the only ones creating sliders on your site (especially useful if you have guest authors on your blog).

The second option you might want to edit is the Default Layout Grid Breakpoints option. These are the pixel widths according to device for your responsiveness settings.

This is also where you can enable custom fonts, 3rd party lazy loading and force database creation (if you you’re having Slider Revolution Table issues). Once done, make sure to save your settings.

Now you can start building your sliders! You have three options – begin from scratch, snag a free export file from the Slider Revolution “usage examples” or import sample sliders included with your theme.

Manual Import of a Slider

To import a slider you’ve downloaded from another website from Slider Revolution’s usage examples first download the slider file from their site, then navigate back to your WordPress the click on the Import Slider option. From here browse for the sample file you downloaded and click on Upload. This should add the sample slider and all of it’s settings so you can use it as a base for a new slider.

New Module from Template

If you’ve purchased your own license for Slider Revolution you’ll have access to all of their pre-made layouts (there are more than 180+ to choose from). To use a template just hover on the one you like, click the Eye icon to preview or the Plus icon to install the template.

Create A New Slider

If you’re making a slider from scratch, click on the New Blank Module option. Now let’s get to work!

First you’ll see a welcome message with an option to use their quick start guide. Click to get started and follow along with our guided walkthrough below.

Choose a slider type – you have the option to choose your module:

• Slider: exactly what it sounds like, multiple animated slides that rotate to display one slide after the other
• Scene: a single slide that can be used a content module (like a row when using a page builder)
• Carousel: many slides with multiple visible at the same time

Then select a layout:

• Auto: this is the default setting which will stretch your slider to the main container width as defined by your WordPress theme, but you will still define the height.
• Full-width: exactly what it sounds like – a full width slider option that will full stretch across from left to right. You will still need to define the height of your slider.
• Full-screen: use this to create large sliders that literally fill the entire screen, no matter the size of your browser or device (you can even use this option to add full screen sliders with videos for even more impact).

And as a last step you’ll need to choose and customize your responsiveness or “resize” settings:

• Classic (linear) resizing: after configuring your main screen size settings your slider will compress accordingly (so a 1000x400px slider will compress to a 500x200px slider with the fonts, images and other slider elements shrinking proportionally as well).
• Intelligent inheriting: four device sizes are automatically created based on the desktop settings you choose, with the option to make adjustments as needed.
• Custom (manual): allows you to set your slider size using exact pixels, with additional options to set the slider sizes at various screen width (desktop, laptop, tablet and phone).

After choosing your main slider settings you’ll be taken to the Slider Revolution builder. This is where you’ll actually create all of your slides.

Slider Revolution General Options

Before building, you should take care of some of the basics. On the right hand side is all of your slider settings. Starting with the Gear icon for General Settings, here is a quick look at what you’ll find.

Title: Give your slider a name. Of course, you can just leave the default Slider 1 title and alias but we recommend changing this to a unique naming convention according to the slider’s purpose. Select a name for your slider that will help you remember what it contains or what page you’re using it on. For example home if you’ll be using the slider on your home page. This is also where you’ll find the easy shortcode for your slider to insert it into posts and pages.

Layout: Choose your slider type (slider, scene or carousel) and sizing (auto, full-width or full-screen). If you used the quick start guide you’ve already selected this. However, this is also where you can edit the widths and heights for your layer area (where you’ll be adding slider elements), the position of your module (center is default), a default background color or image for your slider (note – this is separate from individual slide backgrounds), custom border, drop shadow and a handful of advanced options (for wrapper max height, overflow, layer perspective, etc).

Content: Select how you would like to add content to your slider. There are 9 content sources to choose from, but for the most part you’ll want to select the Custom option to build your slider yourself (though the Post-based and WooCommerce options are also super handy).

Defaults: The most important option in this section is for default Slide Duration – which is how long each slide will last by default (note – you can customize this on a per slide basis later on, but it’s nice to have a default). You can also set a Initialization Delay, which will make your slider wait a specified amount of time before animating. There are other defaults for custom module ID, classes, and responsiveness and more but most users won’t need to change these.

General: Some of the options you might want to use in this section include slideshow settings for auto-rotate, stop on hover, looping slides, and selecting a designated first slide (if different from the slide you added first when building your slider). This is also where you’ll find options to hide or disable your slider on mobile or under specified pixel widths.

On Scroll: Slider Revolution includes a number of advanced scroll effects such as parallax, 3D depths, timeline, fade, blur, grayscale and more. All with customizable settings for scroll speed, offset/tilt, etc. We’re not going to dig into these as they can take quite some time to master, but if you’ve purchased your own slider license we’d recommend playing with some of the ready made options from the template library to learn how these different scroll effects behave.

Spinner: This is your preloader – so as your images and animations are loading on your server, visitors to your page will see the slider background you’ve selected along with the spinner you’ve chosen. There are currently 15 unique spinners to choose from all with customizable colors.

Advanced: If you’d like to enable lazy loading you can do so from here as well as select a fallback image or simplify your slider on old browsers (specifically for iOS4 and IE8).

CSS/jQuery: You can add your own custom code to sliders, but tempting as this is we recommend leaving this option alone unless you’re comfortable with coding languages.

As Modal: If you’re creating a slider you want to appear as a popup or lightbox this is where you’ll find options for slider position, if you’d like to use a cover color, and the shortcode to use when inserting your modal slider in pages (note – this is different from the main slider shortcode as it add a usage attribute).

Skin: The skin option is essentially a preset you can create and then assign to text layers as you’re building slides. This a great tool if you want to keep your branding the same across layers.

Addons: This section allows you to enable and access addons (note – addons are only available if you purchased your own slider license, they are not included with versions of Slider Revolution bundled with themes).

Slider Revolution Navigation Options

Next is to decide what you’d like to utilize for navigation under the Keypad icon. There are plenty of options you can use for your slider. All of the options below include easy to customize settings for position/alignment, sizing, visibility and global styling/presets.

• Progress: Add a progress bar or circle that visualizes current slide progress (or full slider/module progress).
• Arrows: Add arrows to make it easy for visitors to click through your slides with you choice of 13 different styles (note – custom is typically based on your theme).
• Bullets: To add navigation dots to your slides enable the bullets, and pick from 14 styles.
• Tabs: If you’re creating a content slider based on your blog posts you might want to look at the tabs navigation. This displays a thumbnail, title and any parameters (as defined under Slide Options) – very similar to a recent posts widget for example.
• Thumbs: To display a thumbnail image as a navigation option select thumbs and choose from 5 styles.
• Prev Size: Define the size of your preview images used for navigation.
• Touch: Enable and customize touch-swipe navigation, including options for block scroll, velocity and direction.
• Keyboard: Enable keyboard navigation (recommended for accessibility).
• Mouse: Edit mouse controlled navigation to use a carousel function or reverse scroll.
• Nav Editor: This section is for customizing arrows, bullets, tabs or thumbs with your own custom code. As mentioned before, unless you are comfortable with coding we recommend using the slider’s built-in options.

Slider Revolution Slide Options

And finally, your Slide Options.

• Background: Choose the background for your slide. Choose from transparent, colored (you can add a gradient), image, external image, or a video (YouTube, Video or HTML5).
• Thumbnail: Define the thumbnail visible by the admin and the thumbnail used for navigation.
• Animation: Choose the transition animation for your slides.
• Filters: You can add filters to your slider. In my opinion these make more sense for slides with an image background but it’s up to you. There are currently 22 presets to choose from.
• Progress: You can customize the slide length (time in ms), pause and visibility on a slide by slide basis.
• Publish Rules: Define if your slide is published or unpublished. This is great if you’re working on seasonal or limited time slides that you want to slowly build, publish, and later remove.
• Tags & Link: IN this section you can add custom class, ID and HTML data for your slide as well as enable a link (if you want to add a link to your entire slide).
• Parameters: Add up to 10 custom parameters to use within your slides and navigation.
• Loop Layers: Create and customize you slide loop settings if your slider only has one slide (especially helpful if you’re using your slider as a welcome mat or page section).
• On Scroll: You can also customize your parallax and scroll effects (fade, blur or grayscale) per slide.

How to Make a Slider with Slider Revolution

Now that you’ve seen the features (wow there are a lot!) I’ll give you a quick summary of what we think are the most important options. Specifically by showing you how to build a simple slider.

General Options

First we selected a few General Options:

• Add a custom title and alias in the Title section
• Customize the desktop layer area height and width under Layout (we set ours to 1000px wide to match our site width and 500px tall)
• Choose a default slide duration (we used 5000ms which is 5 seconds) under Defaults
• Select a Spinner to use for your pre-loader (we’re partial to option 7)

Slider Navigation

Then, we choose our Navigation Options. In our example we selected the “Uranus” style which is simple arrows.

Adding Slides

That’s all we wanted to set for our slider, so the next step is to add a couple slides. When creating a new slider you’re already on slide #1 by default so you can start adding settings and layers right away.

You can add a background color, image or video. If you choose to add a color you can also add a gradient.

For a video you’ll simply add the source and make a few selections. In the screenshot above we’ve set the slide to force Cover Mode (so the video fills the entire slider) and to rewind on start (so it plays from the beginning each time the slide starts).

For our example we’ve added an image from our Media Library. We left the image with the default Cover setting (which stretches the image to cover the full slider, as opposed to Contain which shrinks the image to fit within your slider constraints).

Adding Layers

Now to add layers! At the top of the screen you’ll notice an option for “+ Add Layer.” This is where you’ll find tons of options to add to your slides. You can choose from 8 different Add Layer options:

• Text layers are perfect to add headings, descriptions or even simple links. Add whatever it is you want to say on your slide.
• Images are great for inserting your logo, adding depth on parallax slides, inserting before/after sets, and more.
• Button layer options include tons of size and border radius combos for which you can edit the color, background, border color, font, hover state and text. In addition there are a number of helpful pre-sets for social links animated mouse scroll icons, hamburger menu or even play/pause.
• Shapes can be used to add effects (like pulsing or radiating a color behind a button), to define a part of a text layer (use a shape to highlight just one word or phrase) or to add visual interest. Select your background, border color/size, shape border radius (0 for a square, 100 for a circle), shape size in pixels and padding.
• Audio & Video layers are fairly straight forward. Choose the media you’d like to insert and select a file from your media library or insert a link (YouTube, Vimeo, SoundCloud, etc.). Then add settings to enable looping, autoplay, next slide on end, base volume, segment start/end and preloading. This is an easy way to add real testimonials to your slider, an intro video or a tutorial.
• Icon / SVG are exactly what they sound like – include icons or add custom SVG images that scale beautifully with your slider across devices.
• Rows can be inserted and are just like any other page builder, complete with column settings. This is a great way to organize layer elements or to build a single slide module.
• Group is used to create a group of layers so it’s easier to position and move related layers.
• Layer Library is only available if you have your own license for Slider Revolution and is a collection of ThemePunch’s ready made resources.
• Import to copy a layer or slide from another slider in your library. Quick and simple!

First let’s add a simple Text layer. You’ll have the choice to add a Quick Style heading or content – both are text layers, the only difference is the pre-styled options you’ll see on the right hand side. You can choose one of these styles or click the X in the top right corner to go to the layer settings.

For our example, these are the options we chose for our heading as well as a subheading for our slide:

• Added our text in the Content section, as well as centered our text
• Selected a Style for the font size, weight, line height and Google font
• We customized the Size & Pos to change the location of the layer within our slider container (remember – our container is 1000 x 500 px)
• And last added an Animation effect and speed for our text to fade in at 800ms (IN : Anim To) and the same animations for our text to exit (OUT : Anim To).

We also added a button. To do so, hover on the “+ Add Layer” link and click the button option.

Just like the text, there are some Quick Styles you can use to get started.

For our button, we used the following. Again, very similar to the text options (but with a couple important differences):

• For the Content we added our button text.
• From the Style section you can add your text and button colors, font options and add space to your button with padding (within) or margins (outside). Our button uses left and right paddings to make it wider.
• We again used the Size & Pos options to center our button layer on the slide.
• And added an Animation for the button to enter and exit the slide.
• Since this is a button layer we also added a Hover effect so visitors intuitively know that there is a link. So we chose an animation and made our button a little transparent on hover.

For a button, or any layer that you want to add a link to, you must add the Action. For out example we’ve added a Simple Link as well as defined the settings (on click, the URL and a target to open in a new window). But there are a ton of options other than a Simple link, such as scroll to ID (local scroll), jump to slide (to skip through your slides), play slide (for example if you’ve added an interactive feature), open a slider modal, play media (great for a video), etc.

That’s our first slide done! Now let’s add a second to show you a few more features.

If you hover on the “Slides” option you’ll see a drop down for:

• Add Slide(s): Click to add a new blank slide, bulk slide to add multiple slides with the same background, or import a slide.
• Global Layers: These will be seen as an overlay on top of any slides you create. It’s is a great way to add a logo or watermark, include a “Buy Now” button for your product or even a link to subscribe to your newsletter.
• All of your current slides (our finished slide is #1 New Slide).

Now just repeat your slide building process as many times as you’d like!

There are many, many more options within Slider Revolution that you can use to further customize your layers. For example, you can add a loop to your layer (you could use this to create a flashing “sale” text), add on scroll effects, edit the visibility to hide on small devices, and more. We recommend checking out the official Slider Revolution knowledgebase to find more info on available features.

And lastly I just want to point out a few more helpful links at the top and bottom of the slider builder. Starting at the top, you’ll find the following quick-links (in order):

• Back: to go back to the main Slider Revolution page in your WordPress dashboard
• Slides: to add and manage slides within your slider
• Add Layer: to add new layers to your current slide
• The Name of the layer you have selected
• Duplicate icon to duplicate or copy your current layer
• Trash icon to delete your current selected layer
• Lock icon to lock your layer to prevent accidental edits
• Eye icon to show or hide layers
• Up & Down Arrows to navigate between layers
• Over a bit bring you to the Cursor to select layers
• A Rewind icon to undo and review a list of recent changes
• The Computer icon to preview your slider’s responsiveness on standard device sizes
• Question mark icon help link
• And finally a Droplet icon to access quick style presets for your layer

And beneath your slider preview you should see a timetable. From here you can edit the delay for when your layers will animate on your slide (for ours the end time is 00:05:00 or 5 seconds – just click on it to edit for your slide). You can also see a visual timetable showing the layer timing in comparison to the overall time length of the slide. The blocked sections are your layer animation times that you can simply click and drag to change.

Once you’ve added multiple layers you can also use this section to reorganize your layers by drag and dropping the layers into order. Plus on the upper left side you can find a useful link to play your slide to preview your timing as you make edits.

Preview & Save Your Slider

As you’re working you can preview your slider by clicking on the blue Preview button in the bottom right corner.

And don’t forget to Save your slides as you work! Make sure you Save your slide after making any changes. If you navigate away from your slide (even if it’s to another slide) you may lose all of your hard work. So be sure to save, save, save!

Slider Revolution also offers an option to Optimize File Sizes when saving that offers some server-side compression and optimization recommendations.

After saving, you can move on and work on other slides or sliders, or use your finished product on a page.

Using Your Slider

To add your fabulous slider to any post or page use the Slider Revolution shortcode that you created earlier. This shortcode can be found by clicking on the Slider Revolution menu item in your dashboard.

The shortcode should look like [rev_slider alias=”title”][/rev_slider] with the “title” based on the alias you gave the slider when you first created it.

Just paste the shortcode into your post or page content. Or if your theme supports additional slider locations you can add the shortcode there too.

If your theme uses the WPBakery page builder (for example, like the Total Multipurpose WordPress Theme) then you can use the included Slider Revolution page builder element.

All you have to do is add the module, select a slider from the grid (it will show a list of all the sliders you’ve already created), insert and then drag & drop the slider into place. Easy right?

Final Thoughts on Slider Revolution

We believe Slider Revolution is one of the easiest premium slider plugins to use, especially since they offer an easy to use visual editor and tons of built-in features so you don’t have to know CSS to style your slides (buttons, fonts, colors and more are already there!). It get’s a solid 5 stars and in our opinion you’ll be hard-pressed to find a better slider plugin.

Hopefully our guide helped walked you through the process of getting started, but to learn more (or to grab your own copy) visit ThemePunch’s main Slider Revolution page. They show great examples of their slider as well as link to the live demos where you can see what Slider Revolution can do.

More About Slider Revolution

But we’d love to hear from you. Let us know what you think of Slider Revolution in the comments below, or feel free to ask us any questions you might have. We’re happy to help!