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

40 Comments

  1. 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
  2. THANK YOU!

    Reply
  3. 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
  4. 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
  5. 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.