How to Use Elementor Widgets to Navigate Carousel Slides

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

What you’ll need to use Elementor Widgets to Navigate Carousel Slides

To create custom navigation elements, here is what you need:

  1. 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.
G9tn1ETxgu56dO1eGsVAXPIk uc hB40j7 Cbm7jbvV7RKroUDytNTbm9eHL2EUIUHGuYzbyzZFNHBsWmdd2nrHr9Hbf
  1. Elementor Pro to enable you at use Custom CSS. 
  1. 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) 

OMyAEFO ARQnz3XumCuoMaHO9G9llUDoVLjvsxkEYMyiSDCzyA8S mrhB tDJsio4KwoJAmOfNgsh8G8VlS wdRLziQOOukbsTGR

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)

vLJjPZF1HLbkyidRM28cdJnfkmFkUopwMD0jAcouQtbr9t iVJs06D D7n44nx7lMFBQGUbaZ02EMglVZExHlmO85 CXn4YfXXheqge19jhYvz3U0uZ6nQY4bOPCQFvLSbR2o4Ve

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)

3Q51rZQnXlPRrnlsU1Bic6YDLFi7wnPW3Uw7sTQE9KytijRTvnsyjYFneBMTx n2YVM9DDM 9 FVIMlMlvcBwgkRxFv05eJo qKcHtkY8FBliBH msIMqy5JCHwhsUzSavr1dwXd

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)

zZhwJAIo4YQ9PIBWfBCDWe2PJsWboxJswOUhmokx SS2gbjKbM0KpunvORVOM dhQfGKr8jRM87tuXi6Zh uRUa0fdLT7Edb6mSzdy3skvg9MOeYjTaym6nwhlIQsSOOVJhOn3Zn

So we assign “Mountain climbing” as #slide 1 (make sure to add a hash tag) (02:58)

OkWg6pzjAlFgwOifo867L3OeukxUuYipiWpqXgtifB0d5wlNz0WuvyqGNSjv SCLYHvpiLTr4NrUjzvN9dyIhV 8qo2A2U6Z9thWg2XUH6rlYOk5QBuDM7 FU OefLi0OYn DhrZ

Go to the next templates and add #Slide 2 and then #Slide 3

Step 5: Adding Custom Nav Widgets – Buttons

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)

MYDMqVu 7Sf28kyyNRj0LLHicZhOn7BCxthxIV qsEQrjgUGO7QAM6VIt0trIPWk0VuIuTS9Kkp c2PaAEqa4DXyITiEC0hUr27j941ExLQ4OPL2 xUr7nnxTL9hA9M kh Z2c4p

Go to the Widgets (03:27)

eUI7V6wFbDohoEXUf4aKrw866UyyRIYEFzPwGE4tRL1HRvVxw0g6GL Q N QP AJKsFr9euEGVBmdAGbXV70VvhzOy0rvHnE9num0DjAej3l1hpkcp125C8YjTXjJc9h4b1Hu

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)

oLKGyRF1paQcUJhsKmGiF44eWVinbTAQHoY6xDSZlrqHEu P6hmbiKBIISqMeoBJacg1HVIXybYAHT0hp1GPjYlcjZFkyJCmcNCbEJx73pnix9L6jLVbp

We’ve now created our first element button; you can do some styling under Edit Button and under Typography. (04:10)

XibB8RHj8G0ePPC0WBb6tvqRhkCdmg0KxYS0Dt0XQDqeMIFrfUZBLxkDFL1njQWapNqc4Qf1nrxc2APVuUyfpEG5XRb5OmxD LkVsdDN1bUm3ArefO25c1R sKbdEUtiA7UClihR

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.

Also Read: How to Create a Sticky Transparent Header, Change Logo & Background Color on Scroll in Elementor [PRO]

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
nEdwg7uAAVG19KlzbRz7ebJsVUPBooN3R4ACz1ymHVpC G4rdMKSM8eXPaJt2zHPPatG5aCwO 6t QY85FpCjhIJsi5mOi NxlrbzaGK8but6HhdpkdKHIoS H1I1KaYNt6g57d

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)

x5 Q3z0LCfFwbLOPdQNR6MFxX1v3fkQY a3ZJ48k4xKuWxiaDizMu4CMcb okVKUQtIGxybWOGq eA9WPV0TjzMbm3XOcQ1VF5I0v3VG26vG2 vT5wg7RUCPjLg45O ILcDScX N

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)

n

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.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
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