{"id":20075,"date":"2026-07-06T11:05:09","date_gmt":"2026-07-06T11:05:09","guid":{"rendered":"https:\/\/bricksfly.com\/?post_type=docs&p=20075"},"modified":"2026-07-06T11:19:35","modified_gmt":"2026-07-06T11:19:35","slug":"toggle-switch","status":"publish","type":"docs","link":"https:\/\/bricksfly.com\/docs\/advanced-widgets\/toggle-switch\/","title":{"rendered":"How to Use Toggle Switch in BricksFly"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also set titles, add images, and adjust the space to fit your design. It\u2019s a simple way to make pricing tables or content switches without any coding.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Requirement&nbsp;<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure you have installed: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bricks Theme&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>BricksFly Pro<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"433\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01-1024x433.webp\" alt=\"Requiremnt of text animation in bricksfly \" class=\"wp-image-19789\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01-1024x433.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01-300x127.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01-768x325.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01-1536x650.webp 1536w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/Requiremnt-of-text-animation-In-Bricksfly-01.webp 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"391\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1-1024x391.webp\" alt=\"Bricksfly pro \" class=\"wp-image-19791\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1-1024x391.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1-300x114.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1-768x293.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1-1536x586.webp 1536w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/06\/BricksFly-Pro-02-1.webp 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Activate Toggle Switch&nbsp;In BricksFly<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to your <strong>WordPress Dashboard.&nbsp;<\/strong><\/li>\n\n\n\n<li>Click on <strong>BricksFly.&nbsp;<\/strong><\/li>\n\n\n\n<li>Head to the <strong>Elements.&nbsp;<\/strong><\/li>\n\n\n\n<li>Under <strong>Advanced,<\/strong> toggle on <strong>Toggle Switch.&nbsp;<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"398\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-toggle-switch-03-1024x398.webp\" alt=\"Activate toggle switch 03\" class=\"wp-image-20077\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-toggle-switch-03-1024x398.webp 1024w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-toggle-switch-03-300x117.webp 300w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-toggle-switch-03-768x299.webp 768w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-toggle-switch-03-1536x597.webp 1536w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Activate-toggle-switch-03.webp 1919w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:38px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">To start, click the <strong>&#8216;+&#8217; (Add Element)<\/strong> icon at the top left of your Bricks Builder editor. In the search bar, type <strong>&#8216;Toggle Switch&#8217;<\/strong> and click the element to add it to your page. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"538\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Searchbar-toggle-Switch-04.webp\" alt=\"Searchbar toggle switch 04\" class=\"wp-image-20078\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Searchbar-toggle-Switch-04.webp 400w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Searchbar-toggle-Switch-04-223x300.webp 223w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Style<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Style One and Style Two change only the switch\u2019s appearance. Style One is simple and classic. Style Two is modern and decorative. The functionality remains the same.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, here is selected Style <strong>One<\/strong>. However, you can choose either option based on your preference.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"403\" height=\"859\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Style-05.webp\" alt=\"Style 05\" class=\"wp-image-20079\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Style-05.webp 403w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Style-05-141x300.webp 141w\" sizes=\"(max-width: 403px) 100vw, 403px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Toggle Switcher&nbsp;<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To start customizing, click on&nbsp;<strong>\u2018Yearly\u2019.&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After clicking, you will find all the&nbsp;<strong>\u2018Yearly\u2019&nbsp;<\/strong>content customization options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"403\" height=\"808\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Toggle-Switcher-06-1.webp\" alt=\"Toggle switcher 06 1\" class=\"wp-image-20081\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Toggle-Switcher-06-1.webp 403w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Toggle-Switcher-06-1-150x300.webp 150w\" sizes=\"(max-width: 403px) 100vw, 403px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Title<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Since \u2018Yearly\u2019 is selected in the Title section, it will appear as the default title.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Content Type&nbsp;<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Content:<\/strong>\u00a0Lets you add and edit content directly inside the Elements (like text, images, or shortcodes).\u00a0<\/li>\n\n\n\n<li><strong>Save Templates:<\/strong>&nbsp;Lets you load a pre-saved Bricks Builder template and show it when the toggle is switched.<\/li>\n<\/ol>\n\n\n\n<p class=\"has-luminous-vivid-amber-background-color has-background wp-block-paragraph\"><strong>Note:<\/strong> In this example, <strong>Save Templates<\/strong> is selected.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. <strong>Content<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Add Media<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Add images as you like. Here, no images are selected.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Paragraph&nbsp;<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In a paragraph, write your pricing table or subscription plans the way you want.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"595\" height=\"904\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Yearly-title-content-07.webp\" alt=\"Yearly title content 07\" class=\"wp-image-20082\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Yearly-title-content-07.webp 595w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Yearly-title-content-07-197x300.webp 197w\" sizes=\"(max-width: 595px) 100vw, 595px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Gap&nbsp;<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Gap controls the spacing between toggle options. In this example, the gap value is set to <strong>10<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Bottom Space&nbsp;<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Bottom Space sets the gap below the toggle switch. In this example, the <strong>Bottom Space<\/strong> value is set to <strong>20<\/strong>. You can adjust this value based on your preference.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"597\" height=\"845\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Gap-and-bottom-space-08.webp\" alt=\"Gap and bottom space 08\" class=\"wp-image-20083\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Gap-and-bottom-space-08.webp 597w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Gap-and-bottom-space-08-212x300.webp 212w\" sizes=\"(max-width: 597px) 100vw, 597px\" \/><\/figure>\n\n\n\n<div style=\"height:29px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Under <strong>Style \u2192 Switcher<\/strong>, you can customize the toggle switcher to match your layout and design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"403\" height=\"903\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Style-Swither-1.webp\" alt=\"Style swither 1\" class=\"wp-image-20089\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Style-Swither-1.webp 403w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Style-Swither-1-134x300.webp 134w\" sizes=\"(max-width: 403px) 100vw, 403px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. <strong>Save Templates<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Under <strong>Saved Template<\/strong> settings, search for your saved Bricks Builder template and select it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"857\" src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Save-Template.webp\" alt=\"Save template\" class=\"wp-image-20086\" srcset=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Save-Template.webp 400w, https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Save-Template-140x300.webp 140w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Final Result&nbsp;<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2160\" style=\"aspect-ratio: 3840 \/ 2160;\" width=\"3840\" autoplay controls muted src=\"https:\/\/bricksfly.com\/docs\/wp-content\/uploads\/2026\/07\/Final-Output-of-Toggle-Switch.mp4\" playsinline><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>You Did It&nbsp;<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.&nbsp; You can also set titles, add images, and adjust the space to fit your design. [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":19718,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"doc_badge":[],"class_list":["post-20075","docs","type-docs","status-publish","hentry","no-post-thumbnail"],"acf":[],"author_avatar":"https:\/\/secure.gravatar.com\/avatar\/0f038df3bc60da556be64d3ba44b6ffdd6d13c4b411e58e68fbd35029c0b0b00?s=96&d=mm&r=g","author_name":"Elias","_links":{"self":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/20075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/comments?post=20075"}],"version-history":[{"count":10,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/20075\/revisions"}],"predecessor-version":[{"id":20099,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/20075\/revisions\/20099"}],"up":[{"embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/docs\/19718"}],"wp:attachment":[{"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/media?parent=20075"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=20075"},{"taxonomy":"doc_badge","embeddable":true,"href":"https:\/\/bricksfly.com\/docs\/wp-json\/wp\/v2\/doc_badge?post=20075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}