Navigating the App Builder

Testing, Saving, and Publishing

Navigating the entire app builder can be daunting at first, so this article will take you through each feature step by step to give you a better understanding of the 22apps visual builder.

The first thing to recognize is the Save, Test and Publish options. You will find each of these in the top U.I. in the upper right of the page.

Save:

  • To save your current work on the screen, click the Save button in the upper right of the page. This will save your work within the visual app builder so that you can edit it further later.
  • Note – clicking Save will not publish the screen’s current build live to your app - it will only save your edits within the builder.

Test:

Testing your app is a very useful method of seeing how your app will appear on users' phones.

To test a screen to see how it currently functions on a phone, click the Test button in the upper right of the page. This will open the “Preview Your App” window.

  • In order to test out your app, you must download a testing app to your phone. If you haven’t downloaded the app yet follow these steps:
    • Install the Expo app to your Android or iOS phone.
    • Open the Expo app and log in. Create an Expo account if you don't already have one.

Now you can test your app.

  • Save your progress, and click "Test" in the top UI of any screen.
  • Next, enter your Expo login details into 22apps in the "Preview Your App" window, and click "Build".
  • Once your app has finished building, you will find it in the Expo app under Recent Projects within the Profile tab. Tap on the project, and it will load in the latest test build of your app that you've submitted.
  • Note - if you make new changes in 22apps and want to test them, you have to follow the same process each time.

Publish:

  • Publishing your screen will save your current screen’s build and publish it live to your app. To publish your screen, click the Publish button in the upper right of the page.
  • If it's your first time publishing, click here to follow the process of publishing.
  • If you've already published your first app build, hitting publish again will Instant Update your app. This means that your app content will be updated without having to submit to Apple or Android.

Configurable Options

The Configurable Options tab is where you can edit the primary settings for the full screen.

  • To access the Configurable Options tab, click the paintbrush icon on the left menu.

Configurable Options includes:

Background color

  • The background color for the full screen.
  • Click the empty circle to add/edit the screen’s background color

Interactions

  • Interactions are configurable options for when app users swipe left or right on the screen.
  • Beneath Swipe Left or Swipe Right, click the drop-down menu to view your options for screen interactions.

You’ll see a list of the following:

Not set

  • no interaction will occur when swiping that direction on this screen.

Open the submenu

  • Swiping will cause the submenu to appear.

Go to the previous screen

  • Swiping will cause your app to go back to the previous screen the app user was on.

Go to the next screen

  • If the app user just swiped to go to a previous screen, setting this interaction will allow the user to swipe to go forward a screen.
  • Note - if the current screen is the newest screen, swiping with this interaction will do nothing.
  • (think of how it works on your internet browser. You can press the arrow to go to the previous page, and you can then press the forward arrow to go back to that page you were just on.)

Go to screen: (Screen Name)

  • Swiping will bring you to the selected screen.

Submenu

The submenu is used as a navigation menu to get around to different areas of your app easier. ( Think of the banner at the top of most websites, where there are clickable options, such as “Home”, “About”, and “Contact”)

In order for your app users to open the Submenu, you have a few options to choose from:

  1. Set an Interaction to open the submenu.
  2. Set an element’s link to open the submenu when tapped. Only certain elements can be set to open the submenu when tapped. These elements include headers, text, images, buttons, and icons. (See Navigating Elements for further detail).

Building the submenu:

  • To edit your submenu, click the bullet points icon on the left menu to see the Submenu settings.

There are two main sections within the submenu settings:

Submenu Links

Here is where you can add and configure the links on your Submenu.

  • On the left menu, you’ll see a button saying Add Link. Click the button to start adding your link.
  • Next, type into the text input box the text you want on display within the submenu. Then, in the dropdown menu, select the screen you’d like to link the text to. (For example, you could put “Home” as the text, and link it to your Home Screen.)
  • Click the "Add" button, and you’ll see a preview of your new link within the submenu. Now, whenever the submenu is opened in your app, if that new text is tapped, the app user will be brought to the linked screen.
  • You may follow this same process again multiple times to add more links to the Submenu.

After you’ve added your submenu links, they will be displayed in the left menu.

  • To change the order the links appear in the submenu, you can hold and drag each link in the left menu higher or lower than the other links.

Edit link

  • To edit an already created link, click on the pencil icon of the link within the left menu. Make your necessary changes, and click "Save" when complete.

Duplicate

  • To duplicate a link, click the duplicate icon. The icon looks like two little pieces of paper overlapping each other. After clicking, a clone of that link will appear at the bottom of your list of links on the left menu.

Delete

  • To delete a link, click the trash icon. After clicking, the link will be deleted from the submenu.

Submenu Style

These options, on the right side of the editor, is where you can add and configure a few things for your submenu:

Align

  • This determines whether your submenu appears on the left or the right side of the screen within your app. To edit, click the drop down menu, and select either Left or Right. After selecting your option, the submenu will appear on the chosen side of the screen preview.

Background Color

  • To set the background color of your submenu, click the color box to the left of where it says “Background Color”.
  • 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.

Text Color

  • To set color of the text links within your submenu, click the color box to the left of where it says “Text Color”.
  • 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.

Sections, Rows, and Elements Brief Explanation

There are 3 primary components within the 22apps Visual App Builder.

  1. Sections
  2. Rows
  3. Elements

Elements go inside of rows, and rows go inside of sections.

Think of it like a house. A section is like a house, the entire building. Rows are the rooms in a house, such as the kitchen, bedroom, living room, and more. Elements are the things that go in each room. For example, the kitchen’s elements would include a fridge, a stove, a sink, a dishwasher, and more.

If you had just a building with empty rooms, it wouldn’t have very much. On the flipside, you can’t have a fridge or a dishwasher in the middle of nowhere. That’s why the structure of the house is so important, and it’s exactly the same with Sections, Rows, and Elements in the app builder.


Sections

A section is used as a whole area of the screen where you can input content.

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

A created section has many options and settings.

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

Once hovering in the correct area, you will see "Section" appear in the corner of the section’s outlined area.

Move Section

  • To move a section, click and drag the name of the section when hovering over it. This will pick up the section. Keep holding down your mouse and drag the section to the location on the preview screen you’d like for it to go.

Duplicate Section

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

Delete Section

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

Section Settings

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

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

Section Name

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

Sticky

  • Sticky is used to determine whether or not the section sticks in place on the screen as the app user scrolls up and down your screen. 
  • For example, Instagram has a top and bottom bar, which stays on the screen no matter how much you scroll up and down. These top and bottom bars are considered “sticky”.
  • The Sticky drop-down menu has three options: None, Top, or Bottom.
    • None: the section will scroll up or down in the same spot on the phone screen as the app user scrolls.
    • Top: the section will stick to the top of the phone screen as the app user scrolls.
    • Bottom: the section will stick to the bottom of the screen as the app user scrolls.

Background Image

  • You may upload an image as the full background of your section. To add a background image to your section, 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 section's background, simply click the trash icon underneath where it says "Background Image".

Fit

  • The fit of a section determines its maximum width across the screen. To edit the width of your section, click the drop-down menu underneath “Fit” on the left menu. Select a section width option to your liking.

Animation

  • Setting an animation for your section will cause the section 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 section, 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 section’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 section, 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 section’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 section to the left, center, or right of the screen, 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 section is not full width. If your section’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 section. 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 section by dragging the sliders for each respectively. The higher the spacing is, the more space between the border of the section and the content.

Sections Manager

Once you have added several sections to your screen, it is important to be able to manage and distinguish between each section.

  • To access the Sections Manager tab, click the three horizontal lines icon on the left menu.

In this area, a list of all of your sections will be displayed on the left menu. From here, you have a few things you can do:

Change the order of sections

  • If you click and hold on a section in the left menu, you can drag it. To change the order of your sections, simply click and drag a section to your preferred spot, above or beneath the other section(s). It will update accordingly in the screen preview as well.

Rename a section

  • To rename a section, click on the pencil icon of the section you'd like to change the name of. Type in the name you'd like to give the section, and click save once your changes are complete.

Make a section visible or invisible

  • If you want to make a section disappear from your app’s screen without fully deleting it, you can do that within the Section Manager.
  • Locate the name of the section you wish to edit the visibility of in the Section Manager. Click on the eye icon to edit the visibility of this section. This icon works like a light switch; you can either turn the visibility of a section “on” or “off”.

Duplicate a section

  • Locate the name of the section you wish to duplicate in the Section Manager. To duplicate a full section, click the duplicate icon, which looks like two little pieces of paper overlapping each other. Once you click duplicate, a clone of the whole section will appear right beneath it.
  • Note – this will exactly duplicate every row and element within the entire section.

Delete a section

  • To delete a section, click the trash icon of the section you’d like to delete.

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.

Elements

Elements are the tools used to input all the content into your app. Elements can only be placed inside of the columns within rows. You can put any amount of elements inside of a row.

  • To add an element to a row, navigate to the “Add Element” tab in the left menu by clicking the “+” icon on the left menu. From this menu, drag any element from the left menu into a current row. The elements are every listed icon & text found below the header, “Add Element”.

Your selected element will now appear in the app screen preview.

Each type of element has many options and settings.

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

Once hovering in the correct area, you will see the name of the element appear in the corner of the element’s outlined area.

  • Note - each element will have some different settings, so listed below are the options that are the same for all elements.

Move Element

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

Zoom Out

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

Duplicate Element

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

Delete Element

  • To delete an element, click the trash button that appears when hovering on an element.

Element Settings

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

Within the settings for each type of element, left and right menus will appear with several configurable options. The following will go through all the settings and configurations of each element:


Header Element

The header element is used to display header text within your app.

The header text can be edited in the box that shows up within the visual app builder.

  • By default, the displayed text will say “Header”. Click on that text to edit it and type whatever you want to be displayed.

Header 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.

Font

  • This is the font of your header. By default, the font will be set to your app's Default Font, which can be edited in your account's General Settings. (click here to see how to edit your default font)
  • 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 header. To edit your header’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 header text. To edit your header’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.

Text Transform

  • These three settings will cause a number of different effects to your header text. To transform your header text, identify the three buttons below “Text Transform” on the left menu. You’ll see the following options:
  • TT – click to fully capitalize your text.
  • tt – click to make all your text lowercase.
  • Tt – click to make the first letter of each word capitalized.

Link

  • This option allows you to set a link on your header. This means, when an app user taps the header, it will send the user to the link destination. To set a link for your header, identify the drop down menu below “Link” in the left menu. In this drop down area, you will see a number of options to select from to determine the link's destination:

Not set

  • Nothing will happen when tapping the element.

Go to a screen

  • Links to one of your other built screens.
  • A new dropdown menu will appear below, click and select the name of the screen you wish to link to.

Go back

  • Links to go back to the previous screen the app user was on.
  • Functions the same as a back button on a web browser.

Link to a website

  • Links users to an external website off the app. Enter the website URL you’d like to link into the input box right below. 
  • Note - this option will take users outside of your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"

Link to a website in app

  • Links users to an external website while staying on your app. Enter the website URL you’d like to link into the input box right below.
  • Note - this option causes a web page to load overtop of your app, though users are still technically on your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"

Open the popup

  • When tapped, it will open your custom popup made within 22apps.

Open the submenu

  • Links the submenu to appear.

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.

Background Color

  • To set a background color for your header, 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 header 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.

Align

  • To align your header to the left, center, or right of the column it’s in, click the corresponding icons underneath “Align” in the “Appearance” menu on the right side of the page.

Line Height

  • The line-height settings will determine the space in between each vertical line of your text. Note – this change will only be visible if you have multiple lines of font within the header element.
  • To edit your header’s line-height, enter the drop-down menu beneath “Line Height” on the “Appearance” menu on the right side of the page. From there, you can select from a variety of line-height options.

Letter Spacing

  • The letter-spacing settings determine the space in between each letter horizontally. To edit your header’s letter spacing, enter the drop-down menu beneath “Letter Spacing” on the “Appearance” menu on the right side of the page. From there, you can select from a variety of letter spacing options.

Border

  • The visual border around your header 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 the 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 element. 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 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.


Text Element

The text element is used to display basic text within your app.

  • The text can be edited in the box that shows up within the visual app builder.

By default, the displayed text will say “Text”. Click on that text to edit it and type whatever you want to be displayed.

Text Element Settings:

ALL TEXT ELEMENT SETTINGS ARE THE SAME AS THE HEADER ELEMENT SETTINGS. Read the previous section to see how each setting works.


Image Element

The image element is used to display a picture within your app. When you drag the image element into the preview screen, the image will display a default grey image until you add your desired image within the element settings.

Image 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.

Add Image

  • To insert your image, click the pencil icon below where it says “Image Picker” on the left menu. From here, you can upload, or add an image from your library.
  • 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.

Source

  • If your preferred image is already hosted on an external website, you can simply paste the URL of the image below where it says "Source" on the left menu.
  • Note - if you selected an image you uploaded to 22apps, it will create a source link for the image.

Width

  • The width setting of an image determines its size. To edit the width of your image, drag the slider underneath “Width” in the menu on the left side of the page.
  • Note - this will keep the dimensions of your image.

Link

  • This option allows you to set a link on your image. This means, when an app user taps the image, it will send the user to the link destination. To set a link for your image, identify the drop down menu below “Link” in the left menu. In this drop down area, you will see a number of options to select from to determine the link's destination:

Not set

  • Nothing will happen when tapping the element.

Go to a screen

  • Links to one of your other built screens.
  • A new dropdown menu will appear below, click and select the name of the screen you wish to link to.

Go back

  • Links to go back to the previous screen the app user was on.
  • Functions the same as a back button on a web browser.

Link to a website

  • Links users to an external website off the app. Enter the website URL you’d like to link into the input box right below. 
  • Note - this option will take users outside of your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"

Link to a website in app

  • Links users to an external website while staying on your app. Enter the website URL you’d like to link into the input box right below.
  • Note - this option causes a web page to load overtop of your app, though users are still technically on your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"

Open the popup

  • When tapped, it will open your custom popup made within 22apps.

Open the submenu

  • Links the submenu to appear.

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 image 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.

Align

  • To align your image to the left, center, or right of the column it’s in, click the corresponding icons underneath “Align” in the “Appearance” menu on the right side of the page.

Border

  • The visual border around your image 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 the 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 element. 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 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.


Video Element

The video element is used to display a video within your app. When you drag the video element into the preview screen, it will display a default grey screen until you link the video within the element settings.

Videos are displayed using the video element through the use of a URL to a video.

Video 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.

Video Link

  • The video link is how you select your video to show up in your app. An acceptable link is a URL copied directly from the website the video is on. 22apps supports a URL to an MP4 file, Youtube, Vimeo, or Wistia embed URL.
  • To input your video link, identify the input area below “Video Settings” in the left menu. Paste your video link directly into the input area.

Width

The width setting of a video element determines its size within your app.

  • Note – the original video’s dimensions will not be altered by the width setting.
  • To edit the width of your video, drag the slider underneath “Width” in the menu on the left side of the page.

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.

Align

  • To align your video to the left, center, or right of the column it’s in, click the corresponding icons underneath “Align” in the “Appearance” menu on the right side of the page.

Border

  • The visual border around your video 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 the 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 element. 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 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.


Audio Element

The audio element is used to display an audio file within your app. When you drag the audio element into the preview screen, it will display a grey play bar.

Audio files are connected to your app through the use of an audio file URL link. App users can play and listen to any audio file you link from directly within your app.

Audio Element Settings:

Audio Link

In order to correctly link an audio file, you must paste a URL of the direct audio file. This can be a .MP3, .WAV, or .M4A file.

  • This can be linked from a website, a podcast, or several other options.
  • Note - In order for your audio file link to work correctly, ensure the link has .mp3, .wav, or .m4a at the end of it.
  • To input your audio link, identify the input area below “Audio Settings” in the left menu. Paste your audio link directly into the input area.

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.

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.


Button Element

The button element is used as a clickable button within your app. You may link the button to a number of options.

Button Element Settings:

Bold, Italic, Underline, & Strikethough

  • To edit your button text to make it bolded, italicized, underlined, or strikethough, simply click each icon 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.

Font

  • This is the font of your button. 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 font size of your button's main text. To edit your button 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.
  • Note - this will stretch the button vertically to fit the text.

Text color

  • This determines the color of your button's main text. To edit your text 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.

Sub text

  • The sub text is text that appears below your main text on your button. To add sub text to your button, tick the box next to "Sub Text" on the left menu.
  • Note – by default, the sub text box will be unchecked.
  • From here, you can edit the sub text in it's own set of settings separate from the main text.

Link

  • This option allows you to set a link on your button. This means, when an app user taps the button, it will send the user to the link destination. To set a link for your button, identify the drop down menu below “Link” in the left menu. In this drop down area, you will see a number of options to select from to determine the link's destination:

Not set

  • Nothing will happen when tapping the element.

Go to a screen

  • Links to one of your other built screens.
  • A new dropdown menu will appear below, click and select the name of the screen you wish to link to.

Go back

  • Links to go back to the previous screen the app user was on.
  • Functions the same as a back button on a web browser.

Link to a website

  • Links users to an external website off the app. Enter the website URL you’d like to link into the input box right below. 
  • Note - this option will take users outside of your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"

Link to a website in app

  • Links users to an external website while staying on your app. Enter the website URL you’d like to link into the input box right below.
  • Note - this option causes a web page to load overtop of your app, though users are still technically on your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"

Open the popup

  • When tapped, it will open your custom popup made within 22apps.

Open the submenu

  • Links the submenu to appear.

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.

Background Color

  • To set the background color for your button, 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.

Shadow

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

Opacity

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

Align

  • To align your button to the left, center, or right of the column it’s in, click the corresponding icons underneath “Align” in the “Appearance” menu on the right side of the page.

Text Align

  • To align the text inside your button to the left, center, or right of the button, click the corresponding icons underneath “Text Align” in the “Appearance” menu on the right side of the page.

Width

  • The width setting of a button determines its maximum horizontal width.
  • To edit the width of your button, drag the slider underneath “Width” in the “Appearance” menu on the right side of the page.

Letter Spacing

  • The letter-spacing settings determine the space in between each letter horizontally. To edit your header’s letter spacing, enter the drop-down menu beneath “Letter Spacing” on the “Appearance” menu on the right side of the page. From there, you can select from a variety of letter spacing options.

Border

  • The visual border around your button 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 the 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 element. 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 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.


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.


Icon Element:

The icon element is used to display an icon within your app. Any icon within the 22apps library can be selected.

Icon 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.

Add Icon

  • To select an icon, click the drop down menu underneath where it says “Icon Settings” on the left menu. Scroll and select the icon you’d like to display in your app.

Width

The width setting of an icon determines its size within your app.

Note – the original icon’s dimensions will not be altered by the width setting.

  • To edit the width of your icon, drag the slider underneath “Width” in the menu on the left side of the page.

Link

  • This option allows you to set a link on your icon. This means, when an app user taps the icon, it will send the user to the link destination. To set a link for your icon, identify the drop down menu below “Link” in the left menu. In this drop down area, you will see a number of options to select from to determine the link's destination:

Not set

  • Nothing will happen when tapping the element.

Go to a screen

  • Links to one of your other built screens.
  • A new dropdown menu will appear below, click and select the name of the screen you wish to link to.

Go back

  • Links to go back to the previous screen the app user was on.
  • Functions the same as a back button on a web browser.

Link to a website

  • Links users to an external website off the app. Enter the website URL you’d like to link into the input box right below. 
  • Note - this option will take users outside of your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"

Link to a website in app

  • Links users to an external website while staying on your app. Enter the website URL you’d like to link into the input box right below.
  • Note - this option causes a web page to load overtop of your app, though users are still technically on your app.
  • Important - Ensure to copy and paste the full URL when linking to a website. For example, typing "google.com" or "www.google.com" will not work. It must be the full URL link with "http" at the start.
    • EXAMPLE; the proper link to google would be "https://www.google.ca/"

Open the popup

  • When tapped, it will open your custom popup made within 22apps.

Open the submenu

  • Links the submenu to appear.

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 icon 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.

Align

  • To align your icon to the left, center, or right of the column it’s in, click the corresponding icons underneath “Align” in the “Appearance” menu on the right side of the page.

Border

  • The visual border around your icon 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 the 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 element. 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 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.


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.


Popup

The popup is used as a method to present content to the app user in the form of a customized pop up. 

Note - Each app screen has its own popup, and each popup can be edited as freely as an app screen.

In order for your app users to open the popup, you must set an element’s link to open the popup when tapped. Only certain elements can be set to open the popup when tapped. These elements include headers, text, images, buttons, and icons.

Building a popup:

  • To edit your screen's popup, click the icon (shaped like a square with an arrow) on the left menu to open the popup settings.

There are two main sections within the popup settings:

Popup

  • To edit and add content to your popup, drag and drop in sections, rows, and elements to design your popup as you see.

Note - in order for your app users to exit the popup, you must have one of the following:

  • A link set on an element within the popup screen to "close popup" will bring the user back to the screen they accessed the popup from.
  • A link to "go to a screen", "go back", or "open the submenu" will close the popup as the action is performed.

Popup Settings

Here is where you can configure specific popup specific settings.

To access popup settings, click the settings icon across from the name of your popup in the top of the left menu. From there, you'll see a few options:

Name
  • The name of your popup. The name is simply used for your reference as the app builder, but it will not appear anywhere to app users.
  • To name your popup, click the pencil icon in the top of the left menu, and type your new name for the popup, and click save.
Background Color
  • To set a background color for your popup, click the color box to the left of where it says “Background Color” in the popup settings.
  • 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.

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