In this tutorial, you’ll learn how to use the Smart Slider 3 for Elementor to create amazing layer sliders for your Elementor website. 

Smart Slider enables you to create layer sliders within Elementor without using any code. You can add, for example, text, images, headings, and buttons in a single slider, and you can customize your slider and make it responsive on tablet and mobile devices as well.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Create Elementor Sliders using Smart Slider 3 for Elementor

When you check out the smart slider website, you can see the different features it provides. For example, you have templates, you have the option to design your slider, and it also provides you with premade designs to use on your Elementor website.

Tip:

Smart Slider 3 has both the free and pro versions. And you can add as many layers as you want in a single slide, for example, you can add a person’s image, a heading, titles and paragraphs in the same slide.

Smart Slider 3 offers you several features like layers, live preview options where you can live preview a slider before publishing it, the ability to design a slider for a specific device, updates, and more pro features that you can check out and use.

Getting Started with Smart Slider 3 for Free

On your WordPress dashboard, go to Plugins > Add New, search for smart slider 3 then install and activate it (03:15)

After you install and activate it, it will show up on your dashboard menu, click on it and you’ll be taken to the smart slider dashboard (03:29). Here you can view the template library, create a slider, import an already made slider, etc.

Select the Template Library, here you have several free and pro slider template options you can choose from. Let’s try out the Gradient Slider, import it (04:54)

When it’s imported, you can make changes to it to your preference for example you can change the positioning, add arrows, bullets, edit the text, add thumbnails, etc (05:37)

When you’re done just hit the Save button, then it’ll be available in your slider templates and you can use it in your Elementor editor too.

To Read: How to Display Elementor Slider from Templates

Using Smart Slider 3 in Elementor

When you open up your Elementor editor, click the (+) icon to add a new section, go to your Widgets area and search for the smart slider widget, drag it to your section (04:10)

In the popup window, select the slider template that you saved and it will show up in your section (06:44), click the Update button at the bottom, then reload your page to preview your slider.

Tip:

You can move and position your slider section to wherever you want it to appear on your page/website.

To Read: Free Elementor Remote Vertical Carousel Slider by Premium Addons

Create a New Slider using Smart Slider 3

If you prefer creating a new slider to using an already made template, back in your WordPress dashboard select the NEW SLIDER option, give your slider a Name, set the Width and Height you want, under Preset you can choose and option you want, and you can import sample sliders to  get started with, then click the Create button (07:53)

In the next window, you can start adding layers and images to your slider. To add images for example you just click on a slide and choose an image from the Media Library (07:58). You can even add another slide if you want. 

Under Settings,  you can make changes to your slider to your preference, you can set up the framework, fonts, responsive settings, etc.

When you’re done, you can go back to your dashboard, click on the slider menu and choose to preview it (08:23)

If you would like to get the pro version of smart slider 3, there are three different packages you can choose from; for a single website, 10 websites and for an unlimited number of websites, all with one-time payment and lifetime updates.

Also Read: Elementor Image Scroll Effects with Premium Addons (Showcase Mockups, Demos & Portfolios)

In closing

That’s how you can make use of Smart Slider 3 to create advanced layered sliders to use on your Elementor websites without using any code.

For any questions or comments about this or any other tutorial, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.