---
title: "How to Create a Numbered List in Elementor?"
url: https://theplusaddons.com/docs/create-numbered-list-in-elementor/
date: 2024-03-30
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A numbered list makes a sequence obvious: step 1, step 2, step 3. Elementor's own icon list does not number its items. The Style Lists widget in The Plus Addons..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Create-a-Numbered-List-in-Elementor_-1024x536.jpg
word_count: 530
---

# How to Create a Numbered List in Elementor?

## 

- Style Lists widget en The Plus Addons for Elementor añade un contador a cada elemento y permite elegir números, letras, números romanos o letras griegas.
- Display Counter se activa en Content > Extra Options, y el estilo predeterminado es Normal, que muestra 1, 2, 3 sin punto final.
- Style Lists renumera la lista automáticamente al añadir, eliminar o reordenar elementos, y siempre empieza en 1 sin opción de cambiar el valor inicial.

A numbered list makes a sequence obvious: step 1, step 2, step 3. Elementor's own icon list does not number its items.

The Style Lists widget in The Plus Addons for Elementor adds a counter to every item, and lets you choose numbers, letters, Roman numerals or Greek letters.

*To check the complete feature overview documentation of The Plus Addons for Elementor Style Lists widget, [click here](https://theplusaddons.com/docs/style-lists-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/stylish-list/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — Style Lists is part of the free The Plus Addons for Elementor plugin.- **Widget to enable:** **Stylish List**, switched on under **The Plus Addons > Widgets**. That is the card name on the Widgets screen; in the Elementor panel the widget is called **Style Lists**.- **Icons:** the widget does not load Font Awesome's stylesheet. Font Awesome 5 icons are drawn as inline SVG and always show; Font Awesome 4 icons (including the three defaults) come out blank on a page that has no other Font Awesome user.

## Steps

- Add the **Style Lists** widget to the page and fill in the items under **Content**.- Open **Content > Extra Options** and switch **Display Counter** on.- Pick a **Counter Style**.

![Extra Options in the Style Lists panel with Display Counter on and Counter Style set to Upper Roman, and the canvas showing I. II. III. IV. V. VI.](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-counter.webp)

## Counter Styles

| Counter Style | What the list shows |
| ------------- | ------------------- |
| Normal | 1   2   3 — plain numbers, and the only style with no full stop after them |
| Decimal Leading Zero | 01.   02.   03. |
| Upper Alpha | A.   B.   C. |
| Lower Alpha | a.   b.   c. |
| Lower Roman | i.   ii.   iii. |
| Upper Roman | I.   II.   III. |
| Lower Greek | α.   β.   γ. |

The default is **Normal**. Here are all seven on the front end:

![Seven Style Lists on the front end, one per Counter Style: Normal shows 1 2 3, Decimal Leading Zero 01. 02. 03., Upper Alpha A. B. C., Lower Alpha a. b. c., Lower Roman i. ii. iii., Upper Roman I. II. III. and Lower Greek alpha. beta. gamma.](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-result-counter.webp)

## How It Behaves

- The counter is drawn by CSS from the items themselves, so adding, removing or reordering items renumbers the list automatically.- Counting always starts at 1 and there is no way to set a different start value.- With **Read More Toggle** on, the hidden items are not counted while the list is collapsed; expanding the list numbers every item in order.- Style the counter under **Style > Display Counter Style**, which only appears once **Display Counter** is on.

## Limitations

- The separator is fixed. **Normal** has no full stop and the other six always have one; nothing in the panel changes that.- There is no option to start at a number other than 1, and no nested sub-numbering.- Because the counter is per widget, two Style Lists widgets both start at 1.

## Troubleshooting

### The counter does not appear

**Display Counter** is in **Content > Extra Options**, not in the Style tab. Check it is switched on; the **Counter Style** dropdown only shows up after it is.

### The numbers restart after I expand the list

They do not restart, they extend. While a list is collapsed only the visible items carry a number, so the last visible number changes when you expand.

### I cannot find the styling options for the number

They are in **Style > Display Counter Style**, and that section is hidden until **Display Counter** is on.

## Related Docs

- [Style Lists Widget: Settings Overview](https://theplusaddons.com/docs/style-lists-widget-settings-overview/)- [How to Add Read More Button to Elementor Icon List?](https://theplusaddons.com/docs/add-read-more-button-to-elementor-icon-list/)- [How to Add a Custom Link to Each Elementor Icon List?](https://theplusaddons.com/docs/custom-link-to-each-elementor-icon-list/)

## Frequently Asked Questions

**Q: How do I create a numbered list in Elementor without the default icon list behavior?**
A: Elementor’s own icon list does not number items, so the clean workaround is the Style Lists widget in The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH. It adds a counter to every item and supports numbers, letters, Roman numerals, and Greek letters. That matters when you need a real sequence like step 1, step 2, step 3 instead of plain bullets.

**Q: What do I need before using the numbered list widget in Elementor?**
A: The Style Lists widget is part of the free The Plus Addons for Elementor plugin, and it has to be installed and activated first. In the Widgets screen the card name is Stylish List, while inside the Elementor panel it appears as Style Lists. One gotcha: Font Awesome 5 icons are drawn as inline SVG and always show, but Font Awesome 4 icons can appear blank on pages that do not already load Font Awesome.

**Q: Which counter style should I use for a numbered list in Elementor?**
A: Normal is the default if you want plain numbers like 1, 2, 3, and it is the only style without a full stop after the number. The other options are Decimal Leading Zero, Upper Alpha, Lower Alpha, Lower Roman, Upper Roman, and Lower Greek. Pick based on readability: Normal works best for step lists, while Roman or lettered styles fit outlines and nested-looking content better.

**Q: Does the numbered list update automatically when I add or reorder items?**
A: The counter is drawn by CSS from the items themselves, so adding, removing, or reordering items renumbers the list automatically. Counting always starts at 1 and there is no way to set a different start value. That makes it reliable for content that changes often because you do not have to manually fix numbering after edits.

**Q: Why do hidden items in a collapsed read more list affect numbering?**
A: With Read More Toggle on, hidden items are not counted while the list is collapsed, so only visible items carry numbers until the list expands. When expanded, every item gets numbered in order. That behavior matters if you want the visible preview to stay short without showing skipped numbers or broken sequencing.

**Q: Why can't I find the number styling options in Elementor?**
A: The styling controls live under Style > Display Counter Style, and that section only appears after Display Counter is switched on in Content > Extra Options. If you cannot see it yet, it usually means the counter itself is still off. The separator is fixed too: Normal has no full stop and the other six styles always do.