Long blocks of text push the rest of the page down. A Read More toggle shows the first lines and lets visitors open the rest when they want it.
The Unfold widget from The Plus Addons for Elementor cuts your text to a set height, fades the last visible lines and adds a Read More / Read Less button.
To check the complete feature overview documentation of The Plus Addons for Elementor Unfold widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Unfold is a Pro widget. In the free plugin it appears in the Elements panel with a lock icon, and a page that already holds an Unfold widget shows nothing of it while Pro is inactive.
- Widget to enable: Unfold, switched on under The Plus Addons > Widgets.
How to Add a Read More Button to Text
- Drag the Unfold widget onto the page. In Content > Unfold, type a heading in Title, or clear the field if you don’t want one.
- Leave Select Source on Custom Content.
- Paste the whole text into Content. The first part stays visible; the rest opens when the visitor clicks the button.
- Change Expand Button Text and Collapse Button Text if you want other labels than Read More and Read Less.
- Open Content Options and set Max Height, the height of the text box before it opens (default 100 px). Use the device icon next to the label for a different tablet or mobile height.
- Choose Content Expand Direction: Above Button shows the text and then the button, Below Button puts the button first.
The same two options in motion:
- Publish the page and click Read More to test it.
After the click the full text is shown and the button reads Read Less:
Content Options at a Glance
| Setting | What it does | Default |
|---|---|---|
| Max Height | Visible height before the text opens, 1-500 px. The tablet value applies from 1024 px wide down, the mobile value from 767 px down. An empty tablet or mobile value uses the next larger device’s height. | 100 px |
| Content Expand Direction | Above Button: text, then button. Below Button: button, then text. | Above Button |
| Custom Opacity | Off: a white fade covers the visible text. On: the fade covers only the bottom Opacity Height and fades to Opacity Color. | Off (Opacity Height 80 px) |
| Transition Duration (0 – 5000) | How long opening and closing take, in milliseconds. | 200 |
| Toggle Alignment | Position of the button row, per device. | Left |
| Scroll Top | After Read Less, scrolls the page back up to the widget title. | Off |
Here is a Read More toggle opening and closing:
How It Behaves
- The button only appears when the text is taller than Max Height on that device.
- Read More opens the box to the full text height and removes the fade. Read Less closes it to the Max Height of the current device.
- Several Unfold widgets on one page open and close independently.
Limitations
- The default book icons do not show on the page. They need Font Awesome, which the widget does not load. Choose your own icons in Expand Button Icon and Collapse Button Icon, and set Style > Toggle Button > Toggle Icon Options > Size: without a size, a chosen icon was about 40 px wide and pushed the button text onto two lines.
- The last line can be cut off when the text is open if your theme adds space above paragraphs. The widget measures the text without that space.
- Text shorter than Max Height gets no button, but the box keeps its height and the fade still covers the text.
- A Transition Duration of 0 is treated as 200 ms.
To stop the cut-off last line, set Style > Description > Margin to 0 at the top. In our test a margin of 0 top and 16 bottom showed the whole text and kept the space between paragraphs.
Troubleshooting
There is no Read More button
The text fits inside Max Height. Lower Max Height, and check the tablet and mobile values too.
The button has no icon
Pick an icon in Expand Button Icon and Collapse Button Icon and give it a size under Toggle Icon Options.
The opened text is cut off at the bottom
Set the top value of Style > Description > Margin to 0.
