Extra Blocks

• Bullet List

• Progress Bar

• Collapsible List / FAQ Section

• Timer

The “Extra” blocks are a collection of elements that can be used to add additional functionality to your pages.

Bullet List

The bullet list block is used to add a bullet list to your pages.

Once dragged onto the page, the bullet list text can be styled using the Font settings. The bullet icon itself can be changed by clicking the icon and selecting a new icon from the Font Awesome icon selector.

When duplicating bullet list items to extend the number of items in your list, it is important to note the need to select the correct element. Do not duplicate the box containing the bullet text. You would need to arrow up and duplicate the “LI” element.

Progress Bar

The progress bar element is used to display the perception of progress across multiple pages. The progress bar does not actually track progress across pages. The progress percentage is a display element set on each page. There are several progress bar blocks available. The different blocks differ in style, but functionally they are the same.

After dragging the progress bar block onto the page. Click the portion of the element containing the progress percentage ( % ). Once selected, you can change the font style, background settings and progress percentage in the settings menu.

Collapsible List / FAQ Section

There are two collapsible list blocks available. The difference between the two is the location of the dropdown icons (left or right). Functionally, they are the same.

To use the collapsible list to add an FAQ-style question and answer section to your pages. Simply drag the block onto the page and edit as needed. Click on the different text elements to type your own questions and answers (descriptions) and use the Font settings to style accordingly.

You may also change the open/close icons by clicking the icon and selecting a new icon from the Font Awesome icon selector. The top icon is the “open” icon. The bottom icon is the “close” icon.

Should you want one or more of the FAQs to be open by default, check the box for “Default Open” in the list settings. This would be set per FAQ.

Please note: The FAQs/Collapsible Lists will always remain “open” inside the builder.

Timer

The Timer element would be used any time you would like to add a timer to your pages to instill a sense of urgency on your pages.

After you drag a timer block onto the page you can click on the numbers/text and use the Font menu under the Style Manager to adjust the font type, size, and color of the text and numbers.

To configure the Timer itself, click on the space to the far left or right within the element that highlights the entire Timer element. Then open the element’s settings inside the Style Manager to configure the Timer.

Timer Type:

• Minute Timer - Timer set based on Hours, Minutes, and Seconds values

• Countdown Timer - Counts down to the Date and Time specified in the Start value

• Count Up Timer - Timer counts up from 0 until the time set in the Hours, Minutes, and Seconds values

End Text: The text you want to display after the timer completes. End Text could display a simple text message (EXPIRED!), a url to send users to another page (https://etc), or an element ID to open a previously hidden element (#12345)

Align: Choose the alignment of the Timer within the element it resides

Hours: Sets the hour value on the timer. Will overlap to Days value if >24 hours and Days is not removed from the Timer

Minutes: Sets the minute value on the timer

Seconds: Sets the seconds value on the timer

Relative Links:

Make a button appear after a set amount of time