See this widget in action here.
The Content Switcher Widget allows you to toggle between two different sets of content, each customizable with text, icons, or images. It’s ideal for showcasing comparisons, features, or switchable content sections.
Activate the Widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it:
- Navigate to the aThemes Addons dashboard in your WordPress admin area.
- Search for the Content Switcher widget.
- Toggle the switch to activate it. The widget will now be available in the Elementor interface.
Widget Options
First Content
- Switch Label: Add a label to identify this content.
- Icon Type: Choose between None, Icon, or Image.
- Icon: Select an icon if Icon Type is set to Icon.
- Image: Upload or select an image if Icon Type is set to Image.
- Title: Add a title for the first content.
- Show Badge: Enable or disable a badge to highlight this content.
- Badge: Customize the badge text if enabled.
- Arrow Style: Choose an arrow style for the badge (if enabled).
- Content Type: Select between Custom Content or Template.
- Content: Add custom WYSIWYG content or select a saved Elementor template.
Switcher
- Text Position: Choose between Text Inside or Text Outside for the switcher.
- Alignment: Adjust the alignment of the switcher.
Second Content
- Switch Label: Add a label to identify this content.
- Icon Type: Choose between None, Icon, or Image.
- Icon: Select an icon if Icon Type is set to Icon.
- Image: Upload or select an image if Icon Type is set to Image.
- Title: Add a title for the second content.
- Show Badge: Enable or disable a badge to highlight this content.
- Badge: Customize the badge text if enabled.
- Arrow Style: Choose an arrow style for the badge (if enabled).
- Content Type: Select between Custom Content or Template.
- Content: Add custom WYSIWYG content or select a saved Elementor template.
General Style
- Switcher Gap: Adjust the space between switcher items.
- Bottom Spacing: Define the margin below the switcher content.
Switcher Style
- Width and Height: Adjust the size of the switcher button.
- Border Radius: Add rounded edges to the switcher.
- Slider Size: Customize the size of the slider within the switcher.
- Background: Set the background color or gradient for the switcher.
- Slider Color: Adjust the color of the slider.
Labels
- Color: Adjust the color of the labels.
- Active Color: Define the color for active labels.
- Typography: Customize the font style, size, and weight of the labels.
- Icon and Image Styles: Adjust the color, size, and border radius of icons or images used as labels.
- Badge Styles: Set the background and text color for badges.
Conclusion
The Content Switcher Widget is an excellent choice for creating interactive and engaging switchable content. With its customizable design options and flexibility, you can easily implement it in various scenarios like comparisons, feature toggles, or dual-content layouts.