See this widget in action here.
Need to toggle between two content sections on a single page? The Content Switcher widget in aThemes Addons lets you display two sets of content with a sleek toggle control, making it easy for visitors to switch between options like monthly and yearly pricing or different product views.
In this guide, we’ll walk you through how to use the Content Switcher widget in aThemes Addons for Elementor.
Table of Contents
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor. For premium widgets, ensure aThemes Addons Pro is also installed and active. This widget requires aThemes Addons Pro.
Activating the Widget
Go to the aThemes Addons dashboard in your WordPress admin area and search for the Content Switcher widget. Toggle the switch to activate it. Once activated, the widget is available in the Elementor interface.
Exploring Widget Options
Configuring the First Content
Set up the first content section of the switcher:
- Switch Label – Enter the label text displayed on the toggle for this content section.
- Icon Type – Choose between None, Icon, or Image to display alongside the label.
- Icon – Select an icon from the icon library (when Icon type is selected).
- Image – Upload or select an image (when Image type is selected).
- Title – Add a title for the content section.
- Show Badge – Toggle a badge on or off for this section.
- Badge – Enter the badge text (e.g., “Popular” or “Best Value”).
- Arrow Style – Choose an arrow style for the badge.
- Content Type – Select Custom Content to use the WYSIWYG editor or Template to use a saved Elementor template.
- Content – Enter your content in the WYSIWYG editor or select a saved Elementor template.
Configuring the Switcher
Adjust the toggle control settings:
- Text Position – Choose whether the label text appears inside or outside the toggle switch.
- Alignment – Set the horizontal alignment of the switcher control.
Configuring the Second Content
Set up the second content section of the switcher. The options mirror those in the first content section:
- Switch Label – Enter the label text for the second toggle option.
- Icon Type – Choose between None, Icon, or Image.
- Icon – Select an icon from the icon library.
- Image – Upload or select an image.
- Title – Add a title for the second content section.
- Show Badge – Toggle the badge display.
- Badge – Enter the badge text.
- Arrow Style – Choose an arrow style for the badge.
- Content Type – Select Custom Content or Template.
- Content – Enter content or select a saved Elementor template.
Customizing General Style
Adjust the overall layout spacing:
- Switcher Gap – Control the space between the switcher items.
- Bottom Spacing – Set the margin below the switcher control.
Styling the Switcher
Customize the toggle switch appearance:
- Width and Height – Set the dimensions of the toggle switch.
- Border Radius – Round the corners of the switch.
- Slider Size – Adjust the size of the sliding indicator.
- Background – Set a solid color or gradient for the switch background.
- Slider Color – Choose the color of the sliding indicator.
Styling the Labels
Fine-tune the label appearance for both toggle options:
- Color – Set the default label text color.
- Active Color – Set the text color for the active (selected) label.
- Typography – Customize the font style, size, and weight.
- Icon and Image Styles – Adjust icon color, image size, and border radius.
- Badge Styles – Customize badge background color and text color.
That’s it! You’ve successfully set up the Content Switcher widget on your site.
Next, would you like to add a countdown timer to your pages? Check out our guide on using the Countdown widget to learn more.
