Sie können in Experience Builder die Standard-Style-Einstellungen der einzelnen Widgets ändern, indem Sie die Größe, Position, 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. 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.
Style-Einstellungen, die für alle Widgets gelten:
- Innerhalb des Parent-Containers: Verhindert, dass ein geschachteltes Widget aus den Grenzen des ihm übergeordneten Widgets herausgezogen werden kann.
- 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. Sperren Sie die Einstellungen, um den Radius aller vier Ecken zu synchronisieren.
- 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 für Position und Größe im Fenster Style entsprechend aktualisiert.
Sie können die folgenden Einstellungen für die Position ändern:
- Links: Hiermit geben Sie an, wie weit die linke Kante des Widgets von der linken Kante seines übergeordneten Containers nach rechts versetzt werden soll.
- Oben: Hiermit geben Sie an, wie weit die obere Kante des Widgets von der oberen Kante seines übergeordneten Containers nach unten versetzt werden soll.
- Rechts: Hiermit geben Sie an, wie weit die rechte Kante des Widgets von der rechten Kante seines übergeordneten Containers nach links versetzt werden soll.
- Unten: Hiermit geben Sie an, wie weit die untere Kante des Widgets von der unteren Kante seines übergeordneten Containers nach oben versetzt werden soll.
Die Eigenschaftswerte für die Position werden nicht alle gleichzeitig wirksam. Es handelt sich um eine Kombination aus zwei Einstellungen:
- Links und Oben oder Unten
- Rechts und Oben oder Unten
Wenn Sie von der Einstellung Auto auf Benutzerdefiniert wechseln, können Sie die gewünschten Werte manuell definieren. Wenn ein Positionswert auf Auto eingestellt ist, wird diese Eigenschaft automatisch festgelegt.
Hinweis:
Wenn Sie für Oben und Unten benutzerdefinierte Werte festlegen, wird der Wert für Oben verwendet. Wenn Sie für Links und Rechts benutzerdefinierte Werte festlegen, wird der Wert für Links verwendet, wenn die Schreibrichtung der Browser-Sprache von links nach rechts verläuft (wie z. B. im Englischen oder Chinesischen), und der Wert für Rechts, wenn die Schreibrichtung von rechts nach links verläuft (wie z. B. im Hebräischen oder Arabischen).
Sie können auch die Einheit der Positionseigenschaften ändern:
- px: Absoluter Wert in Pixeln
- %: Prozentsatz der Breite (links, rechts) und Höhe (oben, unten) des Containers
Die Einstellungen für die Größe sind eine Kombination aus der Breite und der Höhe des Containers. Sie können für die Breite und die Höhe entweder bestimmte Werte angeben oder sie mit der Option Auto automatisch festlegen.
Weitere Steuerungsmöglichkeiten bietet Ihnen die Option Höhenmodus:
- Fest: Legt die Breite und die Höhe separat fest. Dies ist die Standardeinstellung.
- Seitenverhältnis: Legt nur den Breitenwert und das Seitenverhältnis zwischen Breite und Höhe fest.
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 X: Legen Sie den vertikalen Versatz in Pixeln fest.
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. Wenn Sie die Höheneinstellung auf Auto setzen, wird sie automatisch festgelegt.
Es gibt drei Arten von Höheneinstellungen:
- An Container anpassen: Verwendet die volle Höhe des übergeordneten Containers. Dies ist die Standardeinstellung.
- Fest: Legt eine benutzerdefinierte Höhe in Pixeln fest.
- Seitenverhältnis: Berechnet die Höhe automatisch anhand der Breite und des Seitenverhältnisses zwischen Breite und Höhe.
Wenn Sie die Option Fest oder Seitenverhältnis 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.