Checklist Element

Last Update: March 27, 2024

The Checklist Element allows you to easily add beautifully styled checklists anywhere on your site. Choose any of the Font Awesome or Custom Icons, choose the size of icon and text, use circle backgrounds, control all colors, use our mobile visibility system and more! Read below for an overview of the Checklist Element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Checklist Element

The Checklist Element allows you to add stylish checklists anywhere in your content. To begin, simply add the Element to your desired Column.

There is both a Children tab, where you add the individual checklist items and a General Tab, where you set options that affect the list as a whole. You can create an icons list or a numbered list, and control the checklist icon color, whether the icon will be in a circle or not, the color of that circle, the size of the item (this affects the text and the icon), and options for divider lines, and their color.

With the child items, you can do this one at a time, or you can bulk-add your checklist items. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. Note that you can override the global icon here, and below that is where you add the text for the individual checklist item. You can then duplicate existing, or create new checklist items by clicking on the Clone Item icon, or the + List Item button respectively.

Once you have completed adding your checklist items, click Save to save your page. Read below for a description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Checklist. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Checklist TypeGlobal setting for all list items. Make a selection if you want to have numbered list or icons list.
Select IconGlobal setting for all list items, this can be overridden individually. Click an icon to select, click again to deselect.
Icon/Number ColorGlobal setting for all list items. Controls the color of the checklist icon/number.
Icon/Number CircleGlobal setting for all list items. Turn on if you want to display a circle background for checklists icons/numbers.
Icon/Number Circle ColorGlobal setting for all list items. Controls the color of the checklist icon/number circle background.
Text ColorGlobal setting for all list items. Controls the color of the checklist text.
Item Font SizeSelect the list item's font size. Enter value including any valid CSS unit, ex: 14px.
Item PaddingControls the padding size of the list items.
Divider LinesChoose if a divider line shows between each list item.
Divider Line ColorControls the color of the divider lines.
Odd Row Background ColorControls the background color of the odd row.
Even Row Background ColorControls the background color of the even row.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

children

HeadingDescription
Add / Edit ItemsAdd or edit new items for this element. Drag and drop them into the desired order.

Child

HeadingDescription
Select IconThis setting will override the global setting.
List Item ContentAdd list item content.
Icon/Number ColorControls the color of the checklist icon/number.
Icon/Number Circle ColorControls the color of the checklist icon/number circle background.