< All Topics

The switcher is a toggle button which when clicked can display two types of content. You have to name the toggle button for it to make sense.

For eg: If you want to create a Pricing Table, you can name the switcher something like Monthly / Annually. This makes it easy for users to see your website’s monthly and annual pricing plans.

Pro tip
Let’s say you run an E-commerce Store and you want to visually distinguish Digital and Physical Products. This switcher widget can do this magic.

How to use the Switcher Widget of The Plus Addons For Elementor

This widget is used to display Pricing Tables, Info Sections, Services, etc. 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

Content 1

Title

Select your preferred style from the dropdown. It can be either Horizontal or Vertical.

Select Source

Slide the button to Yes to enable the counter.
Choose your preferred counter-style from the various options in the dropdown. Every option is self-explanatory. When you select the Custom Text option, it will display a box to add your custom text.

Content

Add your text content here.

Add Content in the Switcher Widget.

Content 2

Title

Select your preferred style from the dropdown. It can be either Horizontal or Vertical.

Select Source

Slide the button to Yes to enable the counter.
Choose your preferred counter-style from the various options in the dropdown. Every option is self-explanatory. When you select the Custom Text option, it will display a box to add your custom text.

Content

Slide the button to Yes to enable the special background style.

Switch / Toggle

Unique Switcher ID

Select your preferred style from the dropdown. It can be either Horizontal or Vertical.

Display Switcher Button

Slide the button to Yes to enable the counter.
Choose your preferred counter-style from the various options in the dropdown. Every option is self-explanatory. When you select the Custom Text option, it will display a box to add your custom text.

Switcher Style

Slide the button to Yes to enable the special background style.

Alignment

You can set the Alignment of the Switch to left, right or center.

Label Spacing

Slide the icon to reduce or increase space between the Labels.

Switch/Toggle Size

Select your icon option using the dropdown. You can add a FontAwesome icon or an Image-based icon. If you want to add a Custom Text instead of an icon, you can add it as well. If you don’t want an Icon or Custom Text, select None.

Normal Background Options

We have written a detailed tutorial on how to use the Background options.
View The Tutorial

Hover Background Options

We have written a detailed tutorial on how to use the Background options.
View The Tutorial

2. Style

The Style tab is used for customizing the appearance of all the Switcher widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View Style Tab Tutorial

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Options are a common option for almost all widgets. So, we have written a detailed tutorial on how to use these options.

View 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?
Need help?