Elementor text editor

The Elementor text editor is straightforward and a great tool that helps position text where you want it within any WordPress theme. 

This post is for people editing a page/post already converted to Elementor.

There is no difference between Elementor and Elementor Pro regarding the Elementor text editor. You can use these instructions for either.

Get started editing text in the Elementor text editor

To edit a blog post or a web page with Elementor, go to pages or posts on the left-hand side. 

Once you see a list of pages or posts, you’ll see those that Elementor controls are marked.

Click EDIT WITH ELEMENTOR.

The WordPress Elementor page editor will open. 

To change the text within a text widget, hover over the text widget. 

A pen icon will appear at the top right of the box (number 1 on the image below). 

Click on that to activate the widget. 

On the left-hand side, you will see the text inside the text box; this is where you edit the text (number 2 on the image below). 

It’s tempting to edit the text in the widget on the page, which is possible, but it doesn’t work as well – there are glitches, so use the left-hand text editor. 

Now hit the bright green UPDATE button at the bottom to save the page (number 3 on the image below). The button won’t appear until you make a change.

Voila! It’s simple to make an edit to any page converted to Elementor.

Elementor font size

Be careful when changing the font size in the Elementor text editor; your web designer may have set the font perfectly to fit on the page. 

For consistency, keep the same font size running throughout the website. To achieve uniform font size, always change the font size in the global settings within Elementor. However, if you want to force a font size in a particular box, you can.

To change the text within a text widget, hover over the text widget. 

A pen icon will appear on the top right of the box (number 1 on the image below). 

Click on that to activate the widget. 

On the left-hand side, you will find CONTENT / STYLE / ADVANCED at the top of the column (number 2 on the image below).

Hit STYLE. 

Now look for Typography and hit the pen icon (number 3 on the image below).

You can set the font size to pixels (px), ephemeral unit (em), root ephemeral unit (rem) or percentage (%).

You can also choose different font sizes for a desktop, a tablet and a mobile device. 

Elementor line spacing

Take care when changing the line spacing, too; your web designer may have set the spacing up perfectly to fit on the page.

To change the line spacing within an Elementor text widget, hover over the text widget. 

A pen icon will appear at the top right of the box (number 1 on the image above). 

Click on that to activate the widget. 

On the left-hand side, you will see CONTENT / STYLE / ADVANCED at the top of the column (number 2 on the image above).

Hit STYLE. 

Now look for Typography and hit the pen icon (number 3 on the image above).

Scroll down a little to find the Line Height and Letter Spacing. Here you can play around with the line spacing to find your perfect fit.

How to do single line spacing in elementor

Typically, WordPress and Elementor create a new paragraph when we hit enter/return. The top paragraph will be about two line spaces from the one underneath. How do you do a single-line space?

Add an HTML break <br> to do a single line space.

You can do this in Elementor by hitting SHIFT+ENTER or SHIFT+RETURN.

If you’d like to reduce the gap between all paragraphs and those below, you should do this across the website via the Elementor global settings. 

When you are on any page using Elementor, click the Hamburger menu (the three lines) in the upper left corner.

Now hit Site Settings, then Typography. Under BODY, find Paragraph Spacing. Increasing the paragraph spacing number enlarges the space below all paragraphs.

Force Elementor to decrease the paragraph spacing by typing -(minus) and then a number.