Stylish List

< All Topics
Widget Used
Style Lists
Knowledge Required
Advanced

Do you want to make your normal lists look more amazing? Do you want to add some cool animation effects to them and make them standout? Try our Stylist Lists widget.

Pro tip
Why not create your own personalized lists using this widget. Showcase your products/content in a stylish way using the Stylish List widget. Make sure to add proper order in your lists.

How to use the Stylish List Widget of The Plus Addons For Elementor

The Stylish List offers a wide range of unique styles to choose from. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

General Steps


Search for the Stylish Lists widgrt from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Stylish List

Interactive Links

Slide the toggle button right to enable Interactive links in the list.

List Items

Start adding your List Items here by clicking the Add Item button. You can also add your icon and set a link here.

Pin Hint: Slide the toggle to Enable Pin Hint option. If you enable it, you will see an option to add Hint Text. Then, add your text and background color.

Background

You can also add a background image, color or gradient to your lists to make them look more beautiful.

Enable Interactive links in the Stylish List Widget.

Read More Toggle

Read More Toggle

Slide right to enable Read More toggle. You can change the text on toggle below.

List Open Default

Specify how many list items you want to display without using read more toggle. 

Expand Section Title

Add your custom title for the expand section. Default text is +Show all options

Shrink Section Title

Add your custom title for the shrink section. Default text is +Less options

Enable Read More Toggle Option in Stylish List Widget.

2. Style

The Style tab is used for customizing the appearance of all the Process/Steps widget components. Let’s understand each of these customization options.

List

Set the Space between, Alignment, and Separator color of the list here.

Icon

Set the Icon Color, Icon Hover, Icon Size, Icon Indent, Vertical Center, and Advanced Style of the Icon here.

Content Options

Set the Text Color, Text Hover, Text Indent, and Typography of the Content here.

Read More Toggle

Set the Typography, Text Color,and Top Indent of the Read More Toggle Option here.

Hint Text Style

Set the Hint Text Alignment, Typography, Box Shadow, Hint Inner Padding and Adjust Options here.

Tooltip Options

Set the Tooltip Options and Style Options over here.

Extra Options

Enable On Hover Inverse Effect here and set the NotSelected Item Opacity, NotSelected Item CSS Filter, and Effect Area over here.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View On Scroll View Animation Tutorial

3. Advanced

Want to get more nerdy with our widgets? Check out the Advanced Tab. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View The Advanced Tab Tutorial

Do you want to rate this article?
0.5 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 100%
How can we improve this article?
Need help?