Creating an App Header

Overview

The app header sits at the top of your application and is viewable on each page. Adding a customized app header is a way to brand your entire experience.

Uploading images for the App Header

Upload the images that you intend to display in your header by toggling over to Media Library and clicking on Upload.

After dragging and dropping in images (or selecting them for upload directly from the files on your computer), you will see them listed in the Stage:

Creating the App Header

Toggle over to Web Flows Builder. In the Tree, go to Page Layouts > Standard Layout > Mobile > Container. Click on the '+' icon next to the Container and add a new Container. Rename it to 'App Header'.

Drag and drop App Header Container to be above Main Content in the Tree so that it sits above the content of each Web Page within your application.

Click on the '+' icon next to the App Header Container and select Image as a Media control. Then change the name to 'Header image'.

In the Inspector section, go to General > Control Properties and use the split control to select the image you need from the Asset dropdown. This way, the image will show up in the Stage.

Then go to Style > Override Styles and set the Dimensions to 50% width. This leaves space to add another image, a Label, or even a Button that opens a Modal.

The contents of this App Header Container will now appear above every Web Page within your application.


Did this page help you?