Basic Controls of the Main Screen Editor

Adding or Reducing Height of a Row

To add or reduce the height of a row, utilize the plus and minus buttons located on the right side of each row (Fig. 1).  By changing this setting, you are increasing the height of just the tile.  To change the amount of space between the rows of tiles, make use of the "Tile Spacing" setting.

Fig. 1 - Row height adjustment tool.

Tile Spacing

The tile spacing setting determines the amount of negative space between your tiles (Fig. 2).  Negative space is the unclickable area surrounding each of the tiles.  Any changes made to the tile spacing value will either increase or decrease the distance surrounding each side of the tile.

Fig. 2 - Tile Spacing setting and example.

Change the View Mode

Within the View Mode settings for the Main Screen Editor, you have the ability to change the way you are viewing your app.  This is beneficial for seeing the different ways in which your users may view the app.

• Use the device dropdown to change the view between a Phone or a Tablet.
• Use the Orientation dropdown to select viewing in Portrait or Landscape.
• Change the Zoom Preview to view the Editor zoomed in.

Add a Background Color

Use Background Settings to select a background color using the color picker tool.  This color shows in the negative space between tiles.  Only one background color may be selected for the Main Screen.

Rearranging Tiles Within a Row

To rearrange a tile, select the hamburger icon found in the top left corner.  This will appear when you hover your cursor over a tile (Fig. 5).  Select this icon and hold.  You may then drag the tile to the left or right within the assigned row.

Fig. 5 - Rearrange Tile icon.

Rearranging Rows

On the left of each row of tiles, there is an additional hamburger icon (Fig. 6).  By selecting and dragging this icon up and down, you are able to change the order of the rows.

Fig. 6 - Rearrange rows icon.