{"id":104926,"date":"2023-03-06T12:44:57","date_gmt":"2023-03-06T07:14:57","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=104926"},"modified":"2023-07-18T10:28:39","modified_gmt":"2023-07-18T04:58:39","slug":"unfold-elementor-widget-settings-overview","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/unfold-elementor-widget-settings-overview\/","title":{"rendered":"Unfold Elementor Widget Settings Overview"},"content":{"rendered":"\n<p>The user experience is a critical component of any website, and it plays a critical role in the success of the website, one way to provide a better user experience is by having collapsible sections on a page. <\/p>\n\n\n\n<p>It can be a great way to save space and create an organised and easy to navigate page. This enables users to quickly and easily minimise, hide, or expand sections of their page with the click of a button.<\/p>\n\n\n\n<p>The Unfold widget from The Plus Addons for Elementor allows you to easily create different types of expandable sections in Elementor.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/unfold-expand-toggle?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n<li>This is a Premium widget, and you need the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\/?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n\n\n\n<li>Make sure the Unfold widget is activated, to verify this, visit Plus Settings \u2192 and Search for Unfold and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learn via Video Tutorial:<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Best way to create Unfold | Reveal | Expand | Toggle content section in Elementor page builder\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/bg4wkzAaBC8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Unfold Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Settings <\/strong>\u2192<strong> Plus widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name<strong> <\/strong>and<strong> turn on the toggle <\/strong>then<strong> <\/strong>click<strong> Save.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"912\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-activate.png\" alt=\"unfold activate\" class=\"wp-image-104928\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-activate.png 1920w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-activate-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-activate-1024x486.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-activate-768x365.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-activate-1536x730.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-activate-600x285.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Multiple ways to add content<\/strong> &#8211; There are multiple ways to add content, such as Custom Content, <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/elementor-templates-in-unfold-widget\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor Template<\/a>, <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/toggle-an-elementor-inner-section\/\" target=\"_blank\" rel=\"noreferrer noopener\">Inner Section<\/a> and <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/collapsible-elementor-flexbox-container\/\" target=\"_blank\" rel=\"noreferrer noopener\">Flexbox Container<\/a>.<\/li>\n\n\n\n<li><strong>Two types of expand buttons <\/strong>&#8211; You can use an icon or a Lottie file as the expand button.<\/li>\n\n\n\n<li><strong>Extra button<\/strong> &#8211; You can add an extra button to the expanded section.&nbsp;<\/li>\n\n\n\n<li><strong>Flexible button placement <\/strong>&#8211; You can place the collapsible buttons above or below the content.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to add content to the Unfold widget?<\/h2>\n\n\n\n<p>Once you add the Unfold widget on the page, you\u2019ll find an option to add a title. If you want to add a title to your collapsible section, you can add it in the <strong>Title<\/strong> field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"240\" height=\"1017\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-content.png\" alt=\"unfold content\" class=\"wp-image-104929\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-content.png 240w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-content-71x300.png 71w\" sizes=\"(max-width: 240px) 100vw, 240px\" \/><\/figure>\n\n\n\n<p>Then you have to select the content source of the expandable section from the <strong>Select Source<\/strong> dropdown. Here you\u2019ll find four options &#8211;<\/p>\n\n\n\n<p><strong>Custom Content<\/strong> &#8211; You can add the content directly using the editor in this option.<\/p>\n\n\n\n<p><strong>Template<\/strong> &#8211; In this option, you can use the Elementor template for the collapsible section and show different types of content. Learn more.<\/p>\n\n\n\n<p><strong>Inner Section Based<\/strong> &#8211; With this option, you can create any layout inside an inner section widget and turn it into a collapsible section. Check the process.&nbsp;<\/p>\n\n\n\n<p><strong>Container Based<\/strong> &#8211; If you are using the Elementor Flexbox container, you can turn it into a collapsible container with this option. Learn more about it.<\/p>\n\n\n\n<p>Once you\u2019ve added your content, you have to select the expand button type from the Icon Type dropdown. Here you\u2019ll find two options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Icon<\/strong> &#8211; You can use standard buttons with icons and text in this option.<\/p>\n\n\n\n<p><strong>Lottie<\/strong> &#8211; In this option, you can use Lottie icons with text.<\/p>\n\n\n\n<p>You can add an expand button text in the <strong>Expand Button Text<\/strong> field.<\/p>\n\n\n\n<p>From the <strong>Icon Position<\/strong> dropdown, you can place the icon before or after the button text.<\/p>\n\n\n\n<p>Depending on your icon type selection, you\u2019ll get an option to add icon or Lottie file.<\/p>\n\n\n\n<p>In the <strong>Collapse Button Text<\/strong> field, you can add text for the collapse button.<\/p>\n\n\n\n<p>You can turn on the <strong>Extra Button<\/strong> toggle if you want to add an extra button when the panel is expended.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"201\" height=\"1055\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-extra-button.png\" alt=\"unfold extra button\" class=\"wp-image-104930\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-extra-button.png 201w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-extra-button-57x300.png 57w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-extra-button-195x1024.png 195w\" sizes=\"(max-width: 201px) 100vw, 201px\" \/><\/figure>\n\n\n\n<p>In the <strong>Text<\/strong> field, you can add a button text.<\/p>\n\n\n\n<p>You can link the button from the <strong>Link<\/strong> field to an external link or a page.<\/p>\n\n\n\n<p>You can also add an icon to the button from the <strong>Extra Button Icon<\/strong> section.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Content Options<\/h2>\n\n\n\n<p>In the <strong>Content Options<\/strong> tab, you\u2019ll find more customisation options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"510\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-content-options.png\" alt=\"unfold content options\" class=\"wp-image-104931\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-content-options.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-content-options-176x300.png 176w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p><strong>Content Expand Direction<\/strong> &#8211; You can place the buttons above or below the content.<\/p>\n\n\n\n<p><strong>Max Height<\/strong> &#8211; You can set the initial height of the collapsible container for different devices.<\/p>\n\n\n\n<p><strong>Custom Opacity<\/strong> &#8211; From here, you can adjust the height and colour of the content overlay.<\/p>\n\n\n\n<p><strong>Transition Duration<\/strong> &#8211; You can adjust the panel open and collapse speed from here.<\/p>\n\n\n\n<p><strong>Toggle Alignment<\/strong> &#8211; You can align the buttons for different devices separately.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to style the Unfold widget?<\/h2>\n\n\n\n<p>If you want to style the Unfold widget, you\u2019ll find all the options under the Style tab.<\/p>\n\n\n\n<p><strong>Title<\/strong> &#8211; From here, you can style the collapsible section title. You can set different HTML tags for the title, and adjust its typography, colour, alignment and margin.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"645\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-style.png\" alt=\"unfold style\" class=\"wp-image-104932\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-style.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-style-140x300.png 140w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p><strong>Description<\/strong> &#8211; You can add some margin to the collapsible panel content. But for <strong>Custom Content, <\/strong>you can adjust the typography, colour and alignment as well.&nbsp;<\/p>\n\n\n\n<p><strong>Toggle Button<\/strong> &#8211; To style the toggle buttons, you can use this panel. Here you\u2019ll find all the styling options for the button, like padding, margin, typography, colour, background, button icon size, placement, colour, etc.<\/p>\n\n\n\n<p><strong>Lottie<\/strong> &#8211; If you\u2019ve selected Lottie as the button icon type, then you\u2019ll see this option. You can adjust the width, height, speed, and margin for different devices from here. You can turn the animation into a loop animation or make it play on hover.<\/p>\n\n\n\n<p><strong>Extra Button<\/strong> &#8211; If you use the extra button feature, you can style it from here. You can manage the button typography, colour, border, background and button icon size, placement, colour etc.<\/p>\n\n\n\n<p><strong>On Scroll View Animation<\/strong> &#8211;&nbsp; This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.posimyth.com\/tpae\/on-scroll-view-animation\/\">Learn more about On Scroll View Animation<\/a><\/p>\n\n\n\n<p>Advanced options remain common for all our widget, you can explore all it options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/theplusblocks.com\/docs\/advanced-tab-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Advanced tab tutorial.<\/a><\/p>\n","protected":false},"author":16,"featured_media":104941,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,551],"class_list":["post-104926","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-unfold"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104926"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104926\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104941"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104926"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}