Design Builder (Professional) - Erweiterte Design-Einstellungen

Die Standardeinstellungen aus dem Design Builder reichen dir nicht aus? 

Mit den erweiterten Design-Erstellungen kannst du das Design deiner Journeys noch mehr individualisieren. Um den höchsten Nutzen aus diesem Feature zu ziehen, benötigst du Kenntnisse über Material UI und CSS. 

Eigenes Theme im Design Builder

Sobald du dich in der Erstellung oder Bearbeitung eines Designs im Design Builder befindest, kannst du mit dem Schalter "Eigenes Theme verwenden" zwischen den Standard-Einstellungen und "Eigenes Theme" wechseln. 

Unter "Eigenes Theme" findest du nun auf der rechten Seite die Funktion, das Theme zu erstellen.

Beim ersten Anlegen wird ein vollständiges Theme angezeigt, dass wir basierend auf deinen Standard-Einstellungen erstellt haben. Nun hast du folgende Optionen: 

1. Bearbeite oder ergänze die Vorlage direkt im Design Builder nach deinen Wünschen. Das Theme bleibt so gespeichert, es wird nicht mehr durch die Standard-Einstellungen überschrieben.

oder

2. Lösche die Vorlage. Erstelle das MUI Theme selbst und kopiere es direkt in den Editor. Alle Werte, die durch das Theme nicht überschrieben werden, bleiben wie vorher durch die Standard-Einstellungen gesetzt, erhalten. 

Hilfreiche Ressourcen 

Zur Erstellung eines Material UI Theme findest du viel Hilfestellung. Hier kannst du dir ein komplettes Theme erstellen lassen.

Die Material UI Dokumentation hilft dir einzusehen, welche Designoptionen zur Verfügung stehen. 

Bitte beachte: 

Du kann zwar das Styling der einzelnen Elemente konfigurieren, das hat aber keinen Einfluss darauf, wo diese Elemente innerhalb der Journeys verwendet werden. Auch wenn du dem Theme eine Konfiguration hinzufügst, die wir nicht in der Journey verwenden, hat dies keine Auswirkungen.
Wenn du beispielsweise ein benutzerdefiniertes Design für den primären Button hinzufügst, wird dies überall in der Journey angewendet, wo der primäre Button verwendet wird. Du kannst keinen Einfluss auf einzelne Elemente, sondern nur auf die gesamte Kategorie nehmen.

Hier findest du Links zu den jeweiligen Dokumentationen: 

• Farben (Palette)

  • primary

  • secondary

  • error

  • active, hover, selected, disabled, focus

  • background

  • font colors

    • primary

    • secondary

• Typographie

  • font size, font family, font weight, line height, padding, margin, uppercase/lowercase for:

    • h1-h6

    • subtitle

    • body

    • button

    • caption

    • overline

• Spacing

• Globals

  • Hier kannst du globale CSS resets hinzufügen oder default props verändern.

  • Innerhalb von muiOverrides kannst du dann die einzelnen Elemente spezifizieren.

Dies sind die Elemente, die wir aktuell in der Journey verwenden. Jedes Element kann durch verschiedene props und classes verändert werden, die in der MUI Dokumentation gefunden werden können:

• AppBar (Navigationsleiste)

• Buttons

• Card

• Checkbox

• Grid

• Filled Inputs

• Paper

• Radio

• Step (Für die Fortschrittsanzeige)

• Tabs (nur für Strom&Gas gebündelt)

• Toggle Button

• Typography