How to continue numbering in an ordered list with paragraphs between list items?

Hi all!

Does anyone know how to get continuous numbering in an ordered list when there are paragraphs between list items? it seems that there should be a way to manually set the number, if nothing else.

Thank you!

https://preview.webflow.com/preview/nanatoo?preview=b8da473be86da68e3dec8e60b8eae806

Hi @tkister,

Could you, please, point us what page of your site has this text?

Resources > Blog > How to Choose a Style Guide

This page is not yet linked to the main Blog page.

This is more a question about whether this is possible in Webflow in general.

When you create the list items, do not hurry to type text just right inside it. You can add different elements inside the list item: heading, paragraph, etc.

Here is screencast how to do this: - YouTube

Cheers,
Anna

Currently the correct way is to use Shift + Enter to insert a new line in the same list item.

Thanks for taking the time to make these screencasts.

I’ll see what I can discover in them. I’d love it if you could explain – even briefly – using words instead of video. I can’t read the words in the panels in the video, and I’m not sure what the core idea is. (It’s really hard to tell which steps are the important steps to take.)

Thanks again!: grinning:

@sabanna

I don’t suppose you can send me a link to the Webflow page you used for the screencast?

Thanks again! :grinning:

It looks like one key might be to include the normal paragraphs inside the list like this:

However, I’m still not sure how to get consecutive numbers…

I’ve chosen Decimal as the numbering type for the blog-list-item, but that doesn’t do it.

I tried applying the Decimal number type to bullet as well, and that doesn’t do it either.

I tried moving the normal paragraphs into the blog-list-items to match the structure in Sabanna’s video, but it won’t let me do that.

Sabanna’s structure:

When I try to replicate it:

Sorry to be difficult! I appreciate the help! :grinning:

Hi, @tkister.

I dragged and dropped new list on the page. Then, without adding any class and without typing any text in the list, I dragged and dropped heading and paragraphs inside the list item. Then give list and list items classes, that you already have/use. Then edit the text and heading.

Or you can use the method, that Sam showed. Just edit the text that you already have in the list items. For that, you can double click on the existed text and add more content there.

Regards,
Anna

@sabanna, the question wasn’t clear. @tkister is asking how to add new lines in a List Item while in a Rich Text Component.

Answer is still press Shift + Enter (on Windows) twice to add a new line. That’s all there is to it.

@samilew: I’m not working in a Rich Text Component. I’m also not asking how to add a new line – I’m asking how to get consecutive numbering.

I’ll try using a heading instead of a paragraph, as Sabanna did, and see if that works.

Thanks again!:grinning:

I’m still not able to get this to work - every time I try to paste a paragraph into the list, as shown in Sabanna’s video, I get the message that I can only paste list items into lists.

Still seeking help on how to create consecutively numbered (ordered) lists with paragraphs between the list items…

In HTML, it might look like this:

Code:

Browser:

Ok. Lets try one more time. Step-by-step.

1) Add new list to the container (section, div, etc.) where it supposed to be:

  • select the container (section, div)
  • open the Elements panel
  • click on the List element

2) Add the Heading inside the LIST ITEM:

  • select the List item
  • open the Elements panel
  • click on the Heading element

3) Add the paragraph inside the LIST ITEM:

  • Select the List item
  • open the Elements panel
  • click on the Paragraph element

4) Repeat this as many times as you need. If you need more than 3 List items, add new list items inside the LIST, then repeat steps 2-3.

At the end you will have desirable structure:

1 Like

@sabanna:

Thanks for including the screenshot of the structure in the Navigator panel. That helps a lot. :grinning:

However, there are still no consecutive numbers for the list items.

How do I get the Headings in your example to show up as consecutively numbered list items with the paragraphs in between?

It looks like there might be numbers next to the headings in your recent screenshots (can’t quite tell), but I can’t see how you got them. When I follow the instructions, this is what I get:

Maybe I have a bug or something…

Hi @tkister, I was taking a quick look, and for me at least, the paragraphs are autonumbering using an ordered list:

One thing I needed to do though, is to give the List box a class and a font color of black, so that the ordered list numbers were visible, those are currently set to white font on a white background = invisible numbering.

Does this help? See my screenshot above for test list structure.

@cyberdave

OMG. No wonder I was having such trouble. The numbering was there, but I couldn’t see it!

Thanks everybody, for being persistent!

Yikes. I’m all worn out. :sweat:

2 Likes

Most important that we got the result that you need :slight_smile:

@sabanna: Thanks so much for taking the time to make the videos and to write out the text. :bouquet:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.