Navigating Image Element Settings

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/"
  • 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.

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.

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