In this tutorial, we’ll explore the Slides widget. This widget allows you to present multiple messages on your site, such as different services or seasonal promotions, using an engaging presentation effect.
This tutorial will cover:
✔︎ How to create and style slides
✔︎ The different possible styles for using this widget
✔︎ Alternative design options for this widget
✔︎ And much more!
Hey there. It’s Aviva from Elementor.
In this tutorial, we’ll explore the Slides widget. This widget allows you to present multiple messages on your site, such as different services or seasonal promotions, using an engaging presentation effect.
In this example, we’ll use the Slides widget to display different products on sale in this Ecommerce landing page.
If you’d like to follow along, you can download this template from the Elementor Landing Pages library.
First, let’s delete this widget and start from scratch . As you saw earlier, the slides cover the entire screen. To recreate this style, add a new section with one column in it, and set it to full width.
Next, click the widgets icon, and search for the Slides widget..
Drag the widget and place it in the editor.
By default, the Slides widget contains three slides with place-holder text which you’ll find here.
Managing slides is simple. You can add new slides, duplicate existing ones, or deletes slides you don’t need.
You can add and edit as many slides as you want, but for a clear and concise message, we recommend keeping it short and sweet.
Click a slide to edit its content. There are three tabbed sections: background, content, and style. Let’s start with background.
Set the slide background color to a custom or global color, or choose an image, as I’m doing here. When using an image, choose its size from the dropdown; the image can fully cover the slide, be contained within the slide, or set to auto, which displays the image in its original size
Add more impact to your slides, by activating the Ken Burns effect, and choose its zoom direction from the dropdown. You can also add a background overlay and choose between different blending options.
Next, click on Content to edit the slide’s title, description, and button details.
By default, all slides inherit the style settings you set in the widget’s main style tab, but you can set a custom unique style for a specific slide, by clicking the style sub-tab, and activating the toggle.
I’ll add another slide by duplicating this o ne. The text is a bit hard to read, so I’ll add an overlay on the image to add contrast. Next, I’ll change the content. Great!.
Next, drag the slider to set the slide height, or type in an exact value.
This icon indicates that the value, or setting next to it, can be adjusted for different devices, such as tablets, and mobile phones.
Next, expand the Slider Options section to control the slides navigation and transition behavior.
Choose the navigation settings that best suit your slides. By default, there are navigation arrows on the sides, and dots at the bottom, but you can remove either or both of them to fit your needs.
By default the slides play automatically. I’ll switch it to NO to keep them from playing throughout this tutorial. And at the end, I’ll switch it back on to demonstrate how it works.
If you do not want the slides to play automatically, switch the toggle to NO. I’ll leave it on YES. There are also toggles to control the transitioning between slides. You can pause the slideshow on user mouse hover as well as interaction.
Set the autoplay speed in milliseconds and set the slides to repeat.
Below, you’ll find more helpful transition options, such as the type of transition, which controls the animation between transitions, speed, and content animation, as shown here.
Okay, now let’s head over to the Style tab, and adjust the design style of the individual elements. As mentioned before, this will affect every slide, unless a custom style has been activated. We’ll start with the Slides options.
First, adjust the content width, and set the Slides padding, to add space between the content and the edge of the slide. Next, set the content horizontal and vertical positions, and change the text alignment to your liking. You can also add a text-shadow, to make your Slide text pop against the background. In this case, the images already contrast well, so it’s not necessary.
Expand the title section, and set the spacing for the title. You can change the color, here. Then set the typography. I’m using a preset global font. For more information about global styles, check out our dedicated tutorial, linked in the description below.
If your slides use descriptions, you can style them here. Since these slides don’t have any descriptions, we continue straight to the button. Set the size, typography, and any other desired styling options.
For even more interactivity, you can add a hover style!
Almost done – Expand the navigation options and adjust the settings, accordingly.
We finished styling the Slides, but as you can see, there’s a small gap between the Slides widget and the edge of the screen. Let’s take care of that.
Click the column, go to Advanced, and set the padding to zero.
Now I’ll go back and reactivate the autoplay.
