The header is the upper part of the app that is always visible and accessible on all pages.
The header serves 3 purposes :
- to give the page a title
- to display shortcuts
- to navigate in the app
Setup for the general header can be done in the Home menu of the Builder, from the "Structure" and "Settings" tabs.
1. The title
The central part of the header allows you to give a page a title. This title can be displayed in the form of text or an image.
From the "Header" tab :
Click on the text to edit it. The color, the font, and the text alignment in the header are all modifiable.
Select the "Logo" button to add an image in the place of text. Be sure to respect the minimum size requirements of 600 x 148 px. The alignment of the image in the header (to the left or centered) can be modified.
From the "Header" tab > Header settings :
Define the header's background color, or choose to apply a background image.
It is possible to choose a different background image based on the device the app is being displayed on. Be sure to respect the sizes. The sizes are given in reference to iOS devices, but the same size images will be used in Android devices of equivalent size.
- iPhone : 640 x 128 px minimum
- iPhone 7 : 750 x 128 px minimum
- iPhone 7 Plus : 1242 x 192 px minimum
- iPad and desktop : 2048 x 128 px minimum
Choose to apply the following effects to your header if you'd like :
- no effect
- blur (available only for iOS. For the Android and Web versions, the transparency effect will be applied)
It is possible to display shortcuts in the right side of the header. Click on the green "+" icon in the Header tab to add shortcuts.
It is possible to add a maximum of 6 shortcuts. The display rules are the following :
- 1 to 3 shortcuts : direct access from the header
- above 3 : the first 2 are directly accessible, the others are accessible from an additional deployable menu
A shortcut is made up of the following elements :
- an icon
- a title (the display of which is optional)
- a link that corresponds to the shortcut destination
Click on the shortcut icon to set up these elements.
On tablet and laptop/desktop, it is possible to display the shortcut directly accessible from its title.
On laptop/desktop, it is possible to display the shortcuts with access in the form of a button. To do that, the title of the shortcut must absolutely be displayed.
The titles of the shortcuts belonging to the additional deployable menu are always displayed, regardless of the device being used.
3. The navigation
The left part of the header is used to display the navigation actions, when necessary.
Principal navigation access (menu button)
To access content with the navigation modes Swipe, Little Swipe, Grid, Slate, and From Scratch, a menu button appears in the header. Click on this button, from the "Header" tab, to modify its design.
For the navigation modes TabBar and No menu, this button will not appear.
In the tab Header Settings > Back button, you can define the design of the "Back" button used to go back to previous pages inside your app.