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:

• Download and install Slider Revolution
• How to understand Slider Revolution Home UI
• How to set up a Slide Show on Slider Revolution

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 ».

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

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 ».

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).

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).

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.

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'll 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 which points to an image, a transparent background which will use the color proposed by the WordPress theme, a fixed color, a Youtube, Vimeo or HTML5 video. We will choose a background " image ».

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

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

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 ».

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.

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

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

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:

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.

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

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 ».

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.

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:

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.

Lire aussi How to Hide WordPress Post and Page Titles

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

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:

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.

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« + ».

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

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.

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.

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

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 appearance and to optimize the handling 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 which will help you display an audio player right on your website with just the press of a button. The layout of the audio player is completely responsive, so mobile users will be able to enjoy its features without any hassle.

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 WordPress Plugin 100% responsive, easy to customize and dedicated to the management of reservations on any website, which offers its services in the fields of events.

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 

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.

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.

• How to become a successful blogger and make money with WordPress
• How to integrate Google Forms WordPress
• How to create a privacy policy on WordPress
• 6 WordPress plugins to ensure RGPD compliance of a blog

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. 

...