How to Indent Bullet Lists in Divi
We’re going to go from this:
Bullet and numbered lists in Divi BEFORE adding this CSS trick.
To this:
Bullet and numbered lists in Divi AFTER adding this CSS trick.
And the best part is, once you have this code in your Custom CSS, this trick will work on all bullet and numbered lists across ALL Divi modules. Not just the text module as shown in the tutorial.
Here’s the CSS Code:
.entry-content ol, .entry-content ul {
padding: 30px 0px 30px 50px;
list-style-position: outside;
}
.entry-content ol li, .entry-content ul li {
margin-bottom: 10px;
}
Be sure to add this snippet of CSS to your Custom CSS area or Child Theme Stylesheet. In short and as explained in the tutorial, we targeted the bullet lists (ul) and numbered lists (ol) and adjusted the padding and spacing around each. Then we targeted each list item (li) within those and added some margin on the bottom to separate each one, making for a super pleasing and nice look 🙂 Just tweak the padding and make it your own!
Interested in Divi?
Get a special discount when you use my affiliate link!
Links Mentioned:
- JeffSum.com (awesome placeholder text)
- Divi Child Theme Explained + FREE Child Theme Download
- How to Use Inspect Element
- Where to Put Your Custom CSS in Divi
Recommended Courses:
- Divi/WordPress Beginners Course
Use code “diviwp22” at checkout to get the course for only $75! - Divi/CSS Course
Use code “css30” for $30 OFF the course! - Website Design Course
*sad — it didn’t work on my blog posts, although it DID work on my pages.
mmm it should work for both. Works for me. You can try adding !important after the padding and doing a new class with the same padding for #left-area ul, #left-area ol
I ran into the same problem with my blog posts. Adding !important after list-style-position: outside did the trick. Thank you so much Josh. Our lists look so much better now.
Beautiful, thanks!
I added the code to the custom CSS in theme customizer, along with the !important code and it’s still not working for my blog posts. Any idea?
Nevermind – got it. Thanks!
Awesome, did you clear your cache?
I always indent my bullets, but do it via the design tab rather than by adding css.
Is this result somehow different/better?
That’s another good option as well but I always prefer to do CSS globally that way, if I want to change the look of the bullets and lists, I can do it with code and it changes all pages globally. Otherwise you’d have to go back into every page, every section, etc and change the bullets. And if you have a ton of pages, that can be super time consuming. CSS is just so quick an efficient and time saving which is why I still stand by those methods even with the new Divi options.
Super helpful guidance on spacing bulleted and numbered lists, and making sure it applies to the correct places in Divi. Thank you!
Josh, thanks so much for this code! Great instructions, as always. 🙂
Nice tutorial Josh, I also had an issue with the code which I tweaked and the below code worked for me if anyone else has any issues:
.et_pb_module ol, .et_pb_module ul {
padding: 30px 0px 30px 50px;
list-style-position: outside;
}
.et_pb_module ol li, .et_pb_module ul li {
margin-bottom: 10px;
}
Thanks Rob! I’m going to be posting some alternative code as well that might help if anyone runs into issues that should override everything. Trick is to make sure it doesn’t mess with other parts of the site 🙂
Worked awesome Rob! Thanks Josh.
This is becoming my favorite go-to site for Divi style issues. You’re awesome!!! Thank you!!! I’m totally considering the course and may be back soon for that!
Thanks, Mikelle! If you have any questions, contact me. I have some active promos out so I’ll be sure to send you one for whichever course you’re interested in 🙂