Excerpts are a great resource to make your articles more attractive, they are those phrases that convince you to click when the headline alone can’t.
Now, WordPress themes, and Divi is no exception, often apply default sizes for these excerpts that almost always make the fragments of our blog posts look ugly, of different sizes, breaking the aesthetics of our website. I mean this…
When the ideal, what we are looking for, is something more uniform, that does not break the styles of the site, especially when we use the grid mode of Divi’s blog module, something like this …
Table of Contents
What elements influence the size of WordPress excerpts?
There are several elements that make up blog post snippets in a file or module that affect their size:
- Post title – A post that displays at 3 lines will always display a longer excerpt than one whose title only occupies 1 or 2 lines.
- Post excerpt – Whether manual or automatic, the size of the content excerpt affects the total size of the visible portion of the post.
- Metadata – Information such as author, tags, date, category, even the read more button add more size to these snippets, and will make them different sizes depending on how long the author names, categories, or even how many of them are visible.
The target data of the posts
The metadata of the posts is all that information that is automatically displayed (or not) in which you can see who is the author of an post, its publication date, comments, tags and categories.
These data, which can be of interest to the visitor, you should control them to a certain extent, showing them only where they are really necessary, and if possible not to break the design of your pages.
In Divi, you can control which elements of this metadata will be displayed in the blog module settings.
In this sense, my advice is that in Divi blog modules never show categories or author, because their variable length will make your excerpts uncontrollable.
Then, when clicking on each post, if the visitor wishes, he will be able to see all the metadata under the title of the post.
Excerpts from the posts
The next important element to control would be the extracts, perhaps my favorite, because of all the possibilities it offers us.
Types of excerpts in WordPress
Excerpts are a tool of the posts, not of the pages, which can be added mainly in two ways:
- Automatically, if the theme provides them on the content archive pages: cover, category, author, tags, etc.
- Manually, via the editor’s excerpt box.
Currently, most themes automatically add the excerpts, displaying the first X characters of the content they find in the post content, and Divi is no exception, as you can see in the example above in the automatic excerpts.
The advantage of manual extracts
On the other hand, if you want to control exactly what will be shown as text, I recommend you always use manual excerpts.
Divi and manual extracts
If you use Divi theme (otherwise you wouldn’t be reading this), surely you have already noticed that even if you define excerpts manually the theme doesn’t display them, it still uses the automatic excerpts.
This is an attempt of the theme (Divi) to make the display of blog post snippets in modules or archives uniform, always applying the default excerpt length, which in Divi is 270 characters.
Now, what to do if you want to start using manual excerpts with Divi?
Simple, go through its settings in the administration of your WordPress site, specifically in “Divi → Theme Options” and check the box labeled “Use excerpts when defined“.
Save the changes and from now on, if you define a manual excerpt Divi will use it in your blog snippets, and if there is no manual excerpt it will continue to apply the default character limit.
In fact, activating manual excerpts is one of the methods we are going to take advantage of to change the size of the excerpts, being systematic when creating our manual excerpts, so that the fragments of our blog posts always have the same appearance and size.
Here it is important that you get used to always writing the same (approximate) amount of lines, almost even words, in your manual excerpts, otherwise you will have very disproportionate blog post snippets, which is exactly what we want to avoid.
In addition to the Divi theme options, if you prefer not to make this decision for the entire website, in each Divi blog module you can configure the extracts in a personalized and specific way.
Customizing blog excerpts in Divi
As I was saying, in each Divi blog module you can customize the excerpts, in the module settings.
For starters, a way to avoid design destruction would be, and it is not crazy, simply not to show the excerpts, disabling them, as they are active by default.
If you are consistent in the creation of titles, as we will see below, disabling extracts makes it more difficult to display unbalanced fragments, as you can see in the above screenshot.
A less radical adjustment is to specify which extracts you want to display, manual (if any) or automatic.
With this setting active (by default) you have the same as with the Divi options setting we saw before, that is, if there is a manual excerpt it will be displayed, and if not an automatic excerpt created by Divi will be displayed.
On the contrary, if you deactivate it, the automatic extracts will always be displayed in that blog module, no matter how you have configured the general Divi options, even if there are manual extracts defined.
To finish with the possibilities of customization of the Divi blog module extracts, you can also use automatic extracts, but changing the default size, changing the number of characters to the one you prefer, in these same settings.
By the way, remember to always save the changes in the settings, and before exiting the Divi builder, otherwise, everything you modify will not be applied.
The post titles
Last but not least, no matter how picky you get with the metadata, and how much you personalize your extracts, it will sometimes be of no use if you have title lengths that are very different in size. Here’s what I mean.
See what I mean? We have eliminated possible discrepancies in size by removing the target data, we have produced uniform extracts, but headlines of different lengths wreck the balance previously achieved.
Here are 2 possible solutions:
- Get into the habit of always creating headlines of similar length, taking into account their ultimate display on the different possible screen sizes. It seems more complicated than it is, with practice you will reach perfection. After all, haven’t you already mastered this on Twitter, and are there more characters to consider?
- Shorten the titles to the characters or words you want with a few lines of code.
Then you will have the perfect snippets or excerpts of blog posts, with a consistent design, thanks to Divi and a little skill and the tricks we have seen in this guide.
