{"id":6998,"date":"2019-02-21T14:02:10","date_gmt":"2019-02-21T14:02:10","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=6998"},"modified":"2024-12-06T13:12:22","modified_gmt":"2024-12-06T13:12:22","slug":"how-to-apply-the-read-more-widget-to-the-content","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/","title":{"rendered":"How to Apply the Read More Widget to the Content"},"content":{"rendered":"\n
\n

The Read More<\/strong> widget for Elementor provides an opportunity to hide particular sections and make the page\u2019s layout more minimalistic and attractive. Unlike the content hidden by Unfold widget, the section you hide with the Read More<\/strong> widget can\u2019t be closed after the user opens it. However, this widget also allows you to show the hidden sections one by one. If you would like to learn more about the Unfold<\/strong> widget \u2013<\/strong> check out this tutorial<\/strong><\/a>.<\/p>\n\n\n\n

Let\u2019s explore how to use the Read More<\/strong><\/a> widget for Elementor.<\/p>\n<\/div><\/div>\n\n\n\n

Add the Section You Want to Hide<\/h2>\n\n\n\n
\n

Navigate to the Page <\/strong>or Post <\/strong>where you need to add the Read More<\/strong> widget. Click the \u201cEdit with Elementor\u201d<\/strong> button to proceed.<\/p>\n\n\n\n

The Read More<\/strong> widget will hide the specific section, so you need to create it first. Click the \u201cAdd Section<\/strong>\u201d button at the bottom of the page, choose the section layout, place all the necessary widgets there, and customize the section via the tools of the Style <\/strong>tab. <\/p>\n\n\n\n

<\/svg><\/div>
Things to know<\/div>

The Read More<\/strong> widget hides the whole section and you can fill that section with any type of content: texts, video, maps, listings, etc. To get an insight into what you can hide under the \u201cRead More<\/strong>\u201d button \u2014 check out this demo.<\/strong><\/a><\/p><\/div><\/div>\n\n\n\n

After you finish creating the section\u2019s design, open the Advanced <\/strong>tab of the section. There you will see the CSS ID<\/strong> field where you should type in the unique name of the section, for example, \u201chidden-section-1\u201d.<\/p>\n\n\n\n\"Advanced\n\n\n

<\/svg><\/div>
Things to know<\/div>

If you want to hide several sections, you will need to add personal IDs to each of them.<\/p><\/div><\/div>\n<\/div><\/div>\n\n\n\n

Add the Read More Widget<\/h2>\n\n\n\n
\n

Find the Read More<\/strong> widget in the Elements panel and drag it to a suitable location.<\/p>\n\n\n\n\"JetTricks\n\n\n\n

On the left sidebar, you\u2019ll see the Sections <\/strong>and the Settings <\/strong>section. In the Sections <\/strong>block, you can define what sections to hide. Click the \u201csection_1\u201d item and type in the CSS ID<\/strong> of the section you want to hide in the Section ID<\/strong> bar. You can add as many hidden sections as you need by clicking the \u201cAdd Item<\/strong>\u201d button. The hidden sections become grey, and that is an indicator you did everything right.<\/p>\n\n\n\n\"Read\n\n\n

<\/svg><\/div>
Things to know<\/div>

The hidden sections will be shown in the order you set in the Section<\/strong> block, one by one.<\/p><\/div><\/div>\n\n\n\n

In the Settings <\/strong>block, you can change the appearance of the \u201cRead More\u201d<\/strong> button. <\/p>\n\n\n\n

    \n
  • Icon <\/strong>\u2013 here, you can choose the icon for the button. You can either choose it from the icon library or download your own SVG file;<\/li>\n\n\n\n
  • Label <\/strong>\u2013 this is the text that will be shown on the button, its title;<\/li>\n\n\n\n
  • Show All Sections<\/strong> \u2013 if you turn this toggle on, all the hidden sections will be shown at once after the user clicks on the \u201cRead More<\/strong>\u201d button. Otherwise, the sections are shown one by one, and the user will have to hit the \u201cRead More\u201d button every time he wants to see the next section;<\/li>\n\n\n\n
  • Show Effect<\/strong> \u2013 here are 6 variants of the hidden section showing animation, so you can choose the most fitting one.<\/li>\n<\/ul>\n\n\n\n\"Read\n\n\n\n

    \u0421lick the \u201cPublish<\/strong>\u201d or \u201cUpdate<\/strong>\u201d button and proceed to the preview in order to see the result.<\/p>\n<\/div><\/div>\n\n\n\n

    That\u2019s all you have to do to organize content in a compact way with the Read More<\/strong> widget.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Find out how to organize content in a compressed way with the help of JetTricks and its Read More widget.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[559],"yoast_head":"\nHow to Apply the Read More Widget to the Content | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to use the JetTricks Read More Widget and organize the section visibility of your website. Make the layout of your page more compact.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Apply the Read More Widget to the Content | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to use the JetTricks Read More Widget and organize the section visibility of your website. Make the layout of your page more compact.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-06T13:12:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/advanced-settings-css-id.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/\",\"name\":\"How to Apply the Read More Widget to the Content | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-02-21T14:02:10+00:00\",\"dateModified\":\"2024-12-06T13:12:22+00:00\",\"description\":\"Learn how to use the JetTricks Read More Widget and organize the section visibility of your website. Make the layout of your page more compact.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Apply the Read More Widget to the Content\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Apply the Read More Widget to the Content | Crocoblock","description":"Learn how to use the JetTricks Read More Widget and organize the section visibility of your website. Make the layout of your page more compact.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/","og_locale":"en_US","og_type":"article","og_title":"How to Apply the Read More Widget to the Content | Crocoblock","og_description":"Learn how to use the JetTricks Read More Widget and organize the section visibility of your website. Make the layout of your page more compact.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/","og_site_name":"Help Center","article_modified_time":"2024-12-06T13:12:22+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/advanced-settings-css-id.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/","name":"How to Apply the Read More Widget to the Content | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-02-21T14:02:10+00:00","dateModified":"2024-12-06T13:12:22+00:00","description":"Learn how to use the JetTricks Read More Widget and organize the section visibility of your website. Make the layout of your page more compact.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jettricks\/how-to-apply-the-read-more-widget-to-the-content\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Apply the Read More Widget to the Content"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/6998"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=6998"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=6998"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=6998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}