So aktualisieren und passen Sie Ihr Zendesk Guide Theme im Jahr 2026 an

Ihr Help Center ist oft der erste Ort, an den sich Kunden wenden, wenn sie Antworten benötigen. Ein generisches, sofort einsatzbereites Theme mag anfangs funktionieren, aber irgendwann möchten Sie etwas, das zu Ihrer Marke passt und das Auffinden von Informationen erleichtert.

Die gute Nachricht? Zendesk Guide bietet Ihnen zahlreiche Möglichkeiten, Ihr Theme anzupassen, von einfachen Einstellungsanpassungen bis hin zur vollständigen Code-Ebene. Die Herausforderung besteht darin, zu wissen, welchen Ansatz Sie wählen und wie Sie Updates verwalten, ohne Ihre Live-Site zu beschädigen.

Dieser Leitfaden führt Sie durch alles, was Sie über das Aktualisieren und Anpassen Ihres Zendesk Guide Themes wissen müssen. Egal, ob Sie kleinere Anpassungen vornehmen oder etwas völlig Neues erstellen, Sie erfahren, wie Sie dies sicher und effizient tun können.

Was Sie benötigen

Bevor Sie mit der Anpassung beginnen, stellen Sie sicher, dass Sie das richtige Setup haben:

Erforderlich:

• Zendesk Suite (Team, Growth, Professional, Enterprise oder Enterprise Plus) ODER Guide Professional/Enterprise für die Codebearbeitung
• Wissensadministratorberechtigungen in Ihrem Zendesk-Konto

Optional, aber empfohlen:

• Eine lokale Entwicklungsumgebung mit einem Code-Editor
• Git für die Versionskontrolle
• Zugriff auf eine Zendesk-Sandbox-Umgebung zum Testen

Hier ist die Kurzfassung: Wenn Sie nur Farben ändern und ein Logo hochladen möchten, reicht jeder Plan aus. Wenn Sie jedoch HTML, CSS oder JavaScript bearbeiten müssen, benötigen Sie Guide Professional oder höher.

Schritt 1: Zugriff auf den Theme-Editor

Alles beginnt im Theme-Editor. So gelangen Sie dorthin:

1. Navigieren Sie in Ihrem Zendesk-Adminbereich in der Seitenleiste zu Wissensadministrator
2. Klicken Sie auf Design anpassen
3. Sie sehen die Seite Themes mit Ihrem aktuellen Live-Theme oben

Die Seite Themes zeigt alle Ihre verfügbaren Themes an. Das Theme oben ist Ihr Live-Theme (das, was Kunden gerade sehen). Alle Themes darunter sind Entwürfe oder Sicherungen, zu denen Sie wechseln oder die Sie ändern können.

Nehmen Sie sich einen Moment Zeit, um sich mit der Oberfläche vertraut zu machen. Jedes Theme hat ein Optionsmenü (drei Punkte), in dem Sie eine Vorschau anzeigen, duplizieren, herunterladen oder löschen können. Sie werden diese Optionen häufig verwenden, wenn Sie verschiedene Versionen verwalten.

Schritt 2: Anpassen über das Einstellungsfeld

Für viele Teams bietet das Einstellungsfeld alles, was sie benötigen. Es ist der sicherste Weg zur Anpassung, da Sie den Code nicht versehentlich beschädigen können und Ihre Änderungen nicht verhindern, dass das Theme Updates erhält.

So greifen Sie auf die Einstellungen zu:

1. Klicken Sie auf der Seite Themes auf Anpassen für das Theme, das Sie bearbeiten möchten
2. Sie sehen das Einstellungsfeld mit Optionen für Farben, Schriftarten und Bilder
3. Nehmen Sie Ihre Änderungen vor und klicken Sie auf Veröffentlichen, wenn Sie fertig sind

Im Einstellungsfeld können Sie in der Regel Folgendes anpassen:

• Markenfarben Primärfarbe, Textfarbe, Linkfarbe und Hintergrundfarbe
• Typografie Überschriftsschriftart und Textschriftart
• Bilder Logo, Favicon, Homepage-Hintergrund und Community-Bilder

Diese Variablen werden in der Manifestdatei Ihres Themes gespeichert und können in Ihrem CSS mithilfe von Syntax wie $brand_color referenziert werden. Dies bedeutet, dass, wenn Sie die Markenfarbe in den Einstellungen aktualisieren, sie automatisch überall dort aktualisiert wird, wo diese Variable verwendet wird.

Wann sollten Sie Einstellungen anstelle der Codebearbeitung verwenden? Wenn Ihre Anpassungsanforderungen rein kosmetischer Natur sind (Farben, Schriftarten, Logos), bleiben Sie bei den Einstellungen. Es ist schneller, sicherer und verhindert nicht, dass Sie zukünftige Theme-Updates erhalten.

Schritt 3: Bearbeiten des Theme-Codes für erweiterte Anpassungen

Manchmal reichen die Einstellungen nicht aus. Vielleicht müssen Sie das Homepage-Layout umstrukturieren, benutzerdefinierte JavaScript-Funktionen hinzufügen oder völlig neue Seitenvorlagen erstellen. Dann müssen Sie den Code direkt bearbeiten.

So greifen Sie auf den Code-Editor zu:

1. Klicken Sie auf der Seite Themes auf Anpassen für Ihr Theme
2. Klicken Sie oben rechts auf Code bearbeiten
3. Sie sehen die Dateistruktur mit Vorlagen, CSS, JavaScript und Assets

Das ist es, was Sie sehen:

Vorlagen (.hbs-Dateien): Diese verwenden die Handlebars-Syntax (Zendesk nennt sie Curlybars), um Seitenlayouts zu definieren. Zu den wichtigsten Vorlagen gehören:

• home_page.hbs Ihre Help Center-Homepage
• article_page.hbs einzelne Artikelseiten
• category_page.hbs und section_page.hbs Navigations-Landingpages
• header.hbs und footer.hbs Elemente, die auf jeder Seite erscheinen
• document_head.hbs Hier fügen Sie benutzerdefinierte Meta-Tags oder externe Skripte hinzu

CSS (style.css): Steuert alle visuellen Stile. Sie können die in Ihren Einstellungen definierten Variablen (wie $brand_color) verwenden oder benutzerdefiniertes CSS schreiben.

JavaScript (script.js): Fügt Interaktivität und dynamisches Verhalten hinzu.

Manifest (manifest.json): Definiert die Einstellungsvariablen und Metadaten Ihres Themes.

Wichtiger Warnhinweis: Sobald Sie den Code eines Themes bearbeiten, wird es zu einem "benutzerdefinierten Theme". Benutzerdefinierte Themes erhalten keine automatischen Updates von Zendesk oder Theme-Entwicklern. Sie müssen Updates manuell anwenden, was Ihre Anpassungen überschreiben kann, wenn Sie nicht vorsichtig sind.

Wenn Sie neu bei Curlybars sind, finden Sie hier einige gängige Ausdrücke, die Ihnen begegnen werden:

• {{breadcrumbs}} zeigt die Breadcrumb-Navigation an
• {{search}} rendert die Suchleiste
• {{article.title}} gibt den Artikeltitel aus
• {{settings.brand_color}} referenziert eine Einstellungsvariable

Das Wichtigste, was Sie sich merken sollten, ist, dass Curlybars Ihnen Zugriff auf Help Center-Daten gibt. Sie können dynamische Inhalte anzeigen, Artikel durchlaufen und Elemente bedingt basierend auf Benutzerrollen oder Seitentypen anzeigen.

Schritt 4: Verwalten von Theme-Versionen und Updates

Die Theme-Verwaltung ist der Punkt, an dem es knifflig wird. Sie benötigen ein System, um Änderungen zu verfolgen, Updates zu testen und ein Rollback durchzuführen, wenn etwas kaputt geht.

Erstellen von Sicherungskopien

Erstellen Sie vor größeren Änderungen immer eine Sicherung:

1. Suchen Sie auf der Seite Themes Ihr Live-Theme
2. Klicken Sie auf das Optionsmenü (drei Punkte)
3. Wählen Sie Duplizieren
4. Benennen Sie es beschreibend, z. B. "PROD-BACKUP-2026-02-25"

Jetzt haben Sie eine saubere Rollback-Option, falls etwas schief geht.

Herunterladen für die lokale Entwicklung

Für ernsthafte Anpassungen sollten Sie lokal arbeiten:

1. Klicken Sie auf das Optionsmenü Ihres Themes
2. Wählen Sie Herunterladen
3. Sie erhalten eine ZIP-Datei mit allen Theme-Dateien
4. Extrahieren Sie sie und öffnen Sie sie in Ihrem Code-Editor

Durch die lokale Arbeit können Sie die Versionskontrolle (Git), Ihren bevorzugten Editor und das Zendesk Theme Preview Tool verwenden, um Änderungen vor dem Hochladen zu testen.

Verstehen der Templating API-Versionen

Hier kommt es oft zu Verwirrung. Es gibt zwei Arten von "Versionen" in Zendesk Guide:

Templating API-Versionen werden von Zendesk gesteuert. Sie bestimmen, welche Funktionen und Helfer verfügbar sind. Seit 2014 gab es vier Versionen:

Quelle: eesel AI Blog zum Thema Theme-Versionsverwaltung

Theme-Versionen sind Ihre tatsächlichen benutzerdefinierten Themes. Sie können mehrere Themes in Ihrer Bibliothek haben und zwischen ihnen wechseln.

Um Ihre Templating API-Version zu überprüfen, suchen Sie unter Ihrem Theme-Namen im Code-Editor oder überprüfen Sie das Feld api_version in Ihrer manifest.json-Datei.

Das Aktualisieren von Templating API-Versionen erfordert Vorsicht. Neuere Versionen können von Ihnen verwendete Helfer verwerfen, was bedeutet, dass Ihr Theme nach dem Aktualisieren beschädigt werden könnte. Testen Sie immer zuerst in einer Sandbox.

Marketplace-Theme-Updates

Wenn Sie ein Theme vom Zendesk Marketplace erworben haben, sehen Sie Update-Benachrichtigungen, wenn Entwickler neue Versionen veröffentlichen.

Wichtiger Hinweis für Entwicklerlizenzen: Wenn Sie eine Entwicklerlizenz erworben und den Code bearbeitet haben, können Sie nicht automatisch aktualisieren, ohne Ihre Anpassungen zu verlieren. Der Standard-Workflow besteht darin, das Theme vor dem Anpassen zu duplizieren, wobei das Original für Updates sauber gehalten wird.

So aktualisieren Sie ein Marketplace-Theme:

1. Gehen Sie zu Wissensadministrator > Design anpassen
2. Suchen Sie nach dem Badge "Update verfügbar" auf Ihrem Theme
3. Klicken Sie auf das Optionsmenü und wählen Sie Update verfügbar
4. Überprüfen Sie die Versionshinweise
5. Klicken Sie auf Theme aktualisieren

Wenn Sie das Theme angepasst haben, müssen Sie Ihre Änderungen manuell mit der aktualisierten Version zusammenführen.

Schritt 5: Testen und Bereitstellen Ihres Themes

Stellen Sie niemals ein Theme in der Produktion bereit, ohne es zu testen. Hier ist der richtige Workflow:

Verwenden der Sandbox zum Testen

Zendesk bietet Sandbox-Umgebungen speziell für diesen Zweck. Erstellen und testen Sie Ihr Theme zuerst in der Sandbox und stellen Sie es dann in der Produktion bereit, sobald Sie zuversichtlich sind.

Vorschau vor dem Livegang

Klicken Sie beim Bearbeiten eines Themes auf Vorschau, um Ihre Änderungen in einer Testumgebung anzuzeigen. Beachten Sie, dass Vorschauen nicht alle interaktiven Funktionen unterstützen. Verwenden Sie daher die Sandbox für vollständige Tests.

Festlegen eines Themes als Live-Theme

Wenn Sie bereit sind, bereitzustellen:

1. Suchen Sie auf der Seite Themes das Theme, das Sie aktivieren möchten
2. Klicken Sie auf das Optionsmenü
3. Wählen Sie Als Live-Theme festlegen
4. Bestätigen Sie die Änderung

Ihr neues Theme wird sofort live geschaltet. Es gibt keine Staging-Phase, stellen Sie also sicher, dass Sie gründlich getestet haben.

Testen auf verschiedenen Geräten und Browsern

Überprüfen Sie vor der Bereitstellung, ob Ihr Theme funktioniert auf:

• Desktop (Chrome, Safari, Firefox, Edge)
• Mobile Geräte (iOS und Android)
• Verschiedene Bildschirmgrößen

Ein Theme, das auf Ihrem Laptop großartig aussieht, ist möglicherweise auf dem Handy defekt. Responsives Design ist unerlässlich, da ein erheblicher Teil des Help Center-Traffics von mobilen Geräten stammt.

Rollback-Strategien

Haben Sie immer einen Rollback-Plan. Halten Sie ein als gut bekanntes Backup-Theme bereit, das Sie aktivieren können, falls Probleme auftreten. Dokumentieren Sie die genauen Schritte zum Zurücksetzen, damit Sie es nicht während eines Vorfalls herausfinden müssen.

Häufige Anpassungsszenarien

Hier sind praktische Beispiele dafür, was Teams typischerweise anpassen:

Hinzufügen von benutzerdefiniertem CSS für das Branding:

/* Benutzerdefinierte Button-Formatierung */
.btn-custom {
  background-color: $brand_color;
  border-radius: 4px;
  padding: 12px 24px;
}

Ändern von Artikellayouts: Bearbeiten Sie article_page.hbs, um die Art und Weise zu ändern, wie Artikelinhalte angezeigt werden. Sie können eine Seitenleiste hinzufügen, die Breadcrumb-Position ändern oder verwandte Artikel einfügen.

Hinzufügen von benutzerdefiniertem JavaScript: Verwenden Sie script.js für interaktive Elemente wie Akkordeons, Registerkarten oder das dynamische Laden von Inhalten.

Erstellen von benutzerdefinierten Seiten: In Enterprise-Plänen können Sie benutzerdefinierte Seiten (wie eine Kontaktseite oder FAQ) erstellen und diese von überall in Ihrem Help Center aus verlinken.

Mobile Responsivität: Verwenden Sie CSS-Medienabfragen, um sicherzustellen, dass Ihr Theme auf allen Bildschirmgrößen gut funktioniert. Testen Sie Touch-Ziele (Buttons und Links), um sicherzustellen, dass sie für mobile Benutzer groß genug sind.

Best Practices für die Theme-Verwaltung

Nach der Arbeit mit Dutzenden von Help Centern sind hier die Praktiken, die Kopfschmerzen verhindern:

• Verwenden Sie beschreibende Namenskonventionen. Verwenden Sie anstelle von "Theme v2" "Copenhagen-Custom-Q1-2026" oder "Theme-Holiday-2026". Fügen Sie Versionsnummern und Kontext hinzu.

• Führen Sie ein Änderungsprotokoll. Dokumentieren Sie, was sich in jeder Version ändert, wer sie vorgenommen hat und warum. Dies ist von unschätzbarem Wert, wenn mehrere Personen an Ihrem Help Center arbeiten.

• Testen Sie immer zuerst in der Sandbox. Die Vorschaufunktion ist nützlich, aber die Sandbox bietet Ihnen die vollständige Umgebung für End-to-End-Tests.

• Halten Sie eine Produktionssicherung bereit. Duplizieren Sie vor größeren Änderungen Ihr Live-Theme mit einem mit Datum versehenen Namen.

• Stellen Sie während Zeiten mit geringem Datenverkehr bereit. Selbst bei gründlichen Tests kann sich die Produktion anders verhalten. Stellen Sie bereit, wenn weniger Kunden betroffen sind.

• Dokumentieren Sie benutzerdefinierten Code. Fügen Sie Kommentare hinzu, die erklären, warum Sie bestimmte Änderungen vorgenommen haben. Ihr zukünftiges Ich (oder Ihre Teamkollegen) wird es Ihnen danken.

• Verwenden Sie die Versionskontrolle. Wenn Sie Code-Ebene-Anpassungen vornehmen, verfolgen Sie Änderungen in Git. Es erleichtert die Zusammenarbeit und gibt Ihnen eine vollständige Historie.

Optimieren Sie Ihr Help Center mit eesel AI

Während Sie das Erscheinungsbild Ihres Themes perfektionieren, vergessen Sie nicht den Inhalt darin. Ein schönes Help Center funktioniert nur, wenn Kunden die Antworten finden, die sie benötigen.

Hier können wir helfen. Unser KI-Chatbot lässt sich direkt in Ihr Zendesk Help Center integrieren, um sofortige, genaue Antworten auf Kundenfragen zu geben.

So funktioniert es:

• Wir verbinden uns mit Ihrem Help Center und lernen aus Ihren bestehenden Artikeln
• Kunden erhalten sofortige Antworten, ohne auf einen Agenten warten zu müssen
• Die KI zitiert Quellen, sodass Kunden wissen, woher die Informationen stammen
• Sie können Antworten an Ihre Markensprache anpassen
• Es funktioniert mit jeder Zendesk Guide Theme-Version

Die Kombination ist leistungsstark: ein schönes, benutzerdefiniertes Theme, das Ihre Marke repräsentiert, gepaart mit KI, die die richtigen Inhalte zur richtigen Zeit liefert. Sie kümmern sich um das Design, wir kümmern uns um die intelligente Inhaltsbereitstellung.

Wenn Sie in Ihre Help Center-Erfahrung investieren, sollten Sie überlegen, wie KI Ihre Theme-Anpassungsbemühungen ergänzen kann. Ein gut aussehendes Help Center ist noch besser, wenn Kunden sofort Antworten erhalten können.