There are lots of WordPress sliders out there, but the best solution is definitely Elementor Slides. And, technically, it’s not even a standalone plugin. Elementor Slides is built into the Elementor Pro plugin, which offers many ‘widgets’ (drag and drop blocks of functionality) built into one. This means that you don’t have to use an extra slider plugin and slow down your website.
The Elementor visual drag and drop builder is also incredibly user-friendly, and you don’t need to be technical to use it at all! Not only that, but we’re going to make it even easier for you by going through how to do it, step by step.
There are two options for creating sliders with Elementor Slides. You can use the slides widget, or embed a smaller background slideshow on any sections within Elementor.
How to set up a simple slider with the Elementor Slides widget
First of all, make sure you have Elementor Pro installed and activated. Then, on your WordPress dashboard, click on create a new post or page (or you can add a slider to an existing post or page).
Click on ‘Edit with Elementor’ to get to the Elementor builder.
To find the Slides widget in the widgets section, search for it in the search bar. Once it comes up, simply drag and drop the widget onto the page within a section.
You’ll then see Elementor’s default slider, which you can start to customise and make your own. You can edit the design of each slide individually, which is organised into three sections: Background, Content, and Style.
Background
In the Background section, the first thing we’ll look at is adding a background image to your slider (as an example, we’re going to create a slider for a travel company).
To upload an image, click on a slide in the content tab, and hover your mouse over the grey box which is under image. You can then click on the box to choose an image.
When you’ve uploaded a new image, or chosen one from your library, click on Insert Media to add it to your slider.
Once you’ve done this you’ll see you have a couple of different editing options for the image.
First of all, you can choose the size of your image. For this example, we’ve chosen the image to cover the whole space of the slide, by selecting Cover.
The next option is to choose whether or not you want the ‘Ken Burns Effect’. By turning the button to yes your image will start to display a zoom effect, which you can customise to either zoom in or zoom out. This is a really cool effect, that can really make your slideshow pop out to your users.
And finally, you have the option to choose a background overlay. This basically adds a layer of colour on top of your image (which you can edit the opacity of) so that your text is more visible. We recommend doing this so that it is easier for your website users to read your content.
Content
Switching to the Content section, you can start to add text to your slide. You can add a title, a description, and edit the text of the button in each slide.
You can also add a link to the page you want the button to take your users to. This is one of the most crucial aspects of your slider (so don’t forget to do this!).
Style
Finally, the Style section gives you the option to custom style your slides horizontal position, vertical position, text alignment, content colour and text shadow. This customising is specific for the slide you are customising, and so won’t affect the rest of your slides. For consistency, we recommend that you don’t do this and, instead, edit the style as a whole at the end (which we will show you how to do).
After you’ve set up your first slide, you can edit the rest of the slides in exactly the same way.
You can also easily edit the height of your slides on desktop, tablet and mobile. Although Elementor is automatically responsive, it’s good to switch between the different views to check this, throughout your editing.
At the top of the Slides editor, you can then edit the style of your slideshow on a widget level. Clicking on the Style section of the widget, directly below Edit Sliders you will be able to add padding, edit horizontal/vertical position, and edit text alignment/text shadow.
In the other sub sections, you can edit your text and typography, customise any colours, add a border, change your button size, change the arrow size, and much more. The great thing about Elementor is that you can do everything visually. This visual builder means that you can test and play around with all of these settings, without any development experience, and simply just choose whatever looks best to you.
Advanced
In the Advanced section of the widget editor, there are even more settings that you can use to customise your slideshow. In the Motion Effects sub section, for example, you can choose from 36 different entrance animations to personalise your slideshow.
Going back to the Content widget editor, you can also control your overall slideshow settings. Some of the options include turning autoplay on or off, turning infinite loop on or off, and adding a pause on hover/ pause on interaction (so your slideshow will stop if your website users interact with it).
You can also choose between having a zoom or slide transition effect, and the speed of transition (we recommend slowing down your transition for the zoom effect, otherwise you won’t be able to see it).
And that’s it! That’s how easy it is to set up a simple slider using Elementor Slides.
How to set up a background slideshow on Elementor
Creating a background slideshow in Elementor is similar to using the Slides widget, there are just less customisation options and you have less control over your slideshow.
You can set up a background slideshow in any section on Elementor. To do this, simply click on the Style tab of the section you want to add the slideshow to. Under Background choose the Slideshow option.
You can then add images to your slideshow, turn on the ‘Ken Burns Effect’, turn infinite loop on or off, and there’s a few more small customisation options from the Slides widget.
As mentioned, there are fewer customisation options for creating a background slideshow, as opposed to the Slides widget, but it is still a great built in design functionality. And just like any section in Elementor, you can then add any elements/ widgets on top of your slideshow (the only difference is that you have a slideshow as the background, instead of an image)
And, that’s it! Two simple ways to create a slider on Elementor, and the easiest ways on WordPress! If want to know more, then Elementor have tutorials in their Elementor Academy.
Or you could check out our course on Udemy WP The Easy Way, where we go into more depth on creating a slideshow with Elementor, there’s a detailed video tutorial that walks through both processes step by step.
