In this guide, we will show you how to add the “Content Toggle widget” to your Elementor website. The Content Toggle widget allows you to display two different pieces of content in the same space, with a smooth switch to toggle between them. Perfect for comparisons, before/after views, light/dark modes, or showing alternate versions of content, this free widget from Unlimited Elements makes it easy to present information in an interactive and space-saving way.
Let’s explore the customization options available in the “Content Toggle widget” for Elementor below.
Elementor Content Toggle Tutorial Video (Step by Step Guide)
Add a Free Content Toggle to Elementor
Add a Free Content Toggle Widget to an Elementor Page
Elementor Content Toggle Widget 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.
CSS ID: Reference content by a CSS ID.
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.
CSS ID: Reference content by a CSS ID.
Elementor Content Toggle Widget Style Settings
Label Spacing
Adjust the spacing between the content toggle labels.
Content Spacing
Adjust the spacing between the content area and other elements.
Content Padding
Adjust the internal spacing of the content area.
Content Align
Set the horizontal alignment of the content.
Content Shadow
Add a shadow effect to the content area.
Content Radius
Adjust the roundness of the content area corners.
Content Border Type
Select the style of the border for the content area.
Default
None
Solid
Double
Dotted
Dashed
Groove
Content Background
Set the background color for the content area.
Horizontal Align
Set the horizontal alignment of the switcher.
Track Width
Adjust the width of the switcher track.
Track Height
Adjust the height of the switcher track.
Track Border Radius
Adjust the roundness of the track's corners.
Thumb Width
Adjust the width of the switcher thumb.
Thumb Height
Adjust the height of the switcher thumb.
Thumb Border Radius
Adjust the roundness of the thumb's corners.
Thumb Initial Position
Set the starting position of the thumb.
Track Background Color
Set the background color of the switcher track for "Regular" and "Active" states.
Thumb Background Color
Set the background color of the switcher thumb for "Regular" and "Active" states.
Typography
Adjust the font, size, weight, and other typography settings for the labels.
Color
Set the default text color for the labels in both "Regular" and "Active" states.
First Label Override Color
Override the color specifically for the first label.
Second Label Override Color
Override the color specifically for the second label.
Typography
Adjust the font, size, weight, and other typography settings for the text.
Padding
Adjust the internal spacing of the text container.
Text Color
Set the color of the text.
Background Color
Set the background color behind the text.
Text Shadow
Add a shadow effect to the text.
Border Type
Select the style of the border for the text container.
Default
None
Solid
Double
Dotted
Dashed
Groove
Border Radius
Adjust the roundness of the text container's corners.
Typography
Adjust the font, size, weight, and other typography settings for the text.
Padding
Adjust the internal spacing of the text container.
Text Color
Set the color of the text.
Background Color
Set the background color behind the text.
Text Shadow
Add a shadow effect to the text.
Text Stroke
Add a stroke or outline effect to the text.
Border Type
Select the style of the border for the text container.
Default
None
Solid
Double
Dotted
Dashed
Groove
Border Radius
Adjust the roundness of the text container's corners.
Content Toggle Widget Design Examples For Elementor
Here are some live use cases for the Content Toggle widget.
AI Packages Content Toggle.
Thank you for using the Content Toggle widget for Elementor! This handy tool lets you switch between two content views with a smooth toggle, making it ideal for comparisons, before/after views, light/dark modes, or displaying alternative information in the same space. With its clean design, customizable settings, and seamless integration from Unlimited Elements, it’s perfect for presenting content in an interactive and space-saving way. For questions or inspiration, feel free to reach out or explore our demo.