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.
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 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 ».
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.
Easily create your website with Elementor
Elementor lets you create Easily and Free any website or blog design with a professional look. Stop paying a lot for a website you can do yourself.
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.
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.
Now, I would like to float Snoopy, for that, go to " loop And on the drop-down option, choose " Wave ". Now Snoopy floats:
Do you want to sell your products on the internet?
Download WooCommerce for free, the best e-commerce plugins to sell your physical and digital products on WordPress and easily create your online store. Perfect for beginners.
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.
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 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.
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.
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.
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.
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.
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.
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
- 6 WordPress plugins to ensure RGPD compliance of a blog
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.
Do not hesitate to share with your friends on your favorite social networks.