Cómo crear y personalizar plantillas de página de sección de Zendesk Guide

Si está administrando un centro de ayuda con cientos de artículos, probablemente haya notado que una talla no sirve para todos. Una sección de solución de problemas necesita un diseño diferente al de una sección de documentación del producto. Ahí es donde entran las plantillas de página de sección de Zendesk Guide. Le permiten personalizar la apariencia y el funcionamiento de las páginas de su sección, brindando a los visitantes una mejor experiencia de navegación basada en el tipo de contenido que están viendo.

Esta guía lo guía a través de todo lo que necesita saber sobre la creación y personalización de plantillas de página de sección. Ya sea que prefiera usar el editor de temas o trabajar directamente con el código, aprenderá ambos enfoques con ejemplos prácticos que puede implementar hoy.

Comprender las plantillas de página de sección

Plantillas predeterminadas vs. personalizadas

Cada centro de ayuda de Zendesk comienza con una plantilla de página de sección predeterminada. Esta plantilla muestra el nombre de la sección, la descripción y una lista de artículos en un diseño estándar. Funciona bien para las necesidades básicas, pero trata todas las secciones de la misma manera.

Las plantillas de página de sección personalizadas le permiten:

• Cambiar el diseño y la jerarquía visual
• Destacar los artículos promocionados de manera diferente
• Agregar elementos de navegación personalizados
• Crear CTA (llamadas a la acción) específicas de la sección
• Ajustar la visualización según el tipo de contenido

Cuándo usar plantillas de página de sección personalizadas

Considere la posibilidad de crear plantillas personalizadas cuando:

• Tiene diferentes tipos de contenido que necesitan diferentes presentaciones (preguntas frecuentes frente a tutoriales frente a solución de problemas)
• Ciertas secciones necesitan una navegación o enlaces cruzados únicos
• Desea destacar los artículos promocionados de manera más prominente en secciones específicas
• Los requisitos de marca varían en las diferentes partes de su centro de ayuda
• Necesita integrar widgets específicos de la sección o contenido de terceros

Cómo encajan las páginas de sección en la jerarquía

Zendesk Guide organiza el contenido en una jerarquía de tres niveles:

1. Categorías: contenedores de nivel superior (ocultos si solo tiene uno)
2. Secciones: contienen artículos relacionados
3. Artículos: piezas de contenido individuales

En los planes Enterprise, las secciones también pueden contener subsecciones, lo que permite hasta cinco niveles de anidación con un máximo de 200 secciones por padre. Esta flexibilidad es útil para bases de conocimiento complejas, pero requiere un diseño de plantilla bien pensado.

Método 1: Crear plantillas en el editor de temas

El editor de temas proporciona una interfaz visual para crear plantillas sin descargar archivos. Aquí le mostramos cómo usarlo.

Paso 1: Navegue al administrador de Knowledge

Vaya a Administrador de Knowledge en su panel de administración de Zendesk, luego haga clic en Personalizar diseño en la barra lateral. Sus temas aparecerán en la página Temas.

Paso 2: Edite el código de su tema

Busque el tema que desea personalizar y haga clic en Personalizar. Luego haga clic en Editar código para acceder a los archivos de plantilla.

Paso 3: Agregue una nueva plantilla de sección

En el área Archivos, haga clic en Agregar nuevo, luego seleccione Plantilla de sección en el menú desplegable.

Paso 4: Configure su plantilla

Deberá proporcionar:

• Nombre de la plantilla: use snake_case (minúsculas con guiones bajos), máximo de 25 caracteres. Ejemplo: video_section o faq_layout
• Comenzar desde: elija una plantilla en blanco o copie una plantilla existente como punto de partida

Paso 5: Edite el código de la plantilla

La nueva plantilla se abre en el editor de código. Aquí es donde escribe su código HTML y Curlybars. El editor incluye resaltado de sintaxis y funcionalidad de guardado automático.

Haga clic en Vista previa para ver cómo se ve su plantilla con datos reales, luego haga clic en Guardar cuando esté satisfecho.

Paso 6: Aplique la plantilla a las secciones

Una vez que su plantilla esté guardada y su tema esté activo, navegue a cualquier sección en su centro de ayuda. Haga clic en Editar sección y seleccione su plantilla personalizada en el menú desplegable Plantilla en la barra lateral.

Haga clic en Actualizar para aplicar la plantilla. El cambio entra en vigor inmediatamente en la página de sección activa.

Método 2: Crear plantillas localmente

Para los desarrolladores que prefieren trabajar en su propio entorno, puede crear plantillas localmente e importarlas.

Paso 1: Descargue su tema

Desde la página Temas, haga clic en el menú de opciones de su tema y seleccione Descargar. Esto le da un archivo ZIP que contiene todos los archivos del tema.

Paso 2: Cree la carpeta section_pages

Extraiga el archivo ZIP y navegue al directorio templates. Cree una nueva carpeta llamada section_pages si no existe.

Paso 3: Agregue su archivo de plantilla

Cree un nuevo archivo con la extensión .hbs en la carpeta section_pages. El nombre del archivo debe:

• Usar snake_case (minúsculas con guiones bajos)
• Tener 25 caracteres o menos
• Incluir solo letras, números y guiones bajos

Ejemplos de nombres de archivo: video_gallery.hbs, faq_accordion.hbs, featured_top.hbs

Paso 4: Escriba el código de su plantilla

Aquí hay una estructura básica para comenzar:

<nav class="sub-nav">
  {{breadcrumbs}}
  {{subscribe}}
</nav>

<h1>{{section.name}}</h1>
<p class="section-description">{{section.description}}</p>

{{#if promoted_articles}}
  <div class="promoted-articles">
    <h2>Artículos destacados</h2>
    <ul>
      {{#each promoted_articles}}
        <li><a href="{{url}}">{{title}}</a></li>
      {{/each}}
    </ul>
  </div>
{{/if}}

{{#if section.articles}}
  <ul class="article-list">
    {{#each section.articles}}
      <li class="article">
        <a href="{{url}}">{{title}}</a>
      </li>
    {{/each}}
  </ul>
{{else}}
  <p>Aún no hay artículos en esta sección.</p>
{{/if}}

{{pagination}}

Paso 5: Importe su tema

Comprima la carpeta del tema modificada y regrese a Zendesk. Haga clic en Agregar tema > Importar y cargue su archivo ZIP. Obtenga una vista previa del tema para verificar que sus plantillas funcionen correctamente, luego publique para que esté activo.

Referencia del código de la plantilla de página de sección

Comprender las propiedades y los asistentes disponibles le permite crear plantillas más sofisticadas.

Propiedades disponibles

Fuente: Documentos para desarrolladores de Zendesk

Asistentes disponibles

Patrones comunes

Recorra los artículos con metadatos:

{{#each section.articles}}
  <article class="article-item">
    <h3><a href="{{url}}">{{title}}</a></h3>
    <p class="meta">
      Actualizado {{date updated_at timeago=true}}
      {{#if author}}
        por {{author.name}}
      {{/if}}
    </p>
  </article>
{{/each}}

Contenido condicional basado en el estado del usuario:

{{#if signed_in}}
  <p>¡Bienvenido de nuevo! {{user.name}}</p>
{{else}}
  <p><a href="{{signin_url}}">Inicie sesión</a> para obtener ayuda personalizada.</p>
{{/if}}

Mejores prácticas para el diseño de páginas de sección

Mantenga la navegación intuitiva

Siempre incluya rutas de navegación para que los usuarios comprendan dónde se encuentran en la jerarquía de su centro de ayuda. El asistente {{breadcrumbs}} maneja esto automáticamente, pero asegúrese de que sea visible y tenga un estilo coherente con su marca.

Utilice los artículos promocionados estratégicamente

Los artículos promocionados aparecen en la parte superior de las páginas de sección. Úselos para resaltar:

• Contenido al que se accede con más frecuencia
• Guías de inicio
• Pasos críticos para la solución de problemas
• Artículos importantes actualizados recientemente

Considere la capacidad de respuesta móvil

Pruebe sus plantillas en dispositivos móviles. Las páginas de sección con muchos artículos pueden volverse difíciles de manejar en pantallas pequeñas. Considere secciones plegables o diseños de acordeón para listas de artículos largas.

Mantenga una marca coherente

Si bien las plantillas personalizadas le permiten variar los diseños, mantenga los colores, las fuentes y el espaciado coherentes con su tema general. Los usuarios deben sentir que están en el mismo centro de ayuda, incluso cuando los diseños de las secciones difieren.

Pruebe con diferentes volúmenes de artículos

Una plantilla que se ve genial con 5 artículos podría romperse con 50. Pruebe sus plantillas con varios volúmenes de contenido para asegurarse de que se escalen apropiadamente.

Solución de problemas comunes

La plantilla no aparece en el menú desplegable

La causa más común: su tema no está activo. Las plantillas personalizadas solo se muestran en el selector de plantillas cuando el tema que las contiene es el tema activo. En Suite Growth y Professional, puede crear varias plantillas en un tema no activo para probarlas, pero no puede aplicarlas hasta que el tema se active.

Los cambios no se reflejan inmediatamente

Zendesk almacena en caché las páginas del centro de ayuda para mejorar el rendimiento. Si no ve los cambios de plantilla:

• Borre la memoria caché de su navegador
• Pruebe con una ventana de incógnito/privada
• Espere unos minutos para que se actualice la memoria caché de CDN (red de entrega de contenido)

Errores de permiso

Solo los administradores de Knowledge pueden crear plantillas y aplicarlas a las secciones. Los agentes pueden cambiar las plantillas en los artículos individuales que tienen permiso para editar, pero los cambios de plantilla de sección y categoría requieren acceso de administrador.

Errores de nomenclatura de plantillas

Si su plantilla no se guarda, verifique:

• El nombre usa solo letras minúsculas, números y guiones bajos
• El nombre tiene 25 caracteres o menos
• No hay espacios ni caracteres especiales

Uso de la IA para optimizar su base de conocimiento

Crear plantillas personalizadas es solo una parte de la construcción de un centro de ayuda eficaz. El verdadero desafío es mantener su contenido organizado, actualizado y fácil de encontrar. Ahí es donde los compañeros de equipo de IA pueden ayudar.

En eesel AI, abordamos la gestión del conocimiento de manera diferente. En lugar de tratar la IA como una herramienta que configura, pensamos en ella como un compañero de equipo que contrata. Nuestra IA aprende su negocio a partir de su contenido existente (tickets anteriores, artículos del centro de ayuda, macros y documentos conectados como Confluence o Notion) y le ayuda a identificar las brechas en su base de conocimiento.

Así es como funciona: conecte eesel AI a su mesa de ayuda e inmediatamente analizará su contenido. Identifica qué artículos están funcionando, cuáles necesitan actualizaciones y qué falta por completo. Puede ejecutar simulaciones en tickets anteriores para ver qué tan bien su base de conocimiento manejaría las preguntas comunes, luego llenar los vacíos antes de que los clientes los encuentren.

El modelo de compañero de equipo significa que comienza con la orientación (eesel redacta respuestas para su revisión) y sube de nivel a la operación autónoma (eesel maneja el soporte de primera línea directamente) en función del rendimiento real. Usted controla el ritmo en función de lo que ve que funciona.

Si está invirtiendo tiempo en plantillas de página de sección personalizadas para mejorar la experiencia del usuario, considere lo que un compañero de equipo de IA podría hacer por el contenido que va dentro de ellas. La combinación de plantillas bien estructuradas y contenido continuamente optimizado crea un centro de ayuda que realmente ayuda.