Wie passe ich einen Boxstyle an?

Ein Boxstyle wird verwendet, um verschiedenen Elementen auf den Seiten der Application ein einheitliches Erscheinungsbild zu verleihen. Mit einem Boxstyle können Sie beispielsweise Text oder andere Elemente mit Hintergrundfarben, Rahmen, Schatten und anderen visuellen Eigenschaften versehen. Boxstyles werden normalerweise während des Aufbaus der Seite in der Anwendung erstellt und den entsprechenden Elementen zugewiesen. Es ist ratsam, die Standard-Boxstyles zu verwenden, die in der Anwendung verfügbar sind, aber es ist auch möglich, eigene Boxstyles zu erstellen, um spezielle Anforderungen zu erfüllen. In dieser Anleitung zeigen wir Ihnen, wie Sie einen Boxstyle anlegen.

1. Klicken Sie in der Navigationsleiste auf Style
2. Wählen Sie den zu bearbeitenden Style aus
3. Klicken Sie im Menü links auf die Rubrik Boxes
4. Klicken Sie auf den zu bearbeitenden Boxstyle, um das Fenster Edit Box zu öffnen oder wählen Sie im Dreipunkte Menü des jeweiligen Boxstyles den Punkt Bearbeiten aus

Desktop, Tablet und Mobile Ansicht

Das Erscheinungsbild von Boxen auf verschiedenen Endgeräten wie Desktop, Tablet und Mobilgeräten kann separat angepasst werden. Dies ermöglicht Ihnen, Boxen für unterschiedliche Ansichten mit spezifischen Abständen, Ausrichtungen oder anderen Stiländerungen darzustellen, um eine optimale Darstellung und Benutzererfahrung auf verschiedenen Geräten sicherzustellen. Wählen Sie dafür Desktop, Tablet oder Mobil aus und nehmen Sie beliebige Änderungen vor.

Hintergrundfarbe

1. Klicken Sie auf das Feld Background color
2. Wählen Sie im Dropdown Menü die gewünschte Farbe aus
3. In der Vorschau sehen Sie die ausgewählte Hintergrundfarbe

Innenabstand

Mit Padding können Sie den Innenabstand der Box zum Rand anpassen. Padding kann entweder für alle Seiten gleich eingestellt werden, oder Sie können individuelle Werte für jede Seite festlegen, um unterschiedliche Abstände zu erzielen.

1. Klicken Sie in das Eingabefeld Padding, um einen Wert für alle Seiten festzulegen z. B. 32px
2. Klicken Sie bei Bedarf auf das Schieberegler-Symbol, um die Bearbeitung der einzelnen Abstände zu aktivieren 
3. Legen Sie die einzelnen Werte für die folgenden Abstände fest:
   1. Padding top (Innenabstand nach oben)
   2. Padding bottom (Innenabstand nach unten)
   3. Padding left (Innenabstand nach links)
   4. Padding right (Innenabstand nach rechts)

Achtung: Individuelle Abstände können verloren gehen, wenn Sie nach der Bearbeitung der einzelnen Abstände erneut auf das Schieberegler-Symbol klicken, da dadurch der höchste Wert für alle Seiten verwendet wird.

Außenabstand

Mit Margin können Sie den Außenabstand der Box anpassen. Margin kann entweder für alle Seiten gleich eingestellt werden, oder Sie können individuelle Werte für jede Seite festlegen, um unterschiedliche Abstände zu erzielen.

1. Klicken Sie in das Eingabefeld Margin, um einen Wert für alle Seiten festzulegen z. B. 32px
2. Klicken Sie bei Bedarf auf das Schieberegler-Symbol, um die Bearbeitung der einzelnen Abstände zu aktivieren 
3. Legen Sie die einzelnen Werte für die folgenden Abstände fest:
   1. Margin top (Außenabstand nach oben)
   2. Margin bottom (Außenabstand nach unten)
   3. Margin left (Außenabstand nach links)
   4. Margin right (Außenabstand nach rechts)

Achtung: Individuelle Abstände können verloren gehen, wenn Sie nach der Bearbeitung der einzelnen Abstände erneut auf das Schieberegler-Symbol klicken, da dadurch der höchste Wert für alle Seiten verwendet wird.

Kantenradius 

Mit Corner Radius kann festgelegt werden, wie Stark die Ecken einer Box abgerundet oder eckig sein sollen. Ein höherer Wert führt zu stärker abgerundeten Ecken, während ein Wert von 0px eckige Kanten erzeugt. Corner Radius kann entweder für alle Ecken gleich eingestellt werden, oder Sie können individuelle Werte für jede Ecke festlegen, um unterschiedliche Abrundungen zu erzielen.

1. Klicken Sie in das Eingabefeld Corner Radius, um einen Wert für alle Ecken festzulegen z. B. 32px
2. Klicken Sie bei Bedarf auf das Schieberegler-Symbol, um die Bearbeitung der einzelnen Ecken zu aktivieren 
3. Legen Sie die einzelnen Werte für die folgenden Ecken fest:
   1. Top left (Innenabstand nach oben)
   2. Top right (Innenabstand nach unten)
   3. Bottom right (Innenabstand nach links)
   4. Bottom left (Innenabstand nach rechts)

Achtung: Individuelle Eingaben können verloren gehen, wenn Sie nach der Bearbeitung der einzelnen Ecken erneut auf das Schieberegler-Symbol klicken, da dadurch der höchste Wert für alle Ecken verwendet wird.

Höhe und Ratio

Die Höhe der Box wir automatisch auf Auto gestellt, das bedeutet, dass die Box sich an die Elemente innerhalb der Box anpasst. 

1. Klicken Sie auf das Feld Auto, um es zu Aktivieren 

Mit Ratio wird das Seitenverhältnis einer Box angepasst. Eine Ratio von 1:1 würde beispielsweise eine quadratische Box ergeben. Die Elemente innerhalb der Box passen sich dann entsprechend den Seitenverhältnissen an. Wenn eine Box über einem Media-Element oder Text-Element platziert wird und das Element eine größere Höhe hat, wird es ggf. abgeschnitten.

1. Klicken Sie auf das Feld Ratio, um es zu Aktivieren 
2. Geben Sie im Eingabefeld X das Seitenverhältnis der Breite an
3. Geben Sie im Eingabefeld Y das Seitenverhältnis der Höhe an

Mit Fix Height kann die Höhe einer Box auf einen festen Wert gesetzt werden. Die Elemente innerhalb der Box passen sich dann an die angegebene Höhe an. Wenn eine Box über anderen Elementen platziert wird, wird das Element innerhalb der Box entsprechend angepasst und gegebenenfalls abgeschnitten.

1. Klicken Sie auf das Feld Fix height, um es zu Aktivieren 
2. Geben Sie im Eingabefeld Fix height die feste Höhe am

Rahmen

Sie können Ihrer Box einen Rahmen hinzufügen und diesem verschiedene Eigenschaften wie Farbe, Dicke und Stil geben.

1. Aktivieren Sie die Checkbox Border, um die Rahmeneinstellungen zu öffnen
2. Wählen Sie den Stil des Rahmens für die jeweilige Kante (Border top, bottom, left, right) aus
   1. Keiner (Keinen Rahmen)
   2. Durchgängig
   3. Gepunktet 
   4. Gestrichelt
3. Wählen Sie unter Border color die Farbe aus, die der Rahmen haben soll
4. Tragen Sie einen Wert im Feld Border width ein, um die Breite des Rahmens festzulegen

Schattierung

Sie können einen Schatten zu Ihrer Box hinzufügen. Mit den Schatten-Einstellungen können Sie die Farbe, Größe, Versatz und Weichheit des Schattens anpassen, um den gewünschten Effekt zu erzielen

1. Aktivieren Sie die Checkbox Shadow, um die Schattierungseinstellungen zu öffnen
2. Wählen Sie unter Shadow color die Farbe der Schattierung fest
3. Geben Sie im Eingabefeld X den Versatz nach links oder rechts an
4. Geben Sie im Eingabefeld Y den Versatz nach oben oder unten an
5. Geben Sie im Eingabefeld Blur die Weichheit des Schattens an
6. Geben Sie im Eingabefeld Spread an, wie groß der Schatten sein soll

Position der Elemente innerhalb der Box

Sie können die Position der Elemente innerhalb der Box wie folgt festlegen. Standardmäßig werden die Elemente an der horizontalen und vertikalen Startposition ausgerichtet.

1. Aktivieren Sie die Checkbox Positioning, um die Positionierungseinstellungen zu öffnen
2. Wählen Sie die vertikale Positionierung, indem Sie die vertikalen Linien anklicken
   1. Vertikal: Start
   2. Vertikal: Center
   3. Vertikal: End
3. Wählen Sie die horizontale Positionierung, indem Sie die horizontalen Linien anklicken
   1. Horizontal: Start
   2. Horizontal: Center
   3. Horizontal: End

Speichern

Nachdem Sie alle gewünschten Einstellungen vorgenommen haben, vergessen Sie bitte nicht, auf den Speichern-Button zu klicken. Beachten Sie, dass alle Änderungen verloren gehen, wenn Sie das Fenster schließen, ohne auf den "Speichern"-Button zu klicken.

Das könnte Sie auch Interessieren