How to Use Fancy Tabs Widget


How to Use Fancy Tabs Widget

Fancy Tabs Widget lets a user show his individual contents(Title, Subtitle, Description, and button). Important thing is that this widget holds a hover event. After hovering every single tab, you’ll be able to present the contents mentioned in the first line. Therefore, let’s see how to use the widget.

To Insert widget

Inserting widget, it is just a matter of drag and dropping. As you see in the screenshot above.

Content Tab

Using the content tab, you can make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.

Fancy Tabs Items

After dragging and dropping the widget in a new section, you will get a list group under the Fancy Tabs Items section. The list not limited, you can add a new list in the group just clicking on the ADD ITEM button.

You can edit every single list item. Simply, hit on the List Item and edit the field provided by the List Item and set Icon Type(icon, image), Icon, Title, Sub Title, Description, Button Text, Button Link included in the list item. 

In a similar fashion, you can edit the rest of the repeaters under the Fancy Tabs Items section.

Only now go to the Content tab > Fancy Tabs Items.

If you need to get the same designed content, you’ll be able to duplicate clicking on the duplicate icon and to delete clicking on the delete icon.

Additional Settings

Simply, go to the Content tab > Additional Settings.

This section will allow you to manipulate Title, Sub Title, Description, and Button. For that, you have to enable or disable the Yes/ No switcher button. Look at the photo above.

Along with default settings, you can rewrite the settings such as Columns, Column Gap(small, large, medium, collapse), Select Event(hover, click), Select Tabs Position(left or right), Content Height Alignment(left, right, center, or justified).

Additionally, since the Element Pack 5.3.0 update, you can change the Icon Area Width for every icon on the display together.

Style Tab

Now, let’s work with 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.

Fancy Tabs


This section holds Content Padding control that will let you set the padding(Top, Right, Bottom, and Left) around the content.

Go to the Style tab > Fancy Tabs> Content.


With the default design, this sub-section will let you set Background Type, Color, Image, Padding, Border Type, Radius, Advance Radius, Box Shadow in the Normal.

Go to the Style tab > Fancy Tabs> Item > Normal.

And when you’ll hover the item, it is possible to change the Background Type, Color, Image, Box Shadow etc under the Hover mode.

Go to the Style tab > Fancy Tabs> Item > Hover.

In connection with the mode of Active, you’ll get able to add the same style as you’ve seen as to Hover mode.

Go to the Style tab > Fancy Tabs> Item > Active.


This section under the mode Normal, Hover and Active will allow you to set the Icon Color and Size, Background Type(classic, gradient), Background Color or Image, Padding, Border Type, Radius, Advanced Radius, Box Shadow, Rotate and Background Rotate.

Go to the Style tab > Icon/Image.

In the matter of Image, you can set Image Size, Image Fullwidth, CSS Filters, Opacity, Transition Duration.

Go to the Style tab > Icon/Image> Image.

Title, Subtitle & Description

All these three sections will let you put Color, Spacing, and Typography to the content.

Go to the Style tab > Title, Subtitle, and Description.


To style the button, go to the Style tab > Button > and check all the controls under Normal and Hover mode.

In conclusion, it seems that you’ve read the whole article and found very useful. If you need more design ideas, you should go to our demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.