You can display your website content in an interactive content tabs widget. Content tabs can even be used to show different content in each tab. You can change the layout of widget either horizontal or vertical. You can choose template as content to showcase in tabs. This widget also supports remote connection and sync widget.
Let’s look at each of the options in the “Content Tabs Widget” below.
Install Content Tabs Widget 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 #
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 #
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 #
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'.
Content 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.
Tabs Container Styling #
Set the tabs container radius, padding, and border.
Tabs Bar Styling #
Set the tab bar background, padding, radius, alignment, and border.
Tabs Item Styling #
Style the tab item typography, radius, padding, margin, background, color and border.
Tab Item Hover Styling #
You can style the tab hover background, color, and border.
Tab Item Active Styling #
In this section, you can set the background color, border, padding and box shadow.
Content Styling #
Style the content background, padding, spacing, radius, color, typography and border.
Accordion Title (Responsive) Styling #
You can style the accordion title background, and text color in normal and active form.
Usage Examples #
Here are some live use cases for the Content Tabs widget.
Example of Content Tabs widget synced with Content Carousel and controlled by Remote Bullets.
