fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

google-maps-widget
age-verification-widget-for-elementor
digital-business-card-templates-for-elementor

Icon Tabs

The Icon Tabs Widget help you show your website content in an interactive tabs layout. This widget enables you to quickly and easily create an interactive icon accordion with its wide range of customization and styling options. It also supports advanced options such as Remote Connection and syncing with other widgets.

 

Let’s look at each of the options in the “Icon Tabs Widget” below.

Install Icon Tabs Widget for Elementor

This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Icon Tabs”
  3. Hover over the widget in the search results and click install
  4. Add your “Icon Tabs” widget to any Elementor Page

General Settings

1

Layout

Select the layout of icon tabs.

  • Horizontal 
  • Vertical
2

Vertical Tabs Width

Set the width of vertical tab.

3

Tab Size

Set the size of tab.

4

Tab Layout

Select the layout of tab.

  • Row
  • Row-Reverse
  • Column
  • Column-Reverse
5

Tab Justify

Select the justification for tab.

  • flex-start
  • center
  • flex-end
6

Tab Align Items

Set the alignment of tab items.

  • flex-start
  • center
  • flex-end
7

Break to Accord

Set breakpoint to turn tabs into accordion in mobile screen.

8

Set URL Hash

Enable/disable URL hash.

9

Scroll To Head

Set scroll to head functionality for different devices.

  • Off
  • Desktop
  • Mobile
  • Desktop+Mobile
10

Animation

Set animation for icon tabs.

Layout Settings

1

Show Icon

Show/Hide the icon.

2

Show Tab Title

Show/Hide tab title.

3

Show Bullet

Show/hide bullets on icon tabs.

Connected Widgets Settings

1

Enable Remote Connection

Use remote control widgets to create advanced creative layouts.

2

Widget Name for Connection

This name will be used to connect and controls this widget by other widgets.

3

Sync

You can connect two item-based widgets and sync them.

4

Sync Group

Choose the same group for two or more item-based widgets so they can sync together.

Items Settings

Manage the items of icon tabs using the repeater field.

  • Add new items
  • Duplicate items
  • Delete items
  • Reorder Items
  • Edit Items
1

Title

Type text to show as title.

2

Heading Icon

Choose an icon for heading.

3

Content

Type text to show as content.

4

Override Border Color

Set the border color.

5

Tab ID

Set tab id that works together with Set URL Hash option.

Icon Tabs Widget Styling

Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.

Tab Bar Styling

Set the tab bar border, padding, background color, and radius.

Tab Styling

You can style the tab background, icon size, typography, margin, text color, border, padding, and radius.

Tab Active Styling

You can set the tab text color, icon color, border, and background for active state.

Tab Bullet Styling

Set the tab bullet border, color, size, padding, and margin.

Content Styling

In this section, set the content padding, text color, background color, typography, margin, border, radius, and alignment.

Usage Examples

Here are some live use cases for the Icon Tabs widget.

Icon Tabs widget with vertical layout.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!