I am redesigning a site for a client and need to know the best practice for doing several different text indents. As you can see from the screen capture, they like to have a numbered list, with a couple bullet points tossed in. Is there a correct way to do this? I’m assuming I should use the list element but I’m not sure how to use the numbered list with bulleted list embedded? Is there an easier way?
Also, how do you just do a simple text indent like the second paragraph?
You can drag a list into a list item. That creates a nested list. You could also drag another element into a list item. You could also nest elements in a block level element that is a child of a list item. You could style any of these like any other element.
Easier than you think. Drag a list object from the Add Elements panel to some place on your page. A container for example. You can clearly see the list items now on the page, within the list you just placed there. Next drag an list object into one of those list items you have on the page. Doing so creates a nested list.
Think of a list not just as a text list but a logical grouping of list items that can wrap other objects. An image for example. Lists don’t have to show bullets, nor do they have be indented. Those are just defaults. You override the default styling by adding a class and then styling it.
Please review this content. It explains this in greater detail with visuals and a video.
Ok, this is starting to make sense. So I drag a list onto the page, name the class, its an ordered list. Then I drag a list item out and put it inside the #1 space on the ordered list. Name the class and make it an unordered list. This is good.
But, when I put a list item within the list, I get #1, bullet, #3. It’s like the bulleted list item is being called #2, then the ordered list resumes at #3 below the indented bulleted line. I see how to remove the bullet, I could just type in a bullet but is that best practice?
It may be beneficial to review the UL element over at MDN, even though you are adding them visually to the designer. There are nested mixed list examples. Webflow provides for the styling of lists or list items as needed .
