{"id":104958,"date":"2023-03-06T13:35:51","date_gmt":"2023-03-06T08:05:51","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=104958"},"modified":"2023-03-06T13:35:51","modified_gmt":"2023-03-06T08:05:51","slug":"add-read-more-toggle-button-to-text-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-read-more-toggle-button-to-text-in-elementor\/","title":{"rendered":"How to add Read More Toggle Button to Text in Elementor?"},"content":{"rendered":"\n<p>Are you looking to add a read more toggle button to text in Elementor to make better use of your space on a page? Having an effective and efficient website is key to making sure that users have a positive experience. One of the components that can help with this is the use of read more toggle buttons to help break up blocks of text. Using these types of buttons can help make a website more user friendly, and can help make the design more visually appealing.<\/p>\n\n\n\n<p>The Unfold widget from The Plus Addons for Elementor allows you to easily add a read more button to text content and help you control the amount of text that is visible to the users initially.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Unfold widget, <a href=\"\/docs\/unfold-elementor-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure it&#8217;s installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/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<p><\/p>\n\n\n\n<p>For this, add the Unfold widget on the page. If you want to add a title, you can add it in the <strong>Title<\/strong> field.<\/p>\n\n\n\n<p>Then from the <strong>Select Source<\/strong> dropdown, choose <strong>Custom Content<\/strong>.<\/p>\n\n\n\n<p>In the <strong>Content<\/strong> section, add your text content in the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"426\" height=\"1045\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-custom-content.png\" alt=\"unfold custom content\" class=\"wp-image-104959\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-custom-content.png 426w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-custom-content-122x300.png 122w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-custom-content-417x1024.png 417w\" sizes=\"(max-width: 426px) 100vw, 426px\" \/><\/figure>\n\n\n\n<p>After adjusting the button settings, go to the <strong>Content Options<\/strong> tab.&nbsp;<\/p>\n\n\n\n<p>From here, you can choose the button placement and the initial container height for responsive devices. You can play with the other settings here to customise it further.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"299\" height=\"519\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-button-placement-container-height.gif\" alt=\"unfold button placement container height\" class=\"wp-image-104961\"\/><\/figure>\n\n\n\n<p>This is how you can add a read more button to a text block in Elementor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"374\" height=\"482\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/unfold-text-content-demo.gif\" alt=\"unfold text content demo\" class=\"wp-image-104962\"\/><\/figure>\n\n\n\n<p>So this is how simple it is to add a read more toggle button to text in Elementor using the Unfold widget.<\/p>\n\n\n\n<p>Also, read <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/collapsible-elementor-flexbox-container\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to make a collapsible Elementor Flexbox container<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":104963,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,551],"class_list":["post-104958","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\/104958","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=104958"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104963"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104958"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}