What is Content Toggle Widget?
The Content Toggle widget lets you display two different pieces of content in the same space on your Elementor page, and lets your visitors switch between them using a toggle button or a switch. Instead of building two separate sections that make your webpage long and repetitive, you build one section and let the visitors choose what they see.
Think of it like a light switch. Flip it one way, and the lights come on. Flip it the other way, and the lights go off. Content Toggle widget does the same thing but with any content you put inside it using Elementor page builder, even if it is text, images, pricing tables, feature lists, videos, or anything else.
⚠️ Info: The Content Toggle widget was previously called Content Switcher. If you have used Content Switcher on any of your Elementor pages before, those pages will continue to work exactly as they did. The new name reflects the widget’s expanded capabilities.
Before You Begin
Before you start use Elementor Content Toggle widget, make sure the following are in place on your WordPress website.
| WORDPRESS PLUGINS | REQUIRED VERSION |
|---|---|
| Premium Addons | The plugin’s free version is a must |
| Premium Addons PRO | The PRO version is required to use this widget |
| Elementor Page Builder | Elementor’s free version is required |
💡 Tip: If you do not have Premium Addons installed yet, go to your WordPress Dashboard, click Plugins → Add New, and search for Premium Addons for Elementor. Click Install Now, then Activate.
Understanding the Three Toggle Types
The Content Toggle widget offers two fundamentally different interaction types. Before you configure anything else, you need to choose the type that best fits your design. Both types switch between the same two content panels, the difference is entirely in how the toggle control looks and feels to your visitor.
Type 1: Switcher
The Switcher type uses a sliding toggle mechanism, the kind commonly seen on mobile phone settings screens. It has a track and a moving thumb that slides from one side to the other when clicked. It feels tactile and immediate, also communicates a binary choice clearly.
The Switcher type gives you 11 distinct animation effects spread across two shape families: circle-based and square-based switchers. These effects control how the thumb moves and animates when the visitor clicks. The content itself always switches the same way regardless of which effect you choose.
6 Circle Switcher Effects:
• Icon Toggle: Replace the thumb with a custom icon, ideal for light/dark mode switches or language toggles.
• Elastic Toggle: A spring-loaded animation that overshoots and bounces back. Gives the toggle a lively, energetic feel.
• Stretch Toggle: The thumb stretches elastically as it moves, creating a rubber-band effect before snapping into position.
• Vertical Swap: The toggle moves vertically instead of horizontally. Useful in narrow column layouts.
• Dual Swap: The label and the thumb transition simultaneously. More visual energy than the standard Slide.
• Slide: The thumb slides smoothly from one side to the other. The most universally recognisable toggle style, suitable for any page design.
5 Square Switcher Effects:
• Scale Swap: The thumb scales up as it activates, growing confidently into its selected state.
• 3D Flip: The active state flips into view with a three-dimensional rotation. A premium visual effect.
• Dual Swap: Coordinated square transition. Mechanical and precise, well-suited for dashboard or SaaS-style designs.
• Slide: The square equivalent of the classic slide. Rectilinear and precise, suits structured or corporate-style layouts.
Type 2: Button
The Button type turns the toggle control into a row of button-style tabs. Instead of a sliding switch, the visitor sees clearly labelled buttons and clicks the one that corresponds to the content they want to see. This style feels more like navigation than a switch, and works well for content where the visitor might want to consider both options before deciding.
The Button type offers 6 styles/presets. Five of then are basic and the sixth style, the Nested Toggle, is exclusive to Premium Addons Pro and is described in detail in its own section below.
Type 3: Nested Toggle
🔥 Industry First: The Nested Toggle is the first implementation of multi-tier content switching. No other Elementor plugin including Essential Addons, PowerPack, Happy Addons, Ultimate Addons, HT Mega, or ElementsKit, offers this feature. It is available exclusively in Premium Addons Pro.
Every standard content toggle, including the other styles in this widget, gives your visitors exactly two choices: Option A or Option B. The Nested Toggle gives them a choice, and then reveals a second layer of choices inside the first or second selection.
Here is how it works in practice. Imagine a pricing table with two plan tiers: Free and Pro. A standard toggle lets visitors switch between those two options. With the Nested Toggle, when a visitor selects Pro, a second row of buttons immediately appears beneath the first, showing Monthly and Annual billing options. The visitor makes both decisions inside a single widget interaction, and the content panel updates to reflect both choices.
This mirrors how real purchasing decisions actually work: layered, progressive, and guided. It is particularly effective for pricing pages because it reduces the number of separate page sections needed to show all pricing combinations.
Ideas to Use the New Nested Toggle for Elementor
- Pricing tables with multiple plan tiers and multiple billing periods (e.g. Free / Pro → Monthly / Annual).
- SaaS or membership sites that charge differently by both plan level and billing cycle.
- Product pages where the visitor needs to select both a configuration and a size or color variant.
- Any scenario where a single binary toggle creates an incomplete picture for the visitor.
Widget’s Main Options • Layout Tab
- Toggle Settings
- Labels Settings
- Primary Content
- Secondary Content
- Display Options
01. Toggle Settings
- Type:
- Switcher
- Effects
- Circle: Slide, Dual Swap, Vertical Swap, Stretch Toggle, Elastic Toggle, and Icon Toggle.
- Square: Slide, Dual Swap, Vertical Swap, 3D Flip, and Scale Swap.
- Display
- Inline: Toggle switch and labels sit side by side on one horizontal line.
- Block: Labels stack above and below the toggle switch.
- Effects
- Button
- Five pre-made presets for easier and faster building experience.
- Nested
- 2 nested toggle layouts; Default and Flipped.
- Alignment
- Left, Center, and Right.
- Switcher
02. Labels Settings
- Primary Label and Secondary Label: A text field to add the left and right labels text.
- Icon:
- None: Means no icon will be displayed beside the label.
- Upload SVG: You can upload an SVG icon of your choice.
- Icon Library: Pick from the icon library offered by Elementor.
- Switcher Spacing: A slider control to adjust the space between the switcher and two labels.
- HTML Tag: This option lets you decide which HTML tag you want to set for your labels. You can select from
H1 to H6or you can set it as a<span>.
💡 Tip: For better SEO and accessibility, consider using H3 or H4 as the HTML tag for your Content Toggle/Switcher labels, depending on your page’s heading hierarchy.
- Effects: When the selected toggle type is set to “Switcher”, an additional control called “Effects” will appear. This option provides a collection of underline effects that can be displayed beneath the label text. Choose from 10 different effects; 7 designed for the active label and 3 designed for the inactive label.
- Active Label Effects: Curly, Underline, Double Underline, Wavy Line, Circle, Hand-drawn Underline, and Underline Zigzag.
- Inactive Label Effects: Strikethrough, Diagonal, and X.
03. Primary and Secondary Content Settings
- Type:
- Text Editor:
- Rich Text Editor: Where you can add a text content to your label(s).
- Alignement: Align the text to the Left, Center, or Right.
- Elementor Template
- Create/Edit Template: When clicking this button, a popup window will appear with a full Elementor editor area to give you the ability to build any content you want using any widget developed for Elementor. Feel free to build anything, you are not limited at all.
- Select Existing Template: If you already built a section and saved it as an ‘Elementor Template’, you can select it using this option. Simply, this control gives you a list with all of the saved sections/pages in your Elementor templates library.
- Text Editor:
04. Display Options
- Animation:
- None
- Fade
- Slide [Top, Bottom, Right, and Left]
- Zoom In
- Zoom Out
⚠️ Info: These animations are applied to the toggle content and appear as entrance animations when clicking on the switcher or label text.
Widget’s Styling Options • Style Tab
- When the Toggle Type is → Switcher
- Toggle
- Labels
- Toggle Container
- Content
- When the Toggle Type is → Button / Nested
- Labels
- Toggle Container
- Content
A. Toggle Type: Switcher
The styling controls below will appear when the toggle type is set to “Switcher”.
01. Toggle
- Size: Lets you adjust the switcher size in a way that fit your needs.
- Controller: This word is referring to the circle inside the switcher.
- State 1 and State 2 Colors: Both options allow you to customize the circle using a solid color, gradient colors, or an image.
- Shadow: Adds a shadow behind the circle controller. Customize it to achieve your desired look.
- Border Radius: Adjusts the shape of the controller, allowing you to keep it circular, make it a rounded shape, or create a square with sharp edges.
- Background:
- State 1 and State 2 Colors: Both are allowing you to customize the switcher background by adding a solid color, gradient colors, or an image.
- Shadow: Helps add a shadow behind the switcher background. In other words, the switcher itself.
- Border Radius: Controls the shape of the switcher background, allowing it to be circular, rounded, or have sharp edges.
02. Labels
- Typography: Lets you customize the switcher labels’ font. This section includes all the controls needed to adjust the font style.
- Text Shadow: This control adds a shadow to the switcher labels. Feel free to adjust it to fit your needs.
- Border Type: Adds a solid, double, dotted, dashed, or groove border style to each label individually. You can also adjust the border width for each side separately: top, right, bottom, and left using the “Border Width” control.
- Primary and Secondary Labels
- Active and Inactive States
- Color: Lets you customize the label text color for both the active and inactive states of each label individually.
- Icon Color: Lets you customize the color of the icon displayed beside each label text.
- Background: Adds a background color to each label individually for both active and inactive states.
- Box Shadow: Adds a shadow around each label individually. Customize the shadow settings to achieve your preferred look.
- Border Radius: Controls the shape of each label by adjusting the corner roundness, allowing you to create sharp, rounded, or fully pill-shaped edges.
- Active and Inactive States
- Padding: Adjusts the inner spacing between the label content and its border, allowing you to control how compact or spacious each label appears.
03. Toggle Container
- Background: Sets the background style of the toggle container, allowing you to use a solid color.
- Box Shadow: Adds and customizes the shadow around the toggle container.
- Border Type: Defines the container’s border style, such as solid, dashed, dotted, double, or groove.
- Border Radius: Controls the roundness of the toggle container’s corners, from sharp edges to a fully rounded shape.
- Padding: Adjusts the inner spacing between the container’s content and its edges, helping you control the layout density and breathing space.
- Margin: Controls the outer spacing around the container, adjusting its distance from nearby widgets and elements.
04. Content
- Height: Sets a height for the content area. In other words, it adjusts the content area’s vertical space.
- Primary, Secondary, or Nested Content
- Text Color: Adds a color to the text when the “Text Editor” is selected as a content type, allowing you to style the primary, secondary/nested content independently.
- Typography: Controls the font style, including font family, size, weight, and other text formatting options.
- Text Shadow: Adds and customizes the shadow behind the text that helps improving the readability when needed.
- Background: Sets the a solid background color for the content.
- Border Type: Defines the border style that needs to be applied to the content area.
- Border Radius: Controls the content area roundness corners, from sharp edges to fully rounded shapes.
- Margin: Adds outer spacing around the content area which helps controlling the distance between the widget amd surrounding elements.
- Padding: Adjusts the inner spacing between the text content and the edges of the content area.
B. Toggle Type: Button
You’ll find the same styling controls for Labels, Toggle Container, and Content. However, the controls listed under “Toggle”, as listed above, are not included here.
C. Toggle Type: Nested
The styling controls listed below are available when the selected toggle type is set to “Nested”.
01. Labels
- Size: Controls the overall size of the nested toggle, affecting its width and height.
- Dot Size: Adjusts the indicator dot size which exists between the two nested inner labels.
- Dot Spacing: Sets the spacing between the dot indicator and the labels text.
- Main Labels
- Typography: Controls the font style of the main labels, including family, size, weight, and the other text properties.
- Active Color: Defines the styling for main labels when they are in the active state which allows highlighting the selected option.
- Inactive Color: Defines the styling for main labels when they are in the inactive state, controlling how unselected items appear.
- Background: Helps adding a background color to the main labels.
- Box Shadow: Adds and customizes the shadow around the main labels when both are in the active state.
- Nested Label
- Typography: Controls the font style of nested/inner labels, including the font family, size, weight, etc.
- Active Color: Sets the text color of nested labels when they are active.
- Inactive Color: Sets the text color of nested labels when they are inactive.
- Inactive Parent Color: Defines the color of nested labels when their parent item is inactive.
- Active Parent Override Color: Overrides the parent label color when a nested item is active, ensuring clear visual emphasis on the selected state.
- Background: Sets the background style for nested labels. You can add a solid background color.
- Box Shadow: Adds and customizes a shadow around nested labels when each one of them appears in the ‘Active’ state.
- Inactive Opacity: Controls the transparency level of inactive label text.
02. Toggle Container and Content Styling Settings
You’ll find the same styling controls for the Toggle Container and Content as those listed earlier in this documentation.
Come & Join the Community
Feel free to join our Facebook group and subscribe to our YouTube channel to keep up with our newest features, improvements, and helpful video tutorials.
