Getting started with Revolution Slider

I’ll start out by saying how awesome this slider really is.
It can be used for a vast array of different effects, not limited to just images either.

For our getting started tutorial, we will cover simple slider creation that fades between one image to the next.

Section 1 – Creating a New Slider

Step 1 – Creating a New Slider

Once the plugin is installed and activated, head over to the Revolution Slider section of the WordPress Dashboard

Go ahead and click “Create New Slider“

Step 2 – Slider Settings

It’s a good idea to give the slider a descriptive and relatively short name.

Here we use “homepage” because that is where we want it to sit.

This shortcode will be generated by the name/alias that you give to the slider.
If you have Visual Composer installed, generally, you won’t need this.

This is where we set if Revo slider will use Posts, Specific Posts, or a Gallery.
We will be using “Gallery” for this tutorial.

The Slider Layout is best used with trial and error, however if you know the exact dimenions of where you want the slider to sit, you can choose “Fixed” and enter the dimensions of the space you want the slider to fill.

For this tutorial, we will leave it on the default “Auto Responsive“, as the other modes are beyond this tutorial’s scope.

Unlimited Height refers to the auto height of the slider, based on the height of the images/post content used.

We’ll leave this defaulted to “Off” for this tutorial.

This forces Revo slider to be the “Full Width” of the page, this can break page layouts if used incorrectly.

For this tutorial, and most websites, this is best left “Off” unless you know what you are doing.

These are the main slider dimensions.

We’ll leave these default for this tutorial.

Here we set the master General Settings of the slider.

Delay: This detimines how long it takes for one slide to begin changing to the next. Measured in milliseconds.
As a general rule of thumb, 4000 (4 secs) is a good Delay setting (default is 9000 — 9 secs).

Shuffle Mode: When “On“, this will make the slides display in random order.
Note: that when this is enabled, re-arranging the order of the slides in “Edit Slides” is pointless except for the 1st slide.

Lazy Load: This basically makes the slides load on demand, instead of your computer loading all of the slides at once, each will load as needed. Note: This has pros & cons for both fast and slow internet connections.
For slow internet users, Lazy Load will make the page that the slider is displayed on load much faster than if it were disabled, however, for fast internet users, this will cause the next slide to be blank (using the slider’s background colour) until the slide is loaded into the memory.
Also take note, that if you have many slides, Lazy Load will almost be a requirement for you and your website visitors.

Stop Slider: This is only used when you don’t want the slider to loop and stop after a certain amount of slides.

Step 3 – Google Fonts with Revolution Slider

These font settings are for the SLIDER ONLY.
They do not apply to the rest of the website. They are also slider dependant, and will not carry across to other sliders.

First, set Load Google Font to “Yes“

Second, you will need to go to near the end of the text entry box under “The google font families to load:“
I’ve highlighted the section that can be easily changed, without having to go to Google Fonts website and find the link, however this only applies when you know the name of a Google Font that can be used.

In this tutorial, and as a good base, “Droid+Sans” is a good choice for a standard, modern Google Font.
The “+” is required, and in this case, is the URL replacement for a space.

Step 4 – Adding a cutom Google Font to Revolution Slider

If you don’t like Droid Sans or the default PT Sans Narrow, you can always head over to;

www.google.com/fonts

You can search for specific fonts as illustrated top left, and you can also change the preview text at the top in the middle. This way, if you have specific words or characters you want to use in your slider, it’s best to preview with that text instead of Google default.

When you have chosen a font you like, press the “Quick-use” button

Some fonts have more than one “Style“. These extra styles can help make extra formatting display in a nicer way when using a custom Google Font, however, as Google warn you, this can sometimes double or even triple the time it takes for a page to load wherever this font is displayed.

Once you’ve chosen any additional styles, if any, you then need to scroll down to the options below the “Character Sets” options.

Navigate to the “Standard” tab, as illustrated.

This code can be copied into the “The google font families to load:” text entry box, replacing the default code.

Step 5 – Appearance

Here we set the appearance options of our slider.

The “Postion” options are best left to developers.

Shadow Type will detirmine the look of the shadow displayed under the slider. Choice are 1, 2, 3 or none. 2 Is the default.

Show Timer Line: This will show a speeding white line going across the slider, in relation to how much time has passed for that slide.

Everything below and including the “Padding” options are also best left to developers.

Step 6 – Navigation

These are alignment/offset options for the navigation bullets & thumbnails

You can set the size of the thumbnails here.

Note, that the “Thumb Amount” says ‘px‘ but that is a false measurement & a development error.
The default is “5” which is the number of thumbnails displayed in the thumbnail navigation bar.

Mobile Visibility, Alternative First Slide & Troubleshooting are best left to the developers.

Step 7 – Finish creating a New Slider

You can now press “Create Slider” to proceed onto adding new slides.

Section 2 – Adding Slides

Step 8 – Adding NEW slides

To ADD NEW slides, or change existing ones, press “Edit Slides“

Press “New Slide“

Here’s what it will look like once you’ve uploaded a couple of slides.

Section 3 – Editing Slides

Step 8 – Editing your added slides

To edit the slides you have just added, press “Edit Slide” in the corresponding slide panel.

It’s good practise to give your slides descriptive titles. This makes managing lots of slides easier.

For this tutorial, I will leave them as their defaults.

If set, the Slide will only be visible between the set times.

If Visible Until is not set, the slide will be visible as soon as the Visible From date is reached.
If Visible From is not set, the slide will be visible until the Visible Until date is reached.

The slider Transition Style detirmines how the slides appearance.

You can select more than one from a multiple choice drop down.
Every new slide loop will use an other transition if you selected more than one.

The amount of Boxes/Columns the slides are divided into during the animation.

The Duration of the Transition. (Default 300, min 100 max 2000 ms)

Enable Link allows a slider sized link on the Slide.

You can set Link Target (like _blank for New Window) and Link URL here, or a Built in function like swap to slide X, previous Slide, Next Slide, etc.

This defines the thumbnail for this slide.

This option should be left for developers, as Revo will use the thumbnail version of the slide image by default, there is not much need to define a custom thumbnail unless you want to use icons or different images as navigation thumbs.

Here is our example slide so far.

Unfortunately going into this section now would require a fairly decent understanding of keyframe animation (like Stop motion). These options are for advanced designers and developers only.

Section 4 – Placing your Slider on a Page or Post

Step 9 – Putting your slider in a page/post using Visual Composer

Head over to the post or page of your choice, here, we are placing the slider on the Homepage.

Once you have loaded the editor for that post/page, hit VC’s + Add Element button top left of the editor, or switch to Visual Composer mode if you haven’t already, and then add the element.

If you added the Revolution Slider successfully, your post/page should look similar to this.

Conclusion

This screenshot is taken from the homepage, and is in the middle of tumbling over with our 7 Slots using a Premium 3D Transition type.

Congratulations!

This completes our Getting Started with Revolution Slider tutorial.

Happy sliding!