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.
Icon Tabs Video Overview #
Install Icon Tabs Widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Icon Tabs”
- Hover over the widget in the search results and click install
- Add your “Icon Tabs” widget to any Elementor Page
General Settings #
Layout
Select the layout of icon tabs.
- Horizontal
- Vertical
Vertical Tabs Width
Set the width of vertical tab.
Tab Size
Set the size of tab.
Tab Layout
Select the layout of tab.
- Row
- Row-Reverse
- Column
- Column-Reverse
Tab Justify
Select the justification for tab.
- flex-start
- center
- flex-end
Tab Align Items
Set the alignment of tab items.
- flex-start
- center
- flex-end
Break to Accord
Set breakpoint to turn tabs into accordion in mobile screen.
Set URL Hash
Enable/disable URL hash.
Scroll To Head
Set scroll to head functionality for different devices.
- Off
- Desktop
- Mobile
- Desktop+Mobile
Animation
Set animation for icon tabs.
Layout Settings #
Show Icon
Show/Hide the icon.
Show Tab Title
Show/Hide tab title.
Show Bullet
Show/hide bullets on icon tabs.
Connected Widgets Settings #
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
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
Title
Type text to show as title.
Heading Icon
Choose an icon for heading.
Content
Type text to show as content.
Override Border Color
Set the border color.
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.
