V4 Elements Toggle Switcher Estimated reading: 5 minutes 4 views Let visitors flip between two sets of content with one click, like Monthly and Yearly pricing. No code needed. WIDGET Toggle Switcher HAS Two tabs and two panes of content PLAN Free A QUICK LOOK What You Will Build Three looks of the same widget. Click Yearly and the content under it changes right away. Clicking Yearly swaps the content in all three styles BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Toggle Switcher is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Toggle Switcher under General Widgets and switch it on. Click Save Settings. The Toggle Switcher card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the Toggle Switcher in. Click the + button at the top left to open the Elements panel. Look under AAE General for Toggle Switcher. Drag it onto your page. The Toggle Switcher in the Elements panel (click to zoom) Tip: Can not see it? Type Toggle Switcher in the search box at the top of the panel. Note: A new Toggle Switcher already works. It has two tabs, Monthly and Yearly, and two short texts under them. STEP 3 Write Your Content The widget has three parts: the Tabs at the top, and one Pane for each tab. A pane holds the title and the text that show when its tab is chosen. Open the Structure panel. It is the little layers icon at the top right. Open the Toggle Switcher. You will see Tabs, Pane — Monthly and Pane — Yearly. Click a Tab to change its word, for example Monthly to Basic. Open a pane. Click its Title or Description and type your own words. The Tabs (1) and the content of a Pane (2) (click to zoom) Tip: The first tab starts as the open one, so visitors see the first pane when the page loads. STEP 4 Pick a Look You can start with the plain tabs, or give it a new look with one click. Select the Toggle Switcher. In the General tab, open Presets. Click Apply a preset. Choose toggle-switcher-sliding-pill or toggle-switcher-style-switch. The Apply a preset button (click to zoom) The two presets (click to zoom) Tip: Click Reset to Default to go back to the plain tabs. Plain tabs The default. Two text tabs with a line under them. The open tab has a dark pill behind it. toggle-switcher-sliding-pill Two words inside a soft grey pill. A yellow pill shows which one is open. toggle-switcher-style-switch Two words with a small on and off switch between them. STEP 5 Style It Every part has its own Style tab, so you can match your brand. Click a part in the Structure panel, for example a Tab or a Title. Open the Style tab. Change the color, font, size or spacing. Click Update to save your page. RESULT Final Result Three Toggle Switchers on a live page, one for each look. This is how they look when Monthly is on, and then after a click on Yearly. Monthly is on After clicking Yearly, the content changes Plain tabs Click Yearly and the dark pill moves to it. The title and text change to the yearly plan. Sliding pill The yellow pill slides to Yearly. Switch The switch turns on, and Yearly becomes bold. SETTINGS Options Presets Two ready-made looks: sliding pill and switch. Tabs The two words at the top. Change them in the Structure panel. Panes The title and the text for each tab. ID Optional CSS ID for the widget. GOOD TO KNOW More Details Two choices The widget has two choices. For more, use the Accordion or another tab style. Great for pricing Put a plan name and a price in each pane, and let visitors choose Monthly or Yearly. Your theme colors If your Elementor site sets a default size or color for paragraphs, it also shows in the panes. You can fix it in the pane Style tab. HELP Troubleshooting I do not see the Toggle Switcher in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Toggle Switcher. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. The tabs do not switch in the editor Switching works on your live page. Open the page to try it. My text looks very big Open the Structure panel, click the Title or the Description, then use the Style tab to set the size and color. Your site may have a large default size for paragraphs. I want different words on the tabs Open the Structure panel, click a Tab and type the new word. I want to go back to the first look Select the Toggle Switcher, open Presets and click Reset to Default. You Did It Your page now lets visitors switch between two sets of content. If you face any problem, please contact our support team. We are happy to help.
