Creating and Formatting "Unordered" Bullet Lists in Divi

Written by Dan Mossop

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, please see this post:

Adjust the Space Between Items in Divi Bullet and Numbered Lists 

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:

Spruce Up Your Bullet Lists

Enhance your Divi site's bullet lists with the Divi Booster! Easily format and style unordered lists using the wide array of text and design settings available. Perfect your site's typography and layout today.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

47 Comments

  1. Thanks for your post. This worked great for bullet points but didn't seem to impact numbered lists in the same way. Is there different CSS for numbered lists vs bulleted lists (I thought they were treated the same)?

    Reply
    • You're welcome, Mark. They are almost treated the same. The main difference is that number lists use the "ol" tag instead of the "ul" tag. I've extended the CSS to apply to both bullet lists and numbered lists, and have moved it into its own post:

      Adjust the Space Between Items in Divi Bullet and Numbered Lists

      (I also simplified / improved the CSS slightly by modifying it to apply a top margin instead of a bottom margin – that way it similarly modifies the spacing between the list and the text above and doesn't need a separate rule to remove padding below the list)

      I hope that helps!

      Reply
  2. Einer der größten Vorteile von Divi Booster ist seine Benutzerfreundlichkeit. Es ist eine einfache und intuitive Lösung

    Reply
    • Vielen Dank, Benjamin :)

      Reply
  3. Hi Dan – thanks for this – long time no chat, but I'm getting back into web-dev a bit with a site refresh.

    I came here looking for a way to increase overall space between bullet points and have enabled that option, which fixed one problem…but there seems to be another when using sub-bullets, in that it makes *too* much space when using sub bullets and I'm not sure the extra space is being added correctly for accordion modules.

    Screenshot here for context (site isn't live yet):
    https://share.cleanshot.com/tNGmeY

    Any thoughts are appreciated!

    Reply
    • Hey Ryan – welcome back :)

      I think this should do what you need:

      .et_pb_accordion .et_pb_toggle_content li > ul,
      .et_pb_accordion .et_pb_toggle_content li > ol {
      	padding-bottom: 0.5em;
      }
      

      You can add this into the "Divi > Theme Options > General > Custom CSS" box.

      I hope it helps, but let me know if not. Cheers!

      Reply
  4. Hello! Unfortunately the code doesn't work with the new Divi version. Could you revise the article or advice why it may not work? Thanks and really appreciate it!

    Reply
    • Hey Dmytro, the code still seems to be working in the latest version of Divi. Am I right in thinking you are trying to use this on the bullets on your linked homepage ("Liberate your data", etc)? If so, the issue there is that each bullet point is in its own text module / bullet list. The second CSS rule in the code above disables the margin adjustment on the final item in the list – to avoid pushing the content below the list down. But since all of your bullet points are the final item in their own lists this means the margin adjustment is disabled on all the bullet items and the code has no effect on your page.

      To solve this, you can just use the first CSS rule of the code which, adjusted for your CSS class name, is:

      .custom_bullets ul > li {
          margin-bottom: 16px;
      }
      

      Alternatively, since your bullets are in separate modules, you could just adjust the bottom margin on the text modules themselves. Either should work, but let me know if not. Thanks!

      Reply
  5. THANK YOU!

    Reply
  6. divi is taking my long list and automatically creating columns. this is OK except it lists the items left-to-right instead of top-down. is there a way to force it to be up-down?

    Reply
    • Hey Vincent, any chance you're able to point me to an example page? I tried to recreate the effect, but haven't been able to yet… cheers!

      Reply
  7. Is there a way to increase the spacing between each bullet list ITEM not the general line spacing of all the bulleted text?

    Reply
    • Hey Mike_e, I've made a few updates to the post, including adding a section on how to "Change the Space Between Unordered Bullet List Items". I think that should do what you need, but let me know if not. Cheers!

      Reply
  8. hello,
    how to add sub list in listing ?
    like :

    asdasdasd

    one
    two
    three

    Reply
    • Hey chintan, I've just added a section to the end of the post explaining how to create a sub-list. Hope it helps, but let me know if not. Thanks!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.