In this article we are going to show you how you can use Elementor widgets to navigate carousel slides. All you’ll have to do is simply create custom navigation elements and link them up to the carousel slides. You’ll be able to navigate through your carousel slides with any element like icons, buttons or even text widgets.
Below is a video tutorial to follow along with or simply skip to article.
Video
To create custom navigation elements, here is what you need:
- Premium Addons for Elementor, this is where you’ll find the Carousel Widget. The Premium Addons for Elementor can be found in your plugins section, all you have to do is activate it. To do this you can simply follow the steps below:
- Go to your WordPress plugins
- Add a new plugin
- Add the free version Premium Addons for Elementor. After installing it, just make sure the Carousel Widget is active (in green), or simple look it up in the widgets area and so.
- Elementor Pro to enable you at use Custom CSS.
- Templates to use in your carousel widget. You can create your templates or save Elementor sections as templates.
Step 1. Activate and add the Carousel Widget
In your Elementor Dashboard create a new page and give it a name, for example (custom slider) (00:26)
After giving it a name click the Publish button on the upper right side, and then click the Edit with Elementor button to start editing the widget. (00:44)
Now that we have created our page, next thing to do is to activate the Carousel widget. To do this, click on it and drag it into your editor. (00:49)
Step 2: Adding Templates
The next step is to create your templates or save your sections as templates.
To save a section as template; right click on the section and click save as template, now just give it a name. (1:24)
After saving your templates they will go to the Templates Library.
To view your templates library simply CMD+E or CTRL+ E and go to Templates to view your saved templates. These are the templates you will load into your slider/widget.
Step 3: Add Carousel Repeater
The next step is to go back to your editor and select your Premium Carousel
Go to Content type and select repeater
Load in your saved templates; for example here we load Mountain Climbing Training, after adding the first one , add another item which is Ocean Games, and finally the last template; Reviews. (01:58)
If your templates are full width like we have here, then go back to the main section on the left and set Content Width to Full Width, disable the column gaps.
We are going to be using Custom navigation in this case so we disable the navigation Dots and Arrows since we don’t need them.
For the Slides; we are going disable Infinite Loop and the Autoplay slides because we’re going to use Button Elements.
To Read How to Display Elementor Slider from Templates
Step 4: Assign An Elementor Selector
Our next step is to assign an element selector for each of the slides because that’s what we’re going to connect with our button element so that we’re able to navigate to a certain slide. (02:52)
So we assign “Mountain climbing” as #slide 1 (make sure to add a hash tag) (02:58)
Go to the next templates and add #Slide 2 and then #Slide 3
After adding Element selector we now start adding Buttons; these will enable us to navigate through the slides. We do this by adding a new section, 1 column or 3 column section is okay. (03:23)
Go to the Widgets (03:27)
Select Button widget and name it (in this case “Mountain climbing Training”)
Go to Advanced and add a CSS ID. To do this go to element selector, copy it, go to editor and paste the element selector under CSS ID, that is Slide-1 but without hash tag (#). (03:59)
We’ve now created our first element button; you can do some styling under Edit Button and under Typography. (04:10)
The next step is to duplicate the button to create the remaining 2 elements (in our case Ocean games with CSS ID Slide-2, and Reviews with CSS ID Slide-3 (remember, no hash tag).
After this you click Update page and go to Preview page on the right side.
The slider should change to the different templates when you click on each button.
Step 6: Adding Custom Gradient to the Buttons Widgets
You can also make your buttons a little more interesting for example putting a hover effect, adding gradient and positioning them, to do this you can: (05:47)
- Select the Button
- Go to Advanced to add Custom CSS
Remember, to add Custom CSS to your elements you should have Elementor Pro.
So to add Custom CSS for that button you copy the class (btn-grad), that’s for gradient button, go to advanced tab and add a custom css class. (05:58)
Go to style and remove background color or make it transparent.
Do the same for the other buttons: Select button> go to custom css > go to advanced and paste custom css > go to style and remove background colour.
Now your gradient buttons should be done!
Step 6: Positioning the Buttons Widgets
Go to the Elementor editor
Move the buttons into sections by simply dragging them. (07:26)
Select button, go to advanced, go to positioning; change width to “inline auto”, then make positioning “absolute”.
Now you can position the buttons to where you want them to be. And when you click on them they come out looking nice and neat!
You could also change the orientation for your carousel from horizontal to vertical view.
In Closing
This was such an interesting tutorial to make as it gives you more freedom to showcase your website content, navigate and position in ways you can only imagine. I have to mention that the digits in brackets eg(00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Make sure you subscribe to my youtube channel and newsletter so you don’t miss out on this and more content to come straight into your inbox.
If you got questions or suggestions about this tutorial, let me know down in the comments.
