Tutorials

Listify


Listify Tutorial

Introduction

Here you will learn all about the Listify Stack and it’s included substacks, Listify Item, and Listify Group. Most of the styling options are quite straightforward and easy to follow, but we’ve done our best to explain everything for you here.

: )

Listify Stack

The Listify Stack is the main stack for creating lists. Simply drag this stack onto a stacks page, and then add items by clicking on the add ( + ) button.

You will find instructions for all of the Listify Stacks’ settings below:

List
List Items
List Items > Text
List Items > Icons

List Fill Mode

There are two options for the list fill mode, “Fill” and “Pixel Width”.

The fill option will make a Listify list expand to fill the width of it’s container.

Pixel Width allows you to set a specific with for your list. Keep in mind that lists with fixed pixel widths are not be responsive.

List Radius

The list radius option is simply for creating a list with rounded corners. The higher the radius, the rounder the corners will be.

List Padding

List padding refers to the space between the edge of a list and it’s inner content. If you want there to be some extra space around the content, increasing the list padding is the way to do so.

List Margin

List margin refers to the space around the list itself. If you need to add some extra space on the outside of a list, do so with the list margin.

List Background

You will find that there are 4 background options for each list, “None”, “Color”, “Gradient”, and “Image”. If you select one of these options you will see that a specific set of controls will appear for the appropriate option.

List Borders

You can add borders to your list by selecting the “ON” option for the List Border. After doing so, you will find controls for setting the border width, style, and color.

List Shadow

Similar to the list border, you can add a shadow to your list by selecting the “ON” option for the List Shadow. After doing so, you will find controls for setting the shadow color and other properties.

NOTE: The “List Items (Shared Styles)” options are styles that can be used to affect all of the items in your list. This is great for creating basic lists that share similar properties like colors, fonts, sizes, etc.

If you want to style items individually, click on the “List Item” substack, and check the “override shared styles” option. You can read more about this under the “Listify Item” stack section.

Hide All Text

Checking this option will hide the text for all of the items in your list. This is a rare situation, but it can be used when you want to create a list of only icons.

Hide All Icons

Checking this option will hide the icon for all of the items in your list. This is useful when you want to create a list with no icons at all, and only text.

Indent Direction

This is option is specifically for multi-level lists. It controls the direction in which the sub-level items will be indented. You can choose to indent sub-level items from the “Left” or from the “Right”

Align Content

Listify provides an incredible way of aligning the content for list items. There are four options: “Left”, “Center”, “Right”, and “Separate”.

– Left

Align Items “left” is the default for list item alignment. It will push the icon and the Text to the left side of the item.

– Center

Align Items “Center” will push both the Icon and the Text towards the center of the item.

– Right

Align Items “Center” will push both the Icon and the Text towards the Right side of the item.

– Separate

Align Items “Separate” will push the Icon and Text to opposite sides of the item, leaving empty space in between.

Item Indentation

This option can be used to set a specific pixel indentation for sub-level items. If you set the indentation to “15px” then all sub-level items will be pushed in-wards by 15px.

Item Spacing

Item Spacing is the space inbetween each list item. Specifically it is the bottom margin of each list item. If you set this value to “20px” then there will be “20px” of vertical space between every item.

Item Radius

The item radius is used for creating list items with rounded corners. The higher the value, the rounder the corner.

Item Padding

The item padding is the space between the edge of each item and the content inside of it. You can set a different value for the Top, Bottom, Left, and Right side of each item.

Item Margin

The item margin is the space around the edge of each item. You can set a different value for the Top, Bottom, Left, and Right side of each item.

Item Background

There are four different options for setting the background of each item, “None”, “Color”, “Gradient”, and “Image”.

If you select one of these options you will find the specific controls regarding each one. They are very straightforward and easy to follow.

Item Border

The border option is used for creating a border around each item. You must first click the “ON” option to turn the border on. Then you will find that you can set a border width for the Top, Bottom, Left, and Right side of the item. Then you can select the color as well as the border style.

NOTE: The “List Items > Text(Shared Styles)” options are styles that can be used to affect the text of all items in your list. If you want to set specific text styling for an individual item, click on the item itself, and change it under the “List Item > Text (Individual) settings.

Text Font

We’ve included a bunch of preset fonts with Listify, as well as the ability to add custom fonts!

Simply choose the font that you want to use, or select “Custom” to add your own.

If you select “Custom” you will find that two new input fields appear. One is for the URL of the font that you want to import from the web, and the other is for the Name of the font.

For example, if you want to use the font “Nunito” from Google Web Fonts, then you would set the URL input to:

“https://fonts.googleapis.com/css?family=Nunito:300,400,600,700” (without the quotations)

and then you would set the Font Name input to:

Nunito (without the quotations)

This will now set the font to Nunito from Google Web Fonts. ^^

Text Size

The text size option is simply used for setting the font-size of each item. Again, if you want to set an specific size for an individual item, you can do so by clicking on the specific item that you want to edit, and changing it’s size under the settings there.

Text Color

The color option is very straightforward and is simply for setting the color all item text in the list.

NOTE: The “List Items > Icons (Shared Styles)” options are styles that can be used to affect the Icons for all items in your list. If you want to set specific icon styling for an individual item, click on the item itself, and change it under the “List Item > Icon (Individual) settings.

In addition, the actual Icon Font and Icon itself cannot be set globally. This is due to limitations in the stacks interface. The Icon Font and Icon Code must be set individually for each Item. If you want to create a list of items that share a similar icon, such as a heart or a star (like a bullet point), then we recommend creating one item, and then copying & pasting it for the rest of the items.

All other styles for icons such as color, padding, size, etc. can be set globally. : )

Vertical Position

The vertical position option is for aligning icons vertically according to the item itself.  There are three options, “Top”, “Center”, and “Bottom”.

This option is mostly used when you have items with longer text content. If the text content of an item is only one line, you will not see much difference in the vertical alignment. With longer text content, you will easily see the difference.

By default, it is set to “Center” meaning that the icon will be vertically aligned directly in the center of the item.

If you set the vertical position to “Top”, then the icon will be fixed to the top of the item. Even if the text for the item is rather long, the icon will stay towards the top.

If you set the vertical position of “Bottom”, then the icon will stay fixed to the bottom.

Horizontal Position

The horizontal position is used for aligning icons to the “Left” or “Right” of each item. If you select “right” then the icon will be placed on the right hand side of the item, and the text will be pushed to the left.

Icon Padding

The icon padding is the space around the icon and it’s background.

Icon Spacing

The Icon Spacing is the space between the Icon and the Text in an item. If you want to increase the gab between the text and icons, increase this option.

Icon Radius

The Icon radius is for setting the corner roundness for each icon. This option is only noticeable when an icon has a background.

Icon Size

The Icon Size option is for setting the Font Size of an Icon.

Background

The background option is simply for setting the background behind the icon. You can choose to have no background, a color background, a gradient, or an image.

The only thing to note here is that if you choose to set an image background for your icon, you will find another checkbox titled “Image Only”. This will hide the icon itself and allow you to use only an image with no icon. This is great for creating completely custom icons.

Icon Color

The color option simply changes the color of the icon itself.

Listify Item Stack

Here you will learn all about the Listify Stack and it’s included substacks, Listify Item, and Listify Group. Most of the styling options are quite straightforward and easy to follow, but we’ve done our best to explain everything for you here.

: )

General
List Item
List Item > Text
List Item > Icon

NOTE: By default all List Items will retain the styles set on the Listify Stack itself. If you want to style an individual item separate from all of the other items, you must check the “Override Shared Styles” option first.

Once you check this option, you will find that you can style an item individually from all others.

Link

The link option is simply for setting a link for a list item. It is not necessary to set a link, but if you want to link an item to another page or resource, then you can do so.

Item Level

The item level option is used for creating multi-level lists. You can set the level of an item to push it inwards by one sub level.

For example, you will see that there are 11 item level options.

– Top

– Sub Level 1

– Sub Level 2

– Sub Level 3

– Sub Level 4

– Sub Level 5

– Sub Level 6

– Sub Level 7

– Sub Level 8

– Sub Level 9

– Sub Level 10

By default, all items are set to top level, Each numbered level, is one level deeper than the rest. For example Sub Level 1 items will be below Top level items, and Sub Level 2 items will be below Sub Level 1 items.

The order of items is VERY IMPORTANT. If you want to create a list with multiple levels, each level must follow the order above, like so:

– TOP

– Sub Level 1

– Sub Level 1

– Sub Level 1

– Sub Level 2

– Sub Level 2

– Sub Level 2

Override Shared Styles

This option is crucial for setting specific styles on an individual list item. If you want to style an individual item differently than the rest, you must check this option first. If not, not of the following styles will apply.

Custom Stack Content

This option can be used to remove both the icon and text from a list item, and replace the inner content of the item with a section for adding custom stacks! It is great for adding things like images or anything else. We specifically use this option for adding images to our pricing table examples.

Hide Text

This checkbox can be used to remove the text content of a list item. It is useful when you want to have an item with only an icon.

Hide Icon

This checkbox can be used to remove the icon from of a list item. It is great when you want to have an item with only text.

List Item Fill Mode

There are 3 fill options for each list item. “Fill”, “Pixel”, and “Percentage”.

Fill will make the item fit the width of it’s parent list.

Pixel will set a fixed with for the item (keep in mind that this is not responsive)

Percentage will make the list item fill a certain percentage of it’s parent list. e.g. an item with the fill set to 50% will fill half the width of it’s parent list.

Align Content

Listify provides an incredible way of aligning the content for list items. There are four options: “Left”, “Center”, “Right”, and “Separate”.

– Left

Align Items “left” is the default for list item alignment. It will push the icon and the Text to the left side of the item.

– Center

Align Items “Center” will push both the Icon and the Text towards the center of the item.

– Right

Align Items “Center” will push both the Icon and the Text towards the Right side of the item.

– Separate

Align Items “Separate” will push the Icon and Text to opposite sides of the item, leaving empty space in between.

Item Spacing

Item Spacing is the space inbetween each list item. If you set this value to “20px” then there will be “20px” of vertical space between every item.

Item Radius

The item radius is used for creating list items with rounded corners. The higher the value, the rounder the corner.

Item Padding

The item padding is the space between the edge of each item and the content inside of it. You can set a different value for the Top, Bottom, Left, and Right side of each item.

Item Margin

The item margin is the space around the edge of each item. You can set a different value for the Top, Bottom side of each item.

Item Background

There are four different options for setting the background of each item, “None”, “Color”, “Gradient”, and “Image”.

If you select one of these options you will find the specific controls regarding each one. They are very straightforward and easy to follow.

Item Border

The border option is used for creating a border around each item. You must first click the “ON” option to turn the border on. Then you will find that you can set a border width for the Top, Bottom, Left, and Right side of the item. Then you can select the color as well as the border style.

NOTE: The “List Items > Text (Individual)” options are styles that can affect the text of an individual item only, making it different from the rest.

Text Font

We’ve included a bunch of preset fonts with Listify, as well as the ability to add custom fonts!

Simply choose the font that you want to use, or select “Custom” to add your own.

If you select “Custom” you will find that two new input fields appear. One is for the URL of the font that you want to import from the web, and the other is for the Name of the font.

For example, if you want to use the font “Nunito” from Google Web Fonts, then you would set the URL input to:

“https://fonts.googleapis.com/css?family=Nunito:300,400,600,700” (without the quotations)

and then you would set the Font Name input to:

Nunito (without the quotations)

This will now set the font to Nunito from Google Web Fonts. ^^

Text Size

The text size option is simply used for setting the font-size of each item. Again, if you want to set an specific size for an individual item, you can do so by clicking on the specific item that you want to edit, and changing it’s size under the settings there.

Text Color

The color option is very straightforward and is simply for setting the color all item text in the list.

NOTE: The “List Item > Icon (Individual)” options are styles that affect the individually selected item only.

Here can you can set the Icon Font and Icon Code for the List Item.

Icon Font

You can select from 3 different Icon Fonts. Google Material Icons, Fontawesome Icons, and Ionicons.

Icon Code

Once you select the Icon Font that you desire, you must then enter the specific code for that icon.

Each Icon font has their own format for writing icon codes, which we will explain below:

– Google Material Icons ( https://material.io/icons/ )

Material icons use underscores to separate words. For example if you want to use the “account circle” icon on their website, you should enter “account_circle” into the icon code field.

– Fontawesome Icons( http://fontawesome.io/icons/ )

Fontawesome Icons use dahses to separate words. For example if you want to use the “address book” icon on their website, you should enter “address-book” into the icon code field.

NOTE: you do not need to add the “fa” before the icon code, as we handle this for you.

– Ionicon Icons( http://ionicons.com/ )

Ionicons also use dashes to separate words. Their website provides an easy way of copying and pasting icon codes, simply click on the icon that you want, and the code will appear. You can then copy this code directly and paste it into the icon field. For example, paste “ion-clock” into the field for the Ionicon clock icon.

Vertical Position

The vertical position option is for aligning icons vertically according to the item itself.  There are three options, “Top”, “Center”, and “Bottom”.

This option is mostly used when you have items with longer text content. If the text content of an item is only one line, you will not see much difference in the vertical alignment. With longer text content, you will easily see the difference.

By default, it is set to “Center” meaning that the icon will be vertically aligned directly in the center of the item.

If you set the vertical position to “Top”, then the icon will be fixed to the top of the item. Even if the text for the item is rather long, the icon will stay towards the top.

If you set the vertical position of “Bottom”, then the icon will stay fixed to the bottom.

Horizontal Position

The horizontal position is used for aligning icons to the “Left” or “Right” of each item. If you select “right” then the icon will be placed on the right hand side of the item, and the text will be pushed to the left.

Icon Padding

The icon padding is the space around the icon and it’s background.

Icon Spacing

The Icon Spacing is the space between the Icon and the Text in an item. If you want to increase the gab between the text and icons, increase this option.

Icon Radius

The Icon radius is for setting the corner roundness for each icon. This option is only noticeable when an icon has a background.

Icon Size

The Icon Size option is for setting the Font Size of an Icon.

Background

The background option is simply for setting the background behind the icon. You can choose to have no background, a color background, a gradient, or an image.

The only thing to note here is that if you choose to set an image background for your icon, you will find another checkbox titled “Image Only”. This will hide the icon itself and allow you to use only an image with no icon. This is great for creating completely custom icons.

Icon Color

The color option simply changes the color of the icon itself.

Listify Group Stack

The Listify Group Stack was created specifically for making groups of list such as pricing tables. It’s extremely easy to use, as all you really need to do is drag multiple lists into a Listify Group.

There is no limit to how many lists you can add to a group, though we recommend no more than 3 or 4.

General

List Alignment

The list alignment option controls how child lists will be vertically aligned. If you want the lists to be aligned all to the top, select “Top”, if you want them to be vertically aligned to the center, select “Center”.

By default, Lists will be aligned to the center.

Wrap Lists

The Listify Group stacks will automatically wrap lists to expand the full width of the page for mobile devices. You can choose the breaking point at which you want your lists to wrap.

There are 3 options, Mobile, Tablet, or Desktop.



Updates & Changelog

Need to update your product? Use this form to download the latest version.