There are countless posts in the Divi Theme Users Facebook group on this topic, and even more answers. It seems few people have avoided this annoying little nuance and those that have so far, it’s only a matter of time ;).
The first thought is generally that it is an issue with Divi but in my experience it’s actually a WordPress issue. So I want to give you some tips on what has worked for me.
Firstly, why does WordPress do this?
Well basically it thinks that HTML elements like <p> and <br> are empty as they have no attributes associated with them, and WordPress being the very smart CMS it is, removes them because it thinks they are surplus to requirements.
So what we need to do is tell WordPress NOT to remove them. Here are two things that should help.
- Install TinyMCE Advanced. It’s a WYSIWIG plugin that adds some advanced features to the standard text editor so is good to have even if you are not experiencing the dreaded stripping issue.
It is available for free on the WordPress Repository here.
Install it like any other plugin and once done go to the settings page.
In the Advanced Options, tick the box to ‘Keep paragraph tags’ and be sure to save.
That’s all you need to do with this plugin for the purpose of this blog post, but have a look at the other options too as it has some useful features.
- The next thing we can do is to trick WordPress into thinking our HTML elements have some attributes by using empty classes.
So instead of writing:
We can use:
You can use empty classes on any HTML5 element.
Using the class attribute can also come in very helpful if you want to style specific text elements in a module rather than globally via CSS.
HTML5 doesn’t require the quotes around attribute values but it is advised to use them to prevent cross-browser compatibility issues. Also, if your attribute value contains spaces you will definitely need them so it’s best to use them as standard.
Another option if you don’t have much content other than some text is to use the Divi code module, stripping is less frequent in this module as it is specifically designed to read code, although styling options are limited.
Finally, if you are still experiencing stripping of HTML elements then try to avoid switching between the text and visual editor. Stay in one or the other as switching between them can cause elements to be stripped in completely different modules to the one you are working on. Crazy I know but that’s what it does!
I hope this was helpful, employing these tactics means I never have the stripping issue anymore (fingers crossed!) so hopefully it will do the same for you.