With just small tricks you can always bring magic to your design. Today, we will have a quick guide to creating custom navigation for Elementor Tabs widget tabs.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Drag and drop Elementor tabs widget to the page.
Navigate to widget settings -> Tabs -> Add Item.
Add content to tabs, you can select from the text editor or Elementor templates. For further information about creating a template for Elementor, please check this article.
Assign an ID for the tab. For example #tab-1 from Custom Navigation Element Selector option. This ID will be used later to link the element you want to use to navigate through the tabs. Please make sure that IDs are inserted with the hash ‘#’.
Insert the element you want to use to navigate through the tabs panel. We will use a button in this case. All you need to do is navigate to widget settings -> Advanced tab -> insert a CSS ID and make sure that added before in Custom Navigation Element Selector. In this example, we will use “tab-1”. Please make sure that IDs are inserted without the hash ‘#’.
Now, Elementor Tabs widget tabs will be navigated using Elementor button widget or any Elementor elements that you’ve assigned a CSS ID to it.
If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁
