Creating and Formatting "Unordered" Bullet Lists in Divi

Here are some tips for creating and formatting bullet lists (aka "unordered lists") within the Divi theme.

Create a Bullet List

To create a bullet list (or "unordered" list) in Divi, first place the items you want to include in the list in a text module (or other module), one item per line. Now, in the visual builder, highlight these items and a toolbar menu should appear, like so:

Click the "List Settings" icon (as shown above), then a new toolbar will appear:
Click the "Insert Unordered List" icon (as shown above) and your items should now be placed in a bulleted list:

Style Bullet Lists using the Module Options

Divi's text module now has options specifically between bullet list items. You can find them at:

Text Settings > Design > Text > "Unordered List"

As shown here:

The settings available include:

  • Unordered List Font
  • Unordered List Font Weight
  • Unordered List Font Style
  • Unordered List Text Alignment
  • Unordered List Text Color
  • Unordered List Text Size
  • Unordered List Letter Spacing
  • Unordered List Line Height
  • Unordered List Text Shadow
  • Unordered List Style Type
  • Unordered List Style Position
  • Unordered List Item Indent

Similar to text modules, you can also change the spacing between bullet list items in other modules such as the blurb module. You can find the settings at, for example:

Blurb Settings > Design > Body Text > "Unordered List"

Change the Space Between Unordered Bullet List Items

There isn't currently an option within the Divi module settings to adjust (only) the vertical space between the bullet list items.  The "Unordered List Line Height" option will increase the space between the items, but it will also increase the space between lines of text within the same bullet point.

To change the vertical space between bullet list items, while leaving the spacing of the text within items untouched, add this CSS to your site: 

.bullet_list_spacing ul > li {
    margin-bottom: 16px;
}
.bullet_list_spacing ul > li:last-child {
    margin-bottom: 0;
}

Then add a CSS class of "bullet_list_spacing" to any module to which you want to apply this modified bullet list item vertical space. You can set the CSS class at:

Module Settings > Advanced > CSS ID & Classes > CSS Class

The CSS above adds 16 pixels of extra space at the end of each item in the list, except the last one. 

Make a Sub-list in a Bulleted List

To make a sub-list of items in a bullet list, first put all your items in a single bullet list in the order you'd like them to appear on the page. Then, in the visual builder preview, select the items that represent the sublist. A popup menu should appear like so:

Click on the "List Settings" button. You should now see a new menu:

Click on the "Indent List" button and the selected items will be converted into a sub-list, like so:

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

43 Comments

    • Hi Sanjeev, I'm not sure exactly what you mean by "steel", but if you're trying to change the bullet points themselves with CSS something like this should work:

      .et_pb_text ul {
        list-style-type: circle !important;
      }
      

      If I've misunderstood, could you perhaps explain in a bit more detail what you're trying to do? Thanks!

      Reply
  1. Thank you for this inspiration! I decided now to use Divi for my new website!

    Reply
  2. oh man, I'm loving it. Thx so much for all the good stuff you are putting out here, highly appreciated!

    Reply
    • You're welcome, Carsten!

      Reply
    • Thanks a million for this tip, looks much better!

      Hi, is there any way to justify the text next to a bullet point (so that it doesn't wrap around below a bullet point)? Basically when you have two lines next to a bullet point for example.

      Thank you.

      Reply
      • Hey Antony, you're very welcome! Any chance you're able to share a link to an example page showing the problem? I might be misunderstanding… I set up a test page with a text module, but when I add a multi-line bit of text to a bullet point, the start of each line of text is in line with the start of the first, to the right of (insead of below) the bullet point. Thanks!

        Reply
  3. Hi, I have a problem. Could you help me?

    I want to change the line-height of all text bodies of my page entries

    I use this code: .et_pb_text_2 p {
    line-height: 1.7em;
    }

    I put it in the divi css editor but it does not work, it does not change to 1.7

    I have tried with

    p {
    line-height: 1.7em;
    }

    but it does not work either.
    what I do

    Reply
    • Hey Sergio, I can see you're now using the "!important" directive on your page entries:

      .et_pb_text_2 p {
      line-height: 1.6em !important;
      }
      

      It looks to me like it is taking effect correct – am I right in thinking you've got it working now?

      Reply
  4. Hello,
    I am wondering if you have some similar code for the numbered lists, which don't even output how they look in the back end? Would you be so kind as to provide a set of code for the bullet lists and another for the numbered lists (I am trying to pull this off, but making something of a mess of it.) My website is still on a local host unfortunately.
    Many thanks,
    Alison

    Reply
    • Hey Ali, that code should style numbered lists too. Are you seeing no change at all? If not, are you using a text module? And how are you adding the CSS?

      Reply
  5. Great! This solved my problem – THANK YOU!

    Reply
  6. I'm having issues with this. I have entered this into the CSS in my text module, but nothing is happening. I did a Google search and tried applying another code into the CSS of the child theme I am using, but again, nothing. It looks horrible in the article I am trying to write, and it's kind of frustrating that a simple indentation in a text editor would require novices to know how to use CSS.

    Not sure what else to do. :/

    Reply
    • Hi Jessie, yeah, I fully understand your frustration. Unfortunately there's no built in way to do it in Divi at the moment. You can't add this CSS in the text module's custom CSS tab, unfortunately. I won't bother you with the details, but if you ever to decide you want to learn CSS let me know and I'll happily explain why!

      The solution is to put the CSS from this post into Divi's custom CSS box, which you can find from the WordPress dashboard by going to: Divi > Theme Options > General > Custom CSS

      Just paste the code in there after anything else already in there and it should work. Let me know if it still doesn't work after that.

      P.S. If it helps, this post has a bit more info about adding CSS to Divi.

      Reply
      • Hello,

        Unfortunately that doesn't seem to work either. I actually DO know CSS now (among other things like JavaScript), but nothing I am doing is working. I have tried editing the list items in Dev Tools, and it works, but when I try to apply those to Divi's CSS box where you said, it doesn't work. I also tried the code here and it doesn't work. The list looks so bad in the article. I can't stand it, and it's taken me 4 months to publish simply because of THIS issue. Not sure why I can't make that custom.

        This is one of the reasons I decided to learn to code and why I am beginning to hate themes…

        Reply
        • Hi Jessie, sorry to hear you've been having trouble with this. I've just checked and the CSS is still working for me when added via the "Divi > Theme Options > General > Custom CSS" box. Is there any chance you're able to send me a link to a page on your site showing a text module with the list so that I can see how you have it set up (either you actual article, or just a sample page)? Thanks!

          Reply
  7. Hi, I'm aiming to increase the line spacing in bulleted lists with text paragraphs (not the space between or after). Suggestions? Thanks much.

    Reply
    • Hi Katie, if I'm understanding you right, I think this will do the trick:

      .et_pb_text li { line-height: 2.2em !important; }
      

      If you want to target only some text modules, give the module a CSS class (e.g. "my-bullets") and use:

      .et_pb_text.my-bullets li { line-height: 2.2em !important; }

      Reply
      • Hi Dan — came back here looking for the same thing and haven't gotten the solution yet. I must be doing something wrong because I get red error codes when I put the above CSS in the text modules I'm targeting. I put the CSS class in the correct spot.

        Reply
      • Okay so I see you said to another commenter above that you can't add CSS to a text module? Going to see what happens with using the code in the overall CSS section with the CSS i.d. now…

        Reply
        • Great! Thanks for the updates, Katie, and I'm glad you got it working. And that's right, this code can't be added from within the text module itself (due to the way Divi's custom CSS feature works).

          Reply
      • Thank you so much Dan, for your Blog and this great little snippet! I works like a charm :-)

        Reply
        • You're welcome, Mel :)

          Reply
  8. Hi, I use divi booster and increased the spacing between bulletpoints, but i would like it to be a little less spacing than Booster is using. Where can I change this? Pasting the .css in my childtheme doesn't work (tried that after turning booster text spacing off)
    thanks for your help!

    Reply
    • Hi saskia, there isn't currently an option in Divi Booster for controlling the amount of spacing in Divi Booster. Probably the best thing at the moment is to figure out why the css wasn't working in your child theme. Is there any chance you are able to send me one of the pages you're working on so that I can take a look? Thanks!

      Reply
  9. Oh, gosh — I'm looking for how to delete the space between a paragraph and the following list of bullets in Divi. Thanks!

    Reply
    • Hey, got it! Just use a minus sign, right?

      Reply
      • Hey Molly, yup, that should do the trick!

        Reply

Submit a Comment

Your email address will not be published. Required fields are marked *