fbpx

Table Of Contents

Elementor Fancy Tabs Widget

How to Use Elementor Fancy Tabs Widget

Elementor 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 tabs widget

Inserting the widget 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

Elementor Fancy Tabs Widget 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 is not limited, you can add a new list in the group just by clicking on the ADD ITEM button.

wordpress tab widget logo settings

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 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 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.

Fancy Tabs

Content

Elementor Fancy Tabs Widget content style

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.

Item

Normal tabs widget color

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.

Hover tabs widget color

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.

active colors

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.

Icon

tabs widget icons style

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.

image styles

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

fancy tabs title

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

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

Button

Elementor Fancy Tabs Widget button style

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

Conclusion

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

SIGNUP NEWSLETTER

Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Enjoy Black Friday Exciting Deals Right Now. Check Here
© Copyright 2021 All Rights Reserved by BdThemes

Enjoy Black Friday Exciting Deals Right Now. Grab The Deals Before The Time Ends!

Day
Hour
Min
Sec