So richten Sie Ihre Kopfzeile ein

Der Header

Der Header ist die Leiste oben in Ihrer App. Er bleibt überall sichtbar: Er macht Ihre App erkennbar, gibt jeder Sektion ihren Titel, enthält Verknüpfungen und hilft Ihren Nutzern bei der Orientierung.

Sie richten ihn im Menü „My App“ ein.

Klicken Sie in der Struktur Ihrer App auf Header.

Höhe des Headers

Wählen Sie zuerst die Höhe des Headers: Small, Medium oder Large.

Wählen Sie Medium… und der Header wird höher, mit demselben Titel oder Logo.

Wählen Sie Large… mit Platz für eine kurze Beschreibung. Geben Sie sie hier ein… und klicken Sie auf OK.

Die Beschreibung steht unter Ihrem Titel, im großen Header.

Medium und Large gelten für die Sektionen Ihrer Hauptnavigation; andere Seiten nutzen immer den kleinen Header. Diese App bleibt bei Small.

Titel oder Logo

Im Logo-Block erscheint der Name Ihrer App als Text oder als Bild. Um den Text zu ändern, geben Sie Ihren Titel ein… und klicken Sie auf OK.

Die Vorschau aktualisiert sich sofort.

Klicken Sie auf die Farbe, geben Sie einen Code ein oder wählen Sie eine aus. Bestätigen Sie mit Choose.

Der Titel erscheint in der neuen Farbe.

Wählen Sie eine Schriftart aus der Liste… und die Vorschau zeigt sie.

Mit dem Schieberegler stellen Sie die Größe ein.

Der Titel wird größer.

Um stattdessen Ihr Logo anzuzeigen, klicken Sie auf Logo und wählen Sie ein Bild mit mindestens 800 × 200 Pixel.

Ihr Logo ersetzt den Text.

Richten Sie es links aus oder lassen Sie es zentriert.

Hier rückt es nach links.

Wählen Sie dann, was der Header beim Navigieren zeigt: immer Ihr Logo, mit „Logo only“, wie auf dieser Seite… oder den Namen jeder Sektion, mit „Section title“.

Navigationsbuttons

Links im Header sitzen die Navigationsbuttons: der Back-Button, hier in der Vorschau, und der Menu-Button, falls Ihre Navigation einen hat. Deren Symbol und Farbe legen Sie hier fest.

Zum Beispiel eine neue Farbe für den Back-Button… ist sofort zu sehen.

Hintergrund

Wählen Sie für den Hintergrund eine Farbe sowie die Farbe der Unterkante.

Der Header erhält die neue Hintergrundfarbe.

Beim kleinen Header können Sie auch ein Hintergrundbild verwenden, im Format 1242 × 192 Pixel.

Das Bild füllt jetzt den Header.

Zum Entfernen klicken Sie auf das Papierkorbsymbol am Bild… und bestätigen Sie.

Der Header zeigt wieder seine Hintergrundfarbe.

Scroll-Effekt

Der Scroll-Effekt legt fest, was der Header beim Herunterscrollen tut: Er bleibt stehen oder blendet sich aus. Bei Medium oder Large kann er auch schrumpfen.

Mit Hiding gleitet der Header beim Scrollen aus dem Bild.

Aktionen im Header

Rechts finden Sie die Aktionen: Verknüpfungen zu Seiten Ihrer Wahl. Zum Hinzufügen klicken Sie auf „Add an action“… und wählen Sie dann das Ziel, hier die Sektion Search.

Die neue Verknüpfung erscheint im Header, mit einem Standardsymbol.

Um es zu ändern, klicken Sie auf das Symbol… suchen Sie in der Symbolbibliothek und wählen Sie die Lupe.

Die Verknüpfung zeigt jetzt eine Lupe. Sie können auch die Farbe festlegen; auf Tablet und Desktop kann sie einen Titel zeigen, auf dem Desktop auch als Button erscheinen.

Der Header zeigt zwei Verknüpfungen; weitere landen in einem Zusatzmenü.

Ein Header pro Sektion

Jede Sektion kann einen eigenen Header haben. Gehen Sie zurück zur Struktur… und klicken Sie auf eine Sektion.

Öffnen Sie Header… und wählen Sie „Modify the header of this section“.

Alles funktioniert wie beim allgemeinen Header. Hier eine andere Hintergrundfarbe… nur für diese Sektion.

Zurück zum allgemeinen Header: Klicken Sie auf das Zahnrad… dann auf „Go back to default header“ und bestätigen Sie.

Die Sektion nutzt wieder den allgemeinen Header.

Veröffentlichen

Damit Ihre Nutzer die Änderungen sehen, veröffentlichen Sie das Update Ihrer App über das Menü Publish.