Personalización del tema del centro de ayuda

Disponible en los planes Suite Growth y superiores Disponible en todos los planes de Guide

Acceso rápido: Administrador de Guide > Personalizar diseño > Personalizar > Editar código

Los administradores de Guide con conocimientos en diseño web pueden trabajar directamente con el código de la página para crear un tema personalizado para el centro de ayuda. Los temas personalizados pueden incluir:

Plantillas editables que definen el diseño de cada página (por ejemplo, página de artículo, página de categoría o página de tema de la comunidad)
Páginas personalizadas que se crean desde cero y se pueden colocar en cualquier parte del centro de ayuda
Encabezado y pie de página globales para el centro de ayuda

También se puede usar un lenguaje de plantillas con todas las funciones necesarias llamado Curlybars que sirve para obtener acceso a los datos del centro de ayuda y manipular el contenido en las plantillas de página y las páginas personalizadas. Asimismo, se pueden usar los archivos JavaScript y CSS que vienen incluidos con el tema para hacer cambios en el aspecto y el comportamiento del tema en todo el sitio. Si desea usar su propio código HTML para editar el tema de su centro de ayuda, consulte Editar el código fuente de los artículos del centro de ayuda.

Cuando se modifica el código de un tema (por ejemplo, las plantillas, JavaScript o CSS), la vista previa del tema muestra el icono </>, para indicar que el código del tema ha sido modificado y ya no recibirá funciones nuevas ni actualizaciones.

Sugerencia: Si necesita ayuda para ponerle su marca al centro de ayuda y personalizarlo, visite el Marketplace de Zendesk para comprar nuevos temas creados por Zendesk y otros desarrolladores.

Nota: Los usuarios de la versión de prueba tienen un plan Professional que incluye opciones para la edición del código, pero ya no tendrán acceso a esa función si compran un plan Suite Team.

En este artículo se tratan los siguientes temas:

Personalizar las plantillas de página con HTML y Curlybars
Personalizar CSS o JavaScript
Usar variables en CSS y HTML

Personalizar plantillas de página y páginas personalizadas con HTML y Curlybars

El HTML para el centro de ayuda viene incluido en plantillas editables que definen el diseño de tipos de páginas, páginas personalizadas y encabezados y pies de página globales. También se puede usar un lenguaje de plantillas con todas las funciones necesarias llamado Curlybars para crear o manipular el contenido para estos elementos.

Nota: En los planes Enterprise, se pueden crear páginas personalizadas, además de plantillas de página adicionales para artículos, secciones y categorías si se necesitan varias versiones de esas plantillas.

Puede personalizar la plantilla de cualquiera de los siguientes elementos o tipos de página, o bien puede crear sus propias páginas personalizadas:

Páginas personalizadas (página_personalizada.hbs): las páginas personalizadas que se crean desde cero y se vinculan desde cualquier parte del centro de ayuda
Página de artículo (article_page.hbs): las páginas de artículo individuales de la base de conocimientos
Página de categoría (category_page.hbs): páginas de aterrizaje
Página de lista de publicaciones de la comunidad (community_post_list_page.hbs)
Página de publicación de la comunidad (community_post_page.hbs)
Página de lista de temas de la comunidad (community_topic_list_page.hbs)
Página de temas de la comunidad (community_topic_page.hbs)
Página de aportaciones (contributions_page.hbs): las listas de publicaciones, comentarios de la comunidad y comentarios de los artículos hechos por el usuario final
Cabecera de documento: (document_head.hbs): la etiqueta head del documento
Página de error (error_page.hbs): el mensaje que se muestra cuando un usuario llega a una página que no existe
Pie de página (footer.hbs): las barras que se ven en la parte inferior de todas las páginas del centro de ayuda
Encabezado (header.hbs): las barras que se ven en la parte superior de todas las páginas del centro de ayuda
Página principal: (home_page.hbs): la página de aterrizaje de alto nivel del centro de ayuda
Página de nueva publicación de la comunidad (new_community_post_page.hbs)
Página de nueva solicitud (new_request_page.hbs): el formulario de solicitud o de envío de ticket
Página de solicitud (request_page.hbs): la solicitud individual o las páginas de tickets
Página de solicitudes (requests_page.hbs): las listas de solicitudes o los tickets asignados a un usuario o de los que el usuario recibe una copia (CC)
Resultados de búsqueda (search_results.hbs): el formato de visualización de los resultados de las búsquedas
Página de sección (section_page.hbs): páginas de aterrizaje
Página de seguimiento (subscriptions_page.hbs): la lista de categorías, secciones y artículos que un usuario está siguiendo
Página de perfil de usuario (user_profile_page.hbs)

Nota: Cuando se usa el Editor de temas para editar las plantillas de páginas, CSS o JavaScript de un tema estándar o cuando se crea un tema propio, se guarda como tema personalizado. Los temas personalizados no son admitidos por Zendesk ni tampoco se actualizan automáticamente cuando se estrenan nuevas funciones (consulte Acerca de los temas estándar y los temas personalizados del centro de ayuda).

Para editar las plantillas de página

En Guide, haga clic en el icono Personalizar diseño () en la barra lateral.
En el tema que desea editar, haga clic en Personalizar.
Haga clic en Editar código.
En la sección Plantillas, haga clic en la plantilla o la página personalizada que desea modificar.
La página se abre en el editor de código.
Utilice la vista de código para editar la plantilla o la página.
Puede agregar, eliminar o cambiar el orden de los siguientes elementos:
- Expresiones de plantilla para mostrar y manipular el contenido en sus páginas
  Por ejemplo, el helper de la plantilla de ruta de navegación {{breadcrumbs}} muestra un elemento de ruta de navegación en una página. Si desea una guía detallada sobre expresiones de plantilla, consulte Plantillas del centro de ayuda.
- Marcadores de posición de contenido dinámico (consulte Agregar texto traducido)
- Widgets incrustables creados por terceros
- Marcado HTML
Haga clic en Guardar en la esquina superior derecha para guardar los cambios.
Si editó una plantilla, los cambios se aplicarán en todas las páginas del tema que se basen en la plantilla que se modificó.
Para previsualizar los cambios, haga clic en Previsualizar. Consulte Vista previa del tema en el centro de ayuda.

Nota: Puede ser que no todas las funciones estén en servicio cuando se previsualiza un tema. La funcionalidad de previsualización tiene por objeto mostrar los cambios de aspecto y funcionamiento, pero no es para hacer pruebas de principio a fin de la funcionalidad del tema interactivo. Le recomendamos que para este tipo de pruebas use un sandbox.
Haga los demás cambios de código que necesite y luego haga clic en Guardar.
Cuando termine de editar la plantilla de página o la página personalizada, puede cerrarla.

Sugerencia: Lea esta publicación del blog de Zendesk para obtener más ideas de plantillas para artículos de la base de conocimientos.

Personalizar CSS o JavaScript

Puede agregar código JavaScript o personalizar las CSS del sitio. Si desea ver una muestra de lo que se puede hacer en el centro de ayuda con solo un poco de codificación, dele una mirada a los siguientes recursos:

Nota: Cuando se usa el Editor de temas para editar las plantillas de páginas, CSS o JavaScript de un tema estándar o cuando se crea un tema propio, se guarda como tema personalizado. Los temas personalizados no son admitidos por Zendesk ni son actualizados automáticamente cuando se estrenan nuevas funciones. Consulte Acerca de los temas estándar y los temas personalizados del centro de ayuda.

Para personalizar CSS o JavaScript

En Guide, haga clic en el icono Personalizar diseño () en la barra lateral.
En el tema que desea editar, haga clic en Personalizar.
Haga clic en Editar código.
Haga clic en script.js para modificar JavaScript, o en style.css para modificar CSS.
El archivo se abre en el editor de código.
Agregue o modifique JavaScript o CSS en la vista de código.
Haga clic en Guardar en la parte superior para guardar los cambios.
Los cambios se aplican a su tema.
Para previsualizar los cambios, haga clic en Previsualizar (consulte Vista previa del tema del centro de ayuda).
Haga los demás cambios de código que necesite y luego haga clic en Guardar.
Cuando termine, puede cerrar el archivo.

Usar variables en CSS y HTML

Las propiedades que elija en el panel Configuración o que establezca en el archivo de manifiesto para colores, fuentes e imágenes de tema se almacenan en variables. Puede usar estas variables en el archivo style.css del tema. También puede hacer referencia a las variables usando expresiones de Curlybars en las plantillas de páginas HTML.

Las variables son útiles si desea especificar el mismo valor en varios lugares y actualizarlo rápidamente. Al actualizar la propiedad, esta se actualiza en todos los lugares donde se usa. El tema Copenhagen predeterminado incluye algunas variables de colores y fuentes. Puede modificar los nombres y rótulos, borrar variables o agregar las suyas (consulte la información sobre el archivo de manifiesto del panel Configuración).

En el tema estándar Copenhagen, tiene las siguientes variables predeterminadas:

brand_color es el color de la marca para los elementos de navegación principales
brand_text_color es el color de la marca para cuando se pasa el mouse sobre el tema o cuando este está activo
text_color es el color de texto para los elementos de cuerpo y encabezado
link_color es el color de texto para los elementos de vínculo
background_color es el color del fondo del centro de ayuda
heading_font es la fuente de los encabezados
text_font es la fuente del texto del cuerpo
logo es el logotipo de la compañía
favicon es el icono que se muestra en la barra de direcciones del navegador
homepage_background_image es la imagen hero de la página principal
community_background_image es la imagen hero de la página de temas de la comunidad
community_image es la imagen de la sección de la comunidad en la página principal

Para usar variables en CSS y HTML, consulte:

Ejemplos del uso de variables en CSS
Ejemplos del uso de variables en Curlybars en HTML

Ejemplos del uso de variables en CSS

Las propiedades que configura para colores, fuentes e imágenes de temas se almacenan en variables que puede usar en el archivo style.css de su tema.

Por ejemplo, puede usar algunas de las variables predeterminadas en CSS con esta sintaxis:

$brand_color
$brand_tex_color
$heading_font
$text_font

En el archivo CSS, asigne una variable a una propiedad de CSS de la misma manera que asignaría un valor normal. Por ejemplo:

.button {
  label-color: $text_font;
}

También puede usar llaves sencillas para incrustar el helper en una expresión de CSS de la siguiente manera:

max-width: #{$search_width}px

Ejemplos del uso de variables en Curlybars en HTML

Las propiedades que configura para colores, fuentes e imágenes de temas se almacenan en variables a las que puede hacer referencia con expresiones de Curlybars en las plantillas de páginas HTML.

Las variables se convierten en propiedades del objeto settings en Curlybars. Como sucede con cualquier objeto de Curlybars, puede usar llaves dobles y notación de puntos para insertar una propiedad en una plantilla de página.

Por ejemplo:

{{settings.color_1}} es el valor hexadecimal de un color. Por ejemplo: #FF00FF
{{{settings.font_1}} es la pila de fuentes. Por ejemplo, sistema se define como: '-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
{{settings.homepage_background_image}} es la ruta al archivo almacenado en este campo. Por ejemplo: p8.zdassets.com/theme_assets/...
{{settings.range_input}} es el valor de la entrada de intervalo.

El objeto de configuración se puede usar como entrada para cualquier helper. Por ejemplo:

{{is settings.enabled}} ... {{/is}}