Wie passe ich einen Areastyle an?

Mit einem Areastyle werden verschiedene Abschnitte einer Website inhaltlich und gestalterisch voneinander getrennt. Mit einem Areastyle können verschiedene Eigenschaften der darin enthaltenen Elemente angepasst werden, wie z. B. die Hintergrundfarbe, Abstände und Positionierung. In der Regel werden Areastyles gleichzeitig mit dem Aufbau der Seite erstellt und den entsprechenden Areas zugewiesen. Die Verwendung der Standard-Areastyles, die in der Anwendung verfügbar sind, wird empfohlen, da sie oft bereits gut gestaltet und auf verschiedene Bedürfnisse zugeschnitten sind. Jedoch ist es auch möglich, eigene Areastyles zu erstellen, um spezielle Anforderungen zu erfüllen. In dieser Anleitung zeigen wir Ihnen, wie Sie einen Areastyle 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 Areas
4. Klicken Sie auf den zu bearbeitenden Areastyle, um das Fenster Edit Area zu öffnen oder wählen Sie im Dreipunkte Menü des jeweiligen Areastyles den Punkt Bearbeiten aus

Desktop, Tablet und Mobile Ansicht

Das Erscheinungsbild von Areas auf verschiedenen Endgeräten wie Desktop, Tablet und Mobilgeräten kann separat angepasst werden. Dies ermöglicht Ihnen, Areas 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.

Höhe

Die Höhe von Areas kann auf verschiedene Arten angepasst werden, standardmäßig wird jedoch "auto" verwendet, um die Höhe automatisch an die Inhalte anzupassen. Alternativ können auch feste oder prozentuale Höhenwerte verwendet werden, um die Höhe der Area anzupassen. 

1. Klicken Sie auf das Eingabefeld Height und geben Sie die Höhe der Area ein z. B. 100%, 60vh usw.
2. Geben Sie bei Bedarf die maximale Höhe der Area im Feld Max Height ein
3. Geben Sie bei Bedarf die minimale Höhe der Area im Feld Min Height ein

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

Abstände des Grids

Sie können die Abstände zwischen den Elementen in einer Area durch Anpassung der Gaps verändern. Standardmäßig ist der Abstand auf einen Wert von 16px festgelegt. Durch Anpassung der Gaps können Abstände im Grid entfernt oder vergrößert werden.

1. Klicken Sie in das Eingabefeld Row Gap und tragen Sie den gewünschten Zeilenabstand für Elemente im Grid ein
2. Klicken Sie in das Eingabefeld Column Gap und tragen Sie den gewünschten Spaltenabstand für Elemente im Grid ein
3. Wählen Sie im Dropdown Menü von Row Size eine der folgenden Optionen aus
   1. Auto: Der Text wird automatisch am oberen Rand des Bereichs platziert
   2. Align with last: Der Text wird an der unteren Kante des Bereichs ausgerichtet, um mit dieser abzuschließen
4. Wählen Sie im Dropdown Menü von Gridlayout content eine der folgenden Optionen aus
   1. Boxed: Die Area wird innerhalb einer Box im Grid Layout positioniert und hat automatische Abstände nach links und rechts zum Bildschirmrand.
   2. Full: Die Area wird auf die volle Breite des Bildschirms angepasst und es werden keine Abstände an den linken und rechten Seiten hinzugefügt.

Innenabstand

Mit Padding können Sie den Innenabstand der Area zum Rand anpassen. 

1. Klicken Sie in eines der folgenden Eingabefelder von Padding, um Werte für die Abstände festzulegen:
   1. Padding top (Innenabstand nach oben)
   2. Padding bottom (Innenabstand nach unten)
   3. Padding left (Innenabstand nach links)
   4. Padding right (Innenabstand nach rechts)

Außenabstand

Mit Margin können Sie den Außenabstand der Area anpassen. 

1. Klicken Sie in eines der folgenden Eingabefelder von Margin, um Werte für die Abstände festzulegen:
   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)

Kantenradius 

Mit Corner Radius kann festgelegt werden, wie Stark die Ecken einer Area 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. 

1. Klicken Sie in eines der folgenden Eingabefelder von Corner Radius, um einen Wert für die jeweilige Ecke festzulegen
   1. Top left (Innenabstand nach oben)
   2. Top right (Innenabstand nach unten)
   3. Bottom right (Innenabstand nach links)
   4. Bottom left (Innenabstand nach rechts)

Rahmen

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

1. 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
2. Wählen Sie unter Border color die Farbe aus, die der Rahmen haben soll
3. Tragen Sie einen Wert im Feld Border width ein, um die Breite des Rahmens festzulegen

Schattierung

Sie können einen Schatten zu Ihrer Area 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 Area

Sie können die vertikale Position von Elementen innerhalb eines Bereichs durch Festlegen der Layer position wie folgt ändern. Dies ist besonders nützlich für die Positionierung von Widgets.

1. Top: Die Area wird oben im Container positioniert
2. Center: Die Area wird im Container zentriert
3. Bottom: Die Area wird unten im Container positioniert

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