Premium Unfold Widget

Intro

Premium Unfold Elementor widget 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 helps you get the most out of it.

You can view the animation and styling options on the demo page.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key features

• Content
• Button
• Fade Effect
• Advanced Settings

1. 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. 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. Also, you can include Elementor Templates.
  • You can use Elementor Live Templates feature to create/edit Elementor template on the same page. For more information, please check Elementor templates article from here.
  • You can also select an existing Elemntor templates.
• Alignment: You can justify the content or align it to the left, center, or right.

2. 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
  • Unfold Icon
  • Icon Position: Choose to place the icon before or after the button text.
• Button Size: Select between:
  • Small
  • Medium
  • Large
  • Block (full width)
• Button Position: Select between inside and outside.
• Alignment: Align the button to the left, center, or right.

3. 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.

4. Advanced settings

• Fold Height Select the unit used by the fold height. You can choose between percentage and pixels.
• Fold Height: Select how much of the folded content 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.

Style

• Box Settings
• Title
• Content
• Button
• Fade color

1. Box Settings

The Box settings lets you change the styles for the normal and hover status for the container around the text. -Note that the button is outside this box.

• Background Type: Select a background type for the box. You can select a solid background color or a gradient, or select or upload an image via the WordPress Media Library. If an image is selected, the following options become available:
  • Position:
    • Default
    • Top Left
    • Top Center
    • Top Right
    • Center Left
    • Center Center
    • Center Right
    • Bottom Left
    • Bottom Center
    • Bottom Right
    • Custom: Adjust the image’s X and Y positions using pixels, em % or vw.
  • Attachment: Default, Scroll or fixed.
  • Repeat:
    • Default
    • No-repeat
    • Repeat
    • Repeat-x
    • Repeat-y
  • Size:
    • Default
    • Auto
    • Cover
    • Contain
    • Custom: Adjust the image width using pixels, em % or vw.

No matter which Background Type you select, the following options are also available:

• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the widget:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border radius: Increasing the border radius will add circular corners to the container. You can adjust the border radius in pixels, % or em.
• Box Shadow: You can add a shadow around the widget with this option. Select the color and the following settings:
  • Horizontal position
  • Vertical position
  • BlurSpread
  • Position: Outline or Inset
• Margin: Margin is the space between the box and the rest of the content on the page. Adjust the margin using pixels, em or %.
• Padding: Padding is the space between the edge of the box and the content inside it. Adjust the padding using pixels, em or %.

2. Title

• Color: Pick a color for title text.
• Typography:
  • Select from a large number of font families.
  • Select the font size in either pixel, em, rem or vw.
  • Select the font-weight: From 100 (thin) to 900 (very thick), default, normal or bold.
  • Transform the text to Uppercase, lowercase, capitalized, default or normal.
  • Select a font style: Normal, italic, or oblique.
  • Select a text-decoration: Default, underline, overline, line-through, none.
  • Adjust the line-height.
  • Adjust the letter spacing.
• 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. The background will fill the length of the inner container behind the title.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the widget:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• 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.
• Shadow: Add a shadow behind the title text. Select from the following options:
  • Color
  • Horizontal position
  • Vertical position
  • Blur
• 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 %.

3. Content

• Color: Pick a color for content text.
• Typography.
• Background Type: Set 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.
• Shadow: Add a shadow behind the text. Select from the following options:
  • Color
  • Horizontal position
  • Vertical position
  • Blur
• 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 %.

4. Button

The Button settings lets you change the styles for the normal and hover status for the button which unfolds and folds the text.

• Typography.
• Text color: Select the text color of the button.
• Background Color: Select the background color for the button.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the button:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border radius: Increasing the border-radius will add circular corners to the button. You can adjust the border-radius in pixels, % or em.
• Text Shadow: Add a shadow behind the button text. Select from the following options:
  • Color
  • Horizontal position
  • Vertical position
  • Blur
• Button Shadow: Add a box shadow around the button itself. Select from the following options:
  • Color
  • Horizontal position
  • Vertical position
  • Blur
  • Spread
  • Position: 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 %.

5. 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. If an image is selected, the following options become available:
• Position:
  • Default
  • Top Left
  • Top Center
  • Top Right
  • Center Left
  • Center Center
  • Center Right
  • Bottom Left
  • Bottom Center
  • Bottom Right
  • Custom: Adjust the image’s X and Y positions using pixels, em % or vw.
• Attachment: Default, Scroll or fixed.
• Repeat:
  • Default
  • No-repeat
  • Repeat
  • Repeat-x
  • Repeat-y
• Size:
  • Default
  • Auto
  • Cover
  • Contain
  • Custom -Adjust the image width using pixels, em % or vw.

No matter which Background Type you select, the following options are also available:

• Border Type: Select between the following border types, as well as the color and the width of the border on each side:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• 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: