The switcher is a toggle button which when clicked can display two different types of content. You have to name both the toggle buttons.
For eg: If you want to create a Pricing Table for your website, you can name the toggle buttons Monthly and Annually. And then, add your pricing table content to these respective areas. This makes it easy for the users to see your website’s monthly and annual pricing plans.
How to use the Switcher Widget of The Plus Addons For Elementor
The switcher widget is pretty easy to use. Just add your content for the two toggle buttons and then name these buttons. That’s it, you are done. Now. let’s understand how to use this widget in the tutorial below.
Search for the Switcher widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.
Add a title to your first toggle. For eg: Monthly
Select your preferred source of your content from the dropdown. You can add custom content or you can fetch the content from your templates.
Content (Displayed if Custom Content is selected in the above step)
Add your content here. For eg: Add a pricing table.
Elementor Templates (Displayed if Template is selected in the above step)
Select your saved template here.
Similarly, follow all the above steps for Content 2 and set your second toggle. For eg: name it Annually. Now you have Switcher content section ready. Let’s style it further.
Switch / Toggle
Unique Switcher ID
Keep this blank or Setup Unique id for switcher which you can use with the “Carousel Remote” widget.
Display Switcher Button
Enable/Disable the Switcher Button. You definitely need to enable this.
We offer 4 different styles to choose from. Choose any one as per your liking.
Set your HTML title tag for the Switcher Button.
Set the position of your Switcher button. By clicking the alignment icons, you can set it to Left, Right or Center.
Use the slider to set the left and right spacing of the switcher buttons. You can set the spacing values in PX or %.
Drag the slider back and forth to set the desired size of your Switch/Toggle.
The styling options of Switcher Cosmetics, Switcher Typography, WYSIWYG Content 1, and WYSIWYG Content 2 are common. So, we have created a single detailed article explaining these Styling Options.
View The Style Tab Article
On Scroll View Animation
The On Scroll View Animation is common throughout all our widgets. So, we have explained On Scroll View Animation feature through a detailed tutorial.
View On Scroll View Animation Tutorial