The Content Switcher widget allows users to switch between two or more types of content using interactive toggle buttons. Using a Content Switcher enhances the user experience by allowing visitors to access different types of content or views in a single interface without the need for page reloads. This dynamic interaction speeds up navigation and makes the site more engaging. By offering immediate comparisons, such as between pricing options or product variations, it empowers users to make quicker, more informed decisions. This streamlined experience not only boosts user satisfaction but can also lead to higher conversions.
Popular Use Cases for the Content Switcher
Pricing Tables (Monthly vs. Yearly Plans)
Use the content switcher to toggle between monthly and yearly billing options, making it easy to compare prices and features.
Content View Modes
The content switcher lets you toggle between list and grid views for items like blog posts, products, or galleries.
Dark Mode/Light Mode Toggle
Let your website visitors easily toggle between dark mode and light mode using the content switcher widget.
Feature Comparison (Basic vs. Advanced)
Use the content switcher to easily display a detailed comparison between basic and advanced product features.
Step #1: Install and activate Unlimited Elements
Before getting started you will need to purchase Unlimited Elements pro from the link below to access the Content Switcher widget.
Then follow these steps:
Now that you have the plugin installed, it’s time to start creating the Content Switcher.
Step #2: Adding the Content Switcher widget to your Elementor website
To create a Content Switcher you need to install the Content Switcher widget from the Unlimited Elements Widget library.
Then, in the Elementor editor, Find the Content Switcher widget and drag it to the desired part of your page.
Step #3: Choose the Items Source
Choose the Items Source from the dropdown. We can select Posts, Woo products, ACF repeater fields, JSON or CSV files, gallery, terms, users, menu items, and more. For our guide, we’ll use static data and leverage the items repeater to add our content.
Step #4: Configure the Content Switcher General Settings
Radius (px)
Set the border radius in pixels for the content switcher button.
Tab Horizontal Padding (px)
Adjust the horizontal padding for the content switcher tab.
Tab Vertical Padding (px)
Adjust the vertical padding for the content switcher tab.
Debug Hidden Elements
Toggle this on when using "Element" as the content source to show hidden elements in editor for debug.
Item Image Size
Select the Image size according to the layout.
Connected Widgets Settings
Enable Remote Connection
Widget Name for Connection
Choose this to "Auto Detectable", so it will automatically detect the remote widgets.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Cookie (Remember Selection)
Remember Selection (Set Cookie)
Toggle this to "Yes" to remember the selection.
Cookie Name
Give it a unique name.
Expiration (Days)
Set the number of days for cookie expiration.
Expiration (Hours)
Set the number of hours for cookie expiration.
Expiration (Minutes)
Set the number of minutes for cookie expiration.
Expiration (Seconds)
Set the number of seconds for cookie expiration.
Items Settings
Wrapping it Up!
Incorporating a content switcher into your elementor website can greatly enhance user experience by offering flexibility and customization. Whether it’s toggling between pricing plans, view modes, languages, or even light and dark modes, a content switcher allows users to interact with your site in a way that best suits their preferences. By making navigation more intuitive and accessible, you not only improve engagement but also make your website more dynamic and user-friendly. Embrace the power of the content switcher and give your visitors a seamless, personalized browsing experience.