How To Create Tabs For Elementor (and some Examples)


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

Here are some great uses of tabs that you can think about incorporating into your website. You can pretty much do any of the examples below with Elementor Pro and third-party add-ons. 
Product display with dynamically generated review content for the Phillips Avent breast pump.
Use ajax search fields with product information like Specialized Covers. There is also a tab displaying comparison between similar products.
Display brand information to advertise yoru company
A ranked checklist displaying all the recommended products. This site used tabs to separate product categories.
Use tabs to separate different types of classes so that it is organized for members to easily book the class they want.
Use tabs to display user information in an organized manner.
Share on Facebook
Tweet this article
Share on LinkedIn
Email this article

More to explorer