---
title: "Style Lists Widget: Settings Overview"
url: https://theplusaddons.com/docs/style-lists-widget-settings-overview/
date: 2024-03-30
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "The Style Lists widget builds an icon list where every item is configured on its own: its text, its icon, its link, an optional label and an optional hover background...."
image: https://theplusaddons.com/wp-content/uploads/2024/03/Style-Lists-Widget_-Settings-Overview-1024x536.jpg
word_count: 967
---

# Style Lists Widget: Settings Overview

## 

- Style Lists widget is part of the free The Plus Addons for Elementor plugin, and each repeater row configures its own text, icon, link, optional label, and optional hover background.
- Interactive Links in Content > Extra Options is required for per-item Interactive Hover Bg Style to work, and Display Counter adds item numbers with a Counter Style dropdown of seven options.
- Read More Toggle shows only the first few items, with List Open Default set to 3 by default and Expand Section Title and Shrink Section Title defaulting to + Show all options and - Less options.
- Font Awesome 5 icons render as inline SVG and always show, while Font Awesome 4 icons, including the three defaults, come out blank on a page that has no other Font Awesome user.

The Style Lists widget builds an icon list where every item is configured on its own: its text, its icon, its link, an optional label and an optional hover background.

This page walks through every section of the widget's panel and says which parts need The Plus Addons for Elementor Pro.

***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.

![The Plus Addons Widgets screen with the Stylish List widget card switched on](https://theplusaddons.com/wp-content/uploads/2024/03/stylish-list-1024x356.png)

## Panel Sections

Drag **Style Lists** onto the page. The **Content** tab holds three sections and the **Style** tab holds the rest.

### Content

The list itself. Each row of the repeater is one list item, and the row label in the panel is the item's own text.

![The Style Lists Content section in the Elementor editor with a list item](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-content.webp)

- **Description** — a full editor, so bold, italic and inline links inside an item all work.- **Icon Font** — **None**, **Font Awesome**, **Font Awesome 5** or **Icons Mind**. Picking **None** renders the item with no icon.- **Link** — a per-item URL. It wraps that item's icon and text, and only that item.- **Pin Hint** — a small label pinned to the item.- **Interactive Hover Bg Style** — the per-item background used by the hover effect.- **Tooltip** — a tooltip for that item (Pro).

![The Icon Font dropdown of a Style Lists item highlighted in the Elementor editor](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-icon-font.webp)

### Read More Toggle

Shows only the first few items and adds a link that expands the rest.

![The Read More Toggle section of Style Lists with List Open Default highlighted and three of six items on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-readmore-section.webp)

- **List Open Default** — how many items are visible before expanding. Default **3**.- **Expand Section Title** and **Shrink Section Title** — the link text in each state. Defaults **+ Show all options** and **- Less options**.- **Toggle Direction** — **Default** puts the link beside the list, **Vertical** puts it below (Pro).

### Extra Options

Widget-wide switches.

![The Extra Options section of Style Lists in the editor with Interactive Links highlighted and a numbered list on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-extra-options.webp)

- **Interactive Links** — renders the background layer that the per-item **Interactive Hover Bg Style** paints into. Without this switch, per-item backgrounds do nothing.- **Display Counter** — numbers the items, with a **Counter Style** dropdown of seven options.- **Desktop Layout**, **Tablet Layout** and **Mobile Layout** — each is **Default** (one item per line) or **Horizontal** (items flow across and wrap), and each device is set independently.

![Desktop Layout set to Horizontal in the Style Lists Extra Options, with the list running across one line on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-layout.webp)

### Style Tab

| Section | What it covers |
| ------- | -------------- |
| List | Padding, Separate Color, Space Between, Alignment and the normal/hover background, border, radius and box shadow of each item. |
| Icon | Position (Before or After), size, colours, and the Fill and Stroke colours used by SVG icons. |
| Display Counter Style | Appears once Display Counter is on: typography, colours and Alignment of the counter. |
| Content Options | Typography and colours of the item text. |
| Read More Toggle | Typography and colours of the expand link. |
| Hint Text Style | Typography, spacing and **Hint Text Alignment** for pin hints. |
| Tooltip Options | Position, theme, arrows, trigger and animation for per-item tooltips (Pro). |
| Extra Options | **On Hover Inverse Effect** — fade every item except the one under the cursor. |
| On Scroll View Animation | The shared TPAE animation extension. |

![The Style tab of Style Lists open on the List section with Space Between highlighted](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-style-list.webp)

## What Is Pro

Style Lists itself is free. These parts of it are not:

- Per-item **Tooltip** content and the whole **Tooltip Options** style section. In the free plugin the Tooltip switch is present but produces nothing on the page.- The **Icons Mind** icon library. In the free plugin the option reads **Icons Mind ( PRO )** and the item renders without an icon.- **Toggle Direction**, and the read-more link's **Alignment** and **Text Hover Color**.- **Border Radius** for the pin hint.

> *The **Alignment** control for the whole list is in **Content** in Pro, but in **Style > List** in the free plugin.*

## How It Behaves

- The widget adds three files to the page: its own stylesheet, its own script and the shared Plus Extras stylesheet. Nothing else.- Font Awesome is never loaded, so Font Awesome 5 icons (inline SVG) are the reliable choice.- The horizontal layout class is applied by JavaScript from the current device mode, so the list is vertical until the script runs.- Read More hides items with CSS, so a counter only numbers the items that are visible.

## Limitations

- The three default items use Font Awesome 4 icon classes, and the widget never enqueues Font Awesome, so they show as blank space until you switch those items to Font Awesome 5.- Turning on a per-item **Interactive Hover Bg Style** has no effect on its own; **Interactive Links** in Extra Options has to be on as well.- **Space Between**, **Gap**, **Bottom Space**, **Min. Width** and the horizontal **Alignment** in Style > List only appear when **Desktop Layout** is Horizontal, even if you only made tablet or mobile horizontal.- In the free plugin the per-item **Tooltip** switch can be turned on but nothing is rendered.

## Troubleshooting

### The icons are missing

Open the item, set **Icon Font** to **Font Awesome 5** and pick the icon again. Font Awesome 4 icons need Font Awesome's stylesheet, which this widget does not load.

### The hover background never changes

Turn on **Interactive Links** under **Content > Extra Options**, then set a background on each item.

### The read more link is missing

It is only rendered when the list has *more* items than **List Open Default**. Six items with List Open Default 6 shows no link.

### The list is not horizontal

The horizontal class comes from JavaScript and follows Elementor's device mode. Check the layout for the device you are actually previewing, and that the page's scripts are loading.

## Learn via Video Tutorial

https://youtu.be/mQuR6xN097w

## Related Docs

- [How to Create a Numbered List in Elementor?](https://theplusaddons.com/docs/create-numbered-list-in-elementor/)- [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 Label Tab to Elementor Stylish List?](https://theplusaddons.com/docs/add-label-tab-to-elementor-stylish-list/)- [How to Change Elementor List Item Background on Hover?](https://theplusaddons.com/docs/change-elementor-list-item-background-on-hover/)