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

Revolution Slider Tutorial Step 1

Go ahead and click “Create New Slider

Revolution Slider Tutorial Step 2

Step 2 – Slider Settings

Revolution Slider Tutorial Step 3a_0000
Revolution Slider Tutorial Step 3a_0001

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.

Revolution Slider Tutorial Step 3a_0002

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.

Revolution Slider Tutorial Step 3a_0003

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

Revolution Slider Tutorial Step 3a_0004

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.

Revolution Slider Tutorial Step 3a_0005

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.

Revolution Slider Tutorial Step 3a_0006

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.

Revolution Slider Tutorial Step 3a_0007

These are the main slider dimensions.

We’ll leave these default for this tutorial.

Revolution Slider Tutorial Step 3a_0008

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.

CONTINUE TO STEP 5 IF CUSTOM FONT IS NOT NEEDED

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.

Revolution Slider Tutorial Step 3b

First, set Load Google Font to “Yes

Revolution Slider Tutorial Step 3c

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

Revolution Slider Tutorial Step 3d

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 rsgfs3d_gbutton

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.

Revolution Slider Tutorial Step 3e

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.

Revolution Slider Tutorial Step 3f

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

Revolution Slider Tutorial Step 3g

Step 5 – Appearance

Revolution Slider Tutorial Step 4a

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.

Revolution Slider Tutorial Step 4b

Step 6 – Navigation

Revolution Slider Tutorial Step 5_0000

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

Revolution Slider Tutorial Step 5_0001
Revolution Slider Tutorial Step 5_0002

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.

Revolution Slider Tutorial Step 5a

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

Revolution Slider Tutorial Step 6

Step 7 – Finish creating a New Slider

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

Revolution Slider Tutorial Step 7

Section 2 – Adding Slides

Step 8 – Adding NEW slides

Revolution Slider Tutorial Step 8

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

Revolution Slider Tutorial Step 9

Press “New Slide

Revolution Slider Tutorial Step 10

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

Revolution Slider Tutorial Step 11

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.

Revolution Slider Tutorial Step 12

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.

Revolution Slider Tutorial Step 13_0000

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.

Revolution Slider Tutorial Step 13_0001

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.

Revolution Slider Tutorial Step 13_0002

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

Revolution Slider Tutorial Step 13_0003

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

Revolution Slider Tutorial Step 13_0004

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.

Revolution Slider Tutorial Step 13_0005

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.

Revolution Slider Tutorial Step 13_0006
Revolution Slider Tutorial Step 14_0000

Here is our example slide so far.

Revolution Slider Tutorial Step 14_0001

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.

Revolution Slider Tutorial Step 15

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.

Revolution Slider Tutorial Step 17
Revolution Slider Tutorial Step 18

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

Revolution Slider Tutorial Step 19

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.

Revolution Slider Tutorial Step 20

Congratulations!

This completes our Getting Started with Revolution Slider tutorial.

Happy sliding!

Leave a Reply

Your email address will not be published. Required fields are marked *