In this guide, we will show you how to use the “Unfold Content widget” on your Elementor website.The Unfold Content widget is a space-saving tool that allows you to hide long text or content blocks by default, revealing them only when users choose to expand. It’s perfect for maintaining a clean and organized layout while still providing access to full content when needed.With its responsive design and customizable options, the Unfold Content widget helps create a smooth and engaging user experience on your Elementor site.
Let’s explore the customization options available in the “Unfold Content widget” for Elementor below.
Elementor Free Unfold Content Tutorial Video
Add a Free Logo Carousel to Elementor
Add a Free Unfold Content Widget to an Elementor Page
Elementor Unfold Content Widget General Settings
Trigger
Determines how the content is revealed.
Overlay
Controls the visual effect at the bottom of the folded content.
Fold height
Sets the initial visible height of the content in its folded state, measured in pixels (px).
Transition Duration (ms)
Sets the speed of the unfolding and folding animation in milliseconds (ms).
Enable Title
A title will appear above the foldable content area, helping users identify what the section is about.
Title
This is the text displayed as the section’s title. You can customize it to match your content or design needs.
Title HTML Tag
Determines the HTML heading tag used for the title (H1–H6). This setting helps maintain proper SEO structure and page hierarchy.
Content Source
Defines where the content is pulled from. Selecting “Editor” allows you to input the text or media directly within the WordPress editor.
Editor
This is the main text editor (WYSIWYG) where you can enter the content that will be shown partially by default and fully revealed when the user clicks “Read More” or “Unfold.”
Enable Button
Activates the toggle button, allowing users to expand or collapse the content.
Button Position
Places the button inside the content container, usually at the bottom of the folded section.
Folded Text
The text displayed on the button when the content is collapsed.
Unfolded Text
The text displayed on the button when the content is fully expanded.
Icon Folded: (Downward Arrow)
The icon shown next to the “Read More” text, indicating expandable content.
Icon Unfolded: (Upward Arrow)
The icon shown next to the “Read Less” text, indicating collapsible content.
Elementor Unfold Content Widget Style Settings
Alignment
Centers the content and elements within the widget container.
Padding
Adds 30 pixels of internal spacing on the Top, Right, Bottom, and Left of the content.
Background
No specific background color or gradient is applied.
Box Shadow
No shadow effect is applied to the widget container.
Border Type
No specific border style (Solid, Dashed, etc.) is set.
Border-Radius
The corners of the container are square with no rounding.
Title Typography
Uses the site’s default or global font, size, and weight for the title.
Title Color
Uses the site’s default or global color for the title text.
Text Typography
Uses the site’s default or global font, size, and weight for the main foldable content.
Text Color
Uses the site’s default or global color for the main foldable content text.
Button Align
Aligns the button (Left, Center, Right, Justified).
Button Spacing
Controls the margin/space around the button.
Button Typography
Customize font, size, weight, and style for button text.
Button Background
Sets the default background color.
Button Background Hover
Sets background color on hover.
Button Text Color
Color of the button text.
Text Color Hover
Text color when hovered.
Padding
Inner spacing inside the button.
Border Type
Sets the border style (Solid, Dashed, None, etc.).
Border Width
Width of the border on each side.
Border Color
Color of the button border.
Border Radius
Rounds the corners of the button.
Icon Color
Color of the button icon (if present).
Icon Size
Size of the icon (px).
Button Gap
Space between text and icon.
Unfold Content Widget Design Examples For Elementor
Here are some live use cases for the Unfold Content widget.
Unfold Content with a Trigger Button.
Unfold Content for a Product.
Thank you for using the Unfold Content widget for Elementor! This simple yet powerful tool lets you hide long text or content blocks by default, revealing them only when users choose to expand. Designed to keep your layout clean and organized, it helps improve readability and user experience. For support or inspiration, feel free to get in touch or explore our demo.