In this guide, we will show you how to use the “Icon Tabs widget” on your Elementor website. The Icon Tabs widget allows you to organize and present content in a sleek, tabbed layout with icons, creating a visually appealing and interactive experience for your visitors. It’s perfect for showcasing features, services, or step-by-step information in a compact and easy-to-navigate format. With customizable design options, icon styles, and tab layouts, the Icon Tabs widget makes it simple to guide users through multiple sections of content while maintaining a clean, modern look.
Let’s explore the customization options available in the “Icon Tabs widget” for Elementor below.
Elementor Free Icon Tabs Tutorial Video
Add a Free Icon Tabs to Elementor
Add a Free Icon Tabs Widget to an Elementor Page
Elementor Icon Tabs Widget General Settings
Items Source
Choose the source of the data for the testimonial grid.
Posts: Use blog posts as the source.
WooCommerce Products: Use products from a WooCommerce store.
ACF Custom Field: Use data from an Advanced Custom Fields (ACF) custom field.
JSON or CSV: Use data from a JSON or CSV file.
Gallery: Use images and data from a gallery.
Terms: Use taxonomy terms as the source.
Users: Use user data as the source.
Menu: Use items from a menu.
RSS: Use content from an RSS feed.
Instagram: Use data from an Instagram feed.
API Integrations: Use data from various API integrations.
Debug - Show Input Data
A toggle switch to display the raw input data for debugging purposes.
Layout
Defines the orientation of the tabs, allowing you to choose between horizontal or vertical layouts.
Vertical Tabs Width
Sets the width of the vertical tab navigation area to control how much space it occupies.
Vertical Tabs Position
Determines whether the vertical tabs appear on the left or right side of the content panel.
Tab Size
Controls how tab elements are distributed, letting you choose between equal sizing or automatic sizing based on content.
Tab Layout
Defines the arrangement of the icon and text inside each tab button (e.g., stacked or inline).
Tab Justify
Controls the horizontal alignment of the content within the tab button (e.g., start, center, or end).
Tab Align Items
Controls the vertical alignment of the content within the tab button (e.g., top, center, or bottom).
Set URL Hash
Enables linking to specific tabs by updating the browser’s URL when a tab is clicked.
Scroll To Head
Automatically scrolls the page to the top of the widget content when switching between tabs.
Animation
Enables or disables visual transition effects when switching between tabs.
Close Active Tab On Click
Allows users to close the currently active tab by clicking it again, similar to an accordion behavior.
Start Collapsed
Starts the widget with all tabs closed, ideal for accordion-style layouts.
Show Icon
Enables or disables the display of an icon within each tab button or header.
Show Tab Title
Enables or disables the display of the text title within the tab button or header.
Show Bullet
Enables or disables the display of a bullet point or marker next to each tab for visual emphasis.
Break To Accordion
Enables or disables the feature that automatically converts the tab layout into an accordion layout on smaller screens for better mobile usability.
Accordion Breakpoint (px)
Sets the screen width (in pixels) at which the widget switches from tab view to accordion view.
Accordion Expand Icon
Allows you to choose or upload the icon displayed on a collapsed accordion header, indicating it can be expanded.
Accordion Collapse Icon
Allows you to choose or upload the icon displayed on an expanded accordion header, indicating it can be collapsed.
Enable Remote Connection
Enables or disables the widget’s ability to connect and interact with other widgets on the page, allowing one element to control or be controlled by another.
Sync
Enables or disables synchronization between this widget and others, ensuring that actions like switching tabs or slides happen simultaneously across connected widgets.
Show Debug
Enables or disables the display of technical debug information for remote widget connections. This is useful for testing, but should be turned off before the site goes live.
Title
Sets the text label displayed on the tab header/button, identifying the tab for users.
Heading Icon
Allows you to select or upload an icon to visually represent the tab, enhancing usability and design.
Content Type
Defines how the tab’s main content is added or sourced (e.g., text editor, template, shortcode).
Content
Provides a text editor to add or format the information shown inside the tab when it is active.
Override Border Color
Let's you apply a custom border color specifically for this tab, overriding the global tab style settings.
Tab ID
Assigns a unique identifier to the tab, useful for deep linking or enabling direct navigation using URL hashes.
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
Elementor Icon Tabs Widget Style Settings
Tab Bar Border Type
Sets the style of the border around the tab bar container (e.g., solid, dashed, or none).
Tab Bar Padding
Adjusts the inner spacing between the tab bar’s edges and the tab buttons for better layout control.
Tab Bar Margin
Controls the outer spacing around the tab bar to create distance from surrounding elements.
Tab Bar Background Color
Allows you to set a background color for the entire tab bar container.
Tab Bar Radius
Adjusts the corner roundness of the tab bar for a softer or sharper look.
Justify
Determines how tab buttons are aligned horizontally within the tab bar (e.g., start, center, end, or space-between).
Tab Typography
Customize the tab title’s font style, including family, size, weight, and other text properties.
Icon Size
Adjust the size of the icon displayed within the tab header.
Tab Padding
Set the inner spacing between the tab content and the edges of the tab button.
Tab Margin
Control the outer spacing around each tab button.
Tab Text Margin
Adjust the spacing around the text portion of the tab for better layout and readability.
Tab Icon Margin
Set the spacing around the icon portion of the tab for visual balance.
Tab Radius
Define how rounded or square the corners of the tab button appear.
Tab Gap / Icon Gap
Control the spacing between tab buttons and the space between the icon and text inside each tab.
Tab Background (Normal)
Choose the background color of the tab button in its normal (non-active) state.
Tab Text Color (Normal)
Set the color of the tab text in its normal state.
Tab Icon Color (Normal)
Define the icon color for the tab in its normal state.
Tab Icon CSS Filter
Apply visual effects such as blur, brightness, or contrast to the tab icon.
Tab Border Type
Choose the style of the border (e.g., solid, dashed, none) around the tab button.
Bullet Border Type
Defines the style of the border around the bullet point (e.g., solid, dashed, none).
Bullet Border Width
Controls the thickness of the bullet’s border.
Bullet Border Color
Sets the color of the border surrounding the bullet point.
Bullet Color
Determines the fill color of the bullet point itself.
Bullet Size
Adjusts the overall size or diameter of the bullet point.
Bullet Padding
Sets the inner spacing between the bullet’s edge and its content.
Bullet Margin
Controls the outer spacing around the bullet point.
Content Padding
Defines the internal spacing between the edges of the content area and the text or elements inside it.
Content Text Color
Sets the color of the text displayed within the content area.
Content Background Color
Determines the background color for the content area.
Content Typography
Allows customization of font properties such as family, size, weight, and style for the content text.
Content Margin
Controls the external spacing around the content area to separate it from other elements.
Content Border Type
Defines the style of the border surrounding the content area (e.g., solid, dashed, none).
Content Radius
Adjusts the roundness of the corners of the content area.
Content Align
Controls the horizontal alignment (e.g., left, center, right) of the content within its container.
Accordion Icon Size
Controls the size of the icon displayed in the accordion header.
Accordion Icon Color
Sets the color of the icon when the accordion panel is in its normal (collapsed) state.
Accordion Icon Color Active
Sets the color of the icon when the accordion panel is in its active (expanded) state.
Icon Tabs Widget Design Examples For Elementor
Here are some live use cases for the Icon Tabs widget.
Icon Tabs with Food Item.
Icon Tabs with Donut in hues of pink, blue, and brown.
Thank you for using the Icon Tabs widget for Elementor! This sleek and interactive tool allows you to organize and display content in a tabbed layout with intuitive icons, helping users easily navigate through different sections of information. Perfect for showcasing features, services, steps, or any grouped content, it adds a dynamic and engaging element to your website. Designed for flexibility and responsiveness, it offers full customization options to perfectly match your site’s design and functionality. For support or inspiration, please don’t hesitate to get in touch or explore our demo.