So erstellen und passen Sie Zendesk Guide Community-Vorlagen an

Ein gut gestaltetes Community-Forum kann die Art und Weise verändern, wie Kunden mit Ihrer Marke interagieren. Anstatt auf Support-Tickets zu warten, helfen sie sich gegenseitig, tauschen Lösungen aus und bauen Beziehungen auf. Aber um dies zu ermöglichen, benötigen Sie die richtige Grundlage. Hier kommen die Community-Vorlagen von Zendesk Guide ins Spiel.

Dieser Leitfaden führt Sie durch alles, was Sie über das Erstellen und Anpassen von Community-Vorlagen in Zendesk Guide wissen müssen. Egal, ob Sie von Grund auf neu beginnen oder ein bestehendes Setup verfeinern, Sie erlernen die technischen Fähigkeiten und Best Practices, um eine Community aufzubauen, die Ihre Benutzer tatsächlich einbezieht.

Was ist eine Zendesk Guide Community-Vorlage?

Eine Zendesk Guide Community-Vorlage ist eine Layoutdatei, die steuert, wie Ihre Community-Forumsseiten aussehen und funktionieren. Stellen Sie sich dies als den Bauplan für die Benutzeroberfläche Ihrer Community vor. Diese Vorlagen bestimmen, wo Elemente erscheinen, wie Beiträge formatiert werden und auf welche Funktionen Benutzer zugreifen können.

Es ist wichtig, zwischen zwei verwandten Konzepten zu unterscheiden, die oft verwechselt werden:

• Artikelvorlagen sind Inhaltsvorlagen für Wissensdatenbankartikel. Sie bieten eine konsistente Struktur für Ihre Help-Center-Inhalte, wie z. B. standardisierte Überschriften oder Formatierungen.

• Theme-Vorlagen (einschließlich Community-Vorlagen) sind HTML-Layoutdateien, die die visuelle Darstellung von Seiten steuern. Sie verwenden die Curlybars-Templating-Sprache von Zendesk, um Inhalte dynamisch anzuzeigen.

Die Community-Funktionalität von Zendesk heißt Gather. Sie ist in den Suite Team-Plänen und höher enthalten, beginnend bei 55 $ pro Agent und Monat, wenn sie jährlich abgerechnet werden. Der Suite Professional-Plan für 115 $ pro Agent bietet Community-Moderatoren, Inhaltsmoderationswarteschlangen und KI-Spamschutz. Gather ermöglicht Benutzerdiskussionen, Frage- und Antwortforen und Ideenaustausch direkt in Ihrem Help Center.

Warum sind Community-Vorlagen wichtig? Weil die Standardlayouts Sie nur so weit bringen. Mit benutzerdefinierten Vorlagen können Sie:

• Wichtige Community-Inhalte hervorheben
• Visuelle Hierarchien erstellen, die Benutzer führen
• Branding-Elemente hinzufügen, die zu Ihrer Unternehmensidentität passen
• Funktionen implementieren, die die Teilnahme fördern

Während Sie Ihre Community aufbauen, sollten Sie überlegen, wie KI-Tools Ihre Bemühungen ergänzen können. Wir haben festgestellt, dass die Kombination von Community-Foren mit intelligenter Automatisierung Teams hilft, sich wiederholende Fragen zu beantworten, während sich Menschen auf komplexe Diskussionen konzentrieren können, die eine persönliche Note erfordern. Tools wie eesel AI können Diskussionen überwachen, Antworten auf häufig gestellte Fragen vorschlagen und Probleme eskalieren, die menschliche Aufmerksamkeit erfordern.

Community-Vorlagendateien, die Sie kennen müssen

Zendesk Guide verwendet eine Reihe von Handlebars-basierten Vorlagendateien, um Community-Seiten zu rendern. Jede Datei steuert einen bestimmten Seitentyp oder eine bestimmte Ansicht. Hier sind die wichtigsten Vorlagen, mit denen Sie arbeiten werden:

Diese Vorlagen arbeiten zusammen, um ein zusammenhängendes Community-Erlebnis zu schaffen. Wenn ein Benutzer von der Themenliste zu einem bestimmten Beitrag navigiert, wechselt er von community_topic_page.hbs zu community_post_page.hbs, wobei jede Vorlage ihren Teil der Anzeige übernimmt. Weitere Informationen finden Sie in der Zendesk-Dokumentation zu Community-Vorlagen.

Um auf diese Vorlagen zuzugreifen und sie zu bearbeiten, benötigen Sie Guide-Administratorberechtigungen. Navigieren Sie zu Guide-Admin und klicken Sie dann auf das Symbol Design anpassen. Von dort aus können Sie die Vorlagendateien Ihres Themes direkt bearbeiten. Detaillierte Dokumentationen finden Sie im Zendesk-Leitfaden zum Anpassen von Help-Center-Themes.

Der Theme-Editor zeigt alle verfügbaren Vorlagen in einer Seitenleiste an. Klicken Sie auf einen beliebigen Vorlagennamen, um ihn im Code-Editor zu öffnen. Sie sehen das Curlybars-Markup, das die Seitenstruktur steuert. Änderungen, die Sie hier vornehmen, wirken sich darauf aus, wie die Community für Endbenutzer angezeigt wird.

Erste Schritte mit Curlybars-Templating

Curlybars ist die Templating-Sprache von Zendesk, die auf Handlebars.js basiert. Sie verwendet doppelte geschweifte Klammern, um dynamische Inhalte in Ihre Vorlagen einzufügen. Wenn Sie mit anderen Templating-Systemen gearbeitet haben, wird Ihnen die Syntax vertraut vorkommen. Die vollständige Dokumentation finden Sie in der Curlybars-Referenz von Zendesk.

Hier ist die grundlegende Syntax, die Sie kennen müssen:

• Variablen: {{property}} fügt einen Wert ein
• Bedingungen: {{#if condition}}...{{/if}} zeigt Inhalte nur an, wenn eine Bedingung wahr ist
• Schleifen: {{#each items}}...{{/each}} wiederholt Inhalte für jedes Element in einer Liste
• Kommentare: {{! Dies ist ein Kommentar }} fügt Notizen hinzu, die nicht gerendert werden

Community-Vorlagen haben Zugriff auf bestimmte Eigenschaften, die Beitrags-, Themen- und Benutzerdaten enthalten. Hier sind die am häufigsten verwendeten:

Curlybars bietet auch Helfer für gängige Aufgaben:

• {{excerpt post.body length=100}} kürzt Inhalte auf eine bestimmte Länge
• {{date post.created_at format='short'}} formatiert Datumsangaben konsistent
• {{link 'new_post' role='button'}} generiert URLs zu bestimmten Seiten

Hier ist ein praktisches Beispiel. Dieser Code zeigt eine Liste der letzten Community-Beiträge mit Auszügen an:

{{#each posts}}
  <div class="post-preview">
    <h3><a href="{{url}}">{{title}}</a></h3>
    <p class="meta">Von {{author.name}} am {{date created_at}}</p>
    <p>{{excerpt body length=150}}</p>
  </div>
{{/each}}

Die {{#each posts}}-Schleife durchläuft die verfügbaren Beiträge. Für jeden Beitrag gibt sie den Titel als Link, den Namen des Autors, das Erstellungsdatum und einen 150-Zeichen-Auszug des Inhalts aus.

Das Verständnis dieser Grundlagen gibt Ihnen die Grundlage, um jede Community-Vorlage anzupassen. Der Schlüssel liegt darin, zu wissen, welche Eigenschaften für jeden Vorlagentyp verfügbar sind und wie Sie die Logik strukturieren, um sie effektiv anzuzeigen.

Anpassen Ihrer Community-Themenseiten-Vorlage

Die Themenseite ist oft die erste Community-Ansicht, die Ihre Benutzer sehen. Sie zeigt alle Beiträge innerhalb einer bestimmten Kategorie an und ist somit ein kritischer Berührungspunkt für die Interaktion. Lassen Sie uns Schritt für Schritt durch die Anpassung von community_topic_page.hbs gehen.

Schritt 1: Zugriff auf den Theme-Editor

Klicken Sie in Guide-Admin auf das Symbol Design anpassen und wählen Sie dann das Theme aus, das Sie bearbeiten möchten. Dadurch wird der Vorlagen-Editor geöffnet, in dem Sie alle Theme-Dateien ändern können.

Schritt 2: Suchen und öffnen Sie community_topic_page.hbs

Suchen Sie die Datei in der Vorlagenliste auf der linken Seite des Editors. Klicken Sie darauf, um die Codeansicht zu öffnen. Sie sehen die Standardvorlagenstruktur, die Abschnitte für die Themenüberschrift, die Beitragsliste und die Paginierung enthält.

Schritt 3: Verstehen Sie die Standardstruktur

Die Standardvorlage enthält in der Regel:

• Einen Überschriftenabschnitt mit dem Namen und der Beschreibung des Themas
• Eine Schaltfläche "Neuer Beitrag"
• Eine Liste von Beiträgen mit Titeln, Autoren und Metadaten
• Paginierungssteuerelemente zum Navigieren zwischen Seiten

Nehmen Sie sich Zeit, den vorhandenen Code zu lesen, bevor Sie Änderungen vornehmen. Wenn Sie verstehen, was bereits vorhanden ist, können Sie die Funktionalität ändern, anstatt sie zu beschädigen.

Schritt 4: Hinzufügen von benutzerdefinierten Elementen

Jetzt können Sie die Seite verbessern. Häufige Ergänzungen sind:

• Themenbanner: Fügen Sie eine visuelle Kopfzeile mit der Themenbeschreibung hinzu
• Hervorgehobene Beiträge: Heben Sie wichtige oder beliebte Diskussionen hervor
• Aufforderungen zum Abonnieren: Ermutigen Sie Benutzer, dem Thema zu folgen

Hier ist ein Beispiel für das Hinzufügen einer formatierten Themenüberschrift:

<div class="topic-header">
  <h1>{{topic.name}}</h1>
  {{#if topic.description}}
    <p class="topic-description">{{topic.description}}</p>
  {{/if}}
</div>

Schritt 5: Formatieren mit CSS-Variablen

Zendesk-Themes unterstützen CSS-benutzerdefinierte Eigenschaften (Variablen) für eine konsistente Formatierung. Definieren Sie Ihre Farben, Abstände und Typografie im CSS des Themes und verweisen Sie dann in Ihren Vorlagen darauf:

.topic-header {
  background: var(--brand-color);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
}

Schritt 6: Vorschau und Veröffentlichung von Änderungen

Bevor Sie live gehen, verwenden Sie die Vorschaufunktion, um zu sehen, wie Ihre Änderungen mit echten Daten aussehen. Der Vorschaumodus zeigt Ihre Community mit tatsächlichen Beiträgen und Themen an, sodass Sie überprüfen können, ob alles korrekt gerendert wird. Wenn Sie zufrieden sind, klicken Sie auf Veröffentlichen, um die Änderungen live zu schalten.

Weitere Anpassungen, die Sie in Betracht ziehen sollten:

• Benutzerreputationsabzeichen: Zeigen Sie Top-Beitragende oder verifizierte Experten an
• Benutzerdefinierte Beitragslayouts: Ändern Sie, wie Beitragsmetadaten angezeigt werden
• Themenspezifische Formatierung: Wenden Sie verschiedene Designs auf verschiedene Community-Bereiche an

Erstellen einer benutzerdefinierten Community-Beitragsseite

Die einzelne Beitragsseite (community_post_page.hbs) ist der Ort, an dem das eigentliche Gespräch stattfindet. Diese Vorlage muss den Beitragsinhalt, Kommentare, Abstimmungen und Benutzerinteraktionen verarbeiten. Sehen wir uns an, wie Sie sie effektiv anpassen können.

Die Standardvorlagenstruktur umfasst:

• Beitragsüberschrift mit Titel- und Autoreninformationen
• Inhalt des Beitrags
• Abstimmungssteuerelemente (Upvote/Downvote)
• Kommentar-Thread
• Antwortformular

Um die Kommentaransicht anzupassen, können Sie ändern, wie Autoreninformationen angezeigt werden, oder eine visuelle Unterscheidung zwischen Kommentarebenen hinzufügen. Hier ist ein Beispiel für einen formatierten Kommentar:

<div class="comment {{#if official}}comment-official{{/if}}">
  <div class="comment-author">
    <img src="{{author.avatar_url}}" alt="" class="avatar">
    <span class="author-name">{{author.name}}</span>
    {{#if author.badges}}
      <span class="badges">
        {{#each author.badges}}
          <span class="badge">{{name}}</span>
        {{/each}}
      </span>
    {{/if}}
  </div>
  <div class="comment-body">
    {{body}}
  </div>
  <div class="comment-actions">
    {{vote 'up' role='button'}}
    {{vote 'down' role='button'}}
    {{subscribe role='button'}}
  </div>
</div>

Dies fügt Autorenabzeichen hinzu und organisiert den Kommentar in übersichtliche Abschnitte. Die {{#if official}}-Bedingung wendet eine spezielle Formatierung auf offizielle Antworten Ihres Teams an.

Für Abstimmungs- und Bewertungsfunktionen bietet Zendesk integrierte Helfer. Der {{vote}}-Helfer erstellt Upvote/Downvote-Schaltflächen, die die Interaktion automatisch verarbeiten. Sie können diese mit CSS formatieren, um sie an Ihr Design anzupassen.

Wenn Sie @mentions und Benutzer-Tagging implementieren, müssen Sie zusätzlich zu Vorlagen mit JavaScript arbeiten. Die Templating-Ebene verarbeitet die Anzeige, aber die Interaktionslogik befindet sich in den JavaScript-Dateien Ihres Themes.

Mobile Reaktionsfähigkeit ist für Community-Seiten von entscheidender Bedeutung. Viele Benutzer greifen von ihren Telefonen aus auf Foren zu, daher sollten Ihre Vorlagen flexible Layouts verwenden, die sich an die Bildschirmgröße anpassen. Verwenden Sie CSS Grid oder Flexbox für Beitragslisten und stellen Sie sicher, dass die Berührungsziele (Schaltflächen, Links) groß genug für die mobile Interaktion sind.

Hier ist ein Beispiel für ein responsives Beitragslayout:

<article class="post">
  <header class="post-header">
    <h1>{{post.title}}</h1>
    <div class="post-meta">
      <img src="{{post.author.avatar_url}}" alt="" class="avatar">
      <span>{{post.author.name}}</span>
      <time datetime="{{post.created_at}}">{{date post.created_at}}</time>
    </div>
  </header>
  <div class="post-content">
    {{post.body}}
  </div>
</article>

Mit dem entsprechenden CSS wird dies auf Mobilgeräten vertikal gestapelt und auf größeren Bildschirmen zu einem komplexeren Layout erweitert.

Best Practices für das Community-Vorlagendesign

Das Erstellen effektiver Community-Vorlagen erfordert mehr als nur technisches Wissen. Sie müssen für Benutzerinteraktion, Barrierefreiheit und Leistung entwerfen. Hier sind die Praktiken, die wir als am wertvollsten empfunden haben.

Mobile-First-Designprinzipien

Beginnen Sie Ihr Design mit mobilen Layouts und erweitern Sie es dann für größere Bildschirme. Dies stellt sicher, dass die Kernfunktionalität überall funktioniert. Community-Benutzer überprüfen Diskussionen oft auf ihren Telefonen, daher ist die mobile Optimierung nicht optional.

• Verwenden Sie relative Einheiten (rem, em) anstelle von festen Pixeln
• Testen Sie Touch-Interaktionen auf tatsächlichen Geräten
• Stellen Sie sicher, dass der Text auch bei kleinen Größen lesbar bleibt
• Halten Sie die Navigation mit den Daumen zugänglich

Barrierefreiheitsüberlegungen

Ihre Community sollte für alle funktionieren. Befolgen Sie die WCAG-Richtlinien, um sicherzustellen, dass Benutzer mit Behinderungen uneingeschränkt teilnehmen können.

• Verwenden Sie semantische HTML-Elemente (article, nav, button)
• Fügen Sie allen Bildern Alt-Text hinzu
• Stellen Sie sicher, dass der Farbkontrast die AA-Standards erfüllt
• Unterstützen Sie die Tastaturnavigation
• Testen Sie mit Screenreadern

Leistungsoptimierung

Langsam ladende Seiten töten das Engagement. Optimieren Sie Ihre Vorlagen für Geschwindigkeit:

• Minimieren Sie CSS und JavaScript
• Verwenden Sie effiziente Curlybars-Abfragen
• Lazy-Load-Bilder unterhalb der Falte
• Begrenzen Sie die Anzahl der Beiträge, die pro Seite angezeigt werden

Konsistentes Branding

Ihre Community sollte sich wie ein Teil Ihres Produkts anfühlen, nicht wie ein nachträglicher Einfall. Wenden Sie Ihre Markenfarben, Typografie und Stimme in den Vorlagen an. Dies schafft Vertrauen und stärkt Ihre Identität.

Funktionen zur Benutzerinteraktion

Entwerfen Sie Vorlagen, die die Teilnahme fördern:

• Machen Sie die Schaltfläche "Neuer Beitrag" gut sichtbar
• Zeigen Sie verwandte Beiträge an, um Benutzer zum Stöbern zu bewegen
• Heben Sie unbeantwortete Fragen hervor
• Zeigen Sie die Benutzerreputation an, um Beiträge zu motivieren

Integration von Moderationstools

Die Gesundheit der Community erfordert Moderation. Stellen Sie sicher, dass Ihre Vorlagen Folgendes unterstützen:

• Melden unangemessener Inhalte
• Ausblenden von Beiträgen, die auf Überprüfung warten
• Anzeigen von Moderatorenabzeichen
• Anzeigen von Community-Richtlinien

Wenn Ihre Community wächst, wird die Verwaltung komplexer. Wir haben gesehen, dass Teams von der Hinzufügung KI-gestützter Unterstützung profitieren, um routinemäßige Moderationsaufgaben zu erledigen. eesel AI kann Diskussionen überwachen, Antworten auf häufig gestellte Fragen vorschlagen und Probleme eskalieren, die menschliche Aufmerksamkeit erfordern. Dies ermöglicht es Ihrem Team, sich auf den Aufbau von Beziehungen zu konzentrieren, anstatt Spam zu jagen.

Theme-Optionen von Drittanbietern für Communities

Das Erstellen benutzerdefinierter Vorlagen von Grund auf ist nicht immer der beste Ansatz. Manchmal ist der Kauf eines vorgefertigten Themes sinnvoller, insbesondere wenn Sie schnell professionelle Ergebnisse benötigen.

Hier ist ein Vergleich der führenden Anbieter:

Wann Sie Premium-Themes in Betracht ziehen sollten:

• Sie benötigen schnell Ergebnisse ohne Entwicklungszeit
• Ihrem Team fehlt das Fachwissen in der Front-End-Entwicklung
• Sie wünschen sich ein professionelles Design, ohne einen Designer einzustellen
• Sie benötigen Funktionen, deren Erstellung Wochen dauern würde

Vorteile gekaufter Themes:

• Sofortiges professionelles Erscheinungsbild
• Getesteter, fehlerfreier Code
• Regelmäßige Updates und Support
• Oft enthalten Community-spezifische Funktionen

Nachteile gekaufter Themes:

• Weniger Flexibilität als bei benutzerdefinierten Builds
• Möglicherweise sind Workarounds für einzigartige Anforderungen erforderlich
• Laufende Kosten für Updates oder Support
• Risiko, dass es anderen Websites ähnelt, die dasselbe Theme verwenden

Migrationsüberlegungen:

Der Wechsel von Themes erfordert Planung. Dokumentieren Sie Ihre aktuellen Anpassungen vor der Migration. Überprüfen Sie, ob Ihre vorhandenen Inhalte im neuen Theme korrekt angezeigt werden. Die meisten Anbieter bieten Migrationsunterstützung oder Dokumentation an, um den Übergang zu erleichtern.

Beginnen Sie noch heute mit dem Aufbau Ihrer Zendesk-Community

Sie verfügen nun über das Wissen, um Zendesk Guide Community-Vorlagen zu erstellen und anzupassen. Lassen Sie uns die wichtigsten Schritte zusammenfassen:

1. Verstehen Sie den Unterschied zwischen Artikelvorlagen und Theme-Vorlagen
2. Machen Sie sich mit den sieben wichtigsten Community-Vorlagendateien vertraut
3. Erlernen Sie die Curlybars-Syntax für dynamische Inhalte
4. Passen Sie Themen- und Beitragsseiten an Ihre Bedürfnisse an
5. Wenden Sie Best Practices für Mobilgeräte, Barrierefreiheit und Leistung an
6. Erwägen Sie Themes von Drittanbietern, wenn eine benutzerdefinierte Entwicklung nicht möglich ist

Die besten Communities entwickeln sich im Laufe der Zeit weiter. Beginnen Sie mit den Grundlagen, sammeln Sie Feedback von Ihren Benutzern und iterieren Sie Ihr Design. Achten Sie darauf, welche Themen das meiste Engagement erzeugen, und passen Sie Ihre Vorlagen an, um diese Inhalte hervorzuheben.

Während Sie Ihre Community aufbauen, sollten Sie darüber nachdenken, wie Automatisierung Ihre Ziele unterstützen kann. eesel AI arbeitet neben Community-Foren, beantwortet Routinefragen und leitet komplexe Probleme an die richtigen Personen weiter. Wenn Sie Ihren Community-Support skalieren möchten, ohne Ihr Team zu vergrößern, testen Sie eesel AI kostenlos und sehen Sie, wie es Ihr Zendesk-Setup ergänzt.