Skip to main content
How to create and optimize a list ?
Updated over 2 months ago

✓ In this article, we'll look at how to create and optimize a list in your creations.

Adding a List to your Creation

First, add a text element to your design, then select List formatting.

Step 1: Add the Text Item

In the left-hand panel of your Kehio editor, select or add a Content.

Once selected, a panel will automatically open, allowing you to add a “Text” item.

Step 2: Choose the formatting

In the editor toolbar, select the formatting icon, then scroll to the List option and select it. Your list is now created.


Optimize the Text Content of Your List

With Kehio Editor, you can customize and optimize the text content of your list for all screen resolutions. To do this, go to the Settings section and select the LI (List ) panel.

1- Font color

Adjust the font color to highlight the contents of your lists.

2- Font style

Choose your font style from : Light, Normal, Medium, Semi-bold, Bold or Extra-bold.

3- Size and alignment on all screen resolutions

Adjust the size and alignment of your list on all screen resolutions for a better user experience.

4- Line height

Increase or reduce the space between the lines in your list to adjust the layout.

5- Position

Define the alignment of your list:

  • Left-aligned: the text and icon of your list remain aligned one below the other.

  • Line feed: the text is positioned below the list icon or bullet when the list is made up of several lines.

6- Add a Custom Icon to the entire List

Customize your list by adding a common icon to all items to reinforce your brand identity. You can then adjust the margin and alignment between the icon and the text for optimal rendering.


Managing Your List's Block Margins

With Kehio Editor, you can adjust the margins of your list's parent block to match your overall design.

To do this, access the parent block parameters (UL) in the Settings> UL (Parent) section, then adjust the margins.

UL block definition ( Parent )

The UL (Unordered List) tag is the parent block containing an unordered list in HTML. It groups together all the elements of the list, represented by LI (List ) tags.

In the context of Kehio Editor, the UL parent block is used to manage the global properties of a list, such as margins.

Example of HTML structure of a UL parent block :

<ul> 
<li>First item in the list</li>
<li>second item in the list</li>
<li>Third item in the list</li>
</ul>

Each LI inside the UL corresponds to an item in the list.

If you need help fine-tuning your list with Kehio Editor, don't hesitate to contact us. Our team is available to assist you by email or chat.

Did this answer your question?