How to Use Toggle Switch in BricksFly

Do you want to let visitors switch between things like monthly and yearly plans? The Toggle Switch Element 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 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Toggle Switch In BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Elements. 
4. Under Advanced, toggle on Toggle Switch. 

To start, click the ‘+’ (Add Element) icon at the top left of your Bricks Builder editor. In the search bar, type ‘Toggle Switch’ and click the element to add it to your page.

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 preference. 

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 

1. Content: Lets you add and edit content directly inside the Elements (like text, images, or shortcodes). 
2. Save Templates: Lets you load a pre-saved Bricks Builder template and show it when the toggle is switched.

Note: In this example, Save Templates is selected.

1. Content

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. In this example, the gap value is set to 10.

Bottom Space 

Bottom Space sets the gap below the toggle switch. In this example, the Bottom Space value is set to 20. You can adjust this value based on your preference.

Under Style → Switcher, you can customize the toggle switcher to match your layout and design.

2. Save Templates

Under Saved Template settings, search for your saved Bricks Builder template and select it.

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.