The Content Toggle is a simple yet powerful way to switch between two sets of content inside the same section of your Elementor design. Whether you want to compare features, display pricing options, or add a light/dark mode, a toggle keeps your layout clean and interactive. In this tutorial, we’ll walk through how to add a content toggle that seamlessly switches between containers in Elementor.
Popular Use Cases for adding a Content Toggle on an Elementor Website
Pricing Plans
A content toggle is perfect for pricing tables, letting visitors switch between monthly and yearly options. This keeps the layout clean while helping users instantly compare costs.
Product Comparisons
With a content toggle, you can show two product variations side by side. This makes it easier for visitors to compare features, benefits, and choose the best option.
Feature Highlights
A content toggle makes it simple to display pros versus cons or key highlights versus full specifications. This feature helps users compare important details quickly before making informed decisions.
Before & After Views
Use a content toggle to highlight before-and-after content, such as photo edits or design changes. It’s an engaging way to showcase transformations without using extra space.
Multiple Languages
Adding a content toggle for languages lets visitors view content in their preferred choice. It eliminates page reloads, improves accessibility, and creates a seamless multilingual browsing experience across websites.
Light & Dark Mode
A content toggle allows users to instantly switch between light and dark themes. This improves readability, enhances overall user experience, and gives visitors more control over their preferred viewing.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Content Toggle widget to your Elementor website
To switch between two containers, install the Content Toggle widget from the Unlimited Elements Widget library.
Step #3: Add the two Containers
Before adding the widget, design the two containers that will be switched using the Content Toggle widget. Assign a unique CSS ID to each container, which we will later connect in the widget.
Step #4: Add the Content Toggle widget to your Elementor page
Now, in the Elementor editor, find the Content Toggle widget and drag it to the desired part of your page.
General Settings
First Content Type
Choose the type of content for the first toggle state.
- Text: Display plain text.
- Image: Display an image.
- Template: Display a pre-designed Elementor template. (Pro)
- CSS ID: Reference content by a CSS ID. (Pro)
Second Content Type
Choose the type of content for the second toggle state.
- Text: Display plain text.
- Image: Display an image.
- Template: Display a pre-designed Elementor template. (Pro)
- CSS ID: Reference content by a CSS ID. (Pro)
First Content
Second Content
Wrapping it Up!
Adding a content toggle in Elementor is a smart way to save space while giving your visitors more flexibility in how they view information. With just a few steps, you can create a smooth, user-friendly toggle that enhances both design and usability. Try it out on your site and make your content more dynamic and engaging.