New feature: Ordered and unordered lists

Now you can create real lists in rich text elements! :boom: :ribbon:
To start a new ordered or unordered list, just click the corresponding button in the Add toolbar.

Check it out:

You can also start a list by typing hyphen (-), asterisk (*), or any number, then hitting the spacebar.

Check it out:

If you don’t actually want to create a list (for example, if you want to start a heading with a number), just hit Backspace after the Rich Text Editor starts the list.

Hitting Return or Enter at the end of a list item will add another list item. Hitting Return or Enter twice will start a new paragraph below the list. You can also do this in the middle of a list to split it in two.

Check it out:

And yes, lists you paste from Google Docs or another website will work just fine.
Note: To make lists as beautiful as possible, we added a 10px margin-bottom to all lists (ol and ul elements), which may affect your existing sites. Check out this post for more info.

20 Likes

woooo excelent work guys!!

Yeah ! Thanks guy ! :+1:

Great! Thank you so much.

Bless your little pea-pickin’ hearts. Thank you for this awesome addition!

1 Like

Great timing for a project I was working on… keep pushing with the updates.

This is awesome!

One question! Is there a way to style the bulletpoints? So far on my site I had blue bulletpoints to match the color scheme of the page. Is this possible to do in the template page for the collection?

@DFink it’s possible to style bullets by selecting All Unordered Lists and choosing the bullet type in the typography panel. But you’d have to add custom code to change the color or have completely custom bullets.

Note: you can do something like this layout - How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags - Stack Overflow

This does not work for me. I don’t see that little plus button. I see in the typography panel a button for making unordered lists but nothing happens when I click on it to format my text. I am using the latest version of Safari on a Mac. Do we know if that is an issue? I can’t seem to get it to make lists either with buttons or with numbers.

Yeah these lists in Rich Text blocks came just in time! I was in need of it.

Styling the global List style will affect all your lists, also in Rich Text blocks. Also font color. However, we can’t style bullet points and text color seperately anymore. So it’s just a matter of waiting until Webflow releases custom bullet points. That would be nice :smile: Currently that’s easy to do with manually created lists, but not possible in Rich Text Blocks (or in dynamic collection items).

What do you mean by this? When were you able to style them separately?

Hey @rowan you can use this custom code to change the color of the bullet points and have a separate color for the text :wink:

<style>   
  ul > li
      {
          color: #cea142;
      }
</style>

No I just meant normally when I wanted different color bullets and text, I would just insert a paragraph (styled “bullet list paragraph” for example with pink font color) into a bullet list item which I styled with black font color (the bullet color). (See: http://deka-lash.webflow.io/about-us/our-story)

But I think the code from Waldo would work!

Would be very useful to have a menu item lists in editor to quickly create/remove a list

Right now to create a list in a pasted text i need to

  1. copy the list items
  2. delete them
  3. create a list with a + button
  4. paste list items
1 Like

A post was split to a new topic: Trouble with ordered/unordered list in design

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
Please create a new linked topic if you have further questions.