Navigating Divider Element Settings

Divider Element

The divider element is used as a visual separation of content within your app. The divider is, by default, a horizontal line stretching a large portion across the phone screen, and can be used in several ways.

Divider Element Settings:

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.

Color

  • This setting determines the color of your divider. To edit your divider’s color, click the color box below “Divider Settings” in the left menu.
  • As you select and edit your color, you’ll see the preview of it on the divider within the screen preview.

Width

  • The width setting of a divider determines the distance of its horizontal stretch across your app screen. To edit the width of your divider, drag the slider underneath “Width” in the menu on the left side of the page.
  • Note - the divider only stretches as far as the row and section spacing settings will allow. If you want a full width divider, set the left & right spacing settings of the outer row and section to 0.

Thickness

  • The thickness setting of a divider determines the vertical thickness of the divider line. To edit the thickness of your divider, drag the slider underneath “Thickness” in the menu on the left side of the page.

Style

  • To set your divider’s style, enter the drop-down menu beneath “Style” on the menu on the left side of the page. You can then select a from a list of a few divider style options.

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.

Opacity

  • Opacity is used to edit your divider element’s visibility on the screen. To change the opacity, drag the slider under “Opacity” on the “Appearance” menu on the right side of the page.

Shadow

  • To set a shadow below the divider, click the drop down below "Shadow" on the right menu. Select your desired shadow amount.

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.