Descargo de responsabilidad: Este artículo se generó mediante traducción automática.

Personalizar sitio

Prev Next

Planes que admiten esta función: Professional Business Enterprise

Personalización del sitio.  Personalizar la apariencia y la funcionalidad de tu base de conocimientos es fundamental para crear una experiencia fluida para tus usuarios. Personalización del sitio

Imagina gestionar la documentación de soporte de un producto SaaS. Con Personalización del sitio, puedes igualar los colores y el logo de tu marca, garantizar la accesibilidad usando contraste automático de color y personalizar los diseños para una mejor navegación.

Para tu información (para que lo sepas)

Esta mejora está disponible en el sitio 2.0 de la base de datos. Para migrar del sitio KB 1.0 al sitio KB 2.0, lee el artículo sobre la migración del sitio KB 2.0.

NOTA

Personalización del sitio es una configuración a nivel de proyecto. Los cambios se reflejarán en todo el proyecto.


Personalización básica del sitio

Para realizar la personalización básica:

  1. Navega a Configuración () > Sitio de la base de conocimientos en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Personalización del sitio.

    La página contiene todas las configuraciones básicas de diseño del sitio.

  3. Puedes elegir una de las tres opciones para establecer el tema de tu sitio de base de conocimiento desde el campo Tema del sitio :

    • Tanto Luz como Oscuridad

    • Solo luz

    • Solo oscuridad

    Site customization options for branding, theme selection, and favicon settings displayed on the interface.

  4. En la sección de Branding , puedes elegir un logotipo y Favicon. Puedes subir logotipos separados para temas claros y oscuros, asegurando que tu imagen de marca se mantenga coherente y visualmente optimizada para diferentes modos de visualización.

    Si no has establecido un logo para uno de los temas, el logo asignado al otro tema se usará automáticamente por defecto.

    Este logotipo aparece en la esquina superior izquierda de la barra de navegación principal de tu base de conocimientos. El favicon aparece en la pestaña del navegador y ayuda a los usuarios a identificar fácilmente tu base de conocimientos.

    Branding section showing project name and favicon customization options for a website.

    NOTA

    • El tamaño máximo aceptado del Favicon es de 200KB. Los formatos soportados son ICO, PNG y SVG. Debe ser cuadrado. Las resoluciones recomendadas son: 16x16, 32x32, 48x48, 64x64, 128x128, 180x180 y 256x256 píxeles.

    • Las imágenes con fondo transparente deben convertirse primero a ICO. El formato ICO es el más fiable para los motores de búsqueda. Después de cambiar el Favicon, tienes que hacer una actualización completa del navegador para ver el icono actualizado.

    • Aunque se soportan favicons SVG, los motores de búsqueda pueden tardar mucho más en indexar favicons solo SVG. En algunos casos, las actualizaciones pueden tardar semanas o incluso meses en reflejarse en los resultados de los motores de búsqueda.

  5. Además, puedes establecer un enlace de redirección personalizado para el logo. Asegúrate de que la URL empiece con https:// para evitar errores de validación. Cuando un usuario haga clic en el logotipo de tu sitio de base de conocimiento, será redirigido al enlace especificado, como la web de tu empresa o una página de aterrizaje específica.

    NOTA

    Los clientes que ya tienen un logo y favicon personalizados no se verán afectados hasta que naveguen a la Personalizar el sitio y guarda los cambios.

  6. En la sección de Colores, selecciona la casilla Auto set color contrast para cumplir con  los estándares WCAG y así aplicar automáticamente los colores basados en tu marca a los elementos de tu sitio.

    NOTA

    Para más información, lee el artículo sobre las Directrices de Accesibilidad de Contenidos Web (WCAG).

    1. En la sección de color de marca , puedes seleccionar un color para CTA, estados de selección y más usando el selector de color, o introducir su código HEX.

    2. En la sección de Color de Hipervínculos , puedes personalizar el color de los hipervínculos en tu base de conocimiento para mejorar la experiencia del usuario. En esta opción, puedes elegir entre tres opciones de radio:

      • Utiliza el estándar del sector: Aplica un color de hipervínculo comúnmente usado

      • Usa color de marca: Aplica el mismo color que elegiste del color de la marca

      • Usa un color diferente: selecciona colores por defecto, pasa el cursor y visitados para los hipervínculos.

    Color settings for brand and hyperlink customization in a web design interface.

    NOTA

    Si has elegido la opción Ajuste automático de contraste de color para cumplir con los estándares WCAG, tanto los colores claros como oscuros se ajustarán automáticamente. Si no, tienes que ajustar manualmente los colores para cada tema.

  7. En la sección de Fuentes , puedes cambiar las fuentes del contenido de tu base de conocimientos en cualquier momento.

    Habrá dos subsecciones:

    1. Emparejamiento de fuentes de artículos: Esta fuente se aplicará a todos los títulos y contenidos de tus artículos.

      Haz clic en ¿Tienes una combinación de fuentes específica en mente? para seleccionar más opciones de fuentes. Haz clic aquí para elegir la fuente de los títulos y el contenido.

    2. Fuente del sitio: Selecciona la fuente en el desplegable. Esto se aplicará a lo largo de tu Sitio de la base de conocimientos}. Incluye el panel de navegación izquierdo (categorías, subcategorías, títulos de artículos) y la navegación para el encabezado, el pie de página, la navegación secundaria y los controles.

    Overview of Document360 with various font pairings for article titles and content.

    NOTA

    La fuente elegida se utilizará en la Sitio de la base de conocimientos } y dentro del editor. Esto mejorará la capacidad del usuario para visualizar el aspecto del artículo durante su redacción.  

  1. En la sección de Estilo , puedes elegir el estilo de los botones y elementos de la forma. Las tres opciones disponibles son:

    • Redondeado

    • Sharp

    • Burbuja

    Options for button styles: Rounded, Sharp, and Bubble for user interface design.

  2. En la sección de diseño del sitio , encontrarás dos opciones:

    • Ancho completo: Ancho completo extiende tu contenido hasta los bordes de una ventana del navegador.

    • Centro: El diseño central posiciona el contenido de forma central y ofrece un área de lectura más amplia optimizando los paneles circundantes.

    Comparison of full width and center site layout options for user interface design.

  3. Una vez hecho, haz clic Salvar.


Personalización avanzada del sitio

Personaliza tu sitio web incorporando elementos de marca, secciones de encabezado y pie de página, página principal, página de inicio de sesión y páginas de error en una única ubicación central.

  1. Navega a Configuración () en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Personalización del sitio.

    La página contiene todas las configuraciones básicas de diseño del sitio.

  3. Haz clic en Personalizar el sitio .

  4. En esta sección, puedes configurar los siguientes elementos del sitio:

    Los cambios que apliques en la sección izquierda se pueden visualizar en el panel derecho. Para editar un elemento específico, haz clic en el elemento deseado en el panel de Vista previa. Los ajustes correspondientes aparecerán en el panel izquierdo.

  5. Usa el desplegable para elegir las diferentes páginas.

    La nueva interfaz del creador de páginas principales facilita la navegación y personalización para cada sección de la página principal.

  6. Haz clic Vista previa para ver cómo aparecerán tus cambios en la base de conocimientos.

  7. Haz clic Salvar   para guardar tus cambios sin aplicarlos inmediatamente.

  8. Haz clic Publicar   para que tus cambios recientes sean visibles para los lectores.

  9. Haz clic en la Más () y selecciona Restablecer a la versión publicada para descartar todas las personalizaciones guardadas y no guardadas y volver a la última versión publicada.

NOTA

La característica Restablecer a la versión publicada solo está disponible para los nuevos proyectos del sitio de Knowledge Base 2.0 creados después del 29 de marzo de 2025.


Preguntas más frecuentes

¿Cómo cambio el tema del sitio?

Puedes cambiar el tema del sitio de la base de conocimientos siguiendo los pasos siguientes:

  1. Navega a Configuración () en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Personalización del sitio.

  3. En la sección de temas del sitio , puedes elegir entre tres opciones:

    • Tanto Luz como Oscuridad

    • Solo luz

    • Solo oscuridad

¿Cómo cambio los Favicons?

Favicon (abreviatura de icono favorito) es un icono pequeño, normalmente de 16x16 píxeles, que utilizan los navegadores web para identificar tu sitio web. El favicon aparece en la pestaña del navegador de la web, la lista de marcadores, la lista de historial de navegación y los resultados de los motores de búsqueda.

  1. Navega a Configuración () en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Personalización del sitio.

  3. En la sección de Branding , pasa el cursor sobre el favicon predeterminado y haz clic Haga clic para cambiar en Favicons.

  4. Ahora, puedes añadir un Favicon en una de dos opciones disponibles:

    • Usar una URL: Pega la URL de la imagen desde cualquier fuente externa y haz clic Insertar.

    • Subir una imagen: Elige tu archivo desde la unidad o sube una imagen desde tu almacenamiento local y haz clic Insertar.

  5. Haz Salvar.

CONSEJO PROFESIONAL

  • Usa siempre una imagen con dimensiones minimalistas y cuadradas (en píxeles).

  • Como mejor práctica, asegúrate de que tu favicon esté dimensionado a 48 x 48 píxeles para un renderizado óptimo en todas las plataformas.

¿Por qué el favicon no se renderiza en la página de la base de conocimiento?

Este problema podría presentarse cuando el favicon añadido no cumple los criterios especificados, incluyendo tamaño y formato. Haz los cambios necesarios en el favicon o prueba a subirlo de nuevo a tu base de conocimientos.

¿Cómo funcionan los Favicons en Document360?

Cuando configuras un favicon en Document360:

  • El favicon se referencia en la página <cabecera> usando una etiqueta <link rel="icon">.

  • Document360 genera automáticamente un favicon de respaldo a nivel raíz en: https://your-domain.com/favicon.ico

  • Este favicon a nivel raíz es utilizado por navegadores, motores de búsqueda y rastreadores que solo marcan /favicon.ico

  • Incluso si subes un favicon en PNG o SVG, Document360 genera programáticamente /favicon.ico para garantizar la compatibilidad. Este comportamiento es intencionado y sigue las convenciones estándar de la web.

¿Cómo cambio el logo del sitio?

Para reemplazar el logotipo predeterminado que aparece en la parte superior izquierda de la base de conocimiento subiendo el logotipo deseado,

  1. Navega a Configuración () en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Personalización del sitio.

    En la sección de Branding , encontrarás los logotipos subidos para los temas de tu sitio de luz y sombra.

  3. Pasa el cursor sobre el logotipo correspondiente y haz clic Haga clic para cambiar.

  4. Ahora, puedes añadir un Favicon en una de dos opciones disponibles:

    • Usar una URL: Pega la URL de la imagen desde cualquier fuente externa y haz clic Insertar.

    • Subir una imagen: Elige tu archivo desde la unidad o sube una imagen desde tu almacenamiento local y haz clic Insertar.

  5. Una vez hecho, haz clic Salvar.

¿Cómo añado texto como logo?

Puedes añadir un texto como logotipo reemplazando el logo predeterminado que aparece en la esquina superior izquierda de la base de conocimientos.

  1. Navega a Configuración () en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Personalización del sitio.

  3. En la sección de Branding , haz clic en ¿No tienes un logo? Usa el nombre en su lugar.

  4. Introduce el texto deseado en el campo de entrada.

    Por ejemplo, puedes añadir el nombre o el eslogan de una empresa en lugar de una imagen de logo.

  5. Haz Salvar.

NOTA

  • Puedes añadir hasta 30 caracteres para el texto del logo.

  • El tamaño máximo de un logotipo es:

    • Altura - 40 px

    • Ancho - 270 px

  • Cuando subes un logo con un tamaño mayor, el tamaño del logo se reduce y se mantiene dentro del tamaño máximo.

  • Por ejemplo, subir un logo con un tamaño 500x1000 px (altura x ancho) se reducirá a 40x80 px.

¿Cómo puedo añadir una URL personalizada para un logo?

Añade una URL de clic a tu logo con la URL del logo. Cuando un usuario hace clic en el logo, es redirigido al enlace proporcionado.

  1. Navega a Configuración () en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Personalización del sitio.

  3. Añade la URL deseada en el campo URL del logo.

  4. Haz Salvar.

NOTA

  • La URL del logo debe comenzar por https://.

  • Si la URL comienza con www. (por ejemplo, www.example.com) sin https://, mostrará un error de "URL inválida".

  • Si no se proporciona ninguna URL, hacer clic en el logotipo redirige a los usuarios a la página principal de la Knowledge Base.

  • La URL personalizada del logo es un campo opcional.

¿Cómo elegir el color de la marca?

Para elegir el color de marca deseado para tu sitio de la base de conocimiento, sigue los pasos siguientes:

  1. Navega a Configuración () en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Personalización del sitio.

  3. En Colores, puedes elegir el color de la marca . Este será el color principal para las CTA, estados de selección y más.

NOTA

Si has elegido la opción Ajuste automático de contraste de color para cumplir con los estándares WCAG, tanto los colores claros como oscuros se ajustarán automáticamente. Si no, tienes que ajustar manualmente los colores para cada tema.

  1. Una vez hecho, haz clic Salvar.

¿Cómo elijo la familia de fuentes en la configuración Personalizar sitio?

Para cambiar las fuentes de tu base de conocimiento, sigue los pasos siguientes:

  1. Navega a Configuración () en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Personalización del sitio.

  3. En la sección de Fuentes , habrá dos secciones: Análisis de fuentes de artículos y fuente del sitio.

  • Emparejamiento de fuentes de artículos: Esta fuente se aplicará a todos los títulos y contenidos de tu artículo.

NOTA

Haz clic en ¿Tienes en mente una combinación de fuentes específica?, para seleccionar más opciones de fuente. Al hacer clic en él, puedes elegir la fuente de títulos y contenido.

  • Fuente del sitio: Selecciona la fuente en el desplegable. Esto se aplicará en toda la base de conocimientos. Incluye el panel de navegación izquierdo (categorías, subcategorías, títulos de artículos) y la navegación (encabezado, pie de página, navegaciones secundarias, controles).

  1. Selecciona la fuente deseada y haz clic Salvar.

NOTA

Document360 proporciona una lista de fuentes comunes usadas en documentación. Sin embargo, puedes configurar la fuente que quieras en la base de conocimiento. Para más información, lee el artículo sobre Cómo configurar una fuente personalizada en la base de conocimiento.

¿Cómo cambio el estilo de párrafo por defecto?

Actualmente, no existe una opción directa para cambiar el estilo de párrafo por defecto. Sin embargo, puedes cambiar la fuente predeterminada del artículo en el editor Document360.

Para establecer la fuente predeterminada de tus artículos:

  1. Navega a Configuración () en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Personalización del sitio.

  3. En la sección de Fuentes , elige el par de fuentes deseado en la casilla de emparejamiento de fuentes del artículo . Esta fuente aparecerá en los artículos de la Base de conocimiento.

    Por ejemplo, si redactas contenido en Verdana el portal de la Base de conocimiento, pero seleccionas Ubuntu + Open Sans en la combinación de fuentes del artículo, en la página de la Base de Conocimientos, el título aparecerá en Ubuntu, y el contenido del artículo estará en Open Sans.

NOTA

También puedes seleccionar tu fuente personalizada para tus artículos. Para más información, lee el artículo sobre Cómo configurar una fuente personalizada en la base de conocimiento.

Para cambiar el estilo de párrafo de los artículos individuales:

  1. Abre el artículo deseado en el editor avanzado WYSIWYG y selecciona el texto.

  2. Haz clic en Formatear y luego elige un estilo de fuente en la sección de Tipografía .

¿Cómo cambio los estilos de botones?

Para cambiar los estilos de botones de tu sitio de base de conocimiento, sigue los pasos siguientes:

  1. Navega a Configuración () en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Personalización del sitio.

  3. En la sección de Estilo , puedes seleccionar el estilo de botones entre las opciones, incluyendo redondeado, afilado y burbuja.

¿Cómo cambio el diseño del sitio en la configuración de Personalizar?

Para cambiar la disposición del sitio en personalizar sitio, sigue los pasos siguientes:

  1. Navega a Configuración () en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Sitio de la base de conocimientos > Personalización del sitio.

  3. En Diseño puedes encontrar Ancho Completo y Centro.

  • Ancho completo: El ancho completo extenderá tu contenido hasta los bordes de una ventana del navegador.

  • Centro: El diseño central encajará mejor con tu contenido en el centro de una ventana del navegador.

  1. Haz Salvar.

¿Cómo establezco la fuente predeterminada para mis artículos en la base de conocimientos?

Para establecer la fuente predeterminada de tus artículos:

  1. Navega a Configuración () > Sitio de la base de conocimientos en la barra de navegación izquierda del portal de la base de conocimiento.

  2. En el panel de navegación izquierdo, navega hasta Personalización del sitio.

  3. En la sección de Fuentes , elige el par de fuentes deseado en la casilla de emparejamiento de fuentes del artículo . Esta fuente aparecerá en los artículos de la Base de conocimiento.

    Por ejemplo, si redactas contenido en Verdana el portal de la Base de conocimiento, pero seleccionas Ubuntu + Open Sans en la combinación de fuentes del artículo, en la página de la Base de Conocimientos, el título aparecerá en Ubuntu, y el contenido del artículo estará en Open Sans.

NOTA

También puedes seleccionar tu fuente personalizada para tus artículos. Para más información, lee el artículo sobre Cómo configurar una fuente personalizada en la base de conocimiento.