Navigating List Element Settings

List Element

The list element is used to display bullet or numbered listed text within your app.

The text can be written and edited in the box that shows up within the app screen preview.

  • To write in your list, click on the text input area within the list element, and type in what you’d like to write.
  • Hit the Enter key on your keyboard to go to the next line to create more bullet points.

List Element Settings:

Bold, Italic, Underline, & Strikethough

  • To edit your text to make it bolded, italicized, underlined, or strikethough, simply click each button respectively when hovering over the element in the preview screen.

Name

  • The name of your element. The name is simply used for your reference as the app builder, but it will not appear anywhere to app users.
  • To name your element, click the pencil icon in the top of the left menu, and type your new name for the element, and click save.

Type

  • This setting determines what type of bullet displays next to the text in the list.
  • To edit your bullet point type, click the dropdown below "Type" on the left menu. Select your preferred type of bullet listing.
  • Note - if you select the type "Icon", a new dropdown will appear for you to choose which icon you'd like to use as bullets. you can also select the color of the icons by clicking the color box below.

Font

  • This is the font of your list text. By default, the font will be set to your app's Default Font, which can be edited in your account's General Settings.
  • To change fonts, uncheck the box that says "Use the App's Default Font", and click the drop down menu that appears. Select your preferred font from the list of fonts displayed.

Font Size

  • This determines the size of your list text. To edit your list text's font size, use the slider beneath “Font Size” on the left menu, or type in your desired size number. The higher the size, the bigger your font will display on the screen.

Text color

  • This determines the color of your list text. To edit your text's color, click the color box underneath where it says “Text Color” on the left menu.
  • As you select and edit your color, you’ll see the preview of it on the text within the screen preview.
  • Once satisfied, simply click anywhere else on the page to set the color.

Animation

  • Setting an animation for your element will cause it to load in with a visual effect. 
  • Once the main screen is loaded on a phone, the animation chosen will take place according to your trigger settings. Beneath “Trigger”, you will see a dropdown menu, and an input for for “Minutes” and “Seconds”.
  • To choose an animation for your element, click the drop-down menu below “Trigger" and select an animation.
  • The "Minutes" and Seconds" inputs are used as a timer. Once a screen is loaded on a phone, the timer starts ticking down. When the timer expires, your element's animation will occur.
  • Note - once the animation has started, it will continue on the same timer, no matter if the user leaves the screen or returns to it later.

Gutter Width

The gutter width setting will determine the horizontal space in between the bullet points and the text.

  • To edit the gutter width, use the slider beneath “Gutter Width” on the “Appearance” menu on the right side of the page. The higher the number, the further the bullet points and text will be spaced out.

Spacing

  • Spacing is used to generate space around content, inside of an element's area. To edit spacing settings, scroll to the bottom of the “Appearance” menu on the right side of the page to where it says "Spacing". You can edit the spacing of the Top, Bottom, Left, and Right of your element by dragging the sliders for each respectively. The higher the spacing is, the more space between the border of the element and the content.

If you have any questions about this article, feel free to reach out to our support team! We're happy to help.