Hoe je je header instelt

De header

De header is de balk bovenaan je app. Hij blijft overal in beeld: hij maakt je app herkenbaar, geeft elke sectie een titel, bevat snelkoppelingen en helpt gebruikers de weg te vinden.

Je stelt hem in via het menu ‘My App’.

Klik in de structuur van je app op Header.

Hoogte van de header

Kies eerst de hoogte van de header: Small, Medium of Large.

Kies Medium… en de header wordt hoger, met dezelfde titel of hetzelfde logo.

Kies Large… en je kunt een korte beschrijving toevoegen. Typ die hier… en klik op OK.

De beschrijving staat onder je titel, in de grote header.

Medium en Large gelden voor de secties van je hoofdnavigatie; andere pagina's gebruiken altijd de kleine header. Deze app houdt het bij Small.

Titel of logo

In het blok Logo verschijnt de naam van je app als tekst of als afbeelding. Wil je de tekst wijzigen? Typ dan je titel… en klik op OK.

De preview wordt meteen bijgewerkt.

Wil je de kleur aanpassen? Klik erop, voer een kleurcode in of kies er een en klik dan op Choose.

De titel krijgt de nieuwe kleur.

Kies een lettertype uit de lijst… en de preview laat het zien.

Stel met de schuifregelaar de grootte in.

De titel wordt groter.

Wil je liever je logo tonen? Klik op Logo en kies een afbeelding van minstens 800 × 200 pixels.

Je logo komt in de plaats van de tekst.

Zet het links of laat het gecentreerd staan.

Hier schuift het naar links.

Kies daarna wat de header toont terwijl gebruikers navigeren: altijd je logo, met ‘Logo only’, zoals op deze sectiepagina… of de naam van elke sectie, met ‘Section title’.

Navigatieknoppen

De navigatieknoppen staan links in de header: de Back-knop, hier in de preview, en de Menu-knop als je navigatie er een heeft. Hun icoon en kleur stel je hier in.

Bijvoorbeeld een nieuwe kleur voor de Back-knop… is meteen zichtbaar.

Achtergrond

Kies een achtergrondkleur en de kleur van de onderrand.

De header krijgt de nieuwe achtergrondkleur.

Bij de kleine header kun je ook een achtergrondafbeelding gebruiken, van 1242 × 192 pixels.

De afbeelding vult nu de header.

Wil je die verwijderen? Klik dan op de prullenbak in de afbeelding… en bevestig.

De header toont weer zijn achtergrondkleur.

Scrolleffect

Het scrolleffect bepaalt wat de header doet als gebruikers naar beneden scrollen: hij blijft staan of verdwijnt. Bij Medium of Large kan hij ook kleiner worden.

Met Hiding schuift de header weg terwijl de pagina scrolt.

Acties in de header

Rechts staan acties: snelkoppelingen naar pagina's die je zelf kiest. Voeg er een toe met ‘Add an action’… kies dan de bestemming, hier de sectie Search.

De nieuwe snelkoppeling verschijnt in de header, met een standaardicoon.

Klik op het icoon om het te wijzigen… zoek in de iconenbibliotheek en kies het vergrootglas.

De snelkoppeling toont nu een vergrootglas. Je kunt ook de kleur kiezen, op tablet en desktop een titel tonen en op desktop er een knop van maken.

De header toont twee snelkoppelingen; de rest komt in een extra menu.

Een header per sectie

Elke sectie kan ook een eigen header hebben. Ga terug naar de structuur… en klik op een sectie.

Open Header… en kies ‘Modify the header of this section’.

De instellingen werken zoals bij de algemene header. Hier een andere achtergrondkleur… alleen voor deze sectie.

Terug naar de algemene header? Klik op het tandwiel… dan op ‘Go back to default header’ en bevestig.

De sectie gebruikt weer de algemene header.

Publiceren

Publiceer de update van je app via het menu Publish, zodat je gebruikers de wijzigingen zien.