Revolution Slider is a premium slider available as a WordPress plugin, jQuery plugin, and as a Concrete5 add-on. It’s gained huge popularity in the WordPress community due to it’s huge range of features and ease of use. In this review we’re going to cover just a few of the features of the Revolution Slider WordPress Plugin, and then we’ll show you just how easy it is to make your own sliders from scratch.
The plugin is responsive ready and includes multiple slider layout options to make your life easier. Choose from fixed, custom, auto-responsive and full-screen. The Fixed and Custom layout options allow you to set your slider size using exact pixels, and with the Custom option you have additional options to vary the slider size at various screen widths. Or if you don’t want to put effort into calculating your sizes, you can use the Auto-Responsive option that will automatically create slides that match the width of your theme (you still need to set the layer container size however). 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).
Revolution Slider makes it easy for your to create custom sliders by adding in options for just about everything. Choose your slide delay, navigation arrows, slider location (add margins), add media layers, select slide transition and more all using the drop-down menus throughout the plugin.
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 Revolution Sliders super options.
First you’ll nee to get a copy of the Slider Revolution WordPress Plugin. After you’ve installed the plugin, it should add a menu item to your main WordPress dashboard. Now you can start building your sliders!
You have two options – begin from scratch, or snag a free export file from the Revolution Slider demo to help get you started (just click on the “Example Files” link on the right upper section of their site). If you choose to import a sample slider, click on the Import button, browse for your sample file and click 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.
If you’re making a slider from scratch, click on the Create New Slider button. Give your slider a name and an alias. The name is to help you tell which slider is which, and the alias is used to create the slider shortcode.
Next you’ll want to set your main slider settings. Select your slider layout and grid (in pixels). Fixed will remain the same size, custom gives you options to add grid sizes based on the size of the screen, auto-responsive will automatically adjust to the size of your browser to remain full-width, and full-screen will fill your entire browser screen with the slider. No matter which option you choose, you’ll need to add a Grid width & height which will determine the size of your layer container.
To the right you’ll see a bunch of slider options.
General Settings: Set your slide delay (time each slide is displayed) in milliseconds, toggle random order (aka shuffle mode), enable lazy load (to speed it up your site a bit), and enable WPML options for slider elements. You can also select an option to stop the slider after it’s completed a set number of loops and/or at a specific slide.
Google Fonts: Use this easy peasy setting to add custom Google Fonts families to your slider. Add whichever fonts you might want or need to add text layers that match the rest of your website to your slides.
Position: Under the position toggle you can edit the alignment and the margins of the slider.
Appearance: From here you can choose a slider shadow, show or hide the slide timer, add a dotted overlay, select a slider background color, add a slider border and/or upload a custom slider background image (complete with fit, repeat and positioning options).
Spinner: Use this option to choose which loading image you want to use for your slider. There are 5 spinners to choose from.
Navigation: Choose from the included navigation options for your slider. This includes options for bullets, thumbnails and navigation arrows. There are a ton of positioning options so you can quickly align and reposition your navigation elements.
Thumbnails: If you choose to display thumbnails for your slider navigation, you can use these options to edit the thumbnail count and sizing.
Mobil Touch: Revolution Slider is mobile ready, and features easy touch options. Simply enable the touch swipe option from this toggle and make selections for the velocity, min & max touches and vertical scroll blocking.
Mobile Visibility: You can choose to hide your responsive slider (or certain layers) on small browsers or devices. Use the mobile visibility options to set a minimum browser size (note: this option is only for the responsive slider layout).
Single Slide: If you create a slider with only one slide, use this toggle to create an infinite loop. This is a great feature for creating mini sliders that function as gifs for features or services.
Alternative First Slide: If for some reason you decide your first slide should no longer be first and you don’t have the time to edit the slide itself, or perhaps you want a different first slide during a special promotion, you can use this option to quickly set your primary slide.
Troubleshooting: If you plan on using multiple slider plugins you must make sure that the JQuery No Conflict Mode is turned ON (it should be on by default, but it doesn’t hurt to double check).
Once you’ve finished making your selections you can click Create Slider.
Now you get to start adding your slides. There are two slide options – click New Slide to select an image from your media library or upload a new one to use as the background of the slide; or you can click New Transparent Slide if you don’t want your slide to have a background (if you used the Appearance option to add a custom image as your slider background you’ll want to use transparent slides so you can see your image).
After you’ve added your slides, pick one and click the green button to Edit Slide.
Revolution Slider is packed with options, and they just keep coming. When you click to edit a slide the first section you’ll see is to edit the general slide settings. From here you can set the slide transition from the drop-down menu (select one, a few, or choose random to use them all) and choose the length of the transition in milliseconds. Other slide options include enabling the link feature, adding a custom thumbnail, and even setting a specific time period to display the slide (again, this is great for running promotions or during the holidays).
There is also a main image/background settings section. If you created a slide with a background image you can change the fit and alignment from here, change the image and even enable an animated “Ken Burns” panoramic zoom option.
Now you can start adding your slide layers. If you’re having second thoughts about the background of your slide, you can update the image or switch to a solid color or transparent background from here as well. There are thee media formats you can add as layers to your slide.
Click the “Add Layer” button to add a text layer. In the Layer General Parameters you will see a drop down for the text style. Choose a style that you want, or that is close to what you want.
In the Text/HTML box you can add whatever it is you want your layer to say. If you want to get fancy, you can add a span to the text with custom CSS. Just keep in mind that any changes you make to the fonts size will effect the responsiveness of the layer.
To align your layer you can simply drag and drop your text where you want it. Alternatively you can use the positioning boxes and X Y coordinates to position your text exactly.
If you want to make any changes to your text style click on the “Edit Style” button. This should open a window:
From here you can make tweaks such as using a custom Google fonts you previously enabled, changing the font size or line-height, swapping out colors and much more. When you’re done you’ll have the option to save your changes as a new text style or to overwrite the style you were editing. In my opinion it’s better to create a new style so you always have the default options at hand.
You can also use the text layers to add buttons to your slides. There are two ways to go about this. The first is to use the built-in option for buttons. Simply click on the “Insert Button” link just above the text/HTML field. This will open a lightbox for the preformatted button options included with Revolution slider.
The second option is to create button-like text with a link. For this option just select a style with a background color and add a link to your text (if you look at my code above I also added my own styling to remove the underline and override the color of my link).
In the Layer Animation box you can set your layer entrance and exit animations, easing (how the animation ends, i.e. with a bounce), and the speed of the animation (in milliseconds). Plus you can see a live example of the animation with your exact settings so you’ll have an idea of how your layer will look before you commit to an animation.
Under Layers Timing & Sorting you can edit the delay for when your layer will animate onto your slide. You can also see a visual timetable showing the layer timing in comparison to the overall time length of the slide (the sea green bar is the length of time your layer will be visible). 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 lock or hide layers that you’re using (or not using, but want to save for later).
Adding an image layer is easy as pie. Just click on the “Add Layer” Image” button to open the media manager. From here either select an image from your media library or upload a new image.If you image is not the size you want when you upload it you can either use the WordPress image editor to make minor cropping or resizing adjustments before inserting the image, or use the built-in Image Scale options in the Revolution slider after inserting the image.
Once inserted you’ll see options similar to the text layer. You can position the image, add entrance/exit animations, and edit the layer timing. For images there are also options to add a text description (which is used for the Layers Timing & Sorting section) and to add Alt Text (for SEO).
To add a video to your slide click on the “Add Layer: Video” button. This will open a popup with three video options: YouTube, Vimeo, or HTML5. For the YouTube and Vimeo options, you just paste in the video ID and click search. After the slider finds the video you’ll be able to see a screenshot of it in the popup to confirm that the ID you entered displays the correct video. Then you can enter a custom video size or set it full-width (si it fill the slider), add auto play and auto transition.If you choose to add an HTML5 video you are able to add an image link, video URL (MP4, WEBM or OGV), custom size, autoplay and auto transition to next slide.
After adding your video layer you will be able to set the position, animations and timing just like with the text and image layers.
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 will 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.
To add your fabulous slider to any post or page use the Revolution Slider shortcode that you created earlier. This shortcode can be found by clicking on the Revolution Slider 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 the Revolution Slider and with the built-in page builder you can add sliders to any post or page simply by inserting a Revolution Slider module. All you have to do is add the module, select a slider from the dropdown (it will show a list of all the Revolution sliders you’ve already created), insert and then drag & drop the slider into place. Easy right?
Let us know what you think of Revolution Slider in the comments below!