How to Display Elementor Slider from Templates

In this article you’re going to learn how to display Elementor slider from templates.

You can use this Elementor slider to display for example your featured products, testimonials, reviews etc. This carousel slider will enable you to add as many templates as you wish!

It also gives you more customization abilities for navigation arrows, you can change the slider from horizontal slider to vertical slider, and you can set it up to work very well on all devices.

Below is a video tutorial to follow along with or you can simply skip straight to the article.

Video

Please note that 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.

What you’ll need to display elementor slider from templates

·         Free version of Premium Addons for Elementor, you can find this in your WordPress repository. This plugin will enable you to use the Carousel Widget.

·         Templates to use in your slider. You will learn how to create these in step 2.

Step 1: Activating the Slides Widget

To start off, go to your Dashboard and create a new page; give it a name, then click the Edit with Elementor button.

Inside the Elementor Editor, go to the Slides Widget and drag it to your editor window. The slides widget however only allows you a few options, that is; to add content as text, and to style, it does not provide you with the option to load in Elementor templates.

(00:48)

75stZL5oPE5HGbp8vyNglJzseUMthWNX eSafjQUUO5kmL1xQhXY9dxlL43LF749RTyhuwUnDhkOa9PdCN2wRY46au9cEsW CLpS kmZYlEEcfrknJb MI4fjXum paH TKlG4hC

Step 2: Activating Carousel Widget

In order to be able to load your templates into the slides widget, you need a third party addon from the Premium Addons for Elementor which you should have installed from earlier and it should be in your plugins.

Under this Premium Addons for Elementor, go to widgets and enable the carousel widget (make sure it is turned on or it is green). By enabling the carousel widget you will now be able to access it in the Editor. (01:18)

LdXpFr3BGEYTCyFnY1A2eYCtBVj0Eu5SV6DImyQYPBMeWgaOQbISTGz9 i8RsUMPyCUnlIGpDmLRV73hgX9cAjx3vaR5kwktSZd8quoJjbDR Etik88 3EchGFJBTKf

After activating your carousel widget you go back to the Editor, go to the widgets section and search for the carousel widget, get the Premium Carousel and drag it to your edit window. (01:34)

s5gK1eq2LZ5PLPOC8HOwGlclPFS2XoJ

Your carousel widget is now ready for use!

Read: Zoom Image on Hover Effect with CSS in Elementor [PRO]

Step 3: Loading Templates in Slider

Now that your carousel widget is ready, you need to load templates into it.

For starters, you need to create the templates that you’ll be showcasing in the carousel. To do this:

Go back to Elementor menu, go to the templates option on the left side, click the “Add new” button, choose template type to be section then give it a name and click the “create template” button. (1:50)

G7McNVJp9Wis 9m9bWgysYPsyA5L3I4nGMw1Z0nlYtFZRA 7m5aC1n3wHVrojr7RCesZdIVypwpv6p uKeHRoo4z9H HA3JJCM9 QUXGacS66z0lDKt0gEeAKzayacjw14bguULM

Now you can start creating your section and add any content you want to display in your section/template, then you can click on the edit section button and say “save as template”, give it a name and save. (02:02)

7DG cBc51FrFpi24L eO V2oxET bB42 1Rk5Rf1t1AS8HrLAM3XUNg3C9tOAvG52TICiINvb9QabVvAqAEABlDaxXDDe pt9GHLAhZUN02DWy WetI4w70RgVpQX5AmhXFdozhP

(02:16)

CNPXbZOpAWbMdU9e8EUh 2UM G22eAda7dn9FAaOU3twRaONp4mEaN8PhRGlrX4

 This will save the new template inside the templates folder and that way you’ll be able to echo it inside the carousel.

Make sure the section you’ve created is responsive on all devices so that it can be viewed on mobile devices too. (02:31)

Is1VoQWPQPpMu4SxVq jZ7T9s PZ190 l6BH1uRjhFlIOlIzn9daazMWvotsiSJBiZGV4sVqB5bx 4uB7u3iwIQTqbj4ps rnbuNG5XMyxkM G0joUhpbIIHFJHeY2836rCQu4hg

After creating all your templates and adding content to your satisfaction, the next step is to:

Go to content type, select repeater, go to templates option down and click “add item”, here you can add all your created templates that you want to display in your slider.

(02:58)

evIJKbOLjUfWUTLb08LWr6oH

Under the Layout option; make sure the section is full width if your templates are full width. Next, remove column gap so that there’s no space on top and on the sides of the column.

Click Publish and have a look!

You may also be interested in checking out how to use elementor widgets to navigate carousel slides

Step 4: Adding Navigation Arrows

Now that your slider is up and running, you need to now work on the navigation arrows. To do this:

Go to the editor and select Premium Carousel widget, go to the left side, here turn off the dots and turn on the arrows for navigation. (03:44)

Under style, change the arrow colour to white and grey colour on hover.

Edit size to 30 pixels and position it to your preference.

 Go back to Editor and click Update then go to the live page and view the result.

Under the content option you can also set your slider settings to any way you want them to transition in and out. (04:28)

jr0sIJylazI7U4fq9nMMGGt1enIOb7fq16NO7F4T4KBXVOTqu8KvirDurkbOIRB1K7CqbY77KJo62cD51Pa

If you want to you can as well use your template sections as sliders for featured products, reviews or testimonials. You can do this by just following the above steps, but below is a summary of the steps:

·         Add a new section

·         Make it full width

·         Go to widgets and drag premium carousel to editor

·         Go to contents, select repeater and add your product templates

·         Go to navigation and activate dots instead of arrows, position the dots on the side of  the slides

·         Enable ripple effect

·         Go to style and choose the type of dots you want, you can also choose an icon from the icons library or use custom icons. You may even choose to disable the icons or use default icon

·         Set the colors to your preference

4b Q1X8c1EmahP s5TNZvlFRv28qTo3u8hIUa7 OySlfwWhyHXgFULpqSivuzIDiF1DJMptEWBrXlIDv jCkxTQ d Edpdj6eE8prHwtdK8eArplzKPZTebkdnNvrOYHaaN4VHtX

You now have your featured products slider ready!

You can also change navigation of slides from horizontal to vertical. Do this by going to type, switch from horizontal to vertical.

Now you can load your slides into Elementor using templates! Hope you’ve found this tutorial helpful.

Remember to subscribe to my YouTube channel and my newsletter.

For any suggestions or questions about this tutorial please let me know in the comments section below.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users