Navigating Rows

Rows

Rows are placed inside of sections. They are used as places to input elements. You can put any amount of rows inside of a section.

  • To add a row, navigate to the “Add Section / Row” tab by clicking the “+” icon on the left menu. From this menu, drag the “Row” icon from the left into the app screen.
  • Your row will now appear in the app screen preview.

A created row has many options and settings.

  • To access the options for actions and settings of any row, hover your mouse over the area of the row on the preview screen.

Once hovering in the correct area, you will see "Row" appear in the corner of the row's outlined area.

Move Row

  • To move a row, click and drag the name of the row when hovering over it. This will pick up the row. Keep holding down your mouse and drag the row to the location on the preview screen you’d like for it to go.
  • Note – a row can only be moved into an existing section.

Zoom Out

  • You have the ability to simply zoom out of the row and highlight the section that the row is in.
  • To zoom out of a row, click the magnifying glass button that appears when hovering on a row. Once clicked, the outer section that the row is in will be highlighted, and you will be in the settings for that section.

Duplicate Row

  • To duplicate a full row, click the duplicate button that appears when hovering on a row. The duplicate button looks like two little pieces of paper overlapping each other. Once you click duplicate, a clone of the whole row will appear right beneath it in the preview screen.
  • Note – this will exactly duplicate every  element within the entire row.
  • It is important to note that each row is individual from other rows. Any created or duplicated row will have its own settings and properties that can be changed individually from the others.

Delete Row

  • To delete a row, click the trash button that appears when hovering on a row.

Row Settings

To access the settings for a row, click the name of the row that appears when hovering on a row. Once clicked, several configurable options for that row will appear.

Within the settings for a row, left and right menus will appear with several configurable options:

Row Name

  • The name of your row. The name is simply used for your reference as the app builder, but it will not appear anywhere to app users. By default, a row will be named “Row”.
  • To name a row, click the pencil icon in the top of the left menu, and type your new name for the row, and click save.

Number of Columns

  • Rows can contain anywhere from 1-5 columns for elements to go inside of. This feature is most often used to place multiple elements horizontally.
  • To edit a row’s amount of columns, click the drop down menu underneath “Number of Columns” on the left menu. From there, simply select the number of columns you want the row to feature. You will see the change within the preview screen.
  • If you selected an option of more than 1 column, you will see a new drop down menu with percentages appear. These are to determine the width of each column in the row. Select your desired column width settings.

Background Image

  • You may upload an image as the full background of your row. To add a background image to your row, click the pencil icon underneath where it says “Background Image” on the left menu. Upload your image, and click the Save button.
  • Important - Aim to use images with a low file size. We recommend resizing any images to be under 100kb in file size before adding them to your app.
    • This is essential to help your images load faster for app users.
  • To remove an image from a row's background, simply click the trash icon underneath where it says "Background Image".

Fit

  • The fit of a row determines its maximum width inside of a section. If you have multiple columns, each individual column will grow or shrink in width based on your setting.
  • To edit the width of your row, click the drop-down menu underneath “Fit” on the left menu. Select a row width option to your liking.

Animation

  • Setting an animation for your row will cause the row 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 row, 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 row'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.

Background Color

  • To set a background color for a row, click the color box to the left of where it says “Background Color” on the “Appearance” menu on the right side of the page.
  • As you select and edit your color, you’ll see the preview of it within the screen preview.
  • Once satisfied, simply click anywhere else on the page to set the color.

Opacity

  • Opacity is used to edit your row’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.

Align

  • To align your row to the left, center, or right of the section it’s inside of, click the corresponding icons underneath “Align” in the “Appearance” menu on the right side of the page.
  • Note – The Align settings only make a difference if the row is not full width. If your row’s “Fit” is set to 100% width, alignment will not show a visible change.

Border

  • The visual border around your section is determined by a number of factors:

Style

  • To set your border’s style, enter the drop-down menu beneath “Style” on the “Appearance” menu on the right side of the page. You can then select from a list of several border styles.
  • Note – to remove your section’s border, set the border style to “None”.

Border Color

  • To set the color of your border, click the color box next to “Border Color”. Once satisfied, simply click anywhere else on the page to set the color.

Border Size

  • To set the thickness size of your border, enter the drop-down menu beneath “Border Size” on the “Appearance” menu on the right side of the page. You will see a list of several “Point” options. The higher the number is, the thicker the border will be.

Border Radius

  • The radius of your border is used to determine the roundedness of your section. To change your border’s radius, drag the slider under “Border Radius” on the “Appearance” menu on the right side of the page. The higher the number is, the more round your border’s edges will become.

Spacing

  • Spacing is used to generate space around content, inside of a row. 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 a row by dragging the sliders for each respectively. The higher the spacing is, the more space between the border of the row and the content.