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

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

35 Comments

  1. 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
  2. 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

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