---
title: "How to add Label Tab to Elementor Stylish List?"
url: https://theplusaddons.com/docs/add-label-tab-to-elementor-stylish-list/
date: 2024-03-30
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A small label such as Popular or New next to one item pulls the eye straight to it. The Style Lists widget in The Plus Addons for Elementor calls this..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-add-Label-Tab-to-Elementor-Stylish-List_-1024x536.jpg
word_count: 566
---

# How to add Label Tab to Elementor Stylish List?

## 

- Style Lists en The Plus Addons for Elementor llama Pin Hint a la etiqueta y la activa por elemento, así que cada fila se marca de forma individual con texto como Featured.
- Style Lists está disponible en la edición Free y se activa desde Under Plus Addons > Widgets; en el panel de Elementor el widget aparece como Style Lists.
- Hint Text Alignment vive en Style > Hint Text Style y afecta a todas las etiquetas del widget, mientras que Text Color y Background Color se configuran por elemento.

A small label such as *Popular* or *New* next to one item pulls the eye straight to it.

The Style Lists widget in The Plus Addons for Elementor calls this a **Pin Hint**, and it is set per item, so you choose exactly which rows get one.

*To check the complete feature overview documentation of The Plus Addons for Elementor Style Lists widget, [click here](https://theplusaddons.com/docs/style-lists-widget-settings-overview/).*

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

## Steps

- Add the **Style Lists** widget and open the item you want to highlight under **Content**.- Switch **Pin Hint** on.- Type the label into **Hint Text**. It starts as **Featured**.- Set **Text Color** and **Background Color**.- Nudge the label into place with **Horizontal Adjust** and **Vertical Adjust**.

![The Hint Text field of a Style Lists item highlighted in the editor, with a red Popular label beside the second item on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/stylelists-pinhint.webp)

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Pin Hint | Shows or hides the label for this item. | Hide |
| Hint Text | The label text. | Featured |
| Text Color | Colour of the label text. | white, from the stylesheet |
| Background Color | Colour behind the label. | grey (#888), from the stylesheet |
| Horizontal Adjust | Moves the label left or right (−200 to 200 px). | 5 |
| Vertical Adjust | Moves the label up or down (−150 to 150 px). | 0 |

**Hint Text Alignment** lives in **Style > Hint Text Style** and applies to every label in the widget. Left pins the label to the top left of the item text; the default sits it after the text.

![A Style Lists list on the front end with a New label on the first item and a Hot label on the fourth](https://theplusaddons.com/wp-content/uploads/2024/03/Stylish-List-Pin-Hint-Demo.png)

## How It Behaves

- The label is positioned over the item rather than taking up space in the row, which is why the two Adjust sliders exist and why they accept negative values.- The label is 9 px by default; change its typography under **Style > Hint Text Style**.- Text Color and Background Color are per item, so two labels in one list can be different colours.- **Hint Text Alignment** is widget-wide, so it moves every label at once.

## Limitations

- Rounding the label's corners needs Pro — **Border Radius** in Hint Text Style is a Pro control. In the free plugin the label keeps the stylesheet's small radius.- There is one label per item, and **Hint Text** is a plain single-line text box.- Because the label is absolutely positioned it can overlap the next item or run outside a narrow column; that is what the Adjust sliders are for.

## Troubleshooting

### The label does not show

**Pin Hint** is a per-item switch. Open the item itself, not the widget's Extra Options, and turn it on there.

### The label sits on top of the text

Use **Horizontal Adjust** to push it right and **Vertical Adjust** to lift it. Both accept negative values, so you can move it the other way too.

### The label is grey even though I set a colour

Check you set **Background Color** on the same item. With nothing set the stylesheet's grey is used.

## Related Docs

- [Style Lists Widget: Settings Overview](https://theplusaddons.com/docs/style-lists-widget-settings-overview/)- [How to Change Elementor List Item Background on Hover?](https://theplusaddons.com/docs/change-elementor-list-item-background-on-hover/)- [How to Add a Custom Link to Each Elementor Icon List?](https://theplusaddons.com/docs/custom-link-to-each-elementor-icon-list/)

## Frequently Asked Questions

**Q: How do I add a label tab to a Stylish List item in Elementor?**
A: The label is controlled per item through Pin Hint, so the key is opening the specific list row you want to highlight. In The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH Style Lists widget, you switch Pin Hint on for that item, type the label in Hint Text, then set its text and background colors. That per-item setup is what lets one row say Featured while the rest stay plain.

**Q: Why is my Stylish List label not showing?**
A: Pin Hint has to be enabled on the item itself, not in the widget’s Extra Options. That matters because the label is stored per row, so turning it on at the wrong level leaves nothing to display. In the Style Lists widget from The Plus Addons for Elementor, open the exact item you want highlighted and switch Pin Hint on there. If the switch is off on that row, the label will not appear.

**Q: How do I stop the label from covering the list text?**
A: The label is absolutely positioned over the item, so it does not take up its own space in the row. That is why Horizontal Adjust and Vertical Adjust exist and both accept negative values. If it sits on top of the text, push it right with Horizontal Adjust or lift it with Vertical Adjust. This is especially useful in narrow columns where a pinned label can crowd nearby content.

**Q: Why does my Stylish List label stay grey after I change the color?**
A: The grey look usually comes from Background Color still being left at its stylesheet default of #888 on that same item. Text Color and Background Color are set per item in The Plus Addons for Elementor Style Lists widget, so changing only one side can leave part of the label looking unchanged. Set both values on the same row if you want a fully custom badge style.

**Q: What should I know before using labels in Stylish List items?**
A: The free version already includes Style Lists, but Border Radius for Hint Text Style is a Pro control. That means you can use labels without upgrading, but rounded corners are limited by the stylesheet’s small radius in free. The widget also does not load Font Awesome’s stylesheet, so Font Awesome 5 icons show as inline SVG while Font Awesome 4 icons can appear blank unless another part of the page loads Font Awesome.

**Q: Can each Stylish List item have a different label color or position?**
A: Each item can have its own Text Color and Background Color, so two labels in one list do not need to match. Positioning is handled with Horizontal Adjust and Vertical Adjust per item too, while Hint Text Alignment in Style > Hint Text Style applies to every label in the widget at once. That split is useful when you want consistent alignment but different badge colors for different rows.