So gestalten Sie Ihre Bereiche

Bereichsdesign

Jeder Bereich Ihrer App hat sein eigenes Design. Für jede seiner Seiten wählen Sie eine Vorlage, dann die Farben, Schriftarten, Informationen und Bilder, die sie zeigt. So geht’s.

Klicken Sie im Menü „My App“ auf Structure.

Klicken Sie auf den Bereich, den Sie gestalten möchten, hier den Artikelbereich Local.

Der Bereich hat zwei Seiten: die Artikelliste und den Artikel selbst. Jede Seite hat ihr eigenes Design.

Artikelliste

Klicken Sie für die Liste auf „Edit the design“.

Beginnen Sie mit der Vorlage. Die aktuelle hat ein Häkchen; mit den Pfeilen sehen Sie die anderen.

Wählen Sie „Visual Card“… und jeder Artikel wird zu einer großen Karte mit seinem Foto.

Jeder Text hat seine Schriftart, Größe und Farbe. Hier eine neue Farbe für die Titel… und alle Titel übernehmen sie.

Wählen Sie unter Thumbnail das Format der Fotos. „Golden ratio“… gibt ihnen eine breitere, flachere Form.

Da die Karten eine Hintergrundfarbe haben, können Fotos bis an den Rand reichen. Klicken Sie auf „Disable Edge-to-edge“… und jedes Foto sitzt jetzt in seiner Karte, mit Abstand zum Rand.

Tokens

Wählen Sie unter Display, welche Informationen jede Karte zeigt. Aktivieren Sie „Info below title“… und unter jedem Titel erscheint eine Zusammenfassung.

Sehen Sie sich diese Felder an: Die Wörter in eckigen Klammern sind Tokens. Die App ersetzt sie durch die Daten jedes Artikels, hier Datum und Zusammenfassung.

Hinter dem Fragezeichen finden Sie alle: Titel, Autor, Anzahl der Kommentare, ein relatives Datum und mehr, für jeden Inhaltstyp.

Kombinieren Sie sie mit eigenem Text. Hier „Published“, gefolgt vom Token für ein relatives Datum… und jede Karte zeigt jetzt ein relatives Datum statt des vollständigen.

Artikelseite

Jetzt die Artikelseite. Gehen Sie zurück zum Bereich… und klicken Sie unter Article auf „Edit the design“.

Die Artikelseite hat eigene Vorlagen, mit der Toolbar unten, oben oder seitlich. Wählen Sie „ToolBar Up“… und die Toolbar rückt nach oben.

Wählen Sie unter Content, wie Titel und Informationen ausgerichtet sind. „Left alignment“… richtet sie links aus.

Wählen Sie unter Toolbar, welche Aktionen Ihre Leser haben. Deaktivieren Sie „Font size“… und die beiden Buttons verschwinden aus der Toolbar.

Für volle Kontrolle: Der HTML-Code der Seite nutzt dieselben Tokens. Ordnen Sie Titel, Datum, Autor und Inhalt nach Ihren Wünschen an.

Veröffentlichen

Gut zu wissen: Farben oder Schriftarten, die Sie in „App style“ anwenden, ersetzen das Design jedes Bereichs.

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