Please note that the quick fixes I offer are out of the box solutions. I’ll never deny the possibility that there’s a better, quicker or cleaner solution to the issue at hand. If you have it, and you’re willing to share it, come find me on Twitter, or send me a message on Telegram.
The explanation of the “why” of this particular fix, requires you to have at least some very basic understanding of HTML and CSS. If you want to learn more about that, I suggest you start at the MDN Web Docs. Working with Elementor (Pro) out of the box can get you really far where it comes to creating a cool looking website. However, if you know how to manipulate elements with HTML and custom CSS, your artistic freedom increases tenfold!
Why I chose to address the class called .elementor-text-editor
Simply addressing the <ul> on it’s own – in any website, by the way – can be risky, since that element could be flying around in other parts of your website as well. Menus, for example, are usually unordered lists. If you simply add your style to the <ul>, you could end up seeing your menu go haywire. So by adding the class called .elementor-text-editor (which actually is a class that is very specific to Elementor as a page builder – you’re actually saying: “Make sure nothing weird happens in other parts of the page / website, only apply this style if the unordered list resides within the div which has this class, and nowhere else.”
Why this piece of CSS is added in the WordPress Customizer, instead of the Custom CSS tab in Elementor
If you want a piece of CSS to be applied to an element that resides in more than one place in the website, the WordPress Customizer is a good place to put it. From here I could start telling stories on how you can actually also put it in something called a child theme, or how you can use the Code Snippets plugin if using child-themes is not your preferred method – if you create styles that you are sure you’ll want to use on other websites as well – but I’m going to leave that for another day.
How you can find out which class to address in similar situations, with other themes, and other page builders
For stuff like you can use the Chrome browser. It has a cool feature called “the inspector”. With that you can peek under the hood of a website and see what CSS is used on what. Here’s a video from WPLearningLab that shows the basics of this tool. The reason I picked this one to link to is that it’s short, and simple without a lot of yapping and unwanted fairydust.
If you would like me to create a video especially about inspecting Elementor pages – since the jungle of nested divs and classes can be very overwhelming – drop me a message on Twitter, Facebook or LinkedIN.