1. Home
  2. Docs
  3. Happy Elementor Addons Pro
  4. Premium Widgets
  5. Unfold

Unfold

The new Unfold widget of Happy Addons Pro will add a feature to your website. You can efficiently fold & unfold any type of large web element in a more organized way.

Pre-requisites

To use that amazing Unfold widget, you need the following things:

  • Elementor
  • Happy Addons
  • Happy Addons Pro

How To Use Unfold

Let’s get started:

Step: 1

Select the ‘Unfold‘ widget from the left side Elementor widgets area. Then drag and drop the widget into the suitable area.

Add Happy Addons Unfold Widget

Step: 2

These are the Content options that will help you add to unfold content.

  • Content
  • Fold/ Unfold Options
  • Button
  • Wrapper Link

We’ll discuss all the options in the following part.

Content of Unfold Widget

In the Content–>Content section, you’ll get all the necessary actions to add the unfold content. You can a Title set HTML Tag, and Content Source here.

There are two different Content Sources like Editor and Template. We’ll discuss Content Source in the next part.

Content Source Editor

If you select the content source as an Editor, you need to add its content in the editor panel. You can check the below image to ensure how this works.

Set Unfold Content

Content Source Template

You can also add a custom template as the unfold content. To do this, you have to select the content source as Template. Now, you are able to display any type of pre-made templates as your unfolded content.

Template Unfold

Note: If you want to show the Unfold content on the full page, you need to click the Edit Section. Then go to the Layouts area. Where you have to set the Content Width as Full Page. Also, set the Column Gap as No Gap and active the Stretch Section.

Fold & Unfold Click Trigger

There are two types of Trigger that you can use to fold & unfold your content.

  1. Click
  2. Hover

Let’s see how these two feature works.

The Content–> Fold & Unfold area, you can set the Trigger of the unfold. You can choose Trigger like Click and Hover.

The Click trigger will work when you click on the button.

Content Fond and Unfold Options

Fold Height & Transition Duration

You can set the Fold Height (px) according to your purpose. Remember the lower fold height indicates the maximum part of the content will go under the fold.

You can also define the Transition Duration based on the milliseconds. This means whenever you unfold the folded content it will take this time.

Fold Height

Fold & Unfold Hover Trigger

You’re also able to set the Trigger as Hover. That means whenever you’ll hover over the button then the trigger start working.

Fold & Unfold Hover Trigger

Button Content

The Content–>Button section allows you to set the necessary content of the Unfold widget.

  • Button Position Above Content?: By activating the option, you can the display the button position above of your content.
  • Unfold Text: You can write a Unfold text in this area.
  • Unfold Icon: You are able to set an icon to the button.
  • Fold Text: Like the unfold text, you can write a Fold text here.
  • Fold Icon: If you want to add a Fold Icon, you can use this option.
  • Icon Position: You also are able to define the Icon Position Before & After the button text.
  • Alignment: Finally, you can set the button Alignment according to your need.
Content Button

Active Button Position Above Content

Let’s see how the button looks like if we active the Button Position Above Content.

Here you see the button have shown right after the Unfold Text and Above the Unfold Content.

Enable Button Position Above Content

Step: 3

These are the Style options that you can use to customize the widget. The options are available for you.

  • Box
  • Title
  • Content
  • Buton
Style Unfold

Style Box

In the Style–> Box section, you will get several options to style the entire content box. These are some of the notable options Margin, Padding, Border Type, Width, Border Radius, Background Type, Image, and more.

Style Box

Note: By default, we’ve added 20px padding of the content box surrounding.

Overlay Settings

You are able to add the overlay to your fold content. Manage the Overlay Height and add a different color to make it more exclusive.

Overlay Settings

Style Title

The Style–> Title section allows you to set the Title Margin, Color, Typography, and Text Shadow.

Style Unfold Title

Style Content

Like the Title, you can also change the entire content Margin, Color, Typography, and Shadow.

Style Button

If you want to redesign the button in your own way, you should go to the Style–> Button area and change the current design using the multiple styling options.

This Margin option allows you to add margins into the button surrounding.

Style Unfold Button

Step: 4

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Give a read to this Document to know more about advanced features & functions.

Adevanced Settings

Using this Unfold widget, you are able to make this kind of design.

Final Unfold Design Preview

That’s it.

Was this article helpful to you? Yes No

How can we help?