Zum Hauptinhalt springen

Styling

Das Aussehen des Konfigurators passt du auf drei Ebenen an — von global bis zum einzelnen Feld. Speziellere Einstellungen übersteuern dabei die allgemeineren.

Global​

In den globalen Einstellungen hinterlegst du das shopweite Styling (visueller Editor, z.B. Farben für fehlerhafte Felder) und eigenes CSS, das für alle Konfigurationen gilt.

Pro Konfiguration (Tab Styling)​

Jede Konfiguration hat einen eigenen Tab Styling:

  • Ein visueller Editor stellt die wichtigsten Gestaltungswerte der Konfiguration ohne CSS-Kenntnisse ein.
  • Zusätzlich steht ein CSS-Feld zur Verfügung — die Regeln gelten nur für diese Konfiguration.

Pro Feld (Sidebar „Style")​

In den Feld-Einstellungen findest du unter Style Layout- und Gestaltungsoptionen für das einzelne Feld:

  • Spaltenbreite — wie viel Platz das Feld im Raster der Gruppe einnimmt: volle Breite, ⅚, ⅔, ½, ⅓ oder ⅙. So stellst du z.B. Länge und Breite nebeneinander.
  • Innere Breite — die Breite des Eingabeelements innerhalb seiner Spalte (100 % bis 20 %).
  • CSS-Klassen — eigene Klassen für das Feld, z.B. um es in deinem Theme gezielt anzusprechen.
  • Eigenes CSS — Regeln, die nur für dieses Feld gelten.
  • Der visuelle Editor steht auch auf Feldebene zur Verfügung.
tipp

Für wiederkehrende Anpassungen über mehrere Konfigurationen hinweg ist das globale CSS die bessere Wahl — so pflegst du die Regeln nur an einer Stelle.

Auf dieser Seite