zendesk-guide-community-template

eesel Team
Written by

eesel Team

Last edited 25 fevereiro 2026

{
  "title": "Como criar e personalizar templates da comunidade do Zendesk Guide",
  "slug": "zendesk-guide-community-template",
  "locale": "pt",
  "date": "2026-02-25",
  "updated": "2026-02-25",
  "template": "default",
  "excerpt": "Um guia completo para templates da comunidade do Zendesk Guide, cobrindo arquivos de template, personalização com Curlybars e as melhores práticas para construir fóruns de comunidade envolventes.",
  "categories": [
    "Zendesk",
    "Guides"
  ],
  "tags": [
    "Zendesk Guide",
    "Community Templates",
    "Help Center",
    "Curlybars",
    "Customer Support"
  ],
  "readTime": 13,
  "author": 16,
  "reviewer": 14,
  "seo": {
    "title": "Como criar e personalizar templates da comunidade do Zendesk Guide",
    "description": "Um guia completo para templates da comunidade do Zendesk Guide, cobrindo arquivos de template, personalização com Curlybars e as melhores práticas para construir fóruns de comunidade envolventes.",
    "image": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-7072008a-2d12-45a7-8ae1-636370d73201"
  },
  "coverImage": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-7072008a-2d12-45a7-8ae1-636370d73201",
  "coverImageAlt": "Imagem do banner para Como criar e personalizar templates da comunidade do Zendesk Guide",
  "coverImageWidth": 1920,
  "coverImageHeight": 1080,
  "faqs": {
    "heading": "Perguntas Frequentes",
    "type": "blog",
    "answerType": "html",
    "faqs": [
      {
        "question": "Você precisa de habilidades de programação para personalizar os templates da comunidade do Zendesk Guide?",
        "answer": "Personalizações básicas como cores e fontes podem ser feitas através das configurações do tema sem programação. No entanto, modificar arquivos de template requer conhecimento de HTML, CSS e sintaxe Curlybars. Para mudanças complexas, você pode querer trabalhar com um desenvolvedor ou considerar um tema de terceiros."
      },
      {
        "question": "Qual é a diferença entre um template da comunidade do Zendesk Guide e um template de artigo?",
        "answer": "Um template da comunidade controla o layout das páginas do fórum, como listagens de tópicos e threads de discussão. Um template de artigo controla a estrutura dos artigos da base de conhecimento. Eles servem a propósitos diferentes e usam arquivos diferentes dentro do seu tema."
      },
      {
        "question": "Você pode usar os templates da comunidade do Zendesk Guide em qualquer plano de preços?",
        "answer": "Os recursos da comunidade exigem um plano Suite Team ou superior, a partir de US$ 55 por agente por mês cobrados anualmente. O plano Support Team (US$ 19/agente) não inclui a funcionalidade da comunidade. Os recursos de personalização de tema também variam de acordo com o nível do plano."
      },
      {
        "question": "Como você visualiza as mudanças nos templates da comunidade antes de publicar?",
        "answer": "No editor de temas do Guide, clique no botão Visualizar para ver suas mudanças com dados reais. Isso mostra exatamente como sua comunidade será exibida para os usuários. Quando estiver satisfeito, clique em Publicar para tornar as mudanças visíveis."
      },
      {
        "question": "O que é Curlybars e por que é usado nos templates da comunidade do Zendesk Guide?",
        "answer": "Curlybars é a linguagem de template da Zendesk, baseada em Handlebars.js. Ela usa chaves duplas para inserir conteúdo dinâmico nos templates. Você a usa para exibir títulos de posts, nomes de autores, comentários e outros dados da comunidade que mudam com base no que o usuário está visualizando."
      },
      {
        "question": "Os temas de terceiros do Zendesk valem o investimento para a personalização da comunidade?",
        "answer": "Temas de terceiros podem valer a pena se você precisar de resultados profissionais rapidamente e não tiver recursos de desenvolvimento. Provedores como Lotus Themes e Zenplates oferecem temas testados e ricos em recursos a partir de cerca de US$ 299 a US$ 489. Considere seu cronograma, orçamento e necessidades de personalização ao decidir."
      }
    ],
    "supportLink": null
  }
}
---

Um fórum da comunidade bem projetado pode transformar a forma como os clientes interagem com sua marca. Em vez de esperar por tickets de suporte, eles se ajudam, compartilham soluções e constroem relacionamentos. Mas para que isso aconteça, você precisa da base certa. É aí que entram os templates da comunidade do [Zendesk Guide](https://www.zendesk.com/guide/).

Este guia orienta você em tudo o que você precisa saber sobre como criar e personalizar templates da comunidade no Zendesk Guide. Esteja você começando do zero ou refinando uma configuração existente, você aprenderá as habilidades técnicas e as melhores práticas para construir uma comunidade que realmente envolva seus usuários.

![Página inicial do Zendesk Guide mostrando a base de conhecimento e os recursos da comunidade](https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/screenshots/zendesk-landing-page.png)

## O que é um template da comunidade do Zendesk Guide?

Um template da comunidade do Zendesk Guide é um arquivo de layout que controla a aparência e o funcionamento das páginas do seu fórum da comunidade. Pense nisso como o projeto da interface do usuário da sua comunidade. Esses templates determinam onde os elementos aparecem, como os posts são formatados e quais recursos os usuários podem acessar.

É importante distinguir entre dois conceitos relacionados que muitas vezes são confundidos:

- **Templates de artigos** são templates de conteúdo para artigos da base de conhecimento. Eles fornecem uma estrutura consistente para o conteúdo da sua central de ajuda, como cabeçalhos ou formatação padronizados.

- **Templates de tema** (incluindo templates da comunidade) são arquivos de layout HTML que controlam a apresentação visual das páginas. Eles usam a linguagem de template Curlybars da Zendesk para exibir conteúdo dinamicamente.

A funcionalidade da comunidade do Zendesk é chamada de **Gather**. Ela está incluída nos planos Suite Team e superiores, a partir de [US$ 55 por agente por mês](https://www.zendesk.com/pricing/) quando cobrado anualmente. O [plano Suite Professional](https://www.zendesk.com/pricing/) por US$ 115 por agente adiciona moderadores da comunidade, filas de moderação de conteúdo e proteção contra spam por IA. O Gather permite discussões de usuários, fóruns de perguntas e respostas e trocas de ideias diretamente dentro da sua central de ajuda.

Por que os templates da comunidade são importantes? Porque os layouts padrão só te levam até certo ponto. Templates personalizados permitem que você:

- Destaque o conteúdo importante da comunidade
- Crie hierarquias visuais que guiem os usuários
- Adicione elementos de branding que correspondam à identidade da sua empresa
- Implemente recursos que incentivem a participação

Enquanto você está construindo sua comunidade, considere como as ferramentas de IA podem complementar seus esforços. Descobrimos que combinar fóruns da comunidade com automação inteligente ajuda as equipes a lidar com perguntas repetitivas, permitindo que os humanos se concentrem em discussões complexas que precisam de um toque pessoal. Ferramentas como [eesel AI](https://www.eesel.ai/) podem monitorar discussões, sugerir respostas para perguntas comuns e escalar problemas que precisam de atenção humana.

## Arquivos de template da comunidade que você precisa conhecer

O Zendesk Guide usa um conjunto de arquivos de template baseados em Handlebars para renderizar páginas da comunidade. Cada arquivo controla um tipo de página ou visualização específica. Aqui estão os principais templates com os quais você trabalhará:

| Arquivo de Template | Propósito |
|--------------|---------|
| `community_post_list_page.hbs` | Lista todos os posts da comunidade em todos os tópicos |
| `community_post_page.hbs` | Exibe posts individuais com comentários |
| `community_topic_list_page.hbs` | Mostra os tópicos/categorias disponíveis |
| `community_topic_page.hbs` | Exibe posts dentro de um tópico específico |
| `new_community_post_page.hbs` | O formulário para criar novos posts |
| `contributions_page.hbs` | Mostra a atividade e as contribuições do usuário |
| `user_profile_page.hbs` | Páginas de perfil de membros da comunidade |

Esses templates trabalham juntos para criar uma experiência de comunidade coesa. Quando um usuário navega da lista de tópicos para um post específico, ele se move de `community_topic_page.hbs` para `community_post_page.hbs`, com cada template lidando com sua parte da exibição. Você pode aprender mais na [documentação de templates da comunidade da Zendesk](https://support.zendesk.com/hc/en-us/articles/4408839332250).

Para acessar e editar esses templates, você precisa de permissões de administrador do Guide. Navegue até o administrador do Guide e clique no ícone Personalizar design. A partir daí, você pode editar os arquivos de template do seu tema diretamente. Para obter documentação detalhada, consulte [o guia da Zendesk para personalizar temas da central de ajuda](https://support.zendesk.com/hc/en-us/articles/4408839332250).

![Editor de temas do Zendesk Guide com arquivos de template e opções de edição de código](https://zen-marketing-documentation.s3.us-west-1.amazonaws.com/docs/en/guide_themes_edit_code_btn.png)

O editor de temas mostra todos os templates disponíveis em uma barra lateral. Clique em qualquer nome de template para abri-lo no editor de código. Você verá a marcação Curlybars que controla a estrutura da página. As alterações que você fizer aqui afetam a forma como a comunidade aparece para os usuários finais.

## Começando com o template Curlybars

Curlybars é a linguagem de template da Zendesk, construída em [Handlebars.js](https://handlebarsjs.com/). Ela usa chaves duplas para inserir conteúdo dinâmico em seus templates. Se você já trabalhou com outros sistemas de template, a sintaxe parecerá familiar. Para obter documentação completa, consulte [a referência Curlybars da Zendesk](https://support.zendesk.com/hc/en-us/articles/4408824571674).

Aqui está a sintaxe básica que você precisa conhecer:

- **Variáveis:** `{{property}}` insere um valor
- **Condicionais:** `{{#if condition}}...{{/if}}` mostra o conteúdo apenas quando uma condição é verdadeira
- **Loops:** `{{#each items}}...{{/each}}` repete o conteúdo para cada item em uma lista
- **Comentários:** `{{! This is a comment }}` adiciona notas que não são renderizadas

Os templates da comunidade têm acesso a propriedades específicas que contêm dados de posts, tópicos e usuários. Aqui estão os mais comumente usados:

| Propriedade | O que ela contém |
|----------|------------------|
| `post.title` | O título do post |
| `post.body` | O conteúdo do post |
| `post.author.name` | Nome de usuário da pessoa que criou o post |
| `post.author.avatar_url` | URL para a imagem de perfil do autor |
| `topic.name` | O nome do tópico/categoria |
| `topic.description` | Texto da descrição do tópico |
| `user.name` | Nome do usuário atual |
| `user.avatar_url` | Avatar do usuário atual |

Curlybars também fornece helpers para tarefas comuns:

- `{{excerpt post.body length=100}}` trunca o conteúdo para um comprimento especificado
- `{{date post.created_at format='short'}}` formata datas de forma consistente
- `{{link 'new_post' role='button'}}` gera URLs para páginas específicas

Aqui está um exemplo prático. Este código exibe uma lista de posts recentes da comunidade com trechos:

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

O loop {{#each posts}} itera através dos posts disponíveis. Para cada um, ele exibe o título como um link, o nome do autor, a data de criação e um trecho de 150 caracteres do conteúdo.

Exemplo de código Curlybars mostrando renderização condicional com instruções if e unless
Exemplo de código Curlybars mostrando renderização condicional com instruções if e unless

Entender esses fundamentos te dá a base para personalizar qualquer template da comunidade. A chave é saber quais propriedades estão disponíveis para cada tipo de template e como estruturar a lógica para exibi-las de forma eficaz.

Personalizando o template da página de tópico da sua comunidade

A página de tópico é frequentemente a primeira visualização da comunidade que seus usuários veem. Ela mostra todos os posts dentro de uma categoria específica, tornando-se um ponto de contato crítico para o engajamento. Vamos percorrer a personalização de community_topic_page.hbs passo a passo.

Passo 1: Acesse o editor de temas

No administrador do Guide, clique no ícone Personalizar design e selecione o tema que você deseja editar. Isso abre o editor de templates onde você pode modificar todos os arquivos de tema.

Passo 2: Localize e abra community_topic_page.hbs

Encontre o arquivo na lista de templates no lado esquerdo do editor. Clique nele para abrir a visualização de código. Você verá a estrutura de template padrão, que inclui seções para o cabeçalho do tópico, lista de posts e paginação.

Passo 3: Entenda a estrutura padrão

O template padrão normalmente inclui:

  • Uma seção de cabeçalho com o nome e a descrição do tópico
  • Um botão "Novo Post"
  • Uma lista de posts com títulos, autores e metadados
  • Controles de paginação para navegar entre as páginas

Reserve um tempo para ler o código existente antes de fazer alterações. Entender o que já está lá ajuda você a modificar em vez de quebrar a funcionalidade.

Passo 4: Adicione elementos personalizados

Agora você pode aprimorar a página. Adições comuns incluem:

  • Banners de tópico: Adicione um cabeçalho visual com a descrição do tópico
  • Posts em destaque: Destaque discussões importantes ou populares
  • Prompts de assinatura: Incentive os usuários a seguir o tópico

Aqui está um exemplo de como adicionar um cabeçalho de tópico estilizado:

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

Passo 5: Estilize com variáveis CSS

Os temas do Zendesk suportam propriedades personalizadas CSS (variáveis) para um estilo consistente. Defina suas cores, espaçamento e tipografia no CSS do tema e, em seguida, faça referência a eles em seus templates:

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

Passo 6: Visualize e publique as alterações

Antes de entrar no ar, use a função de visualização para ver como suas alterações ficam com dados reais. O modo de visualização mostra sua comunidade com posts e tópicos reais, para que você possa verificar se tudo é renderizado corretamente. Quando estiver satisfeito, clique em Publicar para tornar as alterações visíveis.

Dropdown de seleção de template mostrando opções de produto padrão e de categoria
Dropdown de seleção de template mostrando opções de produto padrão e de categoria

Outras personalizações a serem consideradas:

  • Badges de reputação do usuário: Mostre os principais colaboradores ou especialistas verificados
  • Layouts de post personalizados: Altere como os metadados do post são exibidos
  • Estilo específico do tópico: Aplique designs diferentes a diferentes seções da comunidade

Construindo uma página de post da comunidade personalizada

A página de post individual (community_post_page.hbs) é onde a conversa real acontece. Este template precisa lidar com o conteúdo do post, comentários, votação e interações do usuário. Vamos ver como personalizá-lo de forma eficaz.

A estrutura de template padrão inclui:

  • Cabeçalho do post com título e informações do autor
  • Conteúdo do corpo do post
  • Controles de votação (votar para cima/votar para baixo)
  • Thread de comentários
  • Formulário de resposta

Para personalizar a exibição de comentários, você pode querer alterar a forma como as informações do autor aparecem ou adicionar distinção visual entre os níveis de comentários. Aqui está um exemplo de um comentário estilizado:

<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>

Isso adiciona badges de autor e organiza o comentário em seções claras. A condicional {{#if official}} aplica um estilo especial às respostas oficiais da sua equipe.

Para a funcionalidade de votação e classificação, o Zendesk fornece helpers integrados. O helper {{vote}} cria botões de votar para cima/votar para baixo que lidam automaticamente com a interação. Você pode estilizá-los com CSS para corresponder ao seu design.

Ao implementar @menções e marcação de usuários, você precisará trabalhar com JavaScript além dos templates. A camada de template lida com a exibição, mas a lógica de interação reside nos arquivos JavaScript do seu tema.

A capacidade de resposta móvel é crucial para as páginas da comunidade. Muitos usuários acessam fóruns de seus telefones, então seus templates devem usar layouts flexíveis que se adaptem ao tamanho da tela. Use CSS Grid ou Flexbox para listagens de posts e certifique-se de que os alvos de toque (botões, links) sejam grandes o suficiente para a interação móvel.

Aqui está um exemplo de layout de post responsivo:

<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>

Com CSS apropriado, isso empilha verticalmente no celular e se expande para um layout mais complexo em telas maiores.

Melhores práticas para design de template da comunidade

Criar templates de comunidade eficazes requer mais do que apenas conhecimento técnico. Você precisa projetar para engajamento do usuário, acessibilidade e desempenho. Aqui estão as práticas que consideramos mais valiosas.

Princípios de design mobile-first

Comece seu design com layouts móveis e, em seguida, expanda para telas maiores. Isso garante que a experiência principal funcione em todos os lugares. Os usuários da comunidade geralmente verificam as discussões em seus telefones, então a otimização móvel não é opcional.

  • Use unidades relativas (rem, em) em vez de pixels fixos
  • Teste as interações de toque em dispositivos reais
  • Certifique-se de que o texto permaneça legível em tamanhos pequenos
  • Mantenha a navegação acessível com os polegares

Considerações de acessibilidade

Sua comunidade deve funcionar para todos. Siga as diretrizes WCAG para garantir que os usuários com deficiência possam participar plenamente.

  • Use elementos HTML semânticos (article, nav, button)
  • Adicione texto alternativo a todas as imagens
  • Certifique-se de que o contraste de cores atenda aos padrões AA
  • Suporte a navegação por teclado
  • Teste com leitores de tela

Otimização de desempenho

Páginas de carregamento lento matam o engajamento. Otimize seus templates para velocidade:

  • Minimize CSS e JavaScript
  • Use consultas Curlybars eficientes
  • Carregue imagens abaixo da dobra de forma lenta
  • Limite o número de posts mostrados por página

Branding consistente

Sua comunidade deve parecer parte do seu produto, não uma reflexão tardia. Aplique as cores, tipografia e voz da sua marca em todos os templates. Isso constrói confiança e reforça sua identidade.

Recursos de engajamento do usuário

Projete templates que incentivem a participação:

  • Torne o botão "Novo Post" proeminente
  • Mostre posts relacionados para manter os usuários navegando
  • Destaque perguntas não respondidas
  • Exiba a reputação do usuário para motivar as contribuições

Integração de ferramentas de moderação

A saúde da comunidade requer moderação. Certifique-se de que seus templates suportem:

  • Sinalização de conteúdo inadequado
  • Ocultação de posts pendentes de revisão
  • Exibição de badges de moderador
  • Exibição de diretrizes da comunidade

Arquitetura de template da comunidade mostrando como os arquivos interagem para uma navegação perfeita
Arquitetura de template da comunidade mostrando como os arquivos interagem para uma navegação perfeita

À medida que sua comunidade cresce, gerenciá-la se torna mais complexo. Vimos equipes se beneficiarem da adição de assistência alimentada por IA para lidar com tarefas de moderação de rotina. eesel AI pode monitorar discussões, sugerir respostas para perguntas comuns e escalar problemas que precisam de atenção humana. Isso permite que sua equipe se concentre na construção de relacionamentos em vez de perseguir spam.

Opções de tema de terceiros para comunidades

Construir templates personalizados do zero nem sempre é a melhor abordagem. Às vezes, comprar um tema pré-construído faz mais sentido, especialmente se você precisar de resultados profissionais rapidamente.

Veja como os principais provedores se comparam:

ProvedorPreço InicialPonto Forte Principal
Lotus ThemesUS$ 299Histórico comprovado com mais de 5.800 clientes
ZenplatesUS$ 489Ampla personalização sem codificação
DizianaUS$ 299Opções econômicas

Comparação de provedores de temas Zendesk de terceiros e opções de preços
Comparação de provedores de temas Zendesk de terceiros e opções de preços

Quando considerar temas premium:

  • Você precisa de resultados rapidamente sem tempo de desenvolvimento
  • Sua equipe não tem experiência em desenvolvimento front-end
  • Você quer um design profissional sem contratar um designer
  • Você precisa de recursos que levariam semanas para construir você mesmo

Prós de temas comprados:

  • Aparência profissional imediata
  • Código testado e livre de bugs
  • Atualizações e suporte regulares
  • Muitas vezes incluem recursos específicos da comunidade

Contras de temas comprados:

  • Menos flexibilidade do que construções personalizadas
  • Pode exigir soluções alternativas para necessidades exclusivas
  • Custos contínuos para atualizações ou suporte
  • Risco de parecer semelhante a outros sites que usam o mesmo tema

Considerações de migração:

Mudar de tema requer planejamento. Documente suas personalizações atuais antes de migrar. Verifique se seu conteúdo existente será exibido corretamente no novo tema. A maioria dos provedores oferece assistência de migração ou documentação para ajudar na transição.

Comece a construir sua comunidade Zendesk hoje

Agora você tem o conhecimento para criar e personalizar templates da comunidade do Zendesk Guide. Vamos recapitular as principais etapas:

  1. Entenda a diferença entre templates de artigos e templates de tema
  2. Familiarize-se com os sete arquivos de template da comunidade principais
  3. Aprenda a sintaxe Curlybars para conteúdo dinâmico
  4. Personalize as páginas de tópico e post para atender às suas necessidades
  5. Aplique as melhores práticas para celular, acessibilidade e desempenho
  6. Considere temas de terceiros se o desenvolvimento personalizado não for viável

As melhores comunidades evoluem com o tempo. Comece com o básico, colete feedback de seus usuários e itere em seu design. Preste atenção a quais tópicos geram mais engajamento e ajuste seus templates para destacar esse conteúdo.

Painel do eesel AI mostrando o modo de simulação com taxas de resolução previstas e economia de custos
Painel do eesel AI mostrando o modo de simulação com taxas de resolução previstas e economia de custos

À medida que você constrói sua comunidade, pense em como a automação pode apoiar seus objetivos. eesel AI trabalha ao lado dos fóruns da comunidade, respondendo a perguntas de rotina e encaminhando problemas complexos para as pessoas certas. Se você está procurando dimensionar seu suporte à comunidade sem dimensionar sua equipe, experimente o eesel AI gratuitamente e veja como ele complementa sua configuração do Zendesk.

Compartilhe esta postagem

eesel undefined

Article by

eesel Team