Checklist Element


The Checklist element allows you to easily add beautifully styled lists anywhere to 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.

  • Vivamus elementum neque

  • Vivamus elementum neque

  • Vivamus elementum neque

  • Vivamus elementum neque

  • Phasellus congue massa diam
  • Phasellus congue massa diam
  • Phasellus congue massa diam
  • Phasellus congue massa diam
  • Maecenas tincidunt luctus

  • Maecenas tincidunt luctus

  • Maecenas tincidunt luctus

  • Maecenas tincidunt luctus

View Element Demo Page!

How To Use The Checklist Element

The Checklist Element allows you to add stylish checklists anywhere in your content. Follow these simple steps below.

Step 1. Ensure Avada Builder, or Avada Live is active.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 3. Choose Alert from the Elements List.

Step 4. The options on the right hand side are Parent Options, and affect the whole list. You can set a global icon, a 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.

Step 5. Once you have set your Parent Options, you add Child Items on the left. 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.

Step 6. You can then duplicate existing, or create new checklist items by clicking on the Clone Item icon, or the + List Item button respectively.

Step 7. Once you have completed adding your checklist items, click Save. You will be returned to the edit page. You can preview the page to view your checklist, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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.

Parent Options

  • Select Icon – Allows you to select a global icon for all list items. This can be overridden in the individual items.

  • Checklist Icon Color – Here you can choose a global color for the checklist icon. Leave empty for the default value, chosen in the Theme Options (Avada > Theme Options > Fusion Builder Elements > Checklist Element).

  • Checklist Circle – This  setting is only for the Custom Alert. This allows you  to set the background color for custom alert boxes.

  • Checklist Circle Color – This  setting is only for the Custom Alert. This allows you to set the border size for custom alert boxes. In pixels.

  •  Item Size – This  setting is only for the Custom Alert. This allows you to set the icon for custom alert boxes.

  • Divider Lines – This setting allows you to choose the alignment of the Alert content.

  • Divider Line Color – This setting allows you to transform the case of the Alert text.

  • Element Visibility – Allows you to control the column’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class for the column.

  • CSS ID – Allows you to add an ID for the column.

Add / Edit Settings

  • Add / Edit Items – This is where all your child element’s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

  • Edit Item Icon – Allows you to edit an item.

  • Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

  • Delete Item Icon –  Allows you to delete an item.

  • Re-order Feature –  Allows you to drag and drop the item to your desired order to rearrange them.

  • Add New Toggle Button –  Allows you to add a new Toggle.

View The Options Screen

Child Options

  • Select Icon – You can select an individual checklist item icon here. This will override the global setting.

  • List Item Content – Add your list item content here.

View The Options Screen

Global Options

Location: Avada > Options > Avada Builder Elements > Checklist

View The Options Screen