Toggle Switch

Do you want to let visitors switch between things like monthly and yearly plans? The Toggle Switch widget makes it super easy. Just drag it onto your page, pick a style you like, and add your own text or content. 

You can also set titles, add images, and adjust the space to fit your design. It’s a simple way to make pricing tables or content switches without any coding.

Requirement 

• Elementor (Page Builder) 
• Animations Addons (Our Plugin)  

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start.   

1. Go to your WordPress Dashboard. 
2. Click on Animation Addons. 
3. Head to the Widgets Tab. 
4. Under Advanced, toggle on Toggle Switch. 

To start, click the ‘+’ icon, search for Toggle Switch, and select it. 

Style

Style One and Style Two change only the switch’s appearance. Style One is simple and classic. Style Two is modern and decorative. The functionality remains the same.

For example, here is selected Style one. However, you can choose either option based on your choice. 

Toggle Switcher 

In toggle switcher, you will have two options: yearly and monthly views. It is often used for pricing tables or subscription plans. For example, here it starts with yearly and then monthly. 

To start customizing, click on ‘Yearly’. 

After clicking, you will find all the ‘Yearly’ content customization options.

Title

Since ‘Yearly’ is selected in the Title section, it will appear as the default title. 

Content Type 

Content: Lets you add and edit content directly inside the widget (like text, images, or shortcodes). 

Save Templates: Lets you load a pre-saved Elementor template and show it when the toggle is switched.

For example, Content is selected here, but you can choose either option. 

Add Media

Add images as you like. Here, no images are selected. 

Paragraph 

In a paragraph, write your pricing table or subscription plans the way you want.  

Gap 

Gap controls the spacing between toggle options. For example, the value is set to 2 here, but you can choose any value. 

Bottom Space 

Bottom Space sets the gap below the toggle switch. For example, the value is set to 2 here, but you can choose any value.

Final Result 

You Did It 

You did it! Your toggle switch is now ready and working. Visitors can easily switch between options like monthly and yearly plans, and all your content, images, and spacing look just the way you wanted. Now your page is interactive, clean, and ready to impress.