Skip to Main Content

How to create a slideshow with Slider Revolution on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

We can now start serious things. The creation of slider on slider Revolution can be quite tedious at first. You will lose your bearings, because you will want to know where is this or that element.

You will get rid of Slider Revolution by practicing with habit and also reading this tutorial.

During our previous tutorials, we discovered how:

And now that we've set up our slider, we're going to create the slides " of " slider ».

How to get started with the "Slides" editor

In principle, after saving the configurations of a slider, you access to a new interface that introduces you to the editor of " slides ».

editor-in-slide-revolution-slider

You will notice at the very top the same toolbar that allows you to return to the list of "sliders or slides", to the parameters of the slider and the preview of the slider among others.

Discover also our 10 WordPress plugins that allow you to rate your Blog posts

Revolution-slider-bar doutil-edition-of-slide

At the bottom, we have a new section that allows us to see, the global layers, the different "slides" and the button to add a new " slide ».

creation-of-slide-button-slider-revolution

By hovering over the button of a slide, you will notice that new options are displayed. These options are fairly clear and easy to understand (duplicate, add to the template in order to reuse it later and delete the slide).

options-creation-slide-revolution slider

By hovering over the slide add button, you'll notice other options that allow you to add an empty slide, add multiple slides, add a slide from a template (model).

creation-of-slide-option-revolution-slider

Currently, you are on the 1 slide, which is why it is highlighted on the slide list. If you create a new slide, it will be highlighted in place of the first slide.

second-slide-creation-dun-slider-slider-revolution

Slider Revolution at this level is a real dashboard. If I explain everything to you, you will not understand much, so I will avoid talking about features that can be confusing and not essential.

Read our article on 6 WordPress image compression plugins for your Blog

When you have selected a slide, you can start editing in the following section. This section consists of several tabs (7) that give you access to various features.

How to add a background image to a scene

The first thing you want to do first is add a background to our slide. Here you have the choice between: A background image (from your media library), an external URL that points to an image, a transparent background that will use the color proposed by the WordPress theme, a fixed color, a Youtube video, Vimeo or HTML5. We will choose a background " image ».

BACKGROUND image-example

You can find many free images on the web. Just do a search on Google. 

Image-back plan-revolution-slider

When you add an image, this applies immediately in the slide preview and in the “scene”.

szene-revolution-slider

How to add an element in a scene

Now that we have a well-decorated scene, we will add an element. Each element you add to a scene is considered a layer or layer. This layer feature will help you believe me.

To add an item to the scene, hover over Add Layer ».

fly-add-layer-slider-revolution

You will notice that you can add several different elements including: text / HTML, images, audio, video, a button, a shape, an object and import an element.

We will start by adding a transparent image of Snoopy the little puppy.

funny-snoopy-png

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Then add this image in the scene, and you will have something like this:

example-slider-slider-revolution

You will notice that in the four corners of the image are small squares. These squares allow us to resize the images, since in this case Snoopy occupies a lot of space.

Resizing is done by " Drag ". To resize while keeping the proportions, hold down the " May From your keyboard while resizing.

See also our 10 WordPress plugins that will make you a better Blogger

new-representation-snoopy-revolution-slider

Now Snoopy looks like this, it's more fitting. You can also flip an image using the indicator located at the top right of each image like this:

rotation-dimage-revolution-slider

How to position elements with the help grid

The help grid is a valuable element that helps to better position the elements. You can activate the help grid at the bottom left of the stage.

grid daide-revolution-slider

This grid has tiles with different sizes, the smaller the size, the more precise you will be in the placement of element.

Investment-of-pictures

How to add animation

There are 3 types of animations on Slider Revolution: entrance animations, animations during (the existence of the element in the scene) And end animations.

See also our 6 WordPress image compression plugins for your Blog

To add an animation to an element, you must first select it by clicking on it (when an element is selected it is framed by a dotted line with resizable corners).

So click on Snoopy, go up on the page and click on the tab « Animation ».

animated-slider-revolution

In the previous image, I have the input animations in blue and the output animations in red.

To change an animation, click on the drop-down list after the icon of the running man.

icon-animated-slider-revolution

You then have a wide variety of animation at your disposal. I leave it to you to choose the animation that you want to define for the entry of an element. For my part, I chose " easeOutElastic », To get this result:

Animation-entree-snoopy

Here for you our 4 WordPress plugins to boost the footer of your blog

Further to the left, you can determine the duration of the animation and the animation mode you need to leave on " No split Because the other options apply only to text, not images.

configuration-dune-animated-slider-revolution

Lire aussi How to hide the titles of articles and WordPress pages

Now, I would like to float Snoopy, for that, go to " loop And on the drop-down option, choose " Wave ". Now Snoopy floats:

snoppy-floating

How to configure the visibility of elements

My Snoopy floats, but I do not want it to be visible on mobile. So click on " Visibility »And on the Smartphone icon, make sure it is deactivated:

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

visibility-elements-revolution-slider

How to adjust the behavior of elements

To optimize the loading of the slider, you may want to delay the loading of the images. This is done in the tab " Behavior With the option " Lazy Loading ". You can even force the responsiveness of elements.

behavior-element-revolution-slider

How to create custom triggers on an element

Actions allow you to associate triggers with specific actions. To add a trigger, click on the tab Actions »Then on the button« + ».

add-a-shutter button

There are 3 types of triggers:

  • The click is the act of clicking the mouse
  • The mouse input over the element
  • The mouse exit above the element

The list of actions is quite long. For example, you can redirect a user who clicks on Snoopy to another page by choosing the action " single Link Which will bring up new options.

Discover also our 10 premium WordPress plugins from Booking and Booking

Management-of-triggers-revolution-slider

How to use Slider Revolution TimeLine

Slider Revolution offers a time management interface at the bottom. This interface allows you to see where the animation of an element starts and where it ends.

beginning-and-end-dune-movie-on-slider-revolution

On the previous image, you will notice two blue arrows. The first on the left indicates the beginning of the input animation of an element and the second indicates the end of the input animation. The dark red color indicates the life of the item in the scene.

Lire aussi How to add a countdown to your WordPress blog

You will find an end also similar to the other end of a duration (input animation, life time and end animation).

With the " timeline You will be able to control which element is displayed before and which element disappears first. It is a very practical tool that you need to master to make good animation.

The timeline also has a player that you can activate to preview the slide.

Animation-timeline-revolution-slider

Until then, I gave you the basics to create a slide. Now save your slider and start the preview.

Backup-and-previsulisation

That's all for this tutorial, in a next, we'll talk about the display of a slider on an article and some advanced operations.

Discover also some themes and premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Disk Audio

Disk Audio is another WordPress plugin that will help you to display an audio player directly on your website by just pressing a button. The layout of the audio player is completely responsive, so mobile users will enjoy its features without any problem.

Disk audio player premium wordpress plugins add audio player

In addition, it offers many customization options including color schemes, appearances, background images and opacity. It has several options to control it by keyboard and it also allows you to view your playlist with an adjustable scroll bar.

Read also: 10 WordPress plugins to improve search on your blog

You'll also be able to embed download links on the music player to show users where they can go to buy the track being played on your website. 

Download | Demo | Web hosting

2. Event Booking Pro

This is another 100% responsive WordPress plugin, easy to customize and dedicated to the management of reservations on any website, which offers its services in the fields of events.

Event booking pro

Its main features include: customization of text, color, borders and others, support for PayPal, management of coupon codes and coupons, support for Google Maps, the support of the management of e-mails,  the support of the shortcodes, intuitive control panel, easy event creation, total control over appearance, etc.

Download | Demo | Web hosting 

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

3. Social Share & Locker Pro

The Social Share & Locker Pro extension has been designed to help your website be more visible on social networks. With just a few clicks, you can either set the position of your social icons or lock your content by requiring sharing on one of the social networks offered by you.

Social share locker pro wordpress plugin

You have 10 predefined themes and this should cover the most common wishes. All her themes are Retina and work wonders. 

30 things to do on your blog posts after they are published Discover them by consulting this article.

Also, with Social Share & Locker Pro, you will be able to display the full name of social networks or just the icon. It will depend on your design, the available space, or your wishes.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here is ! That's it for this guide. We hope this tutorial has given you the basics of creating a slideshow with Slider Revolution on a WordPress blog or website. If you have any questions, suggestions or remarks, leave them in our section Comments.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

Do not hesitate to share with your friends on your favorite social networks

... 

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
4 shares
Share1
tweet
Save3