Back to contents

How to use Unfold effect to hide the extra content from view

This tutorial features Unfold effect from JetTricks plugin. You will have an opportunity to hide the content and style it according to the design of your page.

Unfold widget from JetTricks plugin is one of the space-saving widgets that can help you to organize the layout and hide extra content. It is used to make the content displayed by the widget to be hidden or showcased in a beautiful way.

Also, the Unfold widget includes a lot of customization options that can help you to get most out of it. For instance, you can style it differently in the fold and unfold modes.

So, let’s dive in this process.

Creating Unfold effect

Step 1 — Firstly, you should navigate to the Page to which you need to add Unfold widget and click Edit with Elementor to proceed.

Step 2 — Then, find the Unfold widget in the Elements panel and drag the widget to the section where you want to locate it.

Unfold widget in the Elements panel

Step 3 — Consequently, on the left sidebar, you will see Settings block. Here you can set Closed Height and Duration both for Unfold and Fold modes.

content settings for Unfold widget

Step 4 — In the Content block, you can add static content or pull it out dynamically from the meta field. Just click Dynamic option and select Custom Field from which you need to get the information.

content settings for Unfold widget

Also, you can change Fold Icon and Fold Text if needed.

button content settings for Unfold widget

Additionally, there is plenty of styling settings for each element. You can customize it according to the design of your page or post.

container style settings for Unfold widget

Step 5 — When you complete all the settings, don’t forget to click the Publish button.

Unfold widget of the JetTricks plugin

So, these easy steps are all you have to do. Well done!