How to use Slider Revolution for creating Animation Effects in a WordPress Website

How to use Slider Revolution for creating Animation Effects in a WordPress Website

Slider Revolution is a premium WordPress plugin which is very popular among WordPress websites. It can be used to make amazing image sliders with animation effects in WordPress website. Using it you can create sliders that have images with flying text, links and buttons.

By flying I mean the text, links and button comes over the images, within a delay of few milliseconds, from anywhere – top, below, bottom of the screen.

Just like Slider Revolution, there is Meta Slider which is also an excellent plugin to make Image Slides.

Responsive WordPress Slider

Slider Revolution is a best WordPress Slider available today. It has more than one thousand effects which can be placed in the slider. These effects catches the users eyeballs whenever they visit your Website. Slider Revolution is also a Responsive Slider, so the images and all the effects, automatically fits on all screen sizes – Computers, Tablets and Smartphones.

Making Animation Effects in Slider Revolution

Let’s start making a new slider by followowing the steps outlined below.

Step 1: Create New Slider – Click on Revolution Slider in WordPress dashboard then click on Create New Slider.

create new slider

Create New Slider

Step 2: Configuring Settings – Select the Default Slider for Content Source. For the Slider Title & ShortCode options enter Slider Name and Slider Alias.

Here I have put MySlider for name and myslider for alias, but you can put any name of your choice. Doing so will get the slider shortcode generated, which you can put in any of your WordPress page or post where you want to show this slider.

generating slider revolution shortcode

Generating Slider Revolution Shortcode

Finally click the Save Settings button, given on the right side, to save the settings.

saving slider revolution settings

Saving Slider Revolution Settings

Slider Revolution has many settings like slide layout, parallax, navigation, fonts, etc which you can try out by your own.

All slides of Slider Revolution are 100% responsive, thanks to inbuilt CSS Media Queries this slider has by default.

Step 3: Adding Slides – The slider is created now and it’s time to add the slides to it. In the Revolution Slider’s main page, move your mouse over the recently created slider, then A small bar with pencil icon shows up. Click it and it will take you to add slides page.

adding slides

Adding Slides

  • a. Background Selection – In this page first set the Main Background of your slide. So select Main / Background Image and click Change Image button.
    selecting main/background image

    Selecting Main/Background Image

  • b. Adding Layers – After choosing the background image it’s time to add layers. Layers can be in the form of text, image, video, button and shape. I will create two layers, one for text and other for button, and I will show these layers after a delay of few seconds with some animation effects. These layers are –

    Text/Html – The text will be Attractive Deals with 50% Off on all products. So click on Add a New Layer icon, then click on Text/Html to add the layer to the slide.

    Add text Attractive Deals with 50% Off on all products in the caption field and click the green tick mark on its top to save it.

    adding text/html layer

    Adding Text/Html Layer

     

    saving the layer

    Saving the Layer

    Now to add animation effects to this layer, click on Animation blue button. Put ‘3000’ for the animation speed against Fade-in option. This means this layer will show after 3000 milliseconds (i.e 3 seconds) on the slide.

    Similarly set Fade-out animation speed to 10000(i.e 10 seconds). This means this layer will hide after 10 seconds. There are also other animation templates given which you can give a try.

    animation effects

    Adding Animation Effects in the layer

    Button – Now add a button from the Add a New Layer. Here you can put the button text, button color, button text color, button hover color, and other properties.

    Put 11000 for Fade-in and 15000 for Fade-out animation speeds. This will make our button to become visible from 11 to 15 seconds.

    Now I want to put an option for button click event so that when someone clicks this button he is redirected to the shop page. To do it click the button to select it, now click the Actions link then click the + blue button. Add the click event for the button with simple link option. Finally put link URL where user will be redirected when clicking it. In the end save all your changes.

    adding a button

    Adding a Button

     

    adding button properties

    Adding Button Properties

     

    adding Link URL to button

    Adding Link URL to Button

The slider with animation effect is completed now. Simply copy it’s shortcode and place it on the page/post where you want the slider to show. In this way you can create any number of slides in your slider and bring out excellent animation effects in your website.

slider revolution

Completed Slider Revolution

The Slider Revolution Plugin is a premium plugin which can be downloaded from Here

There are so many different effects which you can put in your slides and created astonishing and eye catchy effects.

Hope you like this Slider Revolution Tutorial. Feel free to contact me using the comments section below.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.