1. Home
  2. Docs
  3. Dynamic Contents
  4. Unfold

Unfold EA Element

Unfold Elementor Addons is one of the most space-saving widgets that helps you organize the layout easier. The widget lets you show or hide content with a click of a button. The Unfold widget includes many customization options that help you get the most out of it. Here in this tutorial, you’re going to learn how to use the Unfold element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Unfold Element

 

 

»Content

 

Content

⇒Title: Enable or disable the title. When enabled, the following options are available:

→Title: Add a title text.

→Title Heading: Select the HTML tag that will be used to display the title. Choose between H1-H6 where H1 is the largest and H6 is the smallest. The default is H3.

⇒Content: You can add the content in the Richtext editor. You can edit the text visually or with code, and also add images from the Media Library.

⇒Alignment: You can justify the content or align it to the left, center, or right.

 

Button

⇒Unfold Text: Add the text for the button that is used to unfold and show the remaining content.

⇒Fold Text: Add the text for the button that is used to fold and hide the content.

⇒Icon: Enable or disable a button icon. When enabled, the following options are available:

→Fold Icon: Add an icon for the button on folding.

→Unfold Icon: Add an icon for the button on unfolding.

→Icon Position: Choose to place the icon before or after the button text.

⇒Button Size: Customize the button size by selecting between small, medium, large and block (full width)

⇒Button Position: Select between inside and outside.

⇒Alignment: Align the button to the left, center, or right.

 

Fade Effect

⇒Faded Content: Enable or disable faded content. When this option is enabled, the lower part of the text content will be faded, and when the content is unfolded, the fade is also removed.

⇒Fade height: Increase or decrease fade height. Select a value between 1 and 400. The default value is 30px. You can preview the fade height directly in the editor before applying your settings.

Advanced Settings

⇒Fold Height: Select the unit used by the fold height. You can choose between percentages and pixels.

⇒Fold Height: Select how much of the folded content that should be shown by adding a value for the fold height. The default is 60%.

⇒Fold Duration: Fold duration is the amount of time the fold animation takes. Select between slow, fast and custom. When the custom option is selected, you can set the duration in seconds. The default is 0.5 seconds.

⇒Fold Easing: Select the animation style for the fold. Choose between swing and linear.

⇒Unfold Duration: Unfold duration is the amount of time the unfold animation takes. Select between slow, fast and custom. When the custom option is selected, you can set the duration in seconds. The default is 0.5 seconds.

⇒Unfold Easing: Select the animation style for the unfold. Choose between swing and linear.

 

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.


»Style

 

Box Settings

⇒Background Type: Select a background type for the box in both normal and hover mode. You can select a solid background color or a gradient, or select or upload an image via the WordPress Media Library.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the box for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the box border for both normal and hover view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the box for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Set the margin value for the top, right, bottom and left around the box for different dimensions. You can link the values together or customize them individually.

⇒Padding: Padding is the space between the edge of the box and the content inside it. Adjust the padding using pixels, em or %.

 

Title

⇒Color: Select text color and opacity for the title.

⇒Typography: Set the typography options for the title.

⇒Background Type: Select a background type for the title. You can select a solid background color or a gradient, or select or upload an image via the WordPress Media Library.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the title for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the title border.

⇒Border Radius: Increasing the border-radius will add circular corners to the container around the title. You can adjust the border-radius in pixels, % or em.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Margin is the space between the title and the text content. Adjust the margins for all sides or individually using pixels, em or %.

⇒Padding: Padding is the space between the title and the edge of the title container. Increasing the padding will make the background behind the title larger. Adjust the padding for all sides or individually using pixels, em or %.

 

Content 

⇒Color: Select text color and opacity for the content.

⇒Typography: Set the typography options for the content.

⇒Background Type: Select a background type for the content. You can select a solid background color or a gradient, or select or upload an image via the WordPress Media Library.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Margin is the space between the content and the outer container as well as the title. Adjust the margins for all sides or individually using pixels, em or %.

⇒Padding: Padding is the space between the content and the edge of the inner container. Increasing the padding will make the background behind the content larger. Adjust the padding for all sides or individually using pixels, em or %.

 

Button

⇒Typography: Set the typography options for the button.

⇒Text Color: Add a custom color to the button text for both normal and hover view.

⇒Background Color: Add a custom background color to the button text for both normal and hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the button border.

⇒Border Radius: Increasing the border-radius will add circular corners to the container around the button. You can adjust the border-radius in pixels, % or em.

⇒Text Shadow: Add a shadow behind the button text. customize the color, horizontal position, vertical position, and blur.

⇒Buton Shadow: Customize the button-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Margin: Margin is the space between the button and the widget content. Adjust the margins for all sides or individually using pixels, em or %.

⇒Padding: Padding is the space between the button and the edge of the button. Adjust the padding for all sides or individually using pixels, em or %.

 

Fade Color

⇒Background Type: With this option, you can select the gradient colors and opacity used for fade color. You can also select a solid background color, or select or upload an image via the WordPress Media Library.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width on each side for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Increasing the border-radius will add circular corners to the container. You can adjust the border-radius in pixels, % or em.

⇒Padding: Increasing the padding will increase the space of the area that is covered by the fade color. Adjust the padding using pixels, % or em.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Unfold Element.


Was this article helpful to you? Yes No

How can we help?