Are you looking to create a numbered icon list in Elementor? A numbered list helps structure information in a clear, scannable sequence that is easier to follow than unordered bullet points.
With the Style Lists widget from The Plus Addons for Elementor, you can add numbers, letters, or Roman numerals to any Elementor icon list without writing custom CSS.
To check the complete feature overview documentation of The Plus Addons for Elementor Style Lists widget, click here.
Best Used For:
- Step-by-step how-to guides and tutorials where numbered order matters
- SaaS pricing pages and landing pages that use ordered feature lists for comparison
- Legal and document pages that require alphabetical or Roman numeral section numbering
Requirement – This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.
To do this, add the Style Lists widget to the page and follow the steps.
1. Add the icon list content from the Stylish List tab.
2. Then enable the Display Counter toggle from the Extra Options tab. This activates the counter numbering on each icon list item.
3. From the Counter Style dropdown, select a counter style.
The seven available styles are:
- Normal – To show standard numeric counters (1, 2, 3). Use this for how-to steps, ordered tutorials, or any list where sequence matters.
- Decimal Leading Zero – To show numbers with a leading zero (01, 02, 03). Use this for ranked lists where visual alignment between items is important.
- Upper Alpha – To show uppercase letter counters (A, B, C). Use this for multi-section outlines, legal documents, or quiz answers that follow alphabetical conventions.
- Lower Alpha – To show lowercase letter counters (a, b, c). Use this when you want alphabetical ordering with a subtler visual weight than uppercase.
- Lower Roman – To show lowercase Roman numeral counters (i, ii, iii). Use this for sub-lists or supplementary sections in formally structured documents.
- Upper Roman – To show uppercase Roman numeral counters (I, II, III). Use this for primary section numbering in formal or academic content.
- Lower Greek – To show lowercase Greek letter counters. Use this for footnote references or academic content where Greek notation is standard.
Select the option that fits your content structure. To add a tooltip to any icon list item to provide additional context, see How to Add Tooltip in an Elementor Icon List Item.
Now you will see a counter in the Elementor icon list based on your selection. For a timeline-style display of ordered events or process steps, see How to Add an Elementor Timeline.
Suggested Read: How to Add a Custom Link to Each Elementor Icon List
