As the name suggests, the List Item element is used to represent an item in a List element. This list can be an ordered or an unordered list. Keep in mind that a List Item must have the List element as its parent.

Usually, List Items contain a text element but you can add elements like Image, SVG, etc as well.

Adding a List Item

Before adding a List Item, you’ll first need to add a List element to your canvas. Follow these steps:

1. Go to the Elements panel by clicking on the Elements tab on the Topbar.
2. Drag and drop the List element onto your canvas.

Now, to add a List Item, do the following:

1. Navigate to Elements > Basic.
2. Drag and drop the List Item element inside the list you just added.

Note that, this List might already contain a few List Items with Text elements as dummy content. You can choose to either edit these items or remove them. To edit these Text elements, simply hover over them, double-click, and edit.

To start from scratch, select each List Item and right-click to open up the context menu. Scroll down and click on delete. Or, simply press the delete key after selecting the List Item.

Adding Content to a List Item

The List Item element is a versatile container for various elements in Droip. Here’s how to add different types of content as a list item:

1. Select your desired element from the Elements panel.
2. Drag and drop it into the List Item where you want it to appear.
3. If it’s a text-type element, double-click to edit its contents.

For adding an image:

1. Drag and drop the Image element from the Elements panel into the targeted List Item.
2. With the Image element selected, go to Media in the Topbar.
3. Select a suitable image from the Media Manager.
4. Click on Update to attach it to the image element.

💡Tip: You can also add other media elements like Videos, SVGs, etc., in the same manner.

Styling List Item and Its Contents

To make your List Items stand out, you can use the Style Panel located on the right sidebar. It offers various styling tools like Typography, Structure, Effects, and more to enhance the appearance of List Items, whether they contain text, images, or buttons.