Sample Article

< All Topics
Widget Used
Switcher
Tutorial Videos

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.

Pro tip
Why not create your company/business timeline using this widget. Explain how and when it started, how it grew over the years, and how it is doing today. Don’t you think it will look cool?

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.

Table Of Contents

General Steps

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.

1. Content

Column 1

Title

Add a title to your first toggle. For eg: Monthly

Select Source

Select your preferred source of your content from the dropdown. You can add custom content or you can fetch the content from your templates.

Sample Article
This is a sample image demonstration

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.

Content 2

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.

Sample Article
This is a sample image demonstration

Display Switcher Button

Enable/Disable the Switcher Button. You definitely need to enable this.

Switcher Style

We offer 4 different styles to choose from. Choose any one as per your liking.

Title Tag

Set your HTML title tag for the Switcher Button.

Alignment

Set the position of your Switcher button. By clicking the alignment icons, you can set it to Left, Right or Center.

Label Spacing

Use the slider to set the left and right spacing of the switcher buttons. You can set the spacing values in PX or %.

Switch/Toggle Size

Drag the slider back and forth to set the desired size of your Switch/Toggle.

2. Style

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

3. Advanced

We have written a detailed tutorial on explaining how to use the Advanced Tab options.

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?