Personalización avanzada de la marca del centro de ayuda

El logo, la imagen principal, los enlaces del encabezado, el color de marca y el correo de soporte se explican en Personalizar la marca de tu portal. Este artículo cubre todo lo demás. Cada cambio se guarda solo.

Favicon

El favicon es el pequeño ícono en la pestaña del navegador. En Marca, haz clic en Subir junto a Favicon y elige un PNG o WebP cuadrado de 32 a 1024 píxeles de ancho, de hasta 256 KB. Se muestra en todas las páginas públicas de tu centro de ayuda; Quitar favicon lo vuelve a quitar. Si no tienes uno, la pestaña muestra la primera letra del nombre de tu portal sobre tu color de marca. Tu centro de ayuda nunca muestra el ícono de Deskwoot. Elige un ícono sencillo que se siga entendiendo a 16 píxeles.

Fuente de la página, de los títulos y de lectura

En Apariencia, Fuente define la fuente de todo el centro de ayuda: Predeterminada del sistema (la fuente del propio dispositivo del visitante), Instrument Sans, Inter, Roboto, Open Sans, Lato, Poppins, Montserrat, Nunito, Source Sans o Plus Jakarta Sans. Deskwoot la carga por ti, así que no tienes que alojar ni subir nada.

• Fuente de títulos define los títulos de las páginas y de las secciones. Igual que la fuente de la página es la opción predeterminada; puedes elegir cualquier fuente de página.
• Fuente de lectura, en Marca, define solo el texto de tus artículos. Literata es una fuente con serifa tranquila, pensada para leer textos largos, y también se ofrecen todas las fuentes de página.

Una fuente con serifa para el texto de los artículos y una fuente sin serifa sencilla para encabezados y menús se lee como un libro bien hecho.

Claro, oscuro o automático

El Tema de color tiene 3 opciones:

• Claro (la opción predeterminada): superficies claras, texto oscuro.
• Oscuro: superficies oscuras, texto claro, para marcas que ya son oscuras.
• Automático (sigue el dispositivo del visitante): oscuro para quienes usan su dispositivo en modo oscuro y claro para todos los demás.

El tema se aplica a todas las páginas públicas: inicio, colecciones, artículos, búsqueda y la página que aparece cuando una dirección no existe.

Tus propios colores

En Colores del tema ajustas la paleta sin escribir CSS: Página, Tarjetas, Bordes, Texto, Atenuado (texto secundario) y Títulos, cada uno como valor hexadecimal. Hay una paleta para el Modo claro y otra para el Modo oscuro. El tema Claro muestra la paleta clara, el Oscuro la oscura y el Automático las dos, así puedes definir los colores de cada una. Un color que no cambies conserva el que viene de fábrica, y Restablecer devuelve toda una paleta a como estaba. Tu color de marca sigue definiendo los enlaces, los botones y los detalles de color.

La imagen principal

Tres opciones en Apariencia deciden cómo se ve el texto sobre tu imagen principal. Se aplican a la página de inicio y a la franja con imagen de todas las demás páginas.

• Texto sobre la imagen: Claro u Oscuro. El texto oscuro queda bien en imágenes claras; los botones y las etiquetas sobre la imagen se adaptan a él.
• Sombra sobre la imagen: Ninguna, Suave (la opción predeterminada) o Fuerte. Una sombra más fuerte mantiene el texto legible en imágenes muy cargadas.
• Recorte de la imagen: Automático, Arriba, Centro o Abajo, la parte de la imagen que queda a la vista cuando una franja muestra solo un trozo.

Esquinas, encabezado e íconos de las colecciones

• Esquinas: Rectas, Suaves (la opción predeterminada) o Redondeadas, para tarjetas, botones y etiquetas pequeñas.
• Encabezado: Claro (la opción predeterminada) o Color de marca, la barra de arriba de cada página.
• Íconos de las colecciones: lo que va detrás del ícono de cada colección en la biblioteca. Imagen muestra un trozo de tu imagen principal, Color de marca un tono de tu color y Solo ícono el ícono solo. Sin imagen principal, Imagen muestra el color de marca.

Páginas de artículos

En Páginas de artículos activas o desactivas cada parte alrededor del texto, para todo el centro de ayuda:

• Barra lateral de colecciones en las páginas de artículos, consulta Navegación entre artículos del centro de ayuda.
• En esta página: los títulos de una guía más larga como enlaces al lado del texto, o encima de él en el celular.
• ¿Te resultó útil esta guía?: la pregunta al final de cada guía, consulta Valoración de artículos de ayuda.
• Anterior, siguiente y Sigue leyendo: los enlaces a la guía anterior y a la siguiente, y más guías de la colección.

Tus propios títulos de sección

En la pestaña Diseño, Títulos de las secciones te deja nombrar tú mismo las secciones de la página de inicio: el título de la biblioteca, el título Más leídos, el título ¿Aún necesitas ayuda? y el texto que va debajo. Con las pestañas de idioma (EN, DE, ES, FR, PT) le das a cada título su propia traducción. Un campo vacío conserva el título que viene de fábrica, que sigue el idioma del visitante, y un título sin traducción muestra tu texto en inglés.

Pie de página en otros idiomas

Con Usar un pie de página personalizado, en Pie de página personalizado, defines hasta 4 columnas de enlaces y una línea de copyright o aviso legal. Las pestañas de idioma de Idiomas del pie de página le dan a cada título de columna y a cada texto de enlace un texto en alemán, español, francés o portugués. Un título o texto sin traducción se muestra en inglés.

CSS personalizado

Para todo lo que las opciones no cubren, agrega CSS personalizado (avanzado) en la pestaña Diseño. Se aplica solo a tu centro de ayuda público, nunca al panel, y tiene prioridad sobre los estilos propios de Deskwoot sin !important.

• Al guardar, se eliminan las reglas @import, las direcciones javascript: y otras partes riesgosas parecidas.
• Hasta 50,000 caracteres, más que suficiente para ajustar tu marca.
• Los elementos llevan atributos data-hc estables (por ejemplo [data-hc="article"] o [data-hc="category-grid"]), que sirven mejor como selectores que los nombres de clase.

Tu propio HTML de encabezado y pie de página (Enterprise)

En Enterprise, cuando tu centro de ayuda ya funciona en tu propio dominio activo, puedes pegar el encabezado de tu sitio web como HTML de encabezado personalizado. Entonces reemplaza el encabezado del centro de ayuda, y en las páginas internas la búsqueda y el selector de idioma pasan a la franja con imagen que está debajo. Tu propio HTML de pie de página reemplaza de la misma forma el pie de página al final de cada página.

Los dos se limpian al guardar: se eliminan los scripts, los manejadores de eventos, los bloques <style>, los iframes, los formularios y las direcciones javascript:. Las clases y los estilos en línea se quedan, así puedes terminar el aspecto con CSS personalizado.

Historial de diseño

Cada vez que cambias el color de marca, el título de la página, el subtítulo, los enlaces del encabezado, el CSS personalizado, las secciones de la página de inicio y sus títulos, el texto, la sombra o el recorte de la imagen principal, las esquinas, el encabezado, los íconos de las colecciones o las partes de las páginas de artículos, Deskwoot guarda cómo estaba antes. El panel Historial de la pestaña Diseño muestra quién cambió qué, y con un clic recuperas un aspecto anterior. El logo, la imagen principal, el favicon, las fuentes, el tema, los colores del tema y tu propio HTML de encabezado o pie de página no forman parte de este historial.

Preguntas frecuentes

¿Qué opciones necesitan el plan Enterprise?

La marca blanca y tu propio HTML de encabezado y pie de página, que además necesitan un dominio propio activo. Todo lo demás de esta guía viene con el centro de ayuda desde Startup.

¿Puedo usar una fuente para los títulos y otra para los artículos?

Sí. Fuente define todo el centro de ayuda, Fuente de títulos los títulos de las páginas y de las secciones, y Fuente de lectura solo el texto de los artículos, por ejemplo Instrument Sans con Literata.

¿Puedo cambiar los colores del tema claro?

Sí. Colores del tema tiene una paleta de Modo claro junto a la de Modo oscuro. Con Automático defines las dos.

Mi imagen principal es clara y el título se lee mal. ¿Qué puedo hacer?

Pon Texto sobre la imagen en Oscuro, o deja el texto claro y elige Fuerte en Sombra sobre la imagen. Recorte de la imagen mueve la parte más tranquila de la imagen detrás del texto.

¿Puedo ocultar “¿Te resultó útil esta guía?” o “En esta página”?

Sí. Desactívalos en Configuración > Páginas de artículos. El cambio se aplica a todos los artículos del centro de ayuda.

¿Mi centro de ayuda mostrará alguna vez el favicon de Deskwoot?

No. Sin tu propio favicon, la pestaña del navegador muestra la primera letra del nombre de tu portal sobre tu color de marca.

¿Uso las opciones o CSS personalizado?

Primero las opciones: no necesitan código y siguen funcionando cuando el centro de ayuda cambia. Usa CSS personalizado solo para lo que las opciones no ofrecen.

¿Puedo pegar el menú de mi sitio web en el centro de ayuda?

Sí, en Enterprise con un dominio propio activo, como HTML de encabezado personalizado. Si no los tienes, los enlaces del encabezado en la pestaña Configuración agregan enlaces a tu sitio web en el encabezado normal.

¿Puedo deshacer un cambio de diseño?

Los cambios en el color de marca, el título de la página, el subtítulo, los enlaces del encabezado, el CSS personalizado, las secciones de la página de inicio y sus títulos, el texto, la sombra y el recorte de la imagen principal, las esquinas, el encabezado, los íconos de las colecciones y las partes de las páginas de artículos se pueden recuperar desde el panel Historial de la pestaña Diseño. Las fuentes, el tema, los colores del tema, el favicon, las imágenes y tu propio HTML de encabezado o pie de página no.