Feature List
List what you offer so its value is clear at a glance.
Features with icons, numbers or images joined by a connector line — per-item icon and colour, links, badges, highlighted or not-included items, as a list, a row or a grid.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Feature List — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
- Add or reorder items with the + inside the block; each item (Feature) has its own settings when selected.
Settings
Layout
| Setting | What you can set |
|---|---|
| Layout | list, inline or grid |
| Columns | 1–6 |
| Columns on tablets | 1–6 |
| Columns on phones | 1–4 |
| Icon position | left, right or top |
| Alignment | left or center |
| Icon beside the text | flex start or center |
| List type | auto, ul or ol |
| Title tag | span, p, div, h2, h3, h4, h5 or h6 |
| Space between items (px) | 0–80 |
| Space between columns (px) | 0–80 |
Icons
| Setting | What you can set |
|---|---|
| Shape | none, circle, rounded, square, diamond, hexagon or blob |
| Style | soft, stacked, framed or gradient |
| Count from | 0–99 |
| Two-digit numbers | On / off |
| Shape size (px) | 16–160 |
| Icon size (px) | 8–96 |
Connector and effects
| Setting | What you can set |
|---|---|
| Hover | none, lift, grow, spin, fill or slide |
| Line joining the icons | On / off |
| Line | solid, dashed or dotted |
| Draw the line as you scroll | On / off |
| Dividers between items | On / off |
| Text in a bubble pointing at the icon | On / off |
| Reveal on scroll | none, fade up, fade left or zoom |
| Delay between items (ms) | 0–600 |
| Accent (icons) | Colour |
| Titles | Colour |
| Descriptions | Colour |
| Connector | Colour |
| Highlighted item | Colour |
| Text bubble | Colour |
Feature (item) settings
Feature
| Setting | What you can set |
|---|---|
| Show | default, icon, number, image or none |
| Icon colour for this item | Text |
| Custom number or label | Text |
| Link | Text |
| Badge | Text |
| State | normal, highlight or muted |
Styles tab: typography and spacing, from WordPress's own design tools.
Tips
- Start with the Layout choice — it changes the overall look the most; fine-tune the rest afterwards.
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- The connector is only drawn when the icons sit in one vertical column (the List layout). In a grid or row it is hidden by design.
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor).
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
Related
- Also available for Elementor (Feature List).
- Works well with: Advanced Accordion, Card, Content Switcher.