In diesem Tutorial erfährst du, wie du die Farben des TuCalendi-Widgets mit einer Designvorlage anpasst. Die Farben bestimmen die visuelle Identität des Widgets und ermöglichen es dir, es an das Markenbild jedes Unternehmens anzupassen.
Wenn du eine neue Designvorlage erstellst, werden alle Farbfelder automatisch mit Standardeinstellungen ausgefüllt. Anschließend kannst du jede Farbe einzeln ändern, um den gewünschten Look zu erreichen.
Das Widget verfügt über sechs einzelne Farbfelder und ein zusätzliches Feld für das allgemeine Farbthema:
- Primärfarbe. Die Hauptfarbe der Oberfläche: Schaltflächen, Tage und hervorgehobene Elemente.
- Sekundärfarbe. Akzentfarbe für sekundäre Elemente.
- Haupttextfarbe.
- Sekundäre Textfarbe.
- Hervorhebungsfarbe. Wird verwendet, um Elemente innerhalb des Widgets hervorzuheben.
- Hintergrundfarbe
- Farbthema. Allgemeiner Anzeigemodus: Auto, Hell oder Dunkel.
Bevor du beginnst
Um diesem Tutorial zu folgen, musst du zum Bereich Erscheinungsbild des Widgets navigieren und eine Designvorlage erstellt haben, die du bearbeiten kannst. Den vollständigen Ablauf zum Erstellen und Zuweisen von Vorlagen findest du im allgemeinen Tutorial dazu, wie du eine Designvorlage für das Widget erstellst und zuweist.
Schritt 1. Öffne die Einstellungen für das Erscheinungsbild des Widgets
Gehe im Seitenmenü von TuCalendi zum Bereich "Widgets" und wähle die Option "Erscheinungsbild".
Schritt 2. Erstelle oder bearbeite eine Vorlage für das Erscheinungsbild
Erstelle im Bereich "Erscheinungsbild" eine neue Vorlage oder bearbeite eine bestehende, indem du auf "Bearbeiten" klickst.
Schritt 3. Prüfe die Standard-Farbeinstellungen
Wenn du eine neue Vorlage erstellst, werden alle Farbfelder automatisch mit Standardwerten ausgefüllt. Der folgende Screenshot zeigt, wie der Editor mit den Standard-Farbeinstellungen aussieht.
Schritt 4. Passe die Farben der Vorlage an
Klicke auf eines der Farbfelder, um es zu öffnen, und wähle den gewünschten Wert aus. Du kannst jedes Feld unabhängig voneinander ändern:
- Primärfarbe: betrifft die Hauptschaltflächen, die ausgewählten Tage im Kalender und die auffälligsten Elemente der Oberfläche.
- Sekundärfarbe: gilt für unterstützende Elemente der Oberfläche.
- Haupttextfarbe: steuert die Farbe des Haupttextes, der im Widget sichtbar ist.
- Sekundäre Textfarbe: steuert die Farbe von sekundärem Text, zum Beispiel Beschreibungen und Beschriftungen.
- Hervorhebungsfarbe: wird verwendet, um besondere Elemente hervorzuheben, zum Beispiel Benachrichtigungen oder wichtige Aktionen.
- Hintergrundfarbe: legt die Hintergrundfarbe des Widgets fest.
- Farbthema: hier kannst du zwischen Auto (das Widget passt sein Aussehen an den hellen oder dunklen Modus des Systems des Nutzers an), Hell (immer im hellen Modus) oder Dunkel (immer im dunklen Modus) wählen.
Der folgende Screenshot zeigt den Editor mit den Farben von TuCalendi als Beispiel für eine Anpassung.
Schritt 5. Speichere die Änderungen
Nachdem du alle gewünschten Farben eingestellt hast, klicke auf "Speichern", um die Änderungen auf die Designvorlage anzuwenden.
Schritt 6. Prüfe die Zuweisung zu einem Element
Sobald die Vorlage gespeichert ist, prüfe, ob sie dem entsprechenden Hub oder der Umfrage mit Weiterleitung zugewiesen ist. Wenn die Vorlage keinem Element zugewiesen ist, werden die Änderungen in keinem Widget angezeigt.
Schritt 7. Prüfe das Ergebnis im Widget
Sobald die Farben eingestellt und die Änderungen gespeichert sind, zeigt das Widget die neue Farbpalette auf allen seinen Bildschirmen an. Der folgende Screenshot zeigt, wie die Farbanpassung im Widget aussieht, das der Endnutzer sieht.
Zusammenfassung des Ablaufs
Um die Farben des Widgets anzupassen, gehe zu "Widget-Erscheinungsbild", erstelle oder bearbeite eine Vorlage und ändere die verfügbaren Farbfelder: Primärfarbe, Sekundärfarbe, Haupttextfarbe, sekundäre Textfarbe, Hervorhebungsfarbe, Hintergrundfarbe und Farbthema. Beim Erstellen einer neuen Vorlage werden alle Felder mit Standardwerten ausgefüllt, die du frei ändern kannst. Klicke auf "Speichern", prüfe, ob die Vorlage dem entsprechenden Hub oder der entsprechenden Umfrage zugewiesen ist, und sieh dir an, wie das Widget nach der Farbanpassung aussieht.