In this documentation, we will show you how to customize the Fancy Tabs widget presented by Element Pack Pro.

Inserting The Fancy Tabs Widget

Open your page in the Elementor editor, search by the widget name, then drag and drop it on the page.

Content Tab Customizations

Fancy Tabs Items Section

Go to Content > Fancy Tabs Items

Step-1

Come to the Fancy Tabs Items section, Here you can add Fancy Tabs widget items (with the Add Item button).

Step-2

For Each Fancy Tabs item, Find the Icon Type (Icon, Image), Icon, Title, Sub Title, Button Text, And Button Link options.

Step-3

For Each Fancy Tabs item, Also Find the Text option.

Additional Settings Section

Go to Content > Additional Settings

Here Find the Icon Area Width, Icon Columns ( 1 to 6 ), Icon Column Gap ( Small, Medium, Large, Collapse), Select Event ( Hover, Click ), Select Tabs Position ( Left, Right), Alignment, Title HTML Tag, and Active Item options.

Also Find the Content Fixed Height, Show Title, Show Sub Title, Show Text, and Show Button switchers.

Work with The Style Tab

Style The Fancy Tabs Section

Go to Style > Fancy Tabs

Step-1

Come to the Fancy Tabs section, you will find three sub-section; Normal, Hover, and Active.

In the Normal Mode, Find the Content Padding, Glassmorphism, Background Type ( Classic, Gradient), First Color, First Location, Second Color, and Second Location options.

Step-2

In the Normal Mode, Also Find the Type ( Linear, Radial), Angle, Padding, Border Type, Advanced Radius, Radius, and Box Shadow options.

Step-3

In the Hover Mode, Find the Background Type ( Classic, and Gradient), First Color, First Location, Second Color, Second Location, Type ( Linear, Radial), Position, Border Color, and Box Shadow options.

Step-4

In the Active mode, you will get a similar customization option as in the Hover Mode. So please try it yourself.

Icon/ Image Section

Go to Style > Icon/Image

Step-1

Come to the Icon/Image section, you will find three sub-section; Normal, Hover, and Active.

In the Normal Mode, Find the Icon Color, Icon Size, Background Type( Classic, Gradient), Padding, Border Type, and Radius options.

Step-2

In the Normal mode, also find the Advanced Radius, Box Shadow, Rotate, Background Rotate, Image Size, Image Fullwidth, CSS Filters, Opacity, and Transition Duration options.

Step-3

In the Hover mode, you will get a similar customization option as in the Normal Mode. So please try it yourself.

Step-4

In the Active mode, Find the Icon Color options.

Style The Title Section

Go to Style > Title

Here Find the Title Color, Spacing, Typography, and Text Stroke options.

Style The Sub Title Section

Go to Style > Sub Title

Here you will get a similar customization option to modify the appearance of the Sub Title section as in the Title section.

Text Section Customization

Go to Style > Text

Come to the Text section, you will get a similar customization option to modify the appearance of the Text section as in the Title/Sub Title section.

Button Section

Go to Style > Button

Step-1

Come to the Button section, you will find two sub-section; Normal, and Hover.

In the Normal Mode, Find the Button Text Color, Background Type( Classic, Gradient), Background First Color, First Location, Second Color, Second Location, Type( Linear, Radial), Angle, and Box Shadow options.

Step-2

In the Normal mode, also find the Border Type, Border Radius, Advanced Radius, Padding, and Typography options.

Step-3

In the Hover Mode, Find the Button Text Color, Background Type( Classic, Gradient), Background First Color, First Location, Second Color, Second Location, Type( Linear, Radial), and Position options.

All done! You have successfully customized the Fancy Tabs widget on your website.

Video Assist

You can also watch the tutorial video about the Fancy Tabs widget. Please visit the demo page for examples.

Thanks for staying with us.