(NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information.)
Here's an example of a checklist in action to give you an idea of what it looks like.
- Item 1
- Item 2
- Item 3
When you build a checklist through the shortcode builder, you will have the option of setting properties for all your list items at the beginning in the "global settings." For example, if you choose to have a check mark as your icon, it will be set at the icon for each item in your list.
In order to add items to your list, simply scroll down and add one (but ONLY one) in the box provided. When you want to add another, click on the Add New List Item link.
For each list item you add, you will have the option to style that item individually. For example, you can give each item a different icon or different color. If you do nothing, however, then each item will take the style of the global settings you set at the beginning.
Your code will look something like this:
[checklist icon="fa-check" circle="no" size="small" class="" id=""]
[li_item icon="" iconcolor="#dddddd" circle="" circlecolor=""]Item 1[/li_item]
[li_item icon="" iconcolor="#dddddd" circle="" circlecolor=""]Item 2[/li_item]
[li_item icon="" iconcolor="#dddddd" circle="" circlecolor=""]Item 3[/li_item]
NOTE: you may need to add the property for iconcolor to the general properties manually if you want all of your list items icons to take the same color. For example, adding iconcolor="#dddddd" to the top of your shortcode will make each icon that color.
[checklist icon="fa-check" iconcolor="#dddddd" circle="no" size="small" class="" id=""]
If you don't do this, then you will need to add the color to each list item when you create it. Notice the first example above, each item has an iconcolor property.
Here are the properties available:
- icon = choose from these values: check, star, arrow, asterik, cross, plus, etc.
- iconcolor = hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
- circle = choose from these values: yes, no - this puts your icon in a circle or not
- size = small, medium, large
- class = custom CSS class
- id = custom CSS id