Stylish List

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.

How to use the Stylish List Block of The Plus Addons For Gutenberg

The Stylish List block comes with a simple listing layout with customized styling options you can create a pleasant-looking layout for your websites.

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 Blocks panel.

After placing the Block 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

Icon type is a selection of whether you want an icon or image or not.

Select Icon

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

Upload 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

By enabling this option, you can see the hint options.

Hint Text⭐

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 Type⭐

The content type is a selection of whether you want a text or not.

Content ⭐

You can set the tool tip’s 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 customizing the appearance of all the Stylish List get components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

List

Space Between

Spacing between list items.

Vertical Space

Spacing from top.

Horizontal Space

Spacing from left.

Separator Color

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

Alignment

Alignment of list items into left, center, 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.

Image Size

Set size of image from here.

Vertical Center

Set icon in vertically center position or not.

Advanced Style

Style level up.

Icon Width

Set width of icon from here.

Icon Border

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

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.

Border Radius

Set the radius curve of the content’s corner.

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.

Follow Cursor

enable the follow cursor option 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.

Effect Area

You can use individual or global options as an effective area for the layout.

Global List Connection Id

You can set a global list connection id for the global option.

3. Advanced

Advanced Tab Options are common across all the Blocks. 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?
Please submit the reason for your vote so that we can improve the article.