Bearbeitest du ein Element, hast du die Möglichkeit auf Teilbereiche des Elements zuzugreifen. Hast du einen Teilbereich gewählt, wirst du zu detailierten Styling-Einstellungen weitergeleitet, mit denen du deine Elemente visuell gestalten kannst.
Mobiloptimierung & Layout
In den erweiterten Styling-Einstellungen kannst du dein Design mobiloptimieren. Oben im Bearbeitungsbereich siehst du eine Leiste mit einem Stern und verschiedenen Geräte-Icons. Der Stern steht für die Default-Einstellung, von der alle Geräte ihr Design übernehmen.
Wenn du für bestimmte Bildschirmgrößen eigene Anpassungen vornehmen möchtest, klick einfach auf das entsprechende Geräte-Icon und passe das Design nach deinen Wünschen an. Diese Änderungen überschreiben die Standard-Einstellungen für diese Größe.
Die responsiven Einstellungen vererben sich nicht untereinander: Änderungen für Desktop wirken sich nicht auf Tablets oder Mobilgeräte aus. Werden keine spezifischen Anpassungen vorgenommen, übernimmen die diversen Bildschirmgrößen immer die Standard-Einstellungen.
Mit dem Button „Layouteinstellungen“ kannst du das Layout deiner Elemente anpassen, zum Beispiel die Höhe, Breite oder Erscheineffekte. Auch hier hast du die Möglichkeit, responsive Einstellungen für unterschiedliche Bildschirmgrößen vorzunehmen.
Hinweis
Nutze die Leiste über deiner Vorschau, um deine responsiven Einstellungen zu überprüfen.
Hier kannst du unterschiedliche Bildschirmgrößen simulieren und sicherstellen, dass dein Design auf allen Geräten optimal dargestellt wird.
Text
Mit den Text-Einstellungen kannst du den Text eines bestimmten Teilbereichs individuell anpassen. In den meisten Fällen findest du diese Einstellungen ganz oben in der Bearbeitungsansicht. In Bereichen, in denen Textanpassungen nicht empfohlen sind, sind die Einstellungen weiter unten platziert.
Schriftart: Wähle eine bereits in deinem Shop verwendete Schriftart oder füge eine neue hinzu. Beim Hinzufügen kannst du entweder eine eigene Schriftfamilie hochladen oder eine der verfügbaren Schriftarten aus unserem Katalog nutzen.
Schriftstärke: Mit der Schriftstärke kannst du steuern, wie dick oder dünn dein Text erscheint. Je kleiner die Zahl, desto feiner die Schrift. Nicht alle Schriftarten unterstützen jede Stärke – falls deine gewählte nicht verfügbar ist, wird automatisch die nächstmögliche Schriftstärke verwendet.
Schriftstil: Hier kannst du einstellen, ob dein Text normal, kursiv, oder oblique dargestellt werden soll.
Schriftgröße: Bestimmt die Größe der Schrift.
Ausrichtung: Du kannst den Text rechtsbündig, zentriert, im Blocksatz oder linksbündig anordnen.
Schriftfarbe: Bestimmt die Farbe des Texttes. Im Farbkatalog kannst du bestehende Farben anpassen, ersetzen oder neue hinzufügen.
Weitere Texteinstellungen: Hier kannst du den Abstand zwischen den Buchstaben sowie die Zeilenhöhe anpassen. Mit der Text-Transformation hast du die Möglichkeit, den Text in Klein- oder Großbuchstaben umzuwandeln. Unter Textdekoration kannst du zwischen Unter- oder Überstreichungen wählen, die auf den Text angewendet werden.
Abstände
Mit Abständen kannst du die Außen- und Innenabstände deiner Elemente steuern.
Das Ketten-Icon ermöglicht es dir, die Werte zu verknüpfen, sodass du gleichmäßige Abstände für alle Seiten gleichzeitig festlegen kannst.
Innenabstand (Padding): Bezieht sich auf den Raum zwischen dem Inhalt eines Elements und seinem Rand. Dieser Abstand sorgt dafür, dass der Inhalt nicht direkt an den Rändern des Elements anliegt.
Außenabstand (Margin): Bestimmt den Raum zwischen dem Rand eines Elements und den benachbarten Elementen, um die Positionierung und das Layout zu steuern.
Hintergrund
Mit den Hintergrund-Einstellungen kannst du Hintergründe zu deinen Style-Containern hinzufügen. Du hast die Möglichkeit, zwischen einem einfarbigen Hintergrund, einem Bild oder einem Verlauf zu wählen.
Farbe: Hier kannst du einen einfarbigen Hintergrund festlegen, indem du eine Farbe aus deinem Farbkatalog auswählst. Möchtest du eine neue Farbe hinzufügen oder bestehende Farben bearbeiten, kannst du das über den Button „Farbkatalog verwalten“ tun.
Bild: Hier kannst du ein Bild als Hintergrund festlegen. In den Hintergrundbild-Einstellungen kannst du dein Bild weiter anpassen.
- Bild-Position: Bestimmt die Ausrichtung des Bilds, z.B. zentriert.
- Bild-Größenanpassung: Bestimmt, wie die das Bild an die Größe des Containers angepasst wird.
- Bild wiederholen: Bestimmt, ob das Bild wiederholt wird.
- Bild anpinnen: Bestimme, an welchem Punkt das Bild fixiert wird, wenn die Seite gescrollt wird.
Verlauf: Hier kannst du einen Farbverlauf als Hintergrund festlegen. Wähle dazu zwei Farben aus deinem Farbkatalog aus. Im Dropdown-Feld „Verlauf“ hast du die Wahl zwischen drei Verlaufseinstellungen:
- Linear: Der Verlauf zieht sich gerade in die vorgegebene Richtung.
- Radial: Der Verlauf verläuft kreisförmig von innen nach außen.
- Konisch: Die Farben rotieren kreisförmig um einen Punkt.
Rahmen
In diesem Bereich kannst du deinem Style-Container einen Rahmen oder eine Outline hinzufügen. Jede Seite des Rahmens lässt sich individuell gestalten, indem du auf die entsprechenden Seiten oder Eckpunkte des dargestellten Quadrats klickst. Um auf die gemeinsame Bearbeitung aller Rahmenlinie zurückzukehren, klicke einfach in die Mitte des Quadrats.
Der Rahmen befindet sich immer innerhalb des Containers, auf den er angewendet wird. Die Outline wird außerhalb des Containers gezogen. Wenn sowohl Rahmen als auch Container eingestellt sind, erscheint die Outline um den Rahmen. Die Seiten und Ecken einer Outline können nicht individuell angepasst werden.
Strichstärke: Stellt die Linienstärke in Pixel ein.
Typ: Bestimmt den Typ der Linie, z.B. einfach oder strichliert.
Abrundung (Rahmen): Bestimmt die Eckenrundung in Pixel.
Versatz (Outline): Verschiebt die Outline nach innen oder außen. Angabe in Pixel. Negative Werte verschieben die Linie nach innen, positive Werte nach außen.
Rahmenfarbe: Legt eine Farbe aus deinem Farbkatalog als Linienfarbe fest. Um eine Farbe hinzuzufügen oder zu bearbeiten, verwalte deinen Farbkatalog.
Textschatten & Boxschatten
Mit dem Textschatten kannst du deiner Schrift einen Schatten hinzufügen. Mit dem Boxschatten kannst du einen Schatten um den Container des aktuellen Bereichs hinzufügen.
Der Schatten benötigt zunächst eine Farbe, die du aus deinem Farbkatalog wählen kannst. Anschließend kannst du Unschärfe und Versatz anpassen.
Die Unschärfe bestimmt, wie hart der Schatten dargestellt wird. Je höher der Wert, desto stärker wird der Schatten verzerrt und desto weicher wirkt er.
Der Versatz bestimmt die Position deines Schattens.
- Ein horizontaler Versatz verschiebt ihn nach rechts (positive Wert) oder nach links (negative Wert).
- Ein vertikaler Versatz verschiebt ihn nach unten (positive Wert) oder nach oben (negative Wert).
Ohne Versatz liegt der Schatten direkt unter dem Text.
Beim Boxschatten gibt es zudem die Möglichkeit, den Schatten zu verstärken. Je höher der Wert, desto weiter breitet sich der Schatten aus.
Effekte
Mit Effekten kannst du zusätzliche visuelle Anpassungen auf deine Elemente anwenden.
X-Versatz: Richtet den aktuellen Teilbereich horizontal aus. Positive Werte verschieben nach rechts, negative Werte nach links.
Y-Versatz: Richtet den aktuellen Teilbereich vertikal aus. Positive Werte verschieben nach unten, negative nach oben.
Rotierungswinkel: Bestimmt die Drehung des Elements im Bereich von 0° bis 360°. Bei 180° wird das Element umgekehrt dargestellt.
Skalierung: Bestimmt die Skalierung des Containers in Prozent. Die Ausgangsgröße beträgt 100 %. Eine Eingabe von 200 % verdoppelt die Größe, während 50 % die Größe halbiert. Das Prozentzeichen muss nicht angegeben werden.
Überblendungsmodus: Steuert den Überblendmodus bei überlappenden Bereichen, etwa wenn eine Überschrift über einem Banner liegt. Dieser bestimmt, wie Vorder- und Hintergrund miteinander interagieren.
Kantenbeschnitt: Schneidet die Ecken des Containers ab. Der Typ des Beschnitts legt fest, wie die Ecken beschnitten werden. Der Falz schneidet ein Rechteck aus den Ecken des Containers aus, während die Schräge die Kanten in einem schrägen Winkel abschneidet. Anschließend können die Beschnitte für alle Seiten individuell definiert werden.
Überblendungsmodi
| Normal | Die Farben bleiben so, wie du sie eingestellt hast. |
| Multiplizieren | Multipliziert die Vordergrundfarbe mit der Hintergrundfarbe. Das Ergebnis ist eine dunklere Farbe. Beim Multiplizieren mit Schwarz entsteht Schwarz. Beim Multiplizieren mit Weiß bleibt die Farbe unverändert. |
| Negativ Multiplizieren | Multipliziert die Vordergrundfarbe mit der Hintergrundfarbe und gibt das Ergebnis als Negativ aus, wodurch die Farbe heller wird. Wenn Schwarz als Mischfarbe verwendet wird, bleibt die Farbe unverändert, bei Weiß entsteht Weiß. |
| Ineinanderkopieren | Führt eine Multiplikation bzw. Negativmultiplikation zwischen den Farben durch. Das Licht und die Schatten der Hintergrundfarbe bleiben erhalten und werden verstärkt. Wird etwa Text über ein Bild platziert, passt sich die Textfarbe den Lichtern und Schatten des Bildes an. In dunkleren Bereichen des Bildes wird der Text nun ebenfalls dunkler. |
| Abdunkeln | Wählt immer die dunklere Farbe aus der Vordergrund- und der Hintergrundfarbe. Helle Pixel der Vordergrundfarbe werden durch die Hintergrundfarbe ersetzt, während die dunklen Pixel der Vordergrundfarbe unverändert bleiben. |
| Aufhellen | Wählt immer die hellere Farbe aus der Vordergrund- und der Hintergrundfarbe. Dunkle Pixel der Vordergrundfarbe werden durch die Hintergrundfarbe ersetzt, während die helleren Pixel der Vordergrundfarbe unverändert bleiben. |
| Farbig abwedeln | Verringert den Kontrast zwischen der Vordergrund- und der Hintergrundfarbe und hellt dadurch die Ausgangsfarbe auf, um die Mischfarbe widerzuspiegeln. Wird mit Schwarz gemischt, bleibt die Ausgangsfarbe unverändert. |
| Farbig nachbelichten | Erhöht den Kontrast zwischen der Vordergrund- und der Hintergrundfarbe und dunkelt dadurch die Ausgangsfarbe ab, um die Mischfarbe widerzuspiegeln. Wird mit Weiß gemischt, bleibt die Ausgangsfarbe unverändert. |
| Hartes Licht | Verändert die Farben, je nachdem, wie die Vorder- und Hintergrundfarbe miteinander kombiniert werden. Wenn die Hintergrundfarbe heller als Grau ist, wird die Vordergrundfarbe heller und Lichter werden hinzugefügt. Ist die Hintergrundfarbe dunkler als Grau, wird die Vordergrundfarbe dunkler , und es entstehen Tiefen. Schwarz und Weiß erzeugen jeweils reines Schwarz bzw. Weiß. |
| Weiches Licht | Je nach Hintergrundfarbe wird die Vordergrundfarbe heller oder dunkler. Ist die Hintergrundfarbe heller als 50 % Grau, wird die Vordergrundfarbe aufgehellt. Ist die Hintergrundfarbe dunkler als 50 % Grau, wird die Vordergrundfarbe abgedunkelt. Reines Schwarz oder Weiß im Hintergrund macht die Vordergrundfarbe entweder noch dunkler oder heller, aber nicht zu reinem Schwarz oder Weiß. |
| Differenz | Die Hintergrundfarbe wird von der Vordergrundfarbe abgezogen, je nachdem, welche heller ist. Wenn Weiß als Hintergrundfarbe verwendet wird, kehrt sich die Vordergrundfarbe um. Mischen mit Schwarz verändert die Vordergrundfarbe nicht. |
| Ausschluss | Ähnelt dem Differenz-Modus, ist aber weniger kontrastreich. Wenn Weiß als Hintergrundfarbe verwendet wird, kehrt sich die Vordergrundfarbe um. Ein Mischen mit Schwarz hat keine Auswirkung. |
| Farbton | Ergibt eine Farbe, die den Farbton der Vordergrundfarbe mit der Helligkeit und Sättigung der Hintergrundfarbe kombiniert. |
| Sättigung | Ergibt eine Farbe, die den Farbton und die Helligkeit der Vordergrundfarbe mit der Sättigung der Hintergrundfarbe kombiniert. Wenn die Hintergrundfarbe grau ist, ändert sich nichts. |
| Farbe | Ergibt eine Farbe, die die Helligkeit der Vordergrundfarbe und den Farbton sowie die Sättigung der Hintergrundfarbe übernimmt. |
| Luminanz | Ergibt eine Farbe mit dem Farbton und der Sättigung der Vordergrundfarbe und der Helligkeit der Hintergrundfarbe. Er funktioniert genau umgekehrt zum Farbe-Modus. |