A professional Elementor widget that creates advanced tab components with descriptions under each tab title. This widget provides the same functionality as Elementor Pro tabs but with the unique addition of tab descriptions for better user experience.
- 🏷️ Tab Descriptions: Add helpful descriptions under each tab title (unique feature)
- 🎨 Elementor Integration: Seamlessly integrates with Elementor page builder
- 📱 Responsive Design: Works perfectly on all devices
- ⚡ Multiple Layouts: Horizontal and vertical tab orientations
- 🎬 Smooth Animations: Fade and slide transition effects
- ♿ Accessibility: Full keyboard navigation and ARIA support
- 🎛️ Visual Controls: Complete styling options in Elementor panel
- 🔗 Deep Linking: Direct URLs to specific tabs
- ⚙️ Easy to Use: Drag, drop, and configure in Elementor
- WordPress 4.7+
- Elementor 2.0.0+
- PHP 7.0+
- Download the plugin files
- Upload the entire folder to
/wp-content/plugins/ - Activate the plugin in WordPress admin
- Open Elementor and find "Advanced Tabs" in the widgets panel
- Drag and drop the widget to your page
- Open Elementor editor
- Search for "Advanced Tabs" in the widget panel
- Drag the widget to your desired location
- Configure tabs in the Content section:
- Tab Title: Main title for the tab
- Tab Description: Subtitle/description under the title
- Tab Content: Content that appears when tab is active
- Tabs Items: Add/remove/reorder tabs using the repeater
- Layout: Choose horizontal or vertical orientation
- Animation: Select fade or slide transitions
- Show Descriptions: Toggle descriptions on/off
- Navigation: Style tab buttons, typography, colors, spacing
- Content: Style content area, typography, background, borders
- Typography: Separate controls for titles and descriptions
- Colors: Normal and active states for all elements
- Spacing: Padding, margin, and border controls
- Background: Background colors and gradients
- Borders: Border styles and radius
- Typography: Font family, size, weight, etc.
- Colors: Text and background colors
- Spacing: Padding and margin controls
- Borders: Border and radius options
- Effects: Box shadow and other effects
Perfect for:
- Service Pages: Services with descriptions
- Product Features: Features with explanations
- FAQ Sections: Questions with brief descriptions
- Team Pages: Roles with descriptions
- Portfolio: Categories with explanations
- Pricing Plans: Plans with feature summaries
Tab 1: "Web Design"
Description: "Custom responsive websites"
Content: Detailed web design service information...
Tab 2: "SEO Services"
Description: "Boost search rankings"
Content: Complete SEO service details...
Tab 3: "Digital Marketing"
Description: "Grow online presence"
Content: Marketing strategy information...
- ARIA Labels: Proper labeling for screen readers
- Keyboard Navigation: Arrow keys, Enter, and Space support
- Focus Management: Proper focus handling
- Semantic HTML: Uses proper role attributes
- Mobile Optimization: Touch-friendly interface
- Adaptive Layout: Vertical tabs on mobile for horizontal layout
- Flexible Content: Content adapts to all screen sizes
- Lightweight: Minimal CSS and JavaScript
- Optimized: Only loads when widget is used
- Cached: Respects WordPress and Elementor caching
- Smooth opacity transition
- Content fades in/out
- Best for quick content switching
- Content slides in from the side
- More dynamic visual effect
- Great for engaging presentations
Tabs Items (Repeater)
├── Tab Title (Text)
├── Tab Description (Text)
└── Tab Content (WYSIWYG)
Settings
├── Layout (Select: Horizontal/Vertical)
├── Animation (Select: Fade/Slide)
└── Show Descriptions (Switcher)
Navigation
├── Navigation Width (Slider - Vertical only)
├── Title Typography (Group)
├── Description Typography (Group)
├── Normal State Colors
├── Active State Colors
├── Padding/Margin (Dimensions)
├── Border (Group)
└── Border Radius (Dimensions)
Content
├── Typography (Group)
├── Text Color (Color)
├── Background Color (Color)
├── Padding (Dimensions)
├── Border (Group)
├── Border Radius (Dimensions)
└── Box Shadow (Group)
- Tab Descriptions: The key differentiator - no other tab widget offers this
- Elementor Integration: Built specifically for Elementor with native controls
- Professional Design: Matches Elementor Pro's visual quality
- Complete Accessibility: Full WCAG compliance out of the box
- Better UX: Descriptions help users understand content before clicking
- More Informative: Provides context without cluttering the interface
- Professional Look: Elevates the design quality of your pages
- Elementor Native: Uses Elementor's styling system completely
/* Widget container */
.elementor-widget-advanced-tabs
/* Tab navigation */
.advanced-tabs-nav
/* Individual tab button */
.advanced-tab-nav-item
/* Tab title */
.tab-title
/* Tab description */
.tab-description
/* Content container */
.advanced-tabs-content
/* Individual content panel */
.advanced-tab-content
/* Active states */
.advanced-tab-nav-item.active
.advanced-tab-content.active/* Custom hover effect */
.advanced-tab-nav-item:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Custom description styling */
.tab-description {
font-style: italic;
opacity: 0.8;
}
/* Custom active tab styling */
.advanced-tab-nav-item.active {
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
color: white;
}Widget not appearing in Elementor?
- Check if plugin is activated
- Ensure Elementor is installed and activated
- Clear Elementor cache (Elementor → Tools → Regenerate CSS)
Styling not working?
- Clear browser cache
- Clear WordPress cache
- Regenerate Elementor CSS files
JavaScript not functioning?
- Check browser console for errors
- Ensure jQuery is loaded
- Check for plugin conflicts
- Touch-Friendly: Large touch targets for mobile
- Adaptive Layout: Switches to mobile-optimized layout
- Content Scrolling: Handles overflow content gracefully
- Performance: Optimized for mobile networks
- Larger tap targets
- Improved spacing
- Readable typography
- Optimized animations
Future enhancements planned:
- Icon Support: Add icons to tab titles
- Custom Animation: More animation options
- Template Library: Pre-designed tab templates
- Advanced Layouts: More layout options
- Integration: Better theme integration
- Keep Descriptions Short: 3-5 words maximum
- Use Clear Titles: Descriptive and concise
- Consistent Content Length: Similar amounts of content per tab
- Logical Order: Arrange tabs in logical sequence
- Color Consistency: Use your brand colors
- Typography Hierarchy: Clear visual hierarchy
- White Space: Don't overcrowd tabs
- Mobile Testing: Always test on mobile devices
- Optimize Images: Compress images in tab content
- Limit Tabs: Don't use too many tabs (5-7 max)
- Content Strategy: Keep content focused and relevant
- Check the troubleshooting section
- Review Elementor documentation
- Contact support if needed
This is an open-source project. Contributions welcome:
- Bug reports and feature requests
- Code improvements
- Documentation updates
- Translation assistance
GPL2 License - same as WordPress core.
Transform your Elementor pages with professional tabs that include helpful descriptions!
This widget brings the missing piece to Elementor's tab functionality - clear, helpful descriptions that guide users to the content they need.