Advanced Elements How to Add Toggle Switch in Bricks Builder Using BricksFly Estimated reading: 3 minutes 129 views 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 Go to your WordPress Dashboard. Click on BricksFly. Head to the Elements. 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 Content: Lets you add and edit content directly inside the Elements (like text, images, or shortcodes). 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.
