Elementor: How to fix line breaks and paragraph tags disappearing in the text editor

The issue is that in Elementor’s text editor, if you add a line break <br> and paragraph <p> tag, it gets removed when you do one of the following:

  • Go the visual editor and return to the text editor
  • Go to another element and return to the text editor
  • Save the page and return to the text editor

Also span tags get removed too, although this is less of an issue.

This is an issue that has been reported as an Elementor Github bug report since 9 June 2020: Nonbreaking space, <br> and <p> disappear in the editors #11560

There is not much of a discussion on this on the comments apart from a poor workaround, to convert the li styling to a paragraph, which I don’t think is a good solution.

Fundamentally this is an issue with the old classic editor that WordPress used to feature as its default editor, however it has become an “Elementor issue” as Elementor uses this old classic editor for its text widget.

It is a very frustrating issue and one of the hardest to fix with just trial and error. In fact I am quite suprised that there isn’t a backlash against Elementor for this or just more discussions on this in general.

I have seen many many suggestions for fixes for this, and most do not work in every situtation for every elementor site and for many suggestions I have seen put forward, there is still the possibility of accidently stripping out the html.

Here are 2 Complete Solutions:

This is Solution 1:

This was suggested by David Ghr in an Elementor forum discussion. Thank you!

Add a class to the tags. so instead of using <br> and <p>, simply add a class to them, for example:
<br class=”a”>
<p class=”a”>paragraph</p>

You can use any class name eg it could be class=”emptyclass”, but they should all be consistent. The class, should not be styled. You are using this class as a blank class, for the purpose of keeping the tag from being removed. If down the track you move from Elementor to another builder you don’t need to remove this code, however you can easily remove them as they are all the same string.

If your content is simple, then I think this solution is perfect. The downside of this solution is that if your html is complex, then this adds a lot more code and is harder to work with and solution 2 is better.

This is Solution 2:

Use a shortcode to insert the line break.

You can add this php code to the functions php file of your child theme or use a Code snippets plugin to add the code.

function line_break_shortcode() {
	return '<br />';
}
add_shortcode( 'br', 'line_break_shortcode' );

Then you can use the [br] shortcode instead of the <br>.

I prefer this solution because I often write a lot of complex html, since I tend to use classes a lot, and this means my code is easier to read and work with.

You may ask, what about <p> and <span> ? For paragraphs, I would just leave out the <p> tags they aren’t really necessary to include (or I include them if adding a class), and spans I only use when I am applying class that I have styled. So fixing the br tag is the only requirement to fix this issue.

If down the track, you move to another builder, you can leave it as it is and it will continue to work. Or you can remove the php code and change all instances of [br] to <br>.

Feel free to leave a comment below if this solved the issue for you, or if you have a question.

0 Comments

Submit a Comment

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