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 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 Item Stack. After adding the listify stack to your page. You will see an add ( + ) button. Clicking this button will add a List Item Stack to your List. Each Item automatically inherits the stacks of the Listify Parent stack. Although, if you click on an individual Listifiy Item, you will see that you can style it individually. You can also set the icon for your items and much more.
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.
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.
Get It Now!
Example File Included!!!