Let's imagine that you created an email template and added a Bullet list there.

In this article, you will learn how to customize and edit the display of the Bullet list, and below I will show you how this can be done.

How can I customize my Bullet list?

Let's start with the space decreasing between lines.

If you would like to increase the space between the lines, you can add the style="margin-bottom:10px;" code to the tag <li> in the code editor. If you would like to decrease it, please just use style="margin-bottom:0px;"

For example:

Also, you can move the list to the right side from the container's border.

For this, please insert to the <li style="margin-left:20px;">. You can change the number of pixels.

And on the left side as well:

To do so, please go to the CSS section of the code, and you should insert
ul { margin-left: 5px; padding-left: 5px;}
Then the bullets will be aligned to the left side:

The next tip is to change the bullets and text color in the list.

The first step is to insert text to tag . After this, we can add the style attribute to each tag separately. For example, I set up different colors for bullets and text:

<li style="color:#cc0000">    
   <p style="color:#6aa84f"> Text 2 </p>
</li>

One more thing that we wanted to highlight is changing the type of the bullet itself

For this, please insert the list-style-type: '✓'; part to the tag <li> this way
<li style="list-style-type:'✓';">. You can change the check mark here with any HTML item or even an emoji.

This is the code example:

And here is what it can look like in the editor:

How to continue ordering the <ol></ol> list if you have it in separate text blocks?

Sometimes there may be a case to have the ordered list first and some other sub-content (<ul></ul> unordered list, text, etc.), and then you would like to continue the ordering using the ordered list <ol></ol>, but the count starts for the number 1: