Checklist Element

12/02/2019

The Checklist element allows you to easily add beautifully styled lists anywhere to your site. Choose any of the Font Awesome 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.

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

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. Edit an existing page. Ensure the Fusion Builder is activated, by clicking the 'Use Fusion Builder' button on top of the page editor.

Step 2. Choose the Container and Column you wish to add the Alert Element into. Click on Add new Element, at the bottom of the content in the Column.

Step 3. Choose Checklist 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 in your Theme Options > Fusion Builder Elements > Checklist Element section. 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: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Checklist Element

View The Options Screen

Checklist Element Parameters

Copy to Clipboard

Parent Settings

  • icon - A font awesome icon value. For example, fa-glass.
  • iconcolor – Accepts a hexcode ( #000000 ). Sets the icon’s color for all list items. Leave blank for Theme Option selection.
  • circle – Can be one of these values: default, yes, or no. Sets if the icon is circular or not. Choose default for Theme Option selection.
  • circlecolor – Accepts a hexcode ( #000000 ). Sets the icon’s background color for all list items. Leave blank for Theme Option selection.
  • size – Accepts a pixel value that sets the item’s size. For example, 5px.
  • divider – Choose if a divider line shows between each list item.
  • divider_color – Controls the color of the divider lines.
  • class – Add a custom class to the wrapping HTML element for further css customization. Please refer to this documentation section.
  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.

Child Settings

  • icon - A font awesome icon value, which overrides the parent icon setting for individual items. For example, fa-glass.
  • custom content - Insert the custom content between the
    Copy to Clipboard
    tags.