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 the widget is just a matter of drag and dropping. As you see in the screenshot above.
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 is not limited, you can add a new list in the group just by 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 delete clicking on the delete icon.
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.
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 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 it very useful. If you need more design ideas, you should go to our demo page.