Table Of Contents

How to Use Elementor Tabs Widget

Elementor tabs widget is a graphical control element. The important thing is that it allows multiple documents or panels within a single window. Most importantly, it works as a navigational widget for switching between sets of documents.

Here, I’ll give you some instructions on the basis of sections and pictures detailed to help you get started.

So, let’s know how to use Tabs Widget by Element pack.

To Insert Widget

inserting Elementor tabs widget

Inserting the widget is just a matter of drag and dropping. As you see in the screenshot above, drag the tabs widget Elementor inside your page.

Content Tab

Using the Content tab, you’ll be able to make a layout of a particular part (such as Tabs) of a website. And in this regard, some handy sections in the tab will assist you a lot in making the WordPress tabs.


tabs widget content

Step-1: After dragging and dropping the widget in a new section, you will get a list group. The list is not limited, you can add a new list in the group by just clicking on the ADD ITEM button on the tabs widget.

tabs widget 3 - BdThemes

Step-2: You can edit every single list item. Simply, Go to the Tabs and hit your any desire tab items (Tab #1) > Title & Subtitle > > Icon > External Link.

tabs widget 4 - BdThemes

Step-3: With the Custom source, you can select two more sources like Elementor Template and AE Template.

For example, go to Select Source > select Elementor Template > Select Template > Nested Accordion in Accordion( choose your one).

N.B: If Elementor Template is new to you, visit Nested Tabs.

tabs widget 5 - BdThemes

Step-4: One more important thing is that the Tabs section will allow you to set Alignment, Nav Spacing, and Content Spacing.


tabs widget 6 - BdThemes

Go to the Content tab > Additional > and check all the controls.

Style Tab

Now, let’s work with the Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


This section will let you set Background Type(classic/ gradient), Color, Image, Padding, Border Type, Radius, Box Shadow.

In connection with the mode of Normal and Active, you’ll get able to set Background Type (classic/ gradient), Box Shadow, Color and etc.


normal mode tabs widget Elementor

Go to the Style tab > Tab > Normal mode.


Active tabs

Go to the Style tab > Tab > Active mode.

tabs widget style

But, Hover mode will let you set Border Type (classic/ gradient), and Color,

Just go to the Style tab > Tab > Hover mode.

Sub Title

There are three modes (Normal, Hover, and Active). In the matter of all the modes, you’ll be able to style the section Subtitle part of the tabs widget.

Sub title style


Through this section, you can style the content.

tabs widget background

Just go to the Style tab > Content.


Here you will also find three modes (Normal, Hover, and Active). Regarding all the modes, you’ll be able to style the Icon of the tabs widget Elementor.

icon style of the Elementor tabs widget

Simply, go to the Style tab > Icon.


Video Assist

To sum up, it seems you’ve noticed how to use our Tabs Widget by Element Pack. It is easy but a little bit tricky. Watch Video Assist and to get more ideas about the usage of the Elementor tabs widget, take a tour of the demo page.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.