How to set up and style the Content Switcher widget in Elementor.
Content Switcher shows one content block at a time and lets visitors change it with a toggle switch, segmented buttons, sliding pills or underline tabs. Each block can be text, an image or a saved Elementor template. Use it for monthly and yearly pricing, before and after views, or any content with two or more versions.
Part of: Bright Addons Pro. Before you start: Nothing for text and image content. To show Elementor layouts, create them first under Templates, Saved Templates.
| Option | What it does |
|---|---|
| Items | The list of content blocks. Each one has a label and its own content. |
| Label | The text shown on the switcher for this item. |
| Icon | An optional icon shown before the label. |
| Badge | An optional small tag next to the label, for example Save 20%. |
| Content Type | Text Editor, Saved Template or Image. |
| Template | The saved Elementor template to show for this item. |
| Image | The image to show for this item. |
| Open by Default (item number) | The number of the item that is open when the page loads. |
| Option | What it does |
|---|---|
| Style | Toggle Switch, Segmented Buttons, Sliding Pills or Underline Tabs. |
| Content Animation | How the new content appears when the visitor switches. |
| Animation Duration (ms) | How long the content animation takes. |
| Sync Group Name | Switchers with the same group name change together. |
| Hide Switcher (Follow Sync Group Only) | Hides this widget's controls so it only follows its sync group. |
| Open From URL Hash | Lets a link ending in #switch-2 and so on open that item. |
| Switcher Alignment | Aligns the switcher left, center or right, or stretches it. |
| Space Below Switcher | The gap between the switcher and the content. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
width, height, knob inset, margin, background, border color and knob color for the First and Second state, border, border radius, switch shadow, knob radius, knob shadow and space between labels and switch (toggle style only).
typography, text color, background, border color and shadow for Normal, Hover and Active, border, radius, padding, margin, minimum width, space between buttons, icon size and spacing, underline thickness, and the Button Group Container background, padding, radius, border and shadow.
typography, color, background, border, border radius, padding and space from the label.
text alignment, typography, color and text shadow for editor text, and background, border, shadow, border radius and padding for the content panel.
Give both widgets the same Sync Group Name, for example pricing. Switching one switches the other.
Yes. With Open From URL Hash on, a link to the page ending in #switch-2 opens the second item, #switch-3 the third, and so on.
Yes. Set Content Type to Saved Template and pick a template. Create templates under Templates, Saved Templates.
The widget sends a window resize signal each time it switches, so widgets inside the new panel can recalculate their size.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide