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 angezeigten Optionen variieren je nachdem, welche Einschränkungen für den hinzugefügten Seitentyp oder seinen übergeordneten Container gelten, z. B. eine Zeile oder eine Spalte; durch diese Einschränkungen werden Größe und Position automatisch gesteuert.
Style-Einstellungen
Auf der Registerkarte Style befinden sich im Konfigurationsfenster für das Widget Optionen zum Ändern des Symbols und der Beschriftung; damit können Sie bei der Konfiguration der Web-Experience zwischen Widgets unterscheiden.
Hinweis:
Sie können folgende Bildformate hochladen: PNG, GIF, JPG, JPEG und BMP.
Symbol und Name werden bei aktiven Widgets in der Gliederungsansicht angezeigt und beim Verbinden von Widgets in Auswahllisten.
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 wird anhand eines Breiten-, Höhen- und Positionswerts festgelegt, an welcher Stelle der Seite das Widget platziert wird. Sie können diese Werte in Pixeln (px) oder Prozent (%) angeben, um festzulegen, wie Ihr Inhalt angezeigt werden soll. 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.
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 Prozent 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 aneinander gefangen.
Style-Einstellungen, die für die meisten Widgets gelten:
- 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. 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.
- Feldschatten: Fügen Sie mit den folgenden Einstellungen einen Schatteneffekt um das Widget hinzu:
- 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.
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 Breite und Höhe eines Widgets in den folgenden drei Modi festlegen:
- Benutzerdefiniert: Sie können im standardmäßigen Modus Benutzerdefiniert bestimmte Werte für Breite und Höhe angeben. Wenn für die Breite Streckung oder Benutzerdefiniert festgelegt ist, können Sie auf das Schlosssymbol klicken, um das Seitenverhältnis beim Ändern der Größe beizubehalten.
- Automatisch: Wenn ein Größenwert auf Automatisch festgelegt ist, wird die Größe automatisch basierend auf dem Inhalt des Widgets festgelegt. Dies kann für Widgets mit dynamischen Inhalten verwendet werden.
- Strecken: Die Größe des Widgets wird basierend auf der Größe des Containers festgelegt.
Hinweis:
Eine Ausnahme für die Einstellung Größe gilt, wenn ein Widget in einem Spalten- oder Zeilen-Widget platziert wird. Wenn Sie beispielsweise ein Bild-Widget in einem Spalten-Widget platzieren, gibt es nur zwei Modi für die Breite des Bildes (Strecken und Benutzerdefiniert), bei denen beide das Seitenverhältnis beibehalten werden können, wenn Höhe auf Benutzerdefiniert eingestellt ist.
Die Position eines Widgets wird durch den Abstand auf jeder Seite zum Container definiert (links, rechts, oben und unten). Mit "Links" geben Sie z. B. an, wie weit die linke Kante eines Widgets von der linken Kante seines übergeordneten Containers versetzt ist. Wenn Sie ein Widget hinzufügen, können Sie den linken und oberen Abstand angeben, indem Sie einen Wert in das Eingabefeld für die Richtung eingeben, und Sie können die benutzerdefinierte Richtung ändern, indem Sie bei der jeweils anderen Richtung auf In "Benutzerdefiniert" ändern oder bei der benutzerdefinierten Richtung auf In "Automatisch" ändern klicken.
Verschiedene Größen-Modi entsprechen verschiedenen Positions-Einstellungen. Wenn zum Beispiel "Breite" auf Benutzerdefiniert oder Automatisch festgelegt ist, können Sie die Einstellung "Links" oder "Rechts" ändern, und die andere Einstellung wird automatisch festgelegt. Wenn "Breite" auf Strecken eingestellt ist, können Sie die Position festlegen, indem Sie den Abstand zur linken und rechten Seite angeben, und die Breite wird automatisch auf die verbleibende Länge der Containerbreite festgelegt. Ähnliches gilt für "Höhe", nur heißen die Positionen hier "Oben" und "Unten".
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 in die horizontale Mitte des übergeordneten Containers positionieren, und in diesem Fall weist die Richtung der Positionen "Links" und "Rechts" den Modus Automatisch auf.
Sie können auch die Längeneinheit der Position und Größe ändern:
- px: Absoluter Wert in Pixeln.
- %: Prozentsatz der Breite und Höhe des Containers
Sie können das Widget im Uhrzeigersinn drehen, indem Sie für die Einstellung Drehung eine positive Zahl eingeben, oder gegen den Uhrzeigersinn, indem Sie eine negative Zahl eingeben.
Beispiele
Die folgende Liste enthält einige empfohlene Kombinationen aus den Einstellungen für Größe und Position:
- Wenn Sie eine benutzerdefinierte Breite wünschen, legen Sie einen eigenen Wert für Links oder Rechts fest, und wählen Sie für den jeweils anderen Wert die Option Auto aus.
- Wenn Sie eine benutzerdefinierte Höhe wünschen, legen Sie einen eigenen Wert für Oben oder Unten fest, und wählen Sie für den jeweils anderen Wert die Option Auto aus.
- Wenn Sie für die Breite die Option Auto auswählen, legen Sie für Links und Rechts benutzerdefinierte Werte fest; alternativ können Sie auch nur für Links oder Rechts einen benutzerdefinierten Wert festlegen, sodass sich die Breite an den Inhalt des Widgets anpasst.
- Wenn Sie für die Höhe die Option Auto auswählen, legen Sie für Oben und Unten benutzerdefinierte Werte fest; alternativ können Sie auch nur für Oben oder Unten einen benutzerdefinierten Wert festlegen, sodass sich die Höhe an den Inhalt des Widgets anpasst.
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 Gitter-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 Gitter-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:
- Strecken: Verwendet die volle Höhe des übergeordneten Containers. Dies ist die Standardeinstellung.
- Automatisch: Der Höhenwert wird automatisch anhand des Widget-Inhalts festgelegt.
- Benutzerdefiniert: Sie können den Höhenwert in Pixel oder % angeben. Wenn Sie Seitenverh. beibehalten aktivieren, können Sie das Widget durch Ziehen in der Größe verändern, ohne dass sich das Seitenverhältnis ändert.
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.
Mit der Einstellung Drehung können Sie das Widget im Uhrzeigersinn oder gegen den Uhrzeigersinn drehen, indem Sie eine positive oder negative Zahl eingeben.
Animation
Animationen werden in Experience Builder unterstützt, um die Darstellung Ihrer Widgets anzupassen. Mit den bereitgestellten Effekten und Optionen können Sie die folgenden Animationen erzeugen:
- Während Sie die App laden, dreht sich ein Fenster in die Ansicht.
- Während Sie auf der Seite nach unten blättern, fliegen Widgets herein.
- Die nächste Ansicht verdrängt die vorherige Ansicht auf dem Bildschirm, während Sie in einem Abschnitt navigieren.
- Beschreibungen werden eingeblendet, während Sie mit der Maus auf ein Widget vom Typ "Kachel" zeigen.
Vier Animationsebenen werden unterstützt:
- Seiten-/Fensterebene: Unterstützt von der Umgebung und verfügbar in Seiten-/Fenstereinstellungen. Damit werden alle Widgets der ersten Ebene in der Animation gesteuert.
Hinweis:
Die Widgets der ersten Ebene sind Widgets, die direkt in die Seite/das Fenster eingefügt werden; die in Layout-Widgets verschachtelten Widgets werden nicht berücksichtigt. Die Verschachtelungsbeziehung kann der Ansicht Umriss entnommen werden.
- Containerebene: Unterstützt von der Umgebung und verfügbar auf der Registerkarte Style der Widgets "Block", "Fixiertes Fenster", "Seitenleiste", "Zeile", "Spalte" und "Abschnitt". Damit wird das Erscheinungsbild des Containers sowie die Animation der direkt darin enthaltenen Widgets gesteuert (die verschachtelten Widgets werden nicht berücksichtigt). Bei Abschnitts-Widgets wird auch der Wechsel zwischen Ansichten gesteuert.
- Ebene der einzelnen Widgets: Unterstützt von der Umgebung und verfügbar auf der Registerkarte "Style" der Widget-Einstellungen. Damit wird das Erscheinungsbild des Widgets selbst gesteuert.
Hinweis:
Die Animationen der unteren Ebene setzen die Animationen der höheren Ebene außer Kraft. Wenn beispielsweise ein Widget einer Zeile hinzugefügt wird, wird die zeilendefinierte Animation abgespielt, falls die Animation in den Widget-Einstellungen auf "Keine" gesetzt ist. Andernfalls wird die Animation in den Widget-Einstellungen abgespielt.
- Ebene innerhalb eines Widgets: Unterstützt vom Widget selbst und verfügbar auf der Registerkarte Inhalt der Widget-Einstellungen. Damit wird die Animation von 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.
Die Animation von Layout-Containern ("Block", "Fixiertes Fenster", "Seitenleiste", "Zeile", "Spalte") besteht aus zwei Teilen. Mit der Containeranimation können Sie die Darstellung des Containerfensters anpassen. Mit der Animation Enthaltenes Widget können Sie steuern, wie die Widgets dargestellt werden, die direkt im Container hinzugefügt werden. Die beiden Animationseffekte werden gleichzeitig abgespielt, und die endgültige Animation ist der Überlagerungseffekt. Sie können eine Vorschau des kombinierten Ergebnisses anzeigen, indem Sie auf die Schaltfläche Vorschau klicken.
Neben der Animation In, mit der die Darstellung eines Abschnittsfensters gesteuert wird, weisen Abschnitts-Widgets eine weitere Animationseinstellung namens Übergang auf, mit der die Animationen der zugehörigen Ansichten gesteuert werden. Auf der Registerkarte Ansicht werden die Übergänge der Ansichtsfenster gesteuert, und mit der Registerkarte Widget wird die Darstellung der Widgets in der Ansicht gesteuert. Wenn der Abschnitt sich in die Ansicht bewegt (durch Laden der Seite oder einen Bildlauf), wird die Widget-Animation für die aktuelle Ansicht zusammen mit der Animation vom Typ In abgespielt. Beim Wechseln zwischen den Ansichten wird die Widget-Animation nach der Ansichtsanimation abgespielt.
Animationseinstellungen
- Klicken Sie auf die Animations-Miniaturansicht oder die Schaltfläche Ändern, um das Fenster mit den Effekten zu öffnen.
- Klicken Sie auf die Effekt-Miniaturansicht, um einen einzelnen Effekt auszuwählen und in der Vorschau anzuzeigen.
- Klicken Sie auf die Schaltfläche Vorschau, um eine Vorschau der gesamten oder kombinierten Effekte anzuzeigen.
- Für manche Effekte können zusätzliche Einstellungsoptionen gelten:
- Effekt: Bietet kontinuierliche, natürliche Mikroeffektoptionen.
- Richtung: Definiert die Bewegungsrichtung für Effekte wie Hereinfliegen und Hereinschweben.