Helpcenter Branding & Anpassung
Passen Sie das Erscheinungsbild Ihres Bugalou Helpcenters an. Legen Sie Markenfarben fest, laden Sie Logos hoch, fügen Sie benutzerdefiniertes CSS hinzu und konfigurieren Sie domainspezifisches Branding.
Übersicht
Die Branding-Seite ermöglicht es Ihnen, das visuelle Erscheinungsbild Ihres Helpcenters anzupassen, damit es zur Markenidentität Ihres Unternehmens passt. Jede Domain kann ihr eigenes einzigartiges Branding haben.
Voraussetzung
Sie benötigen mindestens eine konfigurierte Domain, bevor Sie Branding bearbeiten können. Wenn keine Domains vorhanden sind, sehen Sie die Meldung: „Noch keine Domains konfiguriert" mit einem Link zur Domain-Einstellungsseite.
Branding aufrufen
Navigieren Sie von der Seitenleiste aus zu Helpcenter → Branding.
Eine Domain auswählen
Wenn Sie mehrere Domains haben, verwenden Sie das Domain-Auswahl-Dropdown oben auf der Seite, um auszuwählen, welches Domain-Branding Sie bearbeiten möchten. Branding wird pro Domain gespeichert, sodass jede Domain anders aussehen kann.
Branding-Einstellungen
Das Branding-Formular ist in drei Abschnitte gegliedert:
1. Farben
Legen Sie fünf Farbwerte mit dem Farbwähler oder durch direkte Eingabe von Hex-Codes fest:
| Farbe | Zweck |
|---|---|
| Primärfarbe | Hauptmarkenfarbe — wird für Überschriften, Schaltflächen und Akzente verwendet |
| Sekundärfarbe | Unterstützungsfarbe — wird für Hintergründe und sekundäre Elemente verwendet |
| Akzentfarbe | Hervorhebungsfarbe — wird für Links, Call-to-Action-Elemente und Hover-Zustände verwendet |
| Textfarbe | Haupttextfarbe — wird für Fließtext und Überschriften verwendet |
| Helle Textfarbe | Hellere Textfarbe — wird für Beschreibungen, Bildunterschriften und sekundären Text verwendet |
Jedes Farbfeld hat eine visuelle Farbvorschau neben der Hex-Eingabe, sodass Sie die gewählte Farbe sofort sehen können.
2. Bilder
| Feld | Beschreibung |
|---|---|
| Logo-URL | Fügen Sie eine URL zu Ihrem Unternehmenslogo ein. Dies erscheint im Header Ihres Helpcenters. Verwenden Sie eine gehostete Bild-URL (z. B. von Cloudinary, AWS S3 oder Ihrer Website). |
| Favicon-URL | Fügen Sie eine URL zu Ihrem Favicon ein. Dies erscheint im Browser-Tab, wenn Besucher Ihr Helpcenter aufrufen. |
3. Inhalt
| Feld | Beschreibung |
|---|---|
| Footer-Text | Benutzerdefinierter Text im Footer Ihres Helpcenters. Beispiel: „© 2026 Ihr Unternehmen. Alle Rechte vorbehalten." |
| Benutzerdefiniertes CSS | Erweitert: Fügen Sie benutzerdefinierte CSS-Regeln hinzu, um das Erscheinungsbild über die grundlegenden Farbeinstellungen hinaus anzupassen. Verwenden Sie Standard-CSS-Syntax. |
Branding speichern
- Füllen Sie Ihre gewünschten Einstellungen aus
- Klicken Sie auf „Branding speichern" (blaue Schaltfläche)
- Eine grüne Erfolgsmeldung erscheint: „Branding erfolgreich aktualisiert!"
- Änderungen werden sofort auf Ihr Helpcenter angewendet
Die Erfolgsmeldung wird nach 3 Sekunden automatisch ausgeblendet.
Tipps für benutzerdefiniertes CSS
Das Feld „Benutzerdefiniertes CSS" akzeptiert Standard-CSS. Einige Beispiele:
- Schriften ändern:
body { font-family: 'Inter', sans-serif; } - Abstände anpassen:
.article-content { padding: 2rem; } - Elemente ausblenden:
.footer-links { display: none; } - Benutzerdefinierte Hover-Effekte:
a:hover { text-decoration: underline; }
Best Practices
- Verwenden Sie Ihre genauen Markenfarben für ein einheitliches Kundenerlebnis
- Hosten Sie Logos und Favicons auf einem zuverlässigen CDN für schnelles Laden
- Verwenden Sie Logos mit transparentem Hintergrund (PNG oder SVG) für das beste Ergebnis
- Halten Sie den Footer-Text kurz — Copyright-Hinweis und Unternehmensname sind ausreichend
- Testen Sie Änderungen am benutzerdefinierten CSS zuerst auf einer Staging-Domain, falls möglich
- Denken Sie daran, dass Branding pro Domain gilt — konfigurieren Sie jede Domain bei Bedarf separat