The “Content Tabs Widget” allows you to create interactive tabbed content for free in WordPress Elementor websites. Organize information into multiple tabs, making it easy for users to navigate through different sections without cluttering the page. Customize the layout, colors, typography, and animations to match your site’s design seamlessly.
Let’s look at each of the options in the “Content Tabs Widget” below.
Elementor Content Tabs Tutorial Video
Add Free Content Tabs for Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Content Tabs”
- Hover over the widget in the search results and click install
- Add your “Content Tabs” widget to any Elementor Page
General Settings in Elementor Content Tabs
Layout
Select the layout you want to display.
- Horizontal
- Vertical
Alignment
Select alignment of the content tab from the given options.
- Left
- Center
- Right
Start Collapsed
Content tabs will show as collapsed in starting.
Accordion Breakpoint
By choosing yes, it will turn tabs into accordion under a certain screen resolution.
Breakpoint
Set the screen resolution breakpoint when tabs become accordion.
Accordion Expand Icon
Choose an icon for expanded accordion.
Accordion Collapse icon
Choose an icon for collapsed accordion.
Set URL Hash
Allow to come back to the active tab by url.
Connected Widgets Settings in Elementor Content Tabs
Enable Remote Connection
Visit Name for Connection
Provide a name for the connection that other widgets will use to connect and control this widget.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Items Settings in Elementor Content Tabs
Manage the tabs of the content tabs using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Tab Title
Set a Title for your tab.
Content Type
Choose any of the given content sources
- Content
Type any custom content for your slide.
- Template
Choose any of the premade templates to show in your slide.
- Element Id
Type the element id to display.
Tab ID
Type the tab id that works with 'Set Url Hash'.
Elementor Content Tabs 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.
Tabs Container Styling in Elementor Content Tabs
Set the tabs container radius, padding, and border.
Tabs Bar Styling in Elementor Content Tabs
Set the tab bar background, padding, radius, alignment, and border.
Tabs Item Styling in Elementor Content Tabs
Style the tab item typography, radius, padding, margin, background, color and border.
Tab Item Hover Styling in Elementor Content Tabs
You can style the tab hover background, color, and border.
Tab Item Active Styling in Elementor Content Tabs
In this section, you can set the background color, border, padding and box shadow.
Content Styling in Elementor Content Tabs
Style the content background, padding, spacing, radius, color, typography and border.
Accordion Title (Responsive) Styling in Elementor Content Tabs
You can style the accordion title background, and text color in normal and active form.
Usage Examples of Elementor Content Tabs
Here are some live use cases for the Content Tabs widget.
Free Elementor Content Tabs with Text Content.
Free Elementor Content Tabs Synced with a Content Carousel, Controlled by Remote Bullets.
Thank you for using the Content Tabs Widget for Elementor! With its intuitive navigation and customizable design, this is the best Content Tabs Widget for Elementor, perfect for organizing content in a structured and user-friendly way. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
