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)
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)
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)
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)
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)
(02:16)
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)
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)
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
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)
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
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.
