Zum Hauptinhalt springen
Die Erscheinungsbild-Einstellungen geben Ihnen vollständige Kontrolle darüber, wie Ihr AgencyHandy-Workspace aussieht. Sie können das Farbschema der Plattform an die Markenidentität Ihrer Agentur anpassen, indem Sie die Primärfarbe, den Seitenleisten-Hintergrund, die Seitenleisten-Textfarbe und die Hover-Hervorhebungsfarbe für Seitenleisten-Navigationselemente konfigurieren. Jede gespeicherte Änderung tritt sofort im gesamten Workspace für alle Nutzer in Kraft — kein Seitenneuladen erforderlich.
Nur Super-Administratoren und Administratoren können auf die Erscheinungsbild-Einstellungen zugreifen und diese ändern. Wenn Sie diese Option unter Workspace-Konfiguration nicht sehen, bitten Sie Ihren Super-Administrator, Ihre Rolle zu überprüfen.

Auf die Erscheinungsbild-Einstellungen zugreifen

1

Workspace-Konfiguration öffnen

Klicken Sie im linken Navigationsmenü auf Workspace-Konfiguration.
2

Erscheinungsbild auswählen

Klicken Sie im Untermenü auf Erscheinungsbild (manchmal als Visuelle Einstellungen bezeichnet).

Jedes visuelle Element anpassen

Primärfarbe

Die Primärfarbe wird auf Schaltflächen, aktive Links, hervorgehobene Zustände und wichtige Oberflächenelemente auf der gesamten Plattform angewendet.
  • Wählen Sie eine Farbe, die Ihre zentrale Markenidentität widerspiegelt.
  • Dies ist die wirkungsvollste Farbeinstellung, da sie überall in der Benutzeroberfläche erscheint.

Seitenleisten-Hintergrundfarbe

Der Seitenleisten-Hintergrund legt den Grundton des linken Navigationspanels fest.
  • Verwenden Sie eine Farbe, die eine klare visuelle Trennung zwischen der Seitenleiste und dem Hauptinhaltsbereich schafft.
  • Dunkle Hintergründe mit hellem Text bieten generell die beste Lesbarkeit.

Seitenleisten-Textfarbe

Die Seitenleisten-Textfarbe steuert die Beschriftungsfarbe aller Navigationselemente im linken Menü.
  • Wählen Sie immer eine Farbe mit starkem Kontrast zur Hintergrundfarbe Ihrer Seitenleiste.
  • Schlechter Kontrast macht Links schwerer lesbar und beeinträchtigt die Barrierefreiheit.

Hover-Hintergrundfarbe der Seitenleiste

Diese Farbe erscheint als Hintergrundhervorhebung, wenn ein Nutzer den Cursor über ein Seitenleisten-Navigationselement bewegt.
  • Sie signalisiert Interaktivität und hilft Nutzern zu verstehen, welches Element sie gleich anklicken werden.
  • Wählen Sie eine Farbe, die sich deutlich sowohl vom Standard-Seitenleistenhintergrund als auch von der Farbe des aktiven Elements unterscheidet.

Ihre Farbauswahl anwenden

1

Den Farbwähler für jedes Feld öffnen

Klicken Sie auf das Farbfeld neben einem der vier Erscheinungsbild-Felder — Primärfarbe, Seitenleisten-Hintergrund, Seitenleisten-Textfarbe oder Hover-Hintergrundfarbe der Seitenleiste — um den Farbwähler zu öffnen.
2

Einen Hex-Code eingeben oder eine Farbe auswählen

Geben Sie den genauen Hex-Code Ihrer Marke (z. B. #3B5BDB) direkt in das Eingabefeld ein, oder verwenden Sie den visuellen Wähler, um einen Farbton auszuwählen.
3

Die Änderungen in der Vorschau prüfen

Überprüfen Sie, wie die aktualisierten Farben in der Seitenleiste und auf der gesamten Oberfläche aussehen, bevor Sie speichern.
4

Auf Änderungen speichern klicken

Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf Änderungen speichern. Das aktualisierte Erscheinungsbild wird sofort global für alle Nutzer im Workspace übernommen.
Halten Sie die Hex-Farbcodes Ihrer Marke an einem zugänglichen Ort fest (einem Marken-Styleguide oder einer Notizdatei). Sie sollten immer wieder dieselben exakten Werte verwenden — insbesondere wenn Sie Ihre Erscheinungsbild-Einstellungen jemals zurücksetzen und neu konfigurieren müssen.

Zum Standard-Theme zurücksetzen

Wenn Sie das gesamte benutzerdefinierte Branding entfernen und das ursprüngliche AgencyHandy-Farbschema wiederherstellen möchten, klicken Sie auf der Erscheinungsbild-Seite auf die Schaltfläche Standardeinstellungen zurücksetzen.
Das Zurücksetzen auf die Standardeinstellungen verwirft alle benutzerdefinierten Farbänderungen dauerhaft. Diese Aktion kann nicht rückgängig gemacht werden. Wenn Sie Ihre aktuellen Einstellungen beibehalten möchten, notieren Sie Ihre Hex-Codes, bevor Sie zurücksetzen.

Best Practices für Farbkontrast

Guter Farbkontrast ist nicht nur eine Designpräferenz — er beeinflusst direkt die Lesbarkeit und Barrierefreiheit für Ihr Team und Ihre Kunden.

WCAG AA-Kontrastverhältnisse anstreben

Verwenden Sie für normalen Fließtext ein Kontrastverhältnis von mindestens 4,5:1 zwischen Text und Hintergrund. Für großen Text oder Symbole ist ein Verhältnis von 3:1 akzeptabel. Verwenden Sie ein Tool wie den WebAIM Contrast Checker zur Überprüfung.

Kontrastarme Kombinationen vermeiden

Kombinieren Sie keine Farben wie hellgrauen Text auf weißem Hintergrund oder gelben Text auf weißem Hintergrund — diese erfüllen die Barrierefreiheitsstandards nicht und belasten die Augen bei langen Sitzungen.

Hover-Zustände bewusst testen

Hover-Farben sollten sich deutlich sowohl vom Ruhezustand als auch vom aktiven Zustand unterscheiden. Wenn sie gleich aussehen, verlieren Nutzer wichtiges visuelles Feedback.

Konsistenz mit Ihrer Marke wahren

Verwenden Sie hier dieselbe Primärfarbe wie auf Ihrer Website, in Angeboten und auf Rechnungen. Konsistenz stärkt die Wiedererkennung und Professionalität an allen Kundenkontaktpunkten.

Wichtige Hinweise

  • Sofortige globale Wirkung: Alle gespeicherten Erscheinungsbild-Änderungen werden sofort im gesamten Workspace übernommen. Jeder angemeldete Nutzer sieht die Aktualisierung bei seiner nächsten Navigation.
  • Ein aktives Theme: Es gibt keine Unterstützung für mehrere Themes — ein Farbsatz gilt für den gesamten Workspace für alle Rollen.
  • Rollenbeschränkung: Nur Super-Administratoren und Administratoren können Erscheinungsbild-Änderungen vornehmen. Reguläre Teammitglieder und Kunden können keine Farben ändern.
  • Zurücksetzen ist dauerhaft: Die Schaltfläche Standardeinstellungen zurücksetzen kann nicht rückgängig gemacht werden. Verwenden Sie sie daher nur, wenn Sie alle benutzerdefinierten Farben absichtlich entfernen möchten.