Quick Note: I have recently seen reports of Divi stripping out the p tag. Solution 1 below might be the solution to this. Please leave a comment if this was the solution for Divi.
In my experience as an Elementor Developer, this is possibly the most pressing issue that needs to be fixed – but few people are talking about.
The issue is that in Elementor’s text editor, a line break <br>, paragraph <p> and span <span> tag, disappear 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 a great soluton in the comments apart from a poor workaround, to convert the li styling to a paragraph, which I don’t think is a good solution.
The solution put forward by Nicholas at the end of that Github thread in the link above works to some degree. He suggests to installed the “Advanced Editor Tools” plugin, but is not a great solution because it converts <br /> tags to <p> </p> which is not ideal and makes the code messy.
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:
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.
I also prefer this solution because it is much easier to learn for a client, than classes. Non techie clients don’t know what a class is. They have never worked with a class and never will.
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>.
Not perfect solutions, but it the best we have. At least we have some workarounds. Feel free to leave a comment below if this solved the issue for you, or if you have a question.
Have to agree with your assessment of surprise of no further backlash, and went with option 2 with the added CSS of overwriting the default BR height (I wanted two BRs between “paragraphs”, so it would work more like P tag).
Thanks for the code!
Thanks for your feedback Adrian. I’m glad it worked for you.
This is indeed one of the most frustrating things about Elementor/WordPress. Thanks for the temporary solutions.
No problem Adrian. I completely agree with your comment.
Thanks for posting, I was having the same issue and then I found that in Elementor’s text widget, in the visual editor, try using SHIFT + RETURN where you want your line break. After updating the page I saw the br in chrome inspector.
Hi Ava, showing in chrome inspector doesn’t reflect any solution to this problem. The issue is when you return to the text editor, that code will be gone.
I have come across some situations when it stays, but much of the time it does not, and a proper solution needs to work always and every time.
Hi Mastery Websites, for the second method, can you clarify where we put the shortcode? I added the php manually and then I type up my text (which is a paragraph, p) using either the visual editor on the main part of the page or the text editor section on the left (NOT the tab that says “text” but the “text editor”). Either place, if I type the short code [br], it shows as text, ie, literally [br]. I can’t, and it makes no sense to, insert a new element for a short code because that would break up the paragraph and the whole point is to be able to type without manually inserting a new element every time.
Hope that makes sense and that you can help.
Hi Stephanie, I have a feeling that you may have not enabled the code snippet, or the snippet has not been added correctly. Feel free to submit the contact form on this site and I’d be happy to take a look.
We just got started with Elementor and our tags were disappearing but we didn’t know why. It was super frustrating. Your post here helped us figure it out and fix the issue. Now–not so frustrating. Tons of thanks for posting this and helping us out!
Good to know this helped!
Thank you, solution 2 above worked perfectly for me. Much appreciated.
Thanks for your feedback Adel.
Great solution!
It works.
Still you are right.
This issould be resolved…
Great to know this worked for you!
Thanks A lot . I Can’t even think about this solution. This was a headache for me. i was searching the solution for it as I have seen your solution and I did the same and result is that it is being worked for me.
Great to see this solved it!
Dear Mastery Websites,
I am so glad that I found your article.
Thank you, thank you, than you !
Solution 2 works like charm for me
Yes I like solution 2 too!