In this guide, we will show you how to use the “Remote Tabs widget” on your Elementor website. The Remote Tabs widget allows you to display tabbed content with remote data integration, creating a dynamic and interactive experience for your visitors. It’s perfect for organizing and presenting information pulled from external sources in a compact, scrollable format. With customizable design options, smooth transitions, and flexible layouts, the Remote Tabs widget makes it easy to guide users through multiple content sections while maintaining a clean, modern look.
Let’s explore the customization options available in the “Remote Tabs widget” for Elementor below.
Elementor Free Remote Tabs Tutorial Video
Add a Free Remote Tabs to Elementor
Add a Free Remote Tabs Widget to an Elementor Page
Elementor Remote 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.
Remote Parent Name
Selects the content widget that the tabs control. Can auto-detect the paired content.
Show Debug
Toggles visibility of debug information for troubleshooting.
Layout
Sets tabs layout direction: Row (horizontal) or Column (vertical).
Wrap Tabs
Allows tabs to move to multiple lines if they overflow the container.
Gap
Adjusts spacing between individual tabs.
Justify Content
Aligns tabs horizontally within the widget container (e.g., Center, Start, End).
Hover Animation
Adds a visual effect when a user hovers over a tab.
Tab Change On
Determines how users switch tabs: Click or Hover.
Set URL Hash
Adds a URL hash for the active tab, enabling sharing or bookmarking.
Scroll To Hashed Tab On Init
Automatically scrolls to a tab if its URL hash is present on page load.
Scroll To Hashed Tab Offset (px)
Sets pixel offset when scrolling to a hashed tab (useful with sticky headers).
Item Image Size
Defines image resolution for tab content to optimize loading.
First Item Active After Page Load
Automatically activates the first tab when the page finishes loading.
Graphic Element
Adds a visual element (Icon or Image) next to the tab text. Currently set to None.
Graphic Element Gap
Adjusts spacing between the Graphic Element and the tab’s title/text.
Show Title
Toggles the visibility of the main title for each tab.
Show Text
Toggles the visibility of the secondary description or text for the tab.
Show Label
Toggles the visibility of a small label or tag on the tab item.
Title
The main text is displayed on the tab button.
Icon
A graphic element (icon) is displayed next to the tab title.
Text
Secondary descriptive text for the tab (only visible if Show Text is enabled).
Label
A small label or tag for the tab (only visible if Show Label is enabled).
Image
An optional image to display on the tab button.
Background Color
Sets the background color for the tab button in its normal state.
Background Color Active
Sets the background color when the tab is active.
Tab Number
Assigns a specific number to the tab for targeting purposes.
Friendly Hash Name
A user-friendly name is appended to the URL hash if Set URL Hash is enabled.
Add Link
Toggles whether the tab button also acts as a hyperlink to an external URL.
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 Remote Tabs Widget Style Settings
Item Text Align
Aligns the text content inside the tab item (Left, Center, Right).
Item Direction
Defines the internal layout of tab content (Title, Icon, Text) as a vertical (Column) or horizontal (Row) stack.
Item Justify
Controls vertical alignment of content when Item Direction is Column.
Item Align Items
Controls horizontal alignment of content when Item Direction is Column.
Link Align Items
Aligns any linked elements inside the tab.
Item Border Type
Sets the border style for the tab item (Default, Solid, Dashed, etc.).
Item Shadow
Accesses detailed controls for adding a box shadow to the tab item.
Item Radius
Sets the border radius for rounded corners (Top, Right, Bottom, Left).
Item Padding
Sets internal spacing inside the tab item (Top, Right, Bottom, Left).
Item Min Width
Defines the minimum width for the tab item.
Item Max Width
Defines the maximum width for the tab item.
Item Min Height
Defines the minimum height for the tab item.
Item Opacity
Sets the transparency of the tab item (100 = fully opaque).
Icon Background
Sets the background color of the container that holds the icon.
Icon Color
Sets the color of the icon itself.
Icon Radius
Sets the border radius for the icon container, creating rounded or circular shapes.
Icon Outer Size
Controls the size of the icon’s background container (outer circle).
Icon Inner Size
Controls the size of the icon image or symbol inside the container.
Text Color
Sets the color of the secondary text in its normal state.
Text Typography
Controls font properties for the secondary text, including font family, size, weight, and line height.
Text Spacing
Adjusts the margin or padding around the secondary text, separating it from other elements like the Title or Icon.
Horizontal Snap
Sets the horizontal anchor point for the label relative to the tab item (e.g., Left, Center, Right).
Horizontal Space
Adjusts the horizontal offset or margin of the label from the snap point.
Vertical Snap
Sets the vertical anchor point for the label relative to the tab item (e.g., Top, Center, Bottom).
Vertical Space
Adjusts the vertical offset or margin of the label from the snap point.
Label Min Width
Sets the minimum height of the label in pixels.
Label Typography
Controls font properties for the label text, including font family, size, weight, and line height.
Label Padding
Sets internal spacing (padding) within the label element.
Label Radius
Sets border radius for the label, giving it rounded corners or a circular shape.
Label Background
Sets the background color of the label in its normal state.
Label Color
Sets the text color of the label in its normal state.
Label Border Type
Sets the border style around the label (Default, Solid, Dashed, etc.).
Label Shadow
Adds a box shadow to the label for depth and emphasis.
Label Opacity
Controls the transparency of the label (100 = fully opaque).
Image Fit
Defines how the image scales to fit its container (e.g., Cover, Contain, Fill).
Image Width
Sets a fixed width for the image.
Image Height
Sets a fixed height for the image.
Image Radius
Sets the border radius for the image, creating rounded corners or a circular shape.
Image Border Type
Sets the border style for the image (Default, Solid, Dashed, etc.).
Image Shadow
Adds a box shadow to the image for depth and emphasis.
Image Opacity
Controls the transparency of the image (100 = fully opaque).
Remote Tabs Widget Design Examples For Elementor
Here are some live use cases for the Remote Tabs widget.
Team Member Carousel with Remote Tabs.
Remote Tabs with a Card.
Thank you for using the Remote Tabs widget for Elementor! This powerful and interactive tool allows you to display tabbed content with remote data integration, helping users easily navigate and explore multiple sections of your website. Perfect for showcasing products, services, articles, or any content pulled from external sources, it brings a dynamic and engaging element to your pages. 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.