Hinzufügen und Verwalten von Seiten

Eine Seite ist ein Dokument, das das Fundament für das Layout der App bildet. Sie enthält drei Hauptelemente, die Inhalte aufnehmen können: Kopfzeile, Fußzeile und Text.

Eine Web Experience enthält mindestens eine Seite. Sie kann auch mehrere Seiten enthalten. Beim Entwerfen eines Layouts entscheiden Sie, wie Sie die Inhalte am besten Ihrer Zielgruppe präsentieren. Für Inhalte mit besonderem Augenmerk auf die Karte sollten Sie eine Vollbild-App-Seite verwenden. Für gemischte Inhalte, wie zum Beispiel Karten, mehrere Bilder und Textblöcke, bei denen ein vertikaler Bildlauf erforderlich ist, sollten Sie eine Bildlaufseite verwenden. Wenn in einer App ein Menü enthalten sein soll, damit Benutzer auf mehrere Seiten zugreifen können, dann können Sie Ordner hinzufügen, um App-Seiten in einem Untermenü zu gruppieren, und Links zu weiteren Websites hinzufügen. Sie können auch Fenster hinzufügen und konfigurieren, die beim Laden der App oder Seite geöffnet werden.

Widgets sowie Vorlagen für Blöcke und Bildschirmgruppen, die Sie einer Seite hinzufügen, werden im Knoten Text im Abschnitt Gliederung des Fensters Seite aufgelistet. Die durchsuchbare Gliederung zeigt die Hierarchie von Blöcken, Bildschirmgruppen und Widgets für die ausgewählte Seite, einschließlich der Knoten "Kopfzeile" und "Fußzeile", sofern Sie diese aktiviert haben. Klicken Sie in der Gliederung auf ein Element und dann auf die Schaltfläche Mehr, um ein Menü mit Funktionen wie "Umbenennen" und "Duplizieren" aufzurufen. Klicken Sie auf Alle einblenden oder Alle ausblenden, um die Hierarchie unter dem jeweiligen Element ein- oder auszublenden.

Um einer App Seiten hinzuzufügen, klicken Sie auf die Schaltfläche Seite hinzufügen , und wählen Sie die Seitenvorlage aus, die den Inhalten und dem gewünschten Ablauf der App entspricht. Im Folgenden finden Sie einige Beispielszenarien:

• Sie möchten eine kartenbasierte App auf einer Vollbildseite mit einer Kopfzeile erstellen.
• Sie möchten eine Multipage-App (App mit mehreren Seiten) mit einer Vollbild-App auf der Startseite und einer Bildlaufseite mit unterstützenden Inhalten auf einer weiteren Seite erstellen, auf die Benutzer über ein Menü oder eine Schaltfläche zugreifen können.

Sie können das Menü für die Schnellnavigation unten im Builder-Fenster verwenden, um eine Seite oder ein Fenster in der Experience auszuwählen und auf die Einstellungen zuzugreifen. Dieses Menü bietet eine Vorschau der Seitenhierarchie und Fenstertypen.

Wenn Sie ein Widget in einer App auswählen, wird am unteren Rand des Builder-Fensters auch eine Breadcrumb-Navigationshilfe angezeigt. Die Breadcrumbs zeigen, ob das ausgewählte Widget in anderen Widgets oder Seitenelementen enthalten ist.

Multipage-Apps

Das Fenster Seite enthält die folgenden Optionen zum Verwalten der Seiten in einer App:

• Seite hinzufügen: Wählen Sie einen der folgenden zwei Seitentypen aus: Vollbild-App oder Bildlaufseite. Jeder Seitentyp enthält mehrere Vorlagen. Einige Vorlagen sind kartenbasiert, während andere Vorlagen für gemischte Inhalte, wie zum Beispiel Texte, Bilder und Karten, vorgesehen sind. Sie können auch eine leere Vorlage auswählen, um benutzerdefinierte Layouts zu entwerfen.
• Link hinzufügen: Fügen Sie einen Link zu einer anderen Website hinzu, damit Benutzer im Menü der App auf eine zugehörige Webseite zugreifen können.
• Ordner hinzufügen: Fügen Sie einen Ordner für Seiten und Links hinzu, die in einem Menü-Widget als Dropdown-Menü angezeigt werden sollen.
• Weitere Optionen: Wählen Sie für Apps mit mehreren Seiten eine Seite als Startseite aus. Zusätzlich können Sie Seiten in den Menü-Widgets, die Sie der App hinzufügen, ausblenden. (Zwar enthalten dann alle Menüs in der App dieselben Seiten, Sie können aber für jedes Menü einen anderen Style festlegen.) Sie können Seiten umbenennen, duplizieren und löschen sowie hierarchisch organisieren, indem Sie eine Seite auf eine andere Seite ziehen. Während Sie die Seite ziehen, wird mit einer Linie angezeigt, an welcher Stelle sie zwischen anderen Seiten positioniert wird. Um sie unter einer anderen Seite zu schachteln, ziehen Sie die Seite auf die Zielseite, bis ein Rahmen um sie herum angezeigt wird. Sie können auch das Symbol für eine Seite, einen Link oder einen Ordner festlegen.

Einstellungen

Für Seiten sind die folgenden Konfigurationseinstellungen verfügbar:

• Symbol: Ändern Sie das Symbol, um zwischen den Seiten im Fenster Seiten besser unterscheiden zu können. Wählen Sie Symbole aus den Galerien Allgemein und Pfeile aus, oder fügen Sie Symbole aus einer Datei hinzu. Klicken Sie auf die Schaltfläche Löschen, um ein nicht verwendetes Symbol aus der Galerie Eigene Symbole zu entfernen.

  Hinweis:

  Sie können folgende Bildformate hochladen: PNG, GIF, JPG, JPEG und BMP. Um die optimale Performance zu gewährleisten, gilt ein Größenlimit von 10 MB pro Upload.

• Beschriftung: Ändern Sie den Namen der Seite. Diese Seitenbeschriftung wird auch in der URL der Experience verwendet. Wenn Sie eine Seite hinzufügen, gilt für deren Beschriftung das Prinzip der fortlaufenden Nummerierung. Wenn Sie beispielsweise Seite 1 duplizieren, erhalten Sie Seite 2 oder, falls Seite 2 bereits vorhanden ist, Seite 3.

  Hinweis:

  Wenn Sie den Namen einer Seite nach der Veröffentlichung ändern, funktionieren zuvor verwendete URLs weiterhin.

• Mit Fenster öffnen: Wählen Sie optional ein Fenster aus, das beim Öffnen der Seite vor der eigentlichen Seite angezeigt wird. (Es können nur feste Fenster zum Öffnen mit einer Seite ausgewählt werden.)
• Breite des Inhalts (nur Bildlaufseite)
  • Benutzerdefiniert: Legen Sie eine maximale Breite für die Seite fest.
  • Auto: Hiermit wird die gesamte Breite der Seite verwendet.
• Animation: Fügen Sie im Seitentext eine Animation für Widgets hinzu. (Die Animation wird in der obersten Ebene der Gliederung für das Widget angezeigt.)
• Text
  • Füllung: Wählen Sie eine Farbe für die Seite aus.
• Kopfzeile: Anzeige der Kopfzeile auf der ausgewählten Seite. Auf allen Seiten mit aktivierter Kopfzeile werden die folgenden Einstellungen für die Kopfzeile verwendet:
  • Höhe: Ändern Sie die Höhe der Kopfzeile in Pixel.
  • Füllung: Ändern Sie die Farbe der Kopfzeile.
  • Bleibt beim Bildläufen oben auf der Seite (nur Bildlaufseite): Bei einem Bildlauf nach unten bleibt die Kopfzeile am Anfang der Seite.
• Fußzeile: Anzeige der Fußzeile auf der ausgewählten Seite. Auf allen Seiten mit aktivierter Fußzeile werden die folgenden Einstellungen für die Fußzeile verwendet:
  • Höhe: Ändern Sie die Höhe der Fußzeile in Pixel.
  • Füllung: Ändern Sie die Farbe der Fußzeile.
• Layout (nur Bildlauf- und Rasterseiten)
  • Abstand: Bestimmen Sie den Abstand (die Zwischenräume) zwischen den Zeilen oder Rasterelementen auf der Seite in Pixel. Bei Rasterseiten können Sie die Farbe der Zwischenräume festlegen.
  • Innenabstand: Definieren Sie den Innenabstand an den vier Seitenrändern in Pixel.
• Rasterelemente (nur Rasterseiten): Definieren Sie, wie Benutzer zur Laufzeit mit Rasterelementen interagieren können.
  • Größenanpassung zulassen: Erlauben Sie den Benutzern das Ziehen der Zwischenräume, sodass sie die Größe der Rasterelemente anpassen können.
  • Erweiterung zulassen: Erlauben Sie den Benutzern, einzelne Rasterelemente zu erweitern.

    Hinweis:

    Sie können diese Einstellung auf der Registerkarte mit den Style-Einstellungen eines Widgets außer Kraft setzen. Dies ist sinnvoll, wenn Sie möchten, dass Benutzer einige Rasterelemente erweitern können, andere hingegen nicht.

Vorlagen

Die Vorlagen besitzen voreingestellte Layouts und Designs, die Sie ändern können, indem Sie das Layout entsperren. Über die Schaltfläche Layout sperren können Sie mit einer Vorlage beginnen und diese individuell anpassen. Nach dem Entsperren des Layouts werden weitere Optionen in den Konfigurationsfenstern angezeigt und das Fenster Widget einfügen aktiviert. Wenn Sie mit einer Vorlage aus der Standard-Galerie beginnen, können Sie auf die Schaltfläche Vorschau klicken, um ein Beispiel zu sehen, das Ihnen hilft, eine Vorlage zu wählen, die Ihren Anforderungen entspricht. Sie können die meisten dieser Vorlagen auch beim Hinzufügen weiterer Seiten auswählen. (Die mehrseitigen Vorlagen können Sie nur auswählen, wenn Sie die Web Experience erstmals erstellen.) Ihnen stehen Vorlagen der folgenden Kategorien zur Auswahl:

• Kartenbasierte Vorlagen für allgemeine Workflows, die für Standard-Vollbild-Apps vorgesehen sind. Diese Vorlagen lassen sich in folgende Kategorien unterteilen:
  • Festgelegt: Um diese Vorlagen zu konfigurieren, wählen Sie eine Karte aus und fügen relevante Widgets hinzu. Im Folgenden finden Sie einige Beispiele:
    • Billboard ist ein einfacher Map Viewer, der eine Karte und ein Controller-Widget enthält.
    • Foldable ist eine Vorlage mit einer offenen Oberfläche, deren Schwerpunkt die Karte ist. Sie enthält eine Überschrift mit einem Controller-Widget.
    • JewelryBox ist eine Vorlage, mit der Features in einer Liste kombiniert mit einer Karte angezeigt werden können.
    • Launchpad ist eine Vorlage, bei der der Schwerpunkt auf der Karte und einem Controller-Widget liegt, das unten auf der Seite verankert ist.
  • Raster: Diese Vorlagen verhalten sich wie ganzseitige Widgets vom Typ "Raster". Um sie zu konfigurieren, fügen Sie zunächst Widgets als Rasterelemente hinzu, und ziehen Sie dann die Widgets, um sie neu anzuordnen, sowie die Widget-Ränder, um ihre Größe zu ändern. Im Folgenden finden Sie eine Liste der verfügbaren Raster-Seitenvorlagen:
    • Avatarboard zeigt mehrere Kachel-Widgets mit Hover- und Umdrehfunktion an. Wie bei einer Karteikarte können Sie Details auf der Rückseite einer Kachel hinzufügen.
    • Checkerboard ist eine Rasterseitenvorlage mit einer Karte in der Mitte und kartenbezogenen Widgets um dieses herum.
    • Collage zeigt mehrere Bild-Widgets um das Widget "Fixiertes Fenster" an.
    • Faltblatt enthält Text- und Bild-Widgets, die in mehreren Spalten-Widgets angeordnet sind.
    • Kartenflyer zeigt mithilfe der Widgets "Koordinaten" und "Karte" dynamischen Text und Positionsinformationen an.
    • Multiversum ist für die Arbeit mit mehreren Datenquellen konzipiert. Durch das Widget "Daten hinzufügen" wird der Import von Daten aus verschiedenen Quellen vereinfacht. Dies ermöglicht es den Benutzern, verschiedene Quellen mittels Karten und Tabellen zu vergleichen und zu analysieren.
    • Panorama umfasst ein Karten-Widget und zwei Diagramm-Widgets. Benutzer können mit den Widgets "Diagramm", "Liste" und "Filtern" interagieren, um Daten der Karte auszuwerten.

    Rasterseiten, wie zum Beispiel Widgets vom Typ "Raster", können Registerkarten, Raster-Spalten und Raster-Zeilen enthalten, die im Abschnitt "Umrisslinie" im Fenster Seite angezeigt werden. Wie bei jedem Widget können Sie eine Raster-Zeile oder Raster-Spalte im Abschnitt "Umrisslinie" auswählen und auf die Schaltfläche Mehr klicken, um ein Menü mit weiteren Operationen zu öffnen. Raster-Zeilen und Raster-Spalten verfügen über die Schaltflächen Abstand horizontal verteilen bzw. Abstand vertikal verteilen. Wenn eine Zeile oder Spalte Bestandteil einer Registerkarte ist, können Sie diese Zeile bzw. Spalte umbenennen. Im Menü Mehr einzelner Widgets im Widget "Raster" befinden sich die Schaltflächen Horizontal teilen und Vertikal teilen.

  Hinweis:

  Statt die Einstellung Kopfzeile der Seite zu verwenden, wird die Kopfzeile in einigen Vollbild-App-Vorlagen mit dem Widget Fixiertes Fenster erstellt. Damit können Sie die Einstellung Kopfzeile für weitere Seiten aktivieren und konfigurieren, wenn Sie eine App mit mehreren Seiten erstellen. Inhalt, Layout und Einstellungen für Kopf- und Fußzeile werden durch alle Seiten in der App verwendet, für die Sie die Einstellung Kopfzeile oder Fußzeile aktivieren.

• Vorlagen für Bildlaufseiten, die in Blöcken oder Bildschirmgruppen organisiert sind. Ein Block-Container ähnelt dem Widget "Zeile". Im Folgenden finden Sie einige Beispiele:
  • Galerie ist eine Vorlage mit markanten Miniaturansichten, um die Inhalte hervorzuheben.
  • Allgemein bietet eine lange Vorlage zum Scrollen, mit der Sie die Inhalte freigeben können.
  • Einleitung ist eine Vorlage mit einem modularen Layout, in der Sie Bilder und Schlagzeilen darstellen können.
  • Parallaxe ist eine Vorlage mit einem Bannerbild oben auf der Seite, auf die eine Bildschirmgruppe von Fenstern mit Bildlauf folgt.

• Leere Vorlagen für Vollbild- und Bildlaufseiten, die Sie von Grund auf neu erstellen und gestalten können.
  • Leere Bildlaufseite ist eine leere Vorlage zum Erstellen eines benutzerdefinierten Designs in einer Webseite als Bildlaufseite. Wenn Sie einer Bildlaufseite Widgets hinzufügen, werden sie standardmäßig einem Block hinzugefügt. Klicken Sie auf die Schaltfläche Block einfügen, um unter gängigen Block-Layouts zu wählen, oder klicken Sie auf die Schaltfläche Bildschirmgruppe einfügen, um eine von mehreren Bildschirmvorlagen auszuwählen.
  • Leeres Vollbild ist eine leere Vorlage zum Erstellen eines benutzerdefinierten Designs in einer Vollbild-App.
  • Leeres Raster ist eine leere Vorlage, die sich wie ein ganzseitiges Widget vom Typ "Raster" verhält.