Stylish List

A list, words that kicks in feeling of shopping or a check list for lifetime adventure goals.

Stylish list allows you to make a listing structure for your web page needs. It can be product features list or a list of achievements your company made in past few years or it can be types of breads for your online restaurant. We have provided tons of styling options for making your list look very nice and attractive and after all creativity of using them is up to you.

Pro tip
Get rid of bullet points by using our creative ways of listing. It’s far gone now.

Configuration for Stylish List

Just make a list bud, everything else can be managed here.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Stylish List into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Stylish List after “/” sign, eg.“/Stylish List”, in the content area. Gutenberg also provides drag & drop after opening the list of widgets panel.

After placing the widget you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

List

List Content

A repeater field to add the list items.

Content

Add a list item text.

URL

A destination URL when user clicks on list item.

Icon Type

A selection for icon, whether to choose icon from a library we provide or a custom one.

Select Icon

On selection of Icon in previous drop down, you’ll be displayed whole list of icons provided by the FontAwesome icon library. If you have purchased licence for pro plan and activation has been done then you’ll able to use pro icons too.

Image

On selection of Image in previous drop down, you’ll be asked to choose and upload image, and after uploading image basic styling option for image would be displayed there.

Hint

Hint text is a single word text to give some hint about the stated list item there.

Color

A color picker to assign suitable color to the hint text.

Background Color

A color picker to assign suitable color to the hint background.

Tool-tip ⭐

A tool-tip/ help text on list item hover.

Content ⭐

A tool-tip/ help text content.

Typography ⭐

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the tool-tip text.

Read More Toggle

Read More Toggle

Show read more button after some number of list items.

List Open Default

Show this much list item as a preview and others will be displayed on read more click.

Expand Title

Text for expanding button.

Shrink Title

Text for collapsing button.

Extra Options

Layout Type

Want to display it vertically or horizontally.

Interactive Links

On enabling interactive links, your list item becomes interactive to user. We have provided facility to change background on hover of particular list item, Which can be managed from repeater field / List Content. Options for it are stated below.

Hover Background

By enabling Interactive links, this options in List Content will be visible.

Background

Set background of root div by setting it here. On hover of list items, background will be changed accordingly.

2. Style

The Style tab is used for customising the appearance of all the Stylish List get components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

List

Vertical Space (Horizontal)

Spacing from top.

Horizontal Space (Horizontal)

Spacing between list items.

Vertical Space (Vertical)

Spacing between list items.

Separator Color (Vertical)

A color picker to assign suitable color to the list item separator.

Alignment

Alignment of list items into left, centre, right or justified manner.

Icon

Icon Color

A color picker to assign suitable color to the icon.

Icon Size

Set size of icon from here.

Vertical Centre

Set icon in vertically centre position or not.

Advanced Style

Style level up.

Icon Width

Set width of icon from here.

Border Radius

Set the radius curve of the icon’s corner.

Icon Background

Apply suitable background like color/ gradient to an icon.

Box Shadow

Give Box/Text/Drop shadow effect and color to an icon.

Content

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the content.

Indent

Space between icon and content.

Padding

Put-in some inner space to the content.

Border

Draw a border around the content and give width and color to it.

Border Radius

Set the radius curve of the content’s corner.

Background

Apply suitable background like color/ gradient to the content.

Box Shadow

Give Box/Text/Drop shadow effect and color to the content.

Read More Toggle

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the toggle button.

Top Indent

Space between list items and read more button.

Hint Text

Alignment

Alignment of hint text into left, or right.

Typography

Assign size, weight, spacing and much more to fonts.

Box Shadow

Give Box/Text/Drop shadow effect and color to the text.

Padding

Put-in some inner space to the text.

Horizontal , Min Width & Vertical Adjust

Set a proper place to place the hint text using these three adjust fields.

Tool-tip

Interactive

make tool-tip interactive.

Position

Set tool-tip box around the icon anywhere by selecting here.

Theme

A font & background color mixture for tool-tip theme.

Width

Tool-tip width.

Offset & Distance

Set the tool-tip’s position by combining these two parameters.

Arrow

Want arrow pointing to the target or not.

Triggers

Want tool-tip on hover or on click.

Animation

Select animation type for tool-tip.

Duration In

Select amount of time from blank to tool-tip animation. Tool-tip will be Visible.

Duration Out

Select amount of time from tool-tip to blank animation. Tool-tip will be Hidden.

Arrow Color

A color picker to assign suitable color to the arrow.

Tool-tip Padding

Put-in some inner space to an element.

Border

Draw a border around the tool-tip and give width and color to it.

Border Radius

Set the radius curve of the tool-tip’s corner.

Background

Apply suitable background like color/ gradient to the tool-tip.

Box Shadow

Give Box/Text/Drop shadow effect and color to the tool-tip.

Extra Options

Hover Inverse

Enable this and on hover other than hovered list items will be having opacity layer.

Inverse Opacity

Opacity solidity input.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.
Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?