---
title: "Style Lists Widget: Settings Overview"
url: https://theplusaddons.com/docs/style-lists-widget-settings-overview/
date: 2024-03-30
modified: 2026-04-09
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

## Key Takeaways

- Style Lists widget from The Plus Addons for Elementor allows users to showcase information in a visually appealing list format.
- Pin Hint feature enables users to highlight an icon list item easily.
- Display Counter feature allows users to create a numbered list in Elementor.
- Read More Toggle feature lets users add a button to show more icon list items.

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/)

## Frequently Asked Questions

**Q: What are the key features of the Style Lists widget?**
A: The Style Lists widget offers several key features including Pin Hint to highlight an icon list item, Tooltip for adding tooltips to items, and an Interactive Hover Background that changes the item background on hover. Additionally, you can create a numbered list with the Display Counter, add a Read More toggle to show more items, and use Custom Links for each list item. These features enhance the visual appeal and functionality of your lists.

**Q: How do I activate the Style Lists widget in Elementor?**
A: To activate the Style Lists widget, navigate to The Plus Addons u2192 Widgets in your WordPress dashboard. Search for 'Stylish List' and toggle it on. This ensures that the widget is available for use in your Elementor projects. Remember, you need to have The Plus Addons for Elementor plugin installed and activated first.

**Q: Does the Style Lists widget support responsive layouts?**
A: The Style Lists widget supports responsive layouts, allowing you to create horizontal or vertical icon lists for different devices. You can adjust the layout settings from the Desktop Layout dropdown, ensuring your lists look great on both desktop and mobile views.

**Q: How can I style the items in the Style Lists widget?**
A: Styling options for the Style Lists widget are found under the Style tab. You can manage item spacing, alignment, and background colors, as well as customize the icon style. This flexibility allows you to create a visually appealing list that matches your site's design aesthetic.