Menu
Apparently – when you use Elementor’s own minimal Hello Theme – there’s no space (technically margin) added under a bulleted list. Adding a space manually between a bulleted list and the paragraph after that list really sucks, especially when you have to repeat that process over and over.
The subject has come up in the Elementor Facebook Community Group more than once. And today someone posted a very clear screencast about what he had already tried to solve it.
Copy the CSS below and add it to the CSS in your Customizer. One way to get into the Customizer via the WordPress dashboard is via Appearance → Customize, and then click on Additional CSS.
.elementor-widget text-editor ul, .elementor-widget-theme-post-content ul {
margin-bottom:1.5em;
}
By loading the video, you agree to YouTube's privacy policy.
Learn more
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!
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.”
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.
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.