Checklist Element

24/07/2022

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.

  • Vivamus elementum neque

  • Vivamus elementum neque

  • Vivamus elementum neque

  • Vivamus elementum neque

  • 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!

Overview

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 Checklist from the Elements List.

Step 4. There is both a Children tab, where you add the individual checklist items and a General Tab, where you set options that 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. 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.

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 to save your page.

Read below for a detailed description of all element options.

Avada Website Builder

824,625 Businesses Trust Avada

Get Avada
Avada Website Builder

824,625 Businesses Trust Avada

Get Avada
Avada Website Builder

824,625 Businesses Trust Avada

Get Avada

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.

Children Tab

  • Add / Edit Items – This is where add or edit new items for this Element. You can reorder elements by dragging them and dropping them into place.

  • + Add List item – Allows you to add an item.

  • + Bulk Add – Add multiple list items at once.

  • Item Options

  • Edit Item Icon – Allows you to edit the individual child items in your list.

  • 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.

View The Options Screen

Item 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

General Tab

  • 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 Global Options (Avada > Options > Fusion Builder Elements > Checklist).

  • Checklist Icon Circle – Global setting for all list items. Turn on if you want to display a circle background for checklists icons.

  • Checklist Icon Circle Color – Global setting for all list items. Controls the color of the checklist icon circle background. Leave empty for default value.

  • Checklist Text ColorGlobal setting for all list items. Controls the color of the checklist text. Leave empty for default value.

  • Item Font Size – Select the list item’s font size. Enter value including any valid CSS unit, ex: 14px. Leave empty for default value.

  • Item PaddingControls the padding size of the list items. Leave empty for default value.

  • Divider Lines – Choose if a divider line shows between each list item.

  • Divider Line Color – Controls the color of the divider lines. Leave empty for default value.

  • Odd Row Background ColorControls the background color of the odd row. Leave empty for default value.

  • Even Row Background Color – Controls the background color of the even row. Leave empty for default value.

  • MarginIn pixels or percentage, ex: 10px or 10%.

  • 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.

View The Options Screen

Global Options

Location: Avada > Options > Avada Builder Elements > Checklist

  • Checklist Icon Color – Controls the color of the checklist icon.

  • Checklist Icon Circle – Turn on if you want to display a circle background for checklist icons.

  • Checklist Icon Circle Color – Controls the color of the checklist icon circle background. This is a dependent option that always stays visible because other Builder Options can utilize it.

  • Checklist Text Color – Controls the color of the checklist text.

  • Item Font Size – Controls the font size of the list items.

  • Item Padding – Controls the padding size of the list items.

  • Divider Lines – Choose if a divider line shows between each list item. Select from Yes, or No.

  • Divider Line Color – Controls the color of the divider lines. This is a dependent option that always stays visible because other Builder Options can utilize it.

  • Checklist Odd Row Background Color – Controls the background color of the checklist odd row.

  • Checklist Even Row Background Color – Controls the background color of the checklist even row.

View The Options Screen
Avada Website Builder

824,625 Businesses Trust Avada

Get Avada
Avada Website Builder

824,625 Businesses Trust Avada

Get Avada
Avada Website Builder

824,625 Businesses Trust Avada

Get Avada