You can use Elementor to create a beautiful web page on your WordPress site without having to deal with CSS or HTML code. By default, Elementor gives you about 90 widgets that you can use to create your web page. If they are not enough, you can install an add-on to get extra widgets. An Elementor add-on contains a set of widgets developed by third-party developers. Coupled with the Elementor native widgets, you will have more freedom to create a creative web page.
JetTabs is a premium Elementor add-on developed by Crocoblock. Installing this add-on, you will have four additional widgets on your Elementor: Switcher, Tabs, Image Accordion, and Classic Accordion.
In this article, we will show you how to use the Tabs widget — which is the main widget of the add-on — to create in-page navigation. Here is what we are going to accomplish.
Elementor itself actually already has the Tabs widget. However, the native Tabs widget of Elementor comes with limited enough setting options. It doesn’t allow you to insert content from a template like the Tabs widget of JetTabs. On the example on the screencast above, we use the Tabs widget of JetTabs to add a navigation feature on a page. This navigation allows users/visitors to easily find a page builder template based on the page builder they use (Elementor and Divi Builder in this case). You can see the actual example here.
In this example, we will add the content to each tab from a template. You can also add the content from the editor.
Getting started
First off, create a new page or post and edit it with Elementor. On the Elementor editor, create a section by clicking the plus button and select your preferred structure. Add the Tabs widget of JetTabs by dragging it from the left panel to the canvas area.
Once the Tabs is added, go to the left panel. As you can see, the Tabs widget provides three default tabs. To add the content to each tab, simply open the tab you want to add the content to and go to the Content Type section. To add the content from a template, select Template from the dropdown menu and choose an existing template on your Elementor library.
To change the tab label, you can go to the Label section.
Repeat the steps above to add content to the second tabs and the third tabs. If you want to add more tabs, you can simply click the ADD ITEM button.
Customizing the tabs
Your tabs lie on the top side by default. You can change this default position from the Settings option under the Content tab. You can change the position of the tabs whether on the bottom, on the right or on the left. You can also set the animation effect as well as the tabs event (the action to show each tab’s content. Whether click or hover).
If you prefer to place the tabs on the top, you might want to set the alignment. To do so, you can open the Tabs Control option under the Style tab. Set the alignment on the Tabs Alignment section. From here, you can also set the tab background by clicking the color selector on the Background Type section.
For more detailed customizations, you can open the Tabs Control Item option under the Style tab. Here, you can set the typography of the tab labels (font size, font style, font color, and so son), set the background color, set the border color, and set the border radius. You can customize each tab state (normal, hover, and active).
You can play around with the left panel to customize your tabs.
Just for your information, JetTabs is a premium Elementor add-on that costs $15 per year. On some Elementor-based WordPress themes like Monstroid2, you can get the lifetime license of JetTabs, along with other Elementor add-ons developed by Crocoblock like JetElements, JetTricks, JetBlocks, JetWooBuilder, JetMenu, and JetPopup.