How To Use Elementor Elements To Navigate Through Tabs Widget

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.

First of all, you will need Premium Addons PRO plugin installed and activated on your website.

Drag and drop Elementor tabs widget to the page.

Elementor Tabs Widget
Elementor Tabs Widget

Navigate to widget settings -> Tabs -> Add Item.

Add Tabs to Elementor Tabs Widget
Add Tabs to Elementor Tabs Widget

Add content to tabs, you can select from the text editor or Elementor templates. For further clarification about creating a template for Elementor, please check this article.

Select Content to Show in Elementor Tabs
Select Content to Show in Elementor Tabs

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.

Assign ID to Tabs in Elementor Tabs Widget
Assign ID to Tabs in Elementor Tabs Widget

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 it’s the same as the one we 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 ‘#’.

Assign ID to Elementor Element for Elementor Tabs Custom Navigation
Assign ID to Elementor Element for Elementor Tabs Custom Navigation

Now, when you click on the navigation button, tabs widget will navigate to the tab linked to the clicked button.

Premium Tabs Widget Custom Navigation
Premium Tabs Widget Custom Navigation

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.