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.
Revolution Slider: What Makes This Plugin So Great
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 newest layout option is Full-Screen. With this option you can create fantastic sliders that literally fill your entire screen, not matter the size of your browser or device.
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, 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.
Revolution Slider Guide
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. 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.
Create 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, enable lazy load (to speed it up your site a bit), and enable WPML options for slider elements. You can also change the Google Font family, and select an option to stop the slider after it’s completed a set number of loops.
Position: Under position you can edit the alignment and the margins of the slider.
Appearance: From here you can choose from 4 shadow options, timer display settings, select a slider background color, add a slider border and/or upload a custom slider background image.
Navigation: Choose from the included navigation options for your slider. 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 size.
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).
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.
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.
Individual Slide Settings
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).
Add Slide Layers
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.
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).
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.
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. It’s important to make sure that your image is already the size you want before you insert it as a layer. If you have an image in your media library that only requires minor resizing or cropping, you can use the built in WordPress image editor (but if you need to make any other changes it’s best to edit the image in Photoshop and re-upload).
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.
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.
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 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.
Using Your Slider
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 created it.
Just paste the shortcode into your post or page content. Or if your theme supports additional slider locations you can paste the shortcode there too (for example, the Thunder Multipurpose WordPress Theme supports slider shortcodes on the homepage, at the tops of pages, and in certain post formats).
Let us know what you think of Revolution Slider in the comments below!