Navigating Text Element Settings

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:

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 text. 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 text. To edit your 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 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.

Text Transform

  • These three settings will cause a number of different effects to your text. To transform your 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 text. This means, when an app user taps the text, it will send the user to the link destination. To set a link for your text, 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/"
  • Want clients to contact you via Email or Phone Call? Click Here!
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 text, 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 text 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 text 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 text element.
  • To edit your text'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 text'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 text 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.
If you have any questions about this article, feel free to reach out to our support team! We're happy to help.