Verfeinern der Layouts für alle Geräte

Mit Experience Builder können Sie unterschiedliche Seitenlayouts für Ihre Web Experiences erstellen und konfigurieren, damit sie auf Bildschirmen jeder Größe gut funktionieren. Die Konfiguration jedes Layouts basiert auf adaptivem Design, bei dem Sie spezielle Designs für große, mittelgroße und kleine Bildschirme erstellen können. Jedes Layout ist eine Adaption der Experience, die eine größere Flexibilität für mehr App-Anpassung und bessere Nutzung von Bildschirmgrößen und unterschiedliche Inhalte bietet.

Die Vorlagen können bei mehreren Bildschirmgrößen verwendet werden. Wenn Sie eine Vorlage für leere Vollbild-Apps oder leere Bildlaufseiten auswählen, ist in ihr das Auto-Layout für Geräte mit mittelgroßem und Geräte mit kleinem Bildschirm aktiviert. Dadurch bleibt die Synchronisation aller Widgets mit den Widgets im Layout für das Gerät mit großem Bildschirm erhalten. Außerdem werden die Widgets automatisch angeordnet.

Um ein separates Layout für ein Gerät mit mittelgroßem oder kleinem Bildschirm zu erstellen, klicken Sie auf die Schaltfläche Benutzerdefiniert neben dem Layout der Seite oder des Fensters. Danach können Sie Widgets und Fenster für das ausgewählte Bildschirmgerät manuell anordnen und ihre Größe anpassen. Um in einem Layout für Geräte mit kleinem Bildschirm ein Widget oder eine Bildschirmgruppe zu entfernen, klicken Sie auf die Schaltfläche In ausstehende Liste verschieben In ausstehende Liste verschieben auf der Werkzeugleiste. Damit wird das Widget oder die Bildschirmgruppe in der Zeichenfläche des aktuellen Geräts entfernt. Danach wird die Konfiguration gespeichert, damit Sie sie bei Bedarf wieder zum Layout hinzufügen können. Wenn Sie die Option für das benutzerdefinierte Layout aktiviert haben, werden weitere Widgets, die einem anderen Gerätemodus hinzugefügt werden, dem aktuellen Gerät nicht hinzugefügt. Diese können Sie manuell aus der Registerkarte Ausstehend im Fenster Widget einfügen hinzufügen.

Wenn Sie Layouts für Geräte mit kleinen Bildschirmen bearbeiten, werden die folgenden großen Konfigurationsfenster, die sonst auf der Zeichenfläche angezeigt werden, stattdessen innerhalb der Ränder des Builders angezeigt:

  • Fenster Schnellformat der Widgets "Schaltfläche", "Trennlinie" und "Ansichtsnavigation"
  • Fenster Dynamischer Inhalt
  • Fenster Widget hinzufügen in den Widgets "Platzhalter" und "Raster"
  • Fenster Vorlage auswählen für Seiten, Kopfzeilen, Fußzeilen, Fenster, Blöcke und Tabellen

Tipp:

Um die Layouts für unterschiedliche Bildschirmgrößen und Geräte zu testen, klicken Sie auf Live-Ansicht auf der Builder-Werkzeugleiste. Mit einer Live-Ansicht können Sie nachprüfen, ob der Inhalt ordnungsgemäß angepasst wurde, bevor Sie diesen speichern und veröffentlichen. Sie können auch experimentieren, indem Sie einige Einstellungen ändern und die interaktiven und dynamischen Widgets manipulieren, um zu sehen, wie sie funktionieren.

Tipp:

Weitere Informationen zu den Einstellungen, die in Experience Builder zum Optimieren für mobile Geräte verfügbar sind, finden Sie im Lernprogramm Ein App-Layout für mobile Geräte optimieren.