Sie können in Experience Builder die Standard-Style-Einstellungen der einzelnen Widgets ändern, indem Sie die Größe, Position, Animation, den Hintergrund, den Rahmen und die Feldschattierung anpassen. Die Optionen der Registerkarte Style im Widget-Konfigurationsfenster richten sich nach dem Seitentyp, dem Sie das Widget hinzufügen, oder nach dessen übergeordnetem Container (beispielsweise einer Zeile oder Spalte oder einem Raster), wodurch die Größe und Position automatisch gesteuert werden.
Statt die Größe und die Position der Widgets durch Ziehen auf der Zeichenfläche anzupassen, können Sie hierfür auch explizite Werte angeben. Mit den Einstellungen für Größe und Position definieren Sie, wie das Widget in Bezug auf Breite, Höhe und Position auf der Seite platziert wird. Sie können diese Werte in Pixel (px) oder in Prozent (%) angeben. Die nachfolgenden Abschnitte enthalten Informationen über die Einstellungen für die Größe und die Position von Widgets, die zu einer Vollbild- oder einer Bildlaufseite hinzugefügt wurden.
Vorsicht:
Beim Verschieben eines Widgets von einem Container in einen anderen werden Größe und Position des Widgets auf die für den Zielcontainer geltenden Standardwerte zurückgesetzt. Dies gilt auch, wenn Sie ein konfiguriertes Widget aus der ausstehenden Liste hinzufügen.
Tipp:
Beim Ziehen von Widgets auf der Zeichenfläche oder beim manuellen Verschieben und Anpassen ihrer Größe in einem festen Layout (beispielsweise Seiten im Vollbildmodus, Fenster, Seitenleisten und Listen) werden Fanglinien und Entfernungswerte angezeigt, mit deren Hilfe Sie die Widgets ausrichten und genau positionieren können. Die Werte geben die Entfernung zwischen dem Widget und der Seite seines Containers sowie zu in der Nähe vorhandenen Widgets an, wenn die Entfernung berechenbar ist. (Ein Widget, das Prozentsatz für die Position und Pixel für Größeneinstellungen verwendet, ist nicht berechenbar.) Wenn Fanglinien angezeigt werden, werden die entsprechenden Widgets bei allen Bildschirmauflösungen in der veröffentlichten Experience aneinander gefangen.
Beispiele für weitere Style-Einstellungen, die für die meisten Widgets gelten:
- Rotation: Drehen Sie das Widget um einen in Grad angegebenen Winkel. Mit einem positiven Wert wird das Widget im Uhrzeigersinn gedreht, und mit einem negativen Wert wird es gegen den Uhrzeigersinn gedreht.
- Innerhalb des Parent-Containers: Verhindert, dass ein geschachteltes Widget aus den Grenzen des ihm übergeordneten Widgets herausgezogen werden kann.
- Animation: Erstellen Sie spannende Animationen mit Effekten wie Hereinfliegen, Hereindrehen und Einblenden. Sie können auch Übergangsmodi für das Wechseln zwischen den Abschnittsansichten festlegen.
- Hintergrund: Legen Sie den Hintergrund des Widgets fest, indem Sie eine Füllfarbe oder ein Bild auswählen. Sie können die Schaltfläche Schnellformat verwenden, um aus voreingestellten Designs auszuwählen, die zum Design der App passen. Wenn Sie ein Bild auswählen, dann können Sie es mit Anpassen, Ausfüllen, Zentrieren, Kachel oder Strecken innerhalb des Widget-Rahmens positionieren. Wenn Sie Anpassen auswählen, wird im Widget die Hintergrundfüllfarbe um das Bild herum angezeigt.
- Rahmen: Wählen Sie eine Rahmenfarbe, eine Rahmenart (zum Beispiel gestrichelt oder gepunktet) und eine Rahmenbreite in Pixeln aus. Ändern Sie den Radius (in Pixeln oder Prozent), um die Form der Widget-Ecken festzulegen. Sie können für alle Ecken den gleichen Radius verwenden oder für jede Ecke einen separaten Radius angeben. Sie können die Schaltfläche Schnellformat verwenden, um aus voreingestellten Designs auszuwählen, die zum Design der App passen.
- Feldschatten: Fügen Sie einen Schatteneffekt um das Widget hinzu. Sie können die Schaltfläche Schnellformat verwenden, um aus voreingestellten Designs auszuwählen, oder die folgenden Einstellungen verwenden:
- Versatz X: Legen Sie die horizontale Entfernung des Schattens fest. Der Schatten wird bei einem negativen Wert links neben dem Widget und bei einem positiven Wert rechts neben dem Widget platziert.
- Versatz Y: Legen Sie die vertikale Entfernung des Schattens fest. Der Schatten wird bei einem negativen Wert oberhalb des Widgets und bei einem positiven Wert unterhalb des Widgets platziert.
- Unschärferadius: Wenden Sie einen Weichzeichnereffekt auf den Schatten an.
- Ausdehnungsradius: Passen Sie die Größe des Schattens an.
- Farbe: Wählen Sie eine Schattenfarbe aus.
Hinweis:
Das ausgewählte Design wirkt sich auf die Farbauswahl in den Konfigurationsoptionen aus. Wenn Ihre gewünschte Farbe nicht im App-Design enthalten ist, können Sie durch einen Klick auf Mehr eine benutzerdefinierte Farbe auswählen.
Layout auf einer Vollbildseite
Wenn Sie Ihrer App eine Vollbildseite hinzufügen, werden Widgets in einem freien Layout angeordnet. Wenn Sie die Größe oder Position des Widgets durch Ziehen auf der Zeichenfläche verändern, werden die Einstellungen Größe und Position im Fenster Style entsprechend aktualisiert.
Die Einstellungen für die Größe sind eine Kombination aus der Breite und der Höhe des Containers. Sie können die Werte für Breite und Höhe eines Widgets in den folgenden drei Modi festlegen:
- Benutzerdefiniert: Legen Sie bestimmte Werte fest.
- Streckung: Die Größe wird automatisch basierend auf der Größe des Containers des Widgets festgelegt.
- Automatisch: Die Größe wird automatisch basierend auf dem Inhalt des Widgets festgelegt. Verwenden Sie diesen Modus für Widgets, mit denen dynamische Inhalte angezeigt werden. (Dieser Modus ist möglicherweise für in einem Layout-Container (beispielsweise einer Spalte mit standardmäßig gesteuerter Breite) geschachtelte Widgets nicht verfügbar. Zum Beispiel sind für ein Bild-Widget, das in einem Spalten-Widget geschachtelt ist, für die Einstellung Breite nur die Modi Streckung und Benutzerdefiniert verfügbar.)
Hinweis:
Wenn für die Breite Streckung oder Benutzerdefiniert festgelegt ist, können Sie das Seitenverhältnis beim Ändern der Größe des Widgets durch Ziehen der Kanten beibehalten.
Die Position eines Widgets wird durch den Abstand zwischen seinen Kanten (links, rechts, oben und unten) und seinem Container definiert. Sie können zum Beispiel angeben, wie weit die linke Kante und die obere Kante eines Widgets von der linken Kante und der oberen Kante seines übergeordneten Containers entfernt sind. Beim Hinzufügen eines Widgets können Sie einen Wert in das entsprechende Eingabefeld eingeben. Zum Angeben eines Abstands zur gegenüberliegenden Kante klicken Sie auf In automatisch ändern (oder klicken Sie auf der gegenüberliegenden Seite im Diagramm auf In benutzerdefiniert ändern).
Verschiedene Größenmodi entsprechen verschiedenen Positionskonfigurationen. Wenn zum Beispiel Breite auf Benutzerdefiniert oder Automatisch festgelegt ist, können Sie die Position festlegen, indem Sie den Abstandswert für die linke oder rechte Kante ändern. Der andere Wert wird dann automatisch festgelegt. Wenn Breite auf Streckung festgelegt ist, können Sie die Position festlegen, indem Sie den Abstandswert für die linke und die rechte Kante ändern. Die Breite wird automatisch auf die verbleibende Länge der Containerbreite festgelegt. Die Einstellung Höhe funktioniert in Bezug auf die obere und die untere Kante ähnlich.
Tipp:
Sie können die Position auch ändern, indem Sie oben im Fenster Style auf Schaltflächen in der Werkzeugleiste klicken. Sie können beispielsweise das Widget im horizontalen Mittelpunkt des übergeordneten Containers positionieren, wodurch die Werte für die linke und die rechte Position automatisch festgelegt werden. (Dabei werden die Eingabefelder für den Abstand im Diagramm ausgeblendet.)
Beide Einstellungen umfassen die folgenden Optionen für Einheiten:
- px: Absoluter Wert in Pixeln
- %: Prozentsatz der Breite und Höhe des Containers
Blöcke auf einer Bildlaufseite
Wenn Sie Ihrer App eine Bildlaufseite hinzufügen, wird das Layout in Blöcke eingeteilt. Blöcke verwenden wie das Layout des Widgets "Zeile" ein Raster-Layout mit mehreren Spalten.
Blöcke bieten die folgenden Einstellungen für Größe und Position:
- Breite: Legen Sie eine feste Breite als Prozentsatz der Seite fest.
- Höhe: Geben Sie einen Höhenwert in Pixeln an, oder wählen Sie Auto aus, damit die Höhe des Blocks automatisch festgelegt wird.
- Versatz X: Legen Sie den horizontalen Versatz in Pixeln fest.
- Versatz Y: Legen Sie den vertikalen Versatz in Pixeln fest.
Tipp:
Klicken Sie auf der Werkzeugleiste eines Widgets auf die Schaltfläche Anheften, damit das Widget auf Bildlaufseiten immer sichtbar bleibt.
In einem Block geschachtelte Widgets
Widgets, die Sie zu einem Block hinzufügen, können im Raster-Layout eine Breite zwischen 1 und 12 Spalten einnehmen. Für Widgets, die in einem Block geschachtelt sind, können Sie nur die Höhenwerte einstellen; ihre Breite wird durch das Raster festgelegt.
Es gibt drei Arten von Höhenmodi:
- Streckung: Die Höhe wird automatisch basierend auf der des übergeordneten Containers festgelegt. Dies ist die Standardeinstellung.
- Automatisch: Die Höhe wird automatisch basierend auf dem Inhalt des Widgets festgelegt.
- Benutzerdefiniert: Legen Sie einen bestimmten Höhenwert in Pixel oder als Prozentsatz der Höhe des Containers fest.
Wenn Sie die Option Automatisch oder Benutzerdefiniert auswählen, haben Sie die Wahl zwischen folgenden Ausrichtungsoptionen:
- Oben: Richtet das Widget vertikal am oberen Rand des Blocks aus.
- Unten: Richtet das Widget vertikal am unteren Rand des Blocks aus.
- Zentrieren: Richtet das Widget vertikal in der Mitte des Blocks aus.
Rasterelemente
In einem Raster-Widget oder auf einer Raster-Seite geschachtelte Widgets werden zu Rasterelementen. Die Einstellungen für Größe und Position sind für Rasterelemente nicht verfügbar. Um die Größe eines Widgets in einem Raster zu ändern, können Sie die Größe des Widgets "Raster" ändern oder die Begrenzungen zwischen den Rasterelementen durch Ziehen anpassen.
In einem Raster-Widget oder den Einstellungen einer Raster-Seite können Sie die Option Erweiterung zulassen aktivieren, um Schaltflächen zum Einblenden einzufügen, auf die die Benutzer klicken können, damit einzelne Raster-Elemente vorübergehend die gesamte Fläche des Rasters einnehmen. Wenn Sie auf Erweiterung zulassen klicken, werden standardmäßig für alle Elemente Schaltflächen zum Einblenden angezeigt. Sie können diese Einstellung jedoch für einzelne Widgets außer Kraft setzen. Das Kontrollkästchen Erweiterung zulassen wird auch auf der Registerkarte Style in den Einstellungen aller Rasterelemente angezeigt. Dies ist sinnvoll, wenn Sie möchten, dass Benutzer einige Rasterelemente erweitern können, andere hingegen nicht.
Animation
Durch Animationen können Sie anpassen, wie die Widgets und Fenster aussehen, wenn Benutzer die App laden und in ihr navigieren. Legen Sie ansprechende Animations-Styles mithilfe von Effekten wie Einfliegen, Drehen (hinein), Vergrößern und Verkleinern fest. Sie können auch Übergangsmodi für das Wechseln zwischen den Abschnittsansichten festlegen. Mit den bereitgestellten Animationseinstellungen können Sie die folgenden Beispiel-Experiences erstellen:
- Ein Fenster dreht sich herein, während die App geladen wird.
- Widgets fliegen herein, während Benutzer auf der Seite einen Bildlauf nach unten durchführen.
- Beim Anzeigen einer weiteren Ansicht wird die vorherige Ansicht weggeschoben, wenn Benutzer im Inhalt eines Abschnitts-Widgets navigieren.
- Wenn Benutzer auf ein Kachel-Widget zeigen, werden die Beschreibungen eingeblendet.
Die folgenden Animationsebenen werden unterstützt (in der Reihenfolge von höheren Animationsebenen zu niedrigeren Animationsebenen).
Hinweis:
Durch Animationen niedrigerer Ebenen werden Animationen höherer Ebenen außer Kraft gesetzt. Wenn beispielsweise ein Widget einem Zeilen-Widget hinzugefügt wird und die Animationseinstellung des hinzugefügten Widgets auf Keine festgelegt ist, wird die Animation für die Zeile wiedergegeben. Andernfalls wird stattdessen die Animation des hinzugefügten Widgets wiedergegeben.
- Seiten- und Fensterebene: Mit dieser von der Umgebung unterstützten und in Seiten- und Fenstereinstellungen verfügbaren Ebene werden Animationen für die Seite oder das Fenster sowie für alle direkt einer Seite oder einem Fenster hinzugefügten Widgets (Widgets der ersten Ebene) gesteuert.
Hinweis:
In Layout-Widgets geschachtelte Widgets sind keine Widgets der ersten Ebene. Geschachtelte Widgets können Sie an der Umrisslinie erkennen.
- Containerebene: Mit dieser von der Umgebung unterstützten Ebene, die auf der Registerkarte Style der Widgets "Block", "Fixiertes Fenster", "Seitenleiste", "Zeile", "Spalte", "Raster" und "Abschnitt" verfügbar ist, werden Animationen für das Aussehen des Containers sowie der direkt ihm hinzugefügten Widgets gesteuert (aber nicht von Widgets, die in diesen hinzugefügten Widgets verschachtelt sind). Mit dieser Ebene werden auch Animationen beim Wechseln von Ansichten in Abschnitts-Widgets gesteuert.
- Ebene der einzelnen Widgets: Mit dieser von der Umgebung unterstützten und auf der Registerkarte Style für ein Widget verfügbaren Ebene wird das Aussehen der einzelnen Widgets gesteuert.
- Ebene innerhalb eines Widgets: Mit dieser vom Widget unterstützten und auf der Registerkarte Inhalt für ein Widget verfügbaren Ebene werden Animationen für Benutzerinteraktionen innerhalb des Widgets gesteuert. Zum Beispiel können beim Widget "Lesezeichen" Übergangseffekte abgespielt werden, wenn Benutzer zwischen Lesezeichen wechseln, und beim Widget "Kachel" können durch Zeigen mit der Maus mehr Details angezeigt werden.
Abschnitts-Widgets verfügen über zwei Animationseinstellungen. Mit der Animationseinstellung In wird der Darstellungseffekt eines Abschnittsfensters gesteuert, und mit Übergang werden Animationen für die Ansichten des Fensters gesteuert. Mit Einstellungen auf der Registerkarte Ansicht werden die Übergänge der Ansichtsfenster gesteuert. Mit Einstellungen auf der Registerkarte Widget wird das Aussehen der Widgets in der Ansicht gesteuert. Wenn der Inhalt eines Abschnitts-Widgets auf der Seite angezeigt wird (beim Laden der Seite oder bei einem Bildlauf zum Widget), wird die Widget-Animation für die aktuelle Ansicht zusammen mit der In-Animation wiedergegeben. Beim Wechseln zwischen Ansichten wird die Widget-Animation nach der Ansichtsanimation wiedergegeben.
Animationseinstellungen
Um das Fenster Animationseinstellungen zu öffnen, klicken Sie auf die Miniaturansicht oder auf die Schaltfläche Ändern. Klicken Sie auf die Miniaturansicht einer Animation wie beispielsweise Hineinschweben oder Vergrößern, um die Animation auszuwählen und eine Vorschau auf der Zeichenfläche anzuzeigen. Optional können Sie die folgenden zusätzlichen Einstellungen konfigurieren:
- Effekt: Bietet kontinuierliche, natürliche Mikroeffektoptionen wie beispielsweise "Weich", "Wacklig" und "Langsam".
- Richtung: Definiert die Bewegungsrichtung (von oben, unten, links oder rechts) für Effekte wie Hereinfliegen und Hineinwischen.
Zu den Animationseinstellungen für Layout-Container ("Block", "Fixiertes Fenster", "Seitenleiste", "Zeile", "Spalte" und "Raster") gehört auch die Einstellung Enthaltenes Widget zum Angeben von Animationen für die Widgets, die direkt dem Container hinzugefügt werden. Zusätzlich zu Effekt und Richtung können Sie die folgenden Einstellungen für enthaltene Widgets konfigurieren:
- Starten: Legt fest, wann die Animation des enthaltenen Widgets relativ zur Animation des Container-Widgets beginnt. Wählen Sie Mit vorherigen, um die Animation des enthaltenen Widgets zur gleichen Zeit wie die des Container-Widgets abzuspielen. Wählen Sie Nach vorherigen, um die Animation des enthaltenen Widgets abzuspielen, sobald die Animationen des Container-Widgets abgeschlossen sind.
- Animation wiedergeben: Legen Sie fest, wie Animationen abgespielt werden sollen, wenn mehrere Widgets enthalten sind.
- Alle gleichzeitig: Alle Animationen der enthaltenen Widgets werden gleichzeitig abgespielt.
- Einzeln: Alle Animationen der enthaltenen Widgets werden nacheinander abgespielt.
Sie können eine Vorschau der Animation sehen, indem Sie auf die Schaltfläche Vorschau klicken.