Thoughts About How to Handle Long Text in Divi Layouts

First of all: you probably heard the rule in web design to keep text / copy as short and simple as possible. That’s true in most cases. To keep text short is a good start to improve readability. It ensures in one way that more user will most-likely read the text. And understand for what’s more important. In this post we talk about how to handle long text in divi.

However, there are cases where longer text may be needed. If you tell a story or try to explain a more complicate process or give a brief of history. Then the text will be longer. We have some rules for you, you can apply to, to get a better idea how to handle long text in Divi.

Prepare the text

If you finished writing a long text or you got the text from a client, you first need to prepare the text for your website.

  • Proofread it ! – More text means more mistakes
  • Shorten it as much as possible ! – All long text passages can be trimmed here and there, that’s why they are long.
  • Split the text in multiple paragraphs – This will enhance readability like nothing else.
  • Put subtitles on paragraphs, which summarize them.

Don’t only use 1 Column

Here comes the fun part: The Divi Builder uses columns to build any layout – from 1 up to 4 columns are possible. The easiest and fastest way to fill in your text is to use only 1 column. This way the text will be using almost the entire screen width. That’s maybe ok for smaller screen sizes, like phone and tablet. But if you look at this solution on a desktop, you will notice that it became harder to read. Also it doesn’t look very good. The longer (more width) the text lines are, the harder it gets to read. A user tends to loose the position while reading, gets frustrated and leaves.

So we need better ideas to handle long text in divi.

Use Columns

The best way to handle long text passages in Divi is to use more then only 1 column. It depends on how much space you have and how long the text really is for how many columns is best to use but you can start by using 3 columns like in the example below.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

SUBTITLE ONE

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

SUBTITLE TWO

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

( If you look at this example on phone or desktop you won’t see 3 columns. Divi handles the responsive part here pretty good )

As you can see in the example above, the long text was broken down in 3 columns. Like in a newspaper. The narrow line width, paragraphs and subtitles improve the readability and make the text look more interesting.

Switch sides

Another example what you could do with long text passages is the following: Use 2 columns, and after each paragraph just switch sides. LIke this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

SUBTITLE ONE

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

SUBTITLE TWO

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.

Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

That’s another great example on how to achieve an interesting look for long text passages and to increase readabilty. It also gives you more white-space and/or more space for images to put next to the text.

Inspiration

When you need to handle long text in divi or to create layouts for long text, you probably get the best ideas by looking at print design examples: newspapers, brochures, flyers, catalogues … check pinterest for example with keyword print design

 

 

handle long text in divi