All Collections
Tutorials
How to Add a List to Your Project
How to Add a List to Your Project

In this tutorial you will learn how to add a list element to your project.

Kirsi avatar
Written by Kirsi
Updated over a week ago

How to Add a List to Your Project

In this tutorial you will learn how to add a list element to your project, as well as how to move the list or a single list item to a different location.

TIP: It is best to keep the list to a one item /line and make sure it fits on the page.

1. Adding the Unordered List Element

To begin, click on the 'Text' tab in the side bar. From there locate the 'Unordered List' element. Grab the element and drag it to the page where you would like to add your list.

Notice that you can also choose an ordered list element instead.

Now you can type or copy and paste the content for each list item, one list item at a time.

2. Adding New Items To The List

If you want to add a new item to the list, make sure you have the 'Unordered List' container selected and click on the '+' icon. You do this by first activating the unordered list container. You will know that the container has been activated when you the words 'Unordered List' in the upper left corner. This will add an item at the end of the list.

If you want to add a new list item after a specific listed item, select it and click on the '+' icon. In this example below we are going to add a new list item item after the list item #1.

3. Moving the List

In the image below you can see the unordered list has been added to the page. Next, let's move the unordered list to a different location on the same page. You do this by first activating the unordered list container. You will know that the container has been activated when you the words 'Unordered List' in the upper left corner. Please note that this can be a little tricky as each list item is a container in itself. Use the mouse to hover around until you locate the full container.

Once the container has been activated use your up and down arrow keys to move the container to a different location.

Here you can see the list has been moved in between the second and third paragraph.

4. Moving List Items Inside the list

You may occasionally want to move a single list item to a different position in the list. To do this begin by activating the container associated with that list item. This is done by click anywhere on the list item you want to move. You will know the container has been activated when you see the words 'List Item' in the upper left corner.

Once the container has been activated use your up and down arrow keys to move the container to a different location.

Here you can see the second list item has been moved to the first position.

5. Switching the List Type

You can easy convert an unordered list into an ordered list. Make sure you have selected the unordered list container. You will know that the container has been activated when you the words 'Unordered List' in the upper left corner.

Then click on the 'Toggle List Type' icon and now you have a numbered list!

Of course you can do the opposite and turn an ordered list to unordered by following the same procedure.

5. RTL Lists For RTL Languages

If you need to add a list to a RTL project, create your list as explained in this tutorial and easily change list orientation to RTL by clicking on the RTL icon found in the toolbar. Make sure you have selected the unordered list container. You will know that the container has been activated when you the words 'Unordered List' in the upper left corner.

Did this answer your question?