Ordered List Items

Design help General
1

Hi,

i want to create an orderd list like this:

  1. Text
    1.1 Text
    1.2 Text
  2. Text
    2.1 Text
    2.2 Text
    …

How can I do that in Webflow?
Thanks

2

Hi @Bettina_Lucas

You can change any list from unordered to ordered through the settings panel.

3

The first level i know. Like this

  1. Text
  2. Text

But i can´t create the second level inside.

  1. Text
    1.1 Text
    1.2 Text
4

Oh I see,

You will need to use some custom CSS.
Try putting this in the head section of the Custom code tab in Webflow

<style>
ol.main > li {
    counter-increment: root;
}

ol.main > li > ol {
    counter-reset: subsection;
    list-style-type: none;
}

ol.main > li > ol > li {
    counter-increment: subsection;
}

ol.main > li > ol > li:before {
    content: counter(root) "." counter(subsection) " ";
}
</style>

put the class main on your outer ordered list.

you can see an example in my sand-box Lists

https://preview.webflow.com/preview/sand-box?preview=7e1e2f5eb9348bad212ffcde02548858

5

I don´t know how to put it in my side? How can i put it in my head section? And how can i add the second level. There is no option. I can only add an ordered list with list items.

6

To start you can drag a list into the editor and make it an ordered list. (that you already know) You can then drag another list into the first list item. This will create a nested list.

On the first list add the class “main”
Allow the system to save.

Go to your dashboard of go to your website’s settings.
The last tab along the top is called “custom code” go there to place the code I provided in the head section which is labeled on that page.

7

I added a list section to my sand-box to give you an example of what I was talking about.

http://sand-box.webflow.com/lists

8

Edit: Can’t you just have the list items unordered by Webflow and do it yourself in the text box then adjust the position of the list item with the UI?