How to Make a Collapsible Text in Divi Using Read More Extension

by | Mar 9, 2020 | Blog | 0 comments

Do you want to show only a slice of a rather long content or a post or do you want your long content to shrink down with a Read More button and when the user will click on the “Read More” button the whole text will be expanded. Well, in this article, we are going to talk more about how we can do that.

Divi Supreme Pro got a powerful extension called Read More Content and using it, you can easily collapse and expand your content with a “Read More” button.

Supported Divi Modules:

  • Text Module
  • Blurb Module
  • Blog Module
  • Call-to-Action module

Enable the Extension

First of all, you’ll have to enable the extension from the Divi Supreme’s Settings Page. Just enable the switch of the Read More Content Extension and Click on the Save Changes button.

With that done we can now move to the Visual Builder and open the Module’s Settings where Long text exists. Then move to Advanced Tab > Visibility > Use Read More Content.

When you enabled this option you can now play around with Its settings. First, you’ll have to set the Height of the Collapsed Text. For Example, we’ve set the height to 260px(You can add your own i.e 400px) and the Read More button will appear after 260px of the appearing text.

You’ll see, It’s already working very nice but what If you want to have this facility only for Mobile, well this is super easy. There’s a switch for this which will let you have this facility on Mobile Only. Just Enable the switch and see It’s working.

 

Changing the Text of Read More Button

You also got the option to change the text of the Read More button to your own one as shown below:

You’ll also find out a lot of other options to even get the most out of the Read More Extension. You can change the font, button size, button color. You also got a Show Shadow switch that adds a nice shadow in the Collapsed text and makes it look more unique. And not only that you can even apply custom CSS to the Read More button if you’re familiar with CSS.

 

Divi Readmore Content Example:

Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada. Proin eget tortor risus.

Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada. Proin eget tortor risus.

Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada. Proin eget tortor risus.

Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada. Proin eget tortor risus.

How to access the Divi Read More Content extension

To use the Read More Content extension, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

So, give Divi Supreme Pro a try today and don’t forget to share your experience with the Read More content extension in the comments section below.

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 18 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

18 − 15 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.