Elementor text paragraph spacing is important for your WordPress site – just like font size, line height, padding, margins, etc. Because the space between paragraphs and lines significantly impacts readability and ease of use of your web content. But what is the correct spacing between paragraphs, and how to change the spacing between paragraphs in WordPress? This is exactly what I’m going to show you, step-by-step, in this Elementor tutorial!
Paragraph spacing is not the same as line height, padding, and font size. It’s also different from the default Elementor space between sections. All these factors don’t determine the actual space between paragraphs.
Of course, you can change the line height within Elementor’s text editor, but you mustn’t hope that this is also going to change the text block spacing on your WordPress site. Things are not working that way with Elementor!
To change the space after paragraphs with Elementor, you’ll actually need to get into Elementor’s Theme Style Settings – and I’ll be showing you how to do that in this tutorial!
Related: → Elementor For Photographers And Artists – QUICK & EASY Page Builder
Why does paragraph spacing in WordPress matter?
In the same way that font type, size, color, and line height are important for aesthetic design and user-friendliness, so is paragraph spacing on your WordPress site.
Paragraph and line spacing, in particular, impact the feel of the design and the degree of readability. A too small line height will make the text feel condensed and harder too read. If the line height is too large, the lines will look unrelated and spacey.
What is the correct spacing between paragraphs?
As a rule of thumb, paragraph spacing should be at least 1.5 times larger than the line spacing.
The main reason for defining a proper line height and correct spacing between paragraphs is to make text paragraphs look consistent and easy to read.
Both paragraph spacing and line height affect readability. Using a too narrow line and paragraph spacing on your WordPress site can be an issue for users with cognitive disabilities or visual impairments.
The World Wide Web Consortium (W3C) recommends setting the line height to at least space-and-a-half within paragraphs. So if your line height is set to 1.5 EM, your paragraph spacing should be at least around 2.25 EM (i.e. 1.5 times larger than the line spacing).
This is something to keep in mind when defining font size, line height, padding, and space between paragraphs on your WordPress site.
With that said, let’s see how you can change the text paragraph spacing within Elementor!
How do I change the spacing between paragraphs in WordPress?
To change the Elementor Text Paragraph Spacing, these are the four steps you'll need to follow:
Step-by-Step WordPress Tutorial
How to change the Elementor text paragraph spacing
STEP 1: Open Elementor Global Style settings
In order to change the Elementor text paragraph spacing, the first thing you need to do is click on the little ‘hamburger’ icon in the top left corner of the Elementor sidebar.
STEP 2: Select Theme Style Settings
A click on the hamburger icon will bring up Elementor’s Global Settings dialog.
Here, you find a lot of settings to change the default styling of your WordPress theme. For example, Elementor allows you to change the global font for headings and body text, the font style (italic, bold, underlined, etc.), or the default color palette used for your website.
Related: → How To Make An Elementor Heading In Different Colors
However, the one thing we need right now is the Theme Style settings. So simply click on the Theme Style tab under Global Style.
STEP 3: Open Typography dropdown menu
In the Theme Style menu, you’ll see several options to edit the default look of certain elements of your theme.
Click on Typography to open the dropdown.
STEP 4: Set text paragraph spacing
The Typography dropdown is where you can change the Elementor text paragraph spacing.
The first thing you’ll see in the Typography dropdown is the Body section. Here, you can change text style and color of the body text in Elementor.
Right below Body, you’ll find the Link section where you can set link colors and link typography for your entire WordPress theme.
Next is Paragraph Spacing and that’s exactly what we need right now!
To increase or decrease the Elementor text paragraph spacing, simply move the slider up or down, or type a value into the box.
You’ll be able to see your changes in real time in the preview area.
There are three different options to set the Elementor text paragraph spacing: pixels, EM, and VH.
Pixels (px) are considered an absolute unit, although they are relative to the resolution of your device’s screen.
EM and VH are relative units. Unlike Pixels, they adjust the spacing according to another element’s size. VH stands for Viewport Height and is relative to the viewable screen height. EM, on the other hand, is relative to the Parent Element.
Once you’ve set your paragraph spacing and are happy with it, click on the Update button at the very bottom of the Elementor sidebar, and the paragraph spacing will be applied to the entire content of your WordPress site!
You can easily set a different Elementor text paragraph spacing for tablet and mobile view.
Keep in mind that relative units are better for responsive website design, because they can scale up and down according to the device used (desktop, tablet, or mobile).
However, Elementor also allows you to set specific paragraph spacing values for different devices.
By clicking on the Device Icon next to ‘Paragraph Spacing‘, you can make different settings for Desktop, Tablet and Mobile.
Good. Here we are. You’ve just learned how to set the Elementor text paragraph spacing! 😄
Now let’s have a look at two examples to see how line height and space between paragraphs affect design and readability. Both examples have a font size of 20 pixels. In Example #1, the line height is set to 1.8 EM and the paragraph spacing to 20 px.
In Example #2, however, the line height has been reduced to 1.6 EM and the spacing increased to 30 px. What looks better? You decide!
Example #1
Example #2
How to remove the space after paragraphs in Elementor?
If you remove the space after a paragraph, the difference between paragraphs and lines will be indistinguishable and the text will become hard to read. Therefore, it’s not really recommended to remove paragraph spacing.
Elementor does not actually provide an option to remove the space between paragraphs. The only thing you can do is set the paragraph spacing to match exactly the line height of your text. That way, the difference between line height and paragraph spacing will no longer be visible on your WordPress site!
This tutorial showed you how to change the Elementor text paragraph spacing in OceanWP – the WordPress theme that I’m using for this site!
Get access to more than 100+ widgets for limitless design possibilities that speed up your workflow!
Learn more about Elementor:
I hope this little tutorial on how to change the Elementor text paragraph spacing was able to help you! If you enjoyed, please share the tutorial with other Elementor users and drop me a comment. See you soon, Angie 🌟
I was examining some of your content on this website and I believe this internet site is really informative ! Continue putting up.
Thank you so much, Kochen. Great to hear that!
Whats up! I just wish to give an enormous thumbs up for the good data you will have here on this post. I will be coming back to your weblog for extra soon.
Thanks for the thumbs up, Dinovo. Appreciate the feedback (:
Way cool! Some very valid points! I appreciate you penning this article and also the rest of the site is very
good.
Hey Sherlyn, happy that you like it! Great to have you around ♥︎
Good day very nice web site!! Guy .. Beautiful .. Wonderful ..
I’ll bookmark your site and take the feeds additionally? I am glad
to seek out so many helpful info right here within the submit, we’d like work
out more techniques on this regard, thanks for sharing.