Slider Revolution is a premium slider available as a WordPress plugin, jQuery plugin and Joomla plugin. It’s gained huge popularity in the WordPress community due to it’s huge range of features and ease of use.
In this overview we’re going to cover just a 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 For Free! The Slider Revolution plugin is included for free with the purchase of our Total WordPress Theme so not only do you get an awesome plugin you will also get the Total theme as well as the Visual Composer plugin which is also included for free!
Slider Revolution: What Makes This WordPress 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.
The plugin is responsive ready and includes multiple slider layout options to make your life easier. First choose your slider type: standard slider, hero scene (single slide) or a carousel slider. Then select a layout: auto, full-width or full-screen.
The auto layout option 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). If you leave this option on it’s default setting it will stretch your slider to the main container width as defined by your WordPress theme.
The full-width layout is 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.
The most unique layout option is full-screen. With this option you can create fantastic sliders that literally fill your 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).
Multiple Content Sources
Want to create a slider for your posts? Or for your WooCommerce products? Not a problem – choose from 11 different content sources when creating your slider.
As of writing this post, Slider Revolution supports content based on blog posts, specific posts, the current post/page (great if you want to add a featured slider to blog post or portfolio item), Flickr, Instagram, WooCommerce, Twitter, Facebook, YouTube, Vimeo or the default slider (upload your own images/video).
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.
Add text, links, images and videos 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 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 and 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. But most developers do their best to make this process easy.
For example, if you’re using the Total WordPress theme your should see an onscreen prompt that recommends you install Slider Revolution (and other plugins included with the theme). Just click the link to begin installing and then activate the plugin.
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 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, activate your license if you purchased your own copy of the plugin (if the slider was included with your theme you can ignore this section) and see if your copy of the plugin is up to date.
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 View Plugin 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 disable is the Enable Notifications option. If you’re using a copy of Slider Revolution that was included with a premium theme you may be seeing notices “upgrade” or “enter your license” when there is no need. Simply disable this option to hide notices. Then 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.
Import a Sample Slider
If you choose to import a sample slider 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.
Create A New Slider
If you’re making a slider from scratch, click on the New Slider option. Now start from the top
Select a content source: choose how you would like to add content to your slider. There are 11 content sources to choose from, but for the most part you’ll want to select the default option.
Add a slider title & shortcode: Select a name for your slider that will help you remember what it contains or what page you’re using it on. This is also where you’ll find the easy shortcode for your slider to insert it into posts and pages.
Select a slider type: Choose a slider type, and select a preset to load presets included in the plugin.
Choose a slide layout: Select your slider layout and grid (in pixels). You can set custom grid sizes based on the size of the screen, though full-screen will fill your entire browser screen. No matter which option you choose, you’ll need to add a Grid width & height which will determine the size of your layer container.
Next scroll back up to the top of your screen to begin editing the General settings for your slider.
To the right you’ll see a bunch of slider options.
General Settings: Set slideshow options, set your default slide duration (length of time a slide is shown for), edit default transitions/animations and backgrounds, enable the progress bar (and edit the position and style), edit 1st slide settings, enable next slide on focus and disable blur.
Layout & Visual: Edit shadows, overlays, main slider background, enable a loader spinner, disable your slider on mobile (or under specific widths) and select a slider position on the page.
Navigation: Customize options and settings for sider arrows, bullets, tabs and thumbnails. Also enable touch navigation, swipe, keyboard navigation and mouse scroll.
Parallax & 3D: Enable parallax and/or 3D support plus edit mouse sensitivity and parallax depth levels.
Performance and SEO: Enable lazy loading and monitor slider performance.
Problem Handling: Enable fallbacks and troubleshoot any slider errors.
Google Fonts: Load custom Google Fonts families specifically for your slider (add whichever fonts you might want or need to add text layers that match the rest of your website to your slides).
Import / Export / Replace: Import custom templates, export your current slider to reuse on another website and use options to replace urls in your slider.
API Functions: Edit api methods and events (we recommend you ignore this tab unless you’re an advanced developer).
Once you’ve finished making your selections click the green file at the top of the screen to save your changes. After that click on the blue pencil to begin editing slides!
Add or Edit Slides
Now you get to start adding your slides. There are two or three slide options depending on if you’re starting from scratch or using a sample slider: Static/Global Layers, any already created slides and Add Slide.
Static/Global Layers will be seen as an overlay on top of any slides you create. This 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.
Choose an exiting slide to make changes to a slide you’ve previously created or imported as a part of a sample slider. This is one of the easiest ways to get started with Slider Revolution if you’re new to the plugin, as their sample sliders show how to properly use various plugin features to create impressive sliders.
Click on Add Slide to begin creating a slide from scratch.
First, use the Main Background options to select your slide background: image, external URL, transparent (note – if you set a main slider background in the general slider settings it will be visible), solid color or video. Then use options for media source settings, filters, parallax level (%) and Ken Burns (an animated panning and zooming effect) if you’d like to further customize your slide.
Next move on to the General Settings. This is where you can set a slide delay if you don’t want your slider to being animating as soon as it loads, edit slide looping options or add an expiration date (great if you create a slider for a holiday or promotion). Another useful feature on this tab is the ability to set your Slide State to unpublished – this way you can continue to edit your slide and preview it on the backend of your website without the new slide being visible to your website visitors.
If you are using a thumbnail navigation for your slider, the Thumbnail tab offers options to select a custom slide image and dimensions. But if you opted not to use this navigation style you can skip this tab.
With that done you can switch over to the Slide Animation tab to customize your slider transition animation. There are over 80+ animations to choose from plus options for rotation, duration and easing.
Revolution Slider also offers options for Link & SEO settings, Slide Info (custom parameters and description) and Navigation Overwrite to add custom navigation arrows, bullets or thumbnails specifically to your slide.
Now is a great time to click on that green file icon at the top of the screen to save your settings before adding layers and styles to your slide.
Add Slide Layers
When adding or editing slides, Slider Revolution is packed with options, and they just keep coming. You can choose from 8 different Add Layer options:
- Text/HTML layers are perfect to add headings, descriptions or even 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.
- 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, 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.
- Button layer options include 21 size and border radius combos for which you can edit the color, background, border color, icon, 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.
- Object layers can be used to insert a png, jpg, svg or icon from ThemePunch’s library of free resources.
- Import to copy a layer or slide from another slider in your library. Quick and simple!
Click the blue “Add Layer” button to get started, then use the options to really customize or layer.
If you look just north of the main slider preview section you should see a white bar with loads of options you can use to edit and customize your layers as you add them.
Use the Style options to edit your fonts, colors and layer location. This includes everything from a custom Google font, font size, line height, text color, layer background, padding/margin, perspective, hover, toggle and more.
The Animation tab is just as you would expect – it holds option for adding and customizing the entry and exit animations for your layer. Select a preset animation template, add an easing and edit the animation duration time.
Loop settings are simple: either leave disabled so your layer simply loads with the animate you already selected, or enable looping by selecting type. Choose from pendulum, rotate, sideloop, pulse and wave to give your layer a constant, looping animation.
Mobile settings are found under Visibility. From here you can specify if a layer should be visible on specific devices, hidden under a set width or only appear on hover.
Behavior includes a few helpful toggles to customize your layer settings. The first is a setting to enable layer auto-responsiveness and child element responsiveness. By default slide layers will shrink as the browser window shrinks, disable these settings to maintain layer sizing. You can also edit your layer alignment and responsive offset from here.
Use the Actions tab to add custom layer settings on click, mouse enter or mouse leave. Actions include scroll, toggle, media play, pause, enter fullscreen, mute and more.
For advanced users or developers, the Attributes section can be used to add your own ID, classes and wrappers to target with custom code.
And lastly, the Parallax/3D offers a dropdown selector to choose the “level” of parallax effect you’d like to add to a layer. The higher the percentage, the more your layer will move.
Layer Frame Times
Moving on, 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. You can also see a visual timetable showing the layer timing in comparison to the overall time length of the slide. The blocked section is your layer animation time, and the lighter colored bar is the entire length of time your layer will be visible.
To edit the overall duration for your slide, simply click and drag the blue tag at the top right of the table.
Once you’ve added multiple layers you can also use this section to reorganize your layers by editing the position number, the entrance time, or by drag and dropping the layers into order. Plus you can use this section to play your slide to preview your timing as you make edits.
Save Your Slide
The most important step is to save your slide! Make sure you Save or Update 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!
After saving, you can move on and work on other slides or sliders.
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] 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. Some WordPress themes even include special modules for the slider. For example, the Total Multipurpose WordPress Theme includes Slider Revolution and with the built-in page builder you can add sliders to any post or page simply by inserting a Slider Revolution module. All you have to do is add the module, select a slider from the dropdown (it will show a list of all the sliders you’ve already created), insert and then drag & drop the slider into place. Easy right?
We believe Slider Revolution is one of the easiest premium slider plugins to use, especially since they offer a number of free templates (and even more premium templates if you purchase your own license for the plugin), 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.