In this guide, we’ll show you how to add a free “Toggle Text Button widget” to your Elementor website. The Toggle Text Button widget lets you switch between different pieces of text with a single click ideal for displaying more or less content in a clean, user-friendly way. Perfect for FAQs, expandable descriptions, or hidden messages, this widget keeps your layout tidy while enhancing user engagement. With customizable text options and smooth transitions, this free widget makes your content more interactive without adding clutter.
Let’s explore the customization options available in the “Toggle Text Button widget” for Elementor below.
Elementor Text Rotator Widget Tutorial Video
Add a Free Toggle Text Button to Elementor
Go to Unlimited Elements and click "Widgets".
Search for "Toggle Text Button" in the widget library.
Hover over the widget and click Install.
Add a Free Toggle Text Button Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Toggle Text Button" in the widget panel.
Drag and drop the “Toggle Text Button” into the container.
Elementor Toggle Text Button Widget General Settings
Short Text
Use this rich text editor to enter the content that will be initially displayed as the "short" version.
Long Text
Enter the full content shown when toggled open, with the same formatting options as the "Short Text."
Button Text
Text displayed on the button to expand from "Short Text" to "Long Text."
Button Text Close
Text displayed on the button to collapse from "Long Text" back to "Short Text."
Elementor Toggle Text Button Widget Style Settings
Text Alignment
Control the horizontal alignment of the text within the widget. Options include:
Inherit
Center
Left
Right
Button Alignment
Control the horizontal alignment of the button within its container. Options include:
Inherit
Center
Left
Right
Padding
Adjusts the inner spacing around the widget content (top, right, bottom, left).
Background
Sets the background color or image for the widget.
Space Between
Controls the vertical space between the text and the toggle button.
Button Padding
Customize the spacing inside the button—set values for Top, Right, Bottom, and Left.
Button Background Color
Sets the default background color of the toggle button.
Button Hover Background Color
Sets the background color of the toggle button when it is hovered over.
Button Border Radius
Controls how rounded the button’s corners are.
Button Padding
Adjusts the space between the button text and its edges (top, right, bottom, left).
Button Style
Choose how the button’s width is handled:
Auto Width: The button’s width adjusts automatically based on its content.
Full Width: The button expands to fill the entire container width.
Short Text Typography
Controls the font, size, weight, and style of the "short text."
Short Text Color
Sets the color of the "short text."
Short Text Background Color
Sets the background color for the "short text" area.
Short Text Padding
Adjusts the space inside the "short text" area (top, right, bottom, left).
Short Text Border Type
Define the style of the border around the short text element. Options include:
Default
None
Solid
Double
Dotted
Dashed
Groove
Short Text Border Radius
Controls how rounded the corners of the "short text" border are.
Short Text Box Shadow
Adds and customizes a shadow effect around the "short text" box.
Typography
Controls font style, size, weight, spacing, and decoration.
Text Color
Sets the color of the long text.
Background Color
Sets the background color behind the long text.
Padding
Adds space inside the text area around the content.
Border Type
Define the style of the border around the Long text element. Options include:
Default
None
Solid
Double
Dotted
Dashed
Groove
Border Radius
Rounds the corners of the border.
Box Shadow
Adds shadow behind the text area for depth.
Enable Styles
Toggle custom styles for the toggle button text on or off.
Typography
Customize font, size, weight, line height, and letter spacing for the button text.
Color
Set the button text color.
Custom Styles
Enter custom CSS for advanced button text styling.
Enable Styles
Toggle custom styles for the toggle button text on or off.
Typography
Customize font, size, weight, line height, and letter spacing for the button text.
Color
Set the button text color.
Custom Styles
Enter custom CSS for advanced button text styling.
Toggle Text Button Widget Design Examples For Elementor
Here are some live use cases for the Toggle Text Button widget.
Video Play Button with Toggle Text Button widget.
Currency Converter with Toggle Text Button widget.
Thank you for using the Toggle Text Button widget for Elementor! Designed to let users switch displayed text with a simple click, this widget makes toggling between custom text options easy and seamless on your website. It’s perfect for showing more or less content, helping keep your page clean while giving visitors the option to view additional information when needed. With customizable text settings and smooth transitions, the Toggle Text Button widget adds interactivity and flexibility without any complicated setup. If you have any questions or need assistance, feel free to reach out. For design inspiration and live examples, don’t forget to check out the demo on our website.
