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.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
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.
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:
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.
