Thanks to the intuitive visual editor of Elementor, you can create beautiful pages on your WordPress site without dealing with CSS or HTML. Elementor — as you might have known — comes with tons of design elements (called widgets). Including the Slides widget that you can use to add a slider to the page you are working on. In this post, we will show you how to use the widget to add an image slider to an Elementor page.

Just for information that the Slides widget is only available on Elementor Pro. That said, you need to upgrade your Elementor to the pro version in case you haven’t don so.

Is it possible to add an image slider on Elementor Free? If you use Elementor Free, you can install an add-on. One of the Elementor add-ons you can install is Prime Slider. No worries, you don’t need to spend extra money to add an image slider using Prime Slider.

Adding an image slider on Elementor Pro

As mentioned earlier, if you have upgraded your Elementor to the pro version, you can use the Slides widget to add a slider to a page as the widget is only available on the Elementor (learn more Elementor Free vs Elementor Pro). Start by creating a new page (Pages -> Add New) and edit it with Elementor. Of course, you can also edit an existing page. On the Elementor editor, drag the Slides widget from the left panel to the canvas area.

As you can see, the Slides widget will automatically create a slider. The slider consists of three slides. You can go to the settings panel to make the settings to the slider. To add a new slide, you can simply click the ADD ITEM button. To delete an existing slide, you can click the X icon on the slide you want to delete. To set the height of the slide, you can simply set the number on the Height option.

To edit the content of each slide, you can open it by simply clicking it. To add an image, click the image selector on the BACKGROUND tab and select the image you want to use.

Once the image is added, you will see three new setting options beneath the image. Size, Ken Burns Effect, and Background Overlay. Simply set the settings accordingly.

To edit the content of the slide (text content more precisely) you can open the CONTENT tab. If you want the slide to contains no text content (image only), you can simply delete the default text on all fields.

If you want to apply a custom style to the current slide, you can open the STYLE tab and enable the Custom option.

You can repeat the steps above to other slides of the slider. Once done, open the Slider Options block. From this block, you can set the navigation style, enable/disable autoplay, set autoplay speed, set the transition style, and so on.

Styling up the slider

To further style up the slider, you can switch to the Style tab on the Elementor settings panel. You can open this tab to style up every component of the slider. There are 5 styling options blocks you can open:

• Slides

You can open this block to set the content width, padding, horizontal position, vertical position, text align, and text shadow. If you want to create an image-only slider (and have deleted the text content), you can ignore this block.

• Title

You can open this block to set the space between the title of the content and description, text color of the title, and the typography (font family, font size, font style, and so on). You can also ignore this block you prefer to create an image-only slider.

• Description

You can open this block to set the space between the content description and the button, text color of the description as well as the typography. Simply ignore this block if you prefer to create an image-only slider.

• Button

From this block, you can customize the button such as setting the size, text color, typography, border radius, border color, border size, and so on. Again, you can simply ignore this block if you want to create an image-only slider.

• Navigation

You can open this block to customize the navigation (both the dots and arrows). You can set the navigation size, color, and position.

Once done, you can click the PUBLISH/UPDATE button to publish/update your page.

Note: If you want to create a full-width slider, you can make the settings to the section that hosts the Slides widget. You can set the Content Width to Boxed and Columns Gap to No Gap. Read this article to learn more.

Adding an image slider on Elementor Free

One of the add-ons you can install if you want to add an image slider to Elementor Free is Prime Slider. It is a freemium add-on and the widgets to add an image slider are available on the free version. Once installed and activated, you will have the following new widgets on your Elementor:

• Blog
• Dragon
• Flogia
• General
• Isolate
• Multiscroll
• Pagepiling
• WooCommerce

The widgets that you can use to create an image slider are Dragon and General. You can download the free version of Prime Slider on the WordPress plugin directory.

Once Prime Slider is installed and activated, create a new page (Pages -> Add New) and edit it with Elementor. On the Elementor editor, drag either the Dragon or General widget to the canvas area (we use the General widget in this example).

Go to the settings panel to make the settings. First, you might want to change the skin and the aspect ratio of the slider. You can do so on the Layout block under the Content tab. From this block, you can also enable/disable the compoents of the slider such as logo, menu, title, button, and so on.

If you prefer to enable the logo, menu, and offcanvas on the slider, you can open the Header block to customize it. Otherwise, you can ignore this block and open the Sliders block to edit the content of the slides. Open a slide (by clicking it) to edit its content. To add an image, you can set the background to Image and select the image you want to use.

If you want to create an image-only slider, you can simply delete the default text content on each field.

Repeat the steps on other slides. If you want to add more slides, you can simply click the ADD ITEM button. To remove an existing slide, simply click the X icon on the slide you want to remove.

Next, open the Animation block to set the animation effects of the slider. There are several options you can set such as the loop, autoplay, autoplay interval, animation speed, and so on.

Styling up the slider

Once done with the basic settings on the Content tab, you can switch to the Style tab to further style up your slider. There are 3 styling option blocks you open to style the slider components.

• Header

If you enable the header components (logo, menu, offcanvas), you can open this block to change the background.

• Sliders

You can open this block to apply an overlay color of the slides. You can also enable the Advanced Style option to make advanced styling.

• Navigation

You can open this block to customize the navigation of the slider (both the arrows and dots). You can set the color of the dots as well as the arrows here. You can use different colors for both the normal state and hover state.

That’s it. You can publish/update your page once you are done making the settings and styling.

In addition to Prime Slider, you can also use a dedicated slider plugin like Smart Slider 3 to add a slider to Elementor Free. The Smart Slider 3 plugin (available as a freemium plugin) offers a widget to allow you to attach a slider to an Elementor page effortlessly.