The Tabs widget allows you to divide your information into horizontal or vertical tabs.
Using the Elementor Tabs widget is one approach to organizing your content. Tabbed content allows your users to navigate between different areas of content. This feature removes the need for visitors to browse different information without having to navigate to a different page or scroll down the page. In this Elementor tutorial, we are going to walk you through creating elegant tabs. But before setting your tabs, be sure to read about the best practices for tabs widget below.
Elementor Tabs 101
In Elementor there are actually two tab widgets you can use. There is the regular Tabs widget and then there is the Accordion widget, which are tabs that run vertically.
You should use the Tabs widget when you only have 3-5 tabs. But when you have more than 5 tabs, it is probably better to use the Accordion widget as there is no width constraint. A good use of the Accordion widget is when presenting FAQs. In fact, Elementor has an option to markup your Accordion as an FAQ schema so Google knows that specific Accordion tab is an FAQ.
With Elementor tabs, you can do much more than just insert text and pictures. You can insert dynamic information, links, buttons, icons, etc.
How to Add Tabs in Elementor Tutorial
Step 1: From the left-side panel, under Elements, search for and select the Tabs widget.
Drag and drop the widget onto a page section
Step 2: Set the Elementor Elegant Tabs
Content > Tabs
Under the tabs item
1. Enter a title and content for each tab
2. Click on the Add Item button to add another tab
3. Choose Horizontal or Vertical tabs
4. Choose from Start, Center, End, or Justified
Step 3: Customize Tabs Styles
You can change the styles of the tabs under the Style tab.
To customize the tabs
1. Under the tabs, set the border width, border color, and background color.
2. Select the color, active color, typography, text stroke, and text-shadow for the Title and the Content.
Elementor Tabs With Images
Step 1: Click Add Media to add an image
To add an image choose from the media library
Step 2: Customize the image
Set the position and the alignment of your image tab. 
Elementor Tabs Widget on Mobile
To change the Tabs widget for mobile:
Step 1: Go to Responsive Mode
Step 2: In the top navigation bar, click the device view to switch the view to mobile.
Step 3: You can choose whether to show or hide your tabs widget in a responsive tab on the desktop, tablet, or mobile.
After you’ve finished configuring the widget, remember to save the changes. To do so, go to the bottom of the page and click the Save Draft button.
When to Use Tabs in Web Design and Some Examples
Here are some best practices or times when using tabs in web design is a good idea.
1. Use it to showcase different categories or groups – If you offer different tiers of service, you can use each tab to feature a different tier. Or you may want to highlight the different options of a service plan. A good example of this is when restaurants use tabs to display different types of food offerings such as appetizers, entrees, beverages, etc.
2. Prevent information overload – When you have a lot of information, products, or offerings, it can be frustrating for the customer to have to sift or scroll through a lot just to get to what they want. So in order to declutter your site and allow the users to choose exactly what they want, you can use tabs to organize your content. For instance, if you run a fitness studio that offers different types of group classes, then you can put the enrollment for each type of group class in their respective tabs (yoga, pilates, barre, etc)
3. Use it to declutter the website – By showing only one thing at a time, it declutters your website and allows your visitors to concentrate on one thing at a time.
4. Add interactivity to your site – Sometimes you just want to break up the monotony of a boring text-based site. Adding text is a high-leverage way to add interactivity to your site without slowing it down your site.
5. Improve navigation – Using tabs can improve navigation. This can be used in an e-commerce site and a separate tab can be used for each stage of the customer purchasing journey.
6. Display dynamic content – If you want to keep dynamic content (like user reviews) separate from a product specs page, you can do so with tabs. You can do something like this easily with Elementor now as the page builder now has a dynamic query loop builder to automatically display dynamically generated content.
Examples of Great Uses of Tabs
