---
title: "Style Lists Widget: Settings Overview"
url: https://theplusaddons.com/docs/style-lists-widget-settings-overview/
date: 2024-03-30
modified: 2026-04-09
lang: en
author: "Aditya Sharma"
description: "Showing information in a list format makes it easy for users to consume information. The icon list provides a simple and visually appealing way to showcase information such as lists..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/Style-Lists-Widget_-Settings-Overview-1024x536.jpg
word_count: 667
---

# Style Lists Widget: Settings Overview

## 

- Activates the Style Lists widget through The Plus Addons for Elementor by toggling it on in the Widgets section.
- Utilizes key features like Pin Hint, Tooltip, and Interactive Hover Background to enhance icon list items in Elementor.
- Enables the Read More Toggle to add a button for displaying additional icon list items in the Style Lists widget.
- Styles the icon list using options under the Style tab, including item spacing, alignment, and tooltip style management.

Showing information in a list format makes it easy for users to consume information. The icon list provides a simple and visually appealing way to showcase information such as lists of services, features, etc., on your Elementor website. 

With the Style Lists widget from The Plus Addons for Elementor, you can show information in a beautiful list format.

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

## Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor plugin](http://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.

- This is a Freemium widget. To unlock the extra features, you need the [PRO version of The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text)

- Make sure the Stylish List widget is activated. To verify this, visit The Plus Addons → Widgets → and search for Stylish List and activate.

## Learn via Video Tutorial:

https://youtu.be/mQuR6xN097w

## How to Activate the Style Lists Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2024/03/stylish-list-1024x356.png)

## Key Features

- **Pin Hint **- You can [easily highlight an icon list item.](https://theplusaddons.com/docs//add-label-tab-to-elementor-stylish-list/)

- **Tooltip **- You can easily [add a tooltip to an Elementor icon list item.](https://theplusaddons.com/docs//add-tooltip-in-an-elementor-icon-list-item/)

- **Interactive Hover Background** - You can [change the Elementor icon list item background on hover.](https://theplusaddons.com/docs//create-interactive-footer-hover-links-in-elementor/)

- **Display Counter** - You can [easily create a numbered list in Elementor.](https://theplusaddons.com/docs//create-numbered-list-in-elementor/)

- **Read More Toggle** - You can add a [read more button to show more icon list items.](https://theplusaddons.com/docs//add-read-more-button-to-elementor-icon-list/)

- **Custom Link** - You can easily add a [custom link to an Elementor icon list item.](https://theplusaddons.com/docs//custom-link-to-each-elementor-icon-list/)

- **Responsive Layout** - You can easily [make a horizontal or vertical icon list for responsive devices.](https://theplusaddons.com/docs//create-responsive-horizontal-vertical-layout-for-elementor-icon-list/)

## How to Use the Style Lists Widget in Elementor?

Add the Style Lists widget to the page.

### Stylish List

In this tab, you have to add the icon list content. By default, you’ll find three items; open one of them.

In the **Description** section, you can add the description of the list item.

![Style List Content](https://theplusaddons.com/wp-content/uploads/2024/03/Style-List-Content.gif)

From the **Icon Font** dropdown, you can add or remove icons from the icon list.

In the **Link** field, you can add a custom link to the icon list.

By enabling the **Pin Hint** toggle, you can highlight an icon list item. 

Then, from the **Interactive Hover Background Style** toggle, you can change the icon list item background on hover.

From the **Tooltip** toggle, you can add a tooltip to the icon list item.

Similarly, you can edit the remaining items.

You click on the **+Add Item** button to add more items.

### Read More Toggle

By enabling the **Read More Toggle**, you can add a read more button to show more icon list items.

![Style List Read More Toggle](https://theplusaddons.com/wp-content/uploads/2024/03/Style-List-Read-More-Toggle.png)

### Extra Options

By enabling the **Interactive Links** toggle, you can change the icon list items background on hover.

![Style List Extra Options](https://theplusaddons.com/wp-content/uploads/2024/03/Style-List-Extra-Options.png)

Then, from the **Display Counter** toggle, you can add a counter number to the icon list items.

From the **Desktop Layout** dropdown, you can change the icon list item layout to horizontal or vertical for responsive devices.

## How to Style the Style Lists Widget?

To style the Elementor icon list, you’ll find all the options under the Style tab.

**List** - From here, you can manage the icon list item spacing, alignment, separator color, item background color, etc.

![Style Lists style settings](https://theplusaddons.com/wp-content/uploads/2024/03/Style-Lists-style-settings-329x1024.png)

**Icon** - From here, you can manage the icon style.

**Display Counter Style** - You’ll see this tab when the Display Counter is enabled. From here, you can style the counter number.

**Content Option** - From here, you can manage the list content style.

**Hint Text Style** - From here, you can manage the icon list item pin hint style.

**Tooltip Options** - From here, you can manage the icon list item tooltip style.

**Extra Options** - From here, you can add a reverse hover effect on icon list items.

**On Scroll View Animation** -  This is our global extension available for all our widgets. This adds a scrolling animation as the widget comes into the viewport. You can learn more about this from here.

Advanced options remain common for all our widgets; you can explore all their options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)