Lesson info

You can use Webflow's list element to create numbered or bulleted lists of content, without using a rich text field. We’ll cover the following aspects of lists: 

  1. ‍Adding a list
  2. ‍The two list types: ordered and unordered
  3. ‍Adding content to a list
  4. ‍Styling a list

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

When you’re adding a list to your project — whether it’s for navigation or structure or it's literally an image of Franz Liszt — there are a number of things that are set by default.

First, you’ll see bullets off to the left side. You can toggle this with the No Bullets option, but bullets show by default in an unordered list. That is: a list of items that aren’t presented in a numerical order.

If we want an ordered list, which will show numbers, we can do that, too.

Let’s take a closer look at the structure here. The list itself is its own element. It can be independently styled, for instance we can adjust padding to affect the positioning of the content inside. And when the list is moved around, it takes its child elements — the list items — with it.

The list element also has an All Lists tag which we can use to affect the default styling for all lists throughout the project. Keep in mind: there are separate tags here for ordered lists and unordered lists.

If we click any of the list items, we can see that each is its own independent element. Now you might notice there's no lorem ipsum. No filler text. And that's by design. Because we can drag content right inside our list items.

For now, let’s double-click and type some text here so we can see what we’re doing with these list items. We're just double-clicking on each of these which lets us type in text. Now, since each list item can be styled, we have a couple options.

Option 1: List items have their own tag for all list items in the project. It's fittingly called All List Items.

Or Option 2: Like any element, we can click to name a class — type it in and press enter. Of course, after we do that, we can select the other list items, going in and applying the same class we just created to each of those. That way style changes show up on all our list items. Alternatively, we can take one that’s already been styled and copy and paste it, and of course that will carry the class along with it.

To change our spacing, we can tweak our margin for our list items. We can also change the padding on the left to adjust the space in between the bullet or the number...and the text itself.

So, we have our list. The parent element. Through our Element Settings we can change between Unordered (where bullets show up) and Ordered (where numbers show up). We can also affect whether or not bullets or numbers show up at all by checking No Bullets.

And of course, we have our list items. The individual components of our list. We can style those, adjust their appearance (like spacing), and we can quickly copy and paste to add other list items to our list.