Skip to content
Atomic Addons

Updated 6 min readView demo

The Content Switcher widget by Atomic Addons lets visitors flip between versions of the same content: monthly and yearly prices, a short and a long answer, two product options. Use a toggle switch for two choices or a row of buttons for more. Each choice can show text, a saved Elementor template, or a section or widget from elsewhere on the page. This guide covers adding the widget, setting up the choices and adding a badge.

Enable the Content Switcher Widget

Content Switcher is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

  1. 1

    Go to WordPress Dashboard → Atomic Addons.

  2. 2

    Click the Widgets tab.

  3. 3

    Search for Content Switcher. You can also open the Content category.

  4. 4

    Turn the Content Switcher widget on.

  5. 5

    Click Save Settings.

Add the Content Switcher Widget

  1. 1

    Open the page in Elementor (Edit with Elementor).

  2. 2

    In the widget panel, search for Content Switcher. The widget sits in the Atomic Addons Pro category.

  3. 3

    Drag it into the page and set it up with the controls below.

  4. 4

    Click Publish (or Update).

Switcher

Open the widget and go to Content → Switcher:

  1. 1

    Style: Nine toggle switch designs — Classic Toggle (the default), Rectangle Switch, Round Slide, Flat Modern, Sleek Slider, Diamond Toggle, Clean Circle, Soft Curve and Square Rotate — or Button Style.

  2. 2

    Switcher Items: The choices. The list starts with Primary, Secondary and Others.

A toggle switch has two sides, so the toggle styles use the first two items only: the first item’s title sits left of the switch and the second’s on the right. Button Style shows every item as a button, so pick it when you need three or more choices.

Each item has these fields:

  1. 1

    Title: The label beside the switch, or the text of the button.

  2. 2

    Content Type: What the item shows: Content (the default), Saved Templates, Link Section or Link Widget. The field below changes with it.

  3. 3

    Content: With Content: the text, written in the text editor.

  4. 4

    Choose Template: With Saved Templates: type the name of a template from Templates → Saved Templates and pick it. Use this for designed layouts such as a set of price cards.

  5. 5

    Section ID: With Link Section: the CSS ID of a section or container on the same page, without the #. Set that ID in the section’s Advanced → CSS ID. On the live page the section moves into the switcher and shows while this item is active.

  6. 6

    Link Widget ID: With Link Widget: the CSS ID of another widget on the page, without the #. That widget shows while this item is active and hides otherwise; give the other items a Link Widget too, so the widgets take turns in the same spot.

  7. 7

    Icon: Optional icon before the title.

  8. 8

    Active: Shows this item when the page loads. If no item is marked, the first one shows; if several are, the first marked one wins.

Linked sections and widgets only move or hide on the live page. In the editor they stay where they are, so you can keep editing them.

Additional Options

Content → Additional Options:

  1. 1

    Alignment: Left, center or right alignment of the switcher. Use the device icon to set it per screen size.

  2. 2

    Badge: Adds a small label next to the switcher with a curved arrow pointing at it, for a hint such as “Save 20%”.

  3. 3

    Badge Text: The badge’s text, “Hot” by default. Accepts Dynamic Tags.

  4. 4

    Badge Align: Left (the default) or Right: which side the badge and its arrow sit on.

  5. 5

    Arrow Style: Four arrow shapes, 01 to 04.

  6. 6

    Offset: Set it to Custom to fine-tune the position. The Badge tab has Badge Horizontal Offset (0px by default), Badge Vertical Offset (−40px) and Badge Rotate. The Arrow tab has Arrow Horizontal Offset (−35px with the badge on the left, 40px on the right), Arrow Vertical Offset (−26px) and Arrow Rotate.

Visitors can click the switch itself or either title to change sides. With Button Style, the buttons also work with the arrow keys.

Style the Content Switcher

Everything below is on the Style tab. Sections that do not apply to the chosen style are hidden.

  • Switch — the titles or buttons: Space Between, Icon Spacing, typography, text shadow and stroke, and the color in Normal and Active states. With Button Style it also covers the buttons’ background, border, radius, padding and shadow, with a Hover state.
  • Switcher — the toggle switch (not shown with Button Style): width and height (except Square Rotate), border radius, margin, and its color and background color in Normal and Active states. Knob Color is for the Clean Circle style.
  • Switcher Bar — the bar that holds the titles and switch: background, border, border radius, padding, margin and shadow.
  • Content — the area under the switcher: text color, background, border, radius, padding, margin and shadow.
  • Badge — text, arrow and background colors, border, radius, padding, shadow, typography and Arrow Size.

Can't find what you need?

Our support team can help with setup questions and anything the docs don't cover yet.

Contact support