La página de inicio (anteriormente "Creador de páginas de inicio") es la primera página que verá un usuario final cuando visite su base de conocimientos. Puede personalizar su página de inicio agregando enlaces, cambiando colores, incluyendo categorías de su base de conocimientos y más.

Página principal

1_Screenshot-Document360_landing_page

NOTA
El encabezado, la navegación principal, la navegación secundaria y el pie de página se muestran en la página principal del sitio de la base de conocimientos. Estos se pueden configurar en {{variable.Settings}} () > {{variable.Customize site}} > {{variable.Site header and footer}}.

Ver: Cómo personalizar la página de inicio

Acceso a la configuración de diseño de la página de inicio

Para acceder a la configuración de diseño de la página de inicio,

Vaya a {{variable.Settings}} () en la barra de navegación izquierda del portal de la base de conocimientos.
En el panel de navegación izquierdo, vaya a {{variable.Knowledge base site}} > {{variable.Customize site}}.
Aparecerá la página Personalizar sitio , con todas las configuraciones básicas de diseño del sitio.
Haga clic en el botón Personalizar sitio .
Seleccione Inicio en Páginas principales en el menú desplegable de la izquierda.
Un diseño de página de inicio predeterminado está disponible para que lo personalice. Las diferentes secciones de la página de inicio se enumeran a la izquierda y hay una vista previa en vivo disponible a la derecha.
Puedes personalizar los Hero section elementos.
Si es necesario, haga clic en Agregar sección y elija entre las opciones de bloque de cuerpo disponibles, cada una destacada para necesidades de contenido específicas:
- Rich text: Agregue y formatee contenido textual mediante Markdown para mejorar la legibilidad y la estructura.
- Multicolumn card section: Muestra el contenido en columnas organizadas, perfecto para mostrar varios temas o características uno al lado del otro.
- Image with text: Combine elementos visuales con descripciones textuales para crear un diseño más dinámico y visualmente atractivo.
- Custom code section: Incruste código HTML y CSS personalizado para una personalización avanzada del contenido.
- Knowledge base categories: Resalte las categorías clave de su base de conocimientos para mejorar la navegación.
- Widgets: Añade elementos interactivos, como encuestas o formularios de contacto, para mejorar la participación de los usuarios.
{{variable.Body blocks}} permitir a los administradores de la base de conocimientos crear páginas de inicio visualmente atractivas e intuitivas que guíen eficazmente a los usuarios. Cada bloque proporciona una forma única de mostrar el contenido, ofreciendo flexibilidad en el diseño de {{variable.Home page}}un archivo .
Por ejemplo, una empresa de software puede utilizar el {{variable.Knowledge base categories}} bloque para mostrar guías de productos. Por el contrario, el {{variable.Image with text}} bloque puede resaltar características o anuncios clave, mejorando la experiencia y el compromiso del usuario.
Puede reordenar la sección en el panel izquierdo arrastrando y soltando () y haciendo clic en el icono del ojo () para ocultar el elemento deseado.
NOTA
La sección principal del héroe en la parte superior no se puede arrastrar ni mover.
Haga clic {{variable.preview}} para ver cómo aparecerán los cambios en el sitio de la base de conocimientos.
Haga clic {{variable.Save}} para guardar los cambios sin aplicarlos inmediatamente.
Haga clic {{variable.Publish}} para que los cambios recientes sean visibles para los lectores.
Haga clic en el {{variable.More}} icono () y seleccione esta opción {{variable.Reset to published version}} para descartar todas las personalizaciones guardadas y no guardadas y volver a la última versión publicada.
NOTA
- El botón Publicar se activa solo después de guardar los cambios.
- {{snippet.Reset to published version}}

Document360 interface showing options to add sections and manage content effectively.

Temas de la página de inicio

Personalice su página de inicio con los temas de Document360. Puede configurar un tema único para cada espacio de trabajo o idioma.

Haga clic en el icono Temas () en la página de diseño de la página de inicio
Seleccione uno de los temas: Participar, Innovar, Aprender o Predeterminado.
Haga clic en el icono Ojo () para ver una vista previa estática.
Haga clic en Activar para implementar el tema seleccionado.

Document360 interface showing theme options for customizing a knowledge base homepage.

NOTA
La resolución recomendada para la imagen de la página de inicio es de 1920x415 píxeles (ancho x alto). Puede personalizar la resolución según sea necesario.

SEO de la página de inicio

Puedes usar un meta título, una meta descripción y una imagen destacada para tu página de inicio.

Para personalizar la configuración de SEO de la página de inicio:

Haga clic en el {{variable.Settings}} icono () en la página de diseño de la página de inicio.
Aparecerá el {{variable.Settings}} panel.
Configure los siguientes ajustes:
1. Título: Introduzca el título que aparecerá en la pestaña del navegador de la página de inicio de la base de conocimientos.
2. Meta descripción: Proporciona una breve meta descripción para tu página de inicio. Esta configuración de SEO se aplicará solo a la página de inicio.
3. Configuración de visibilidad: active esta opción para mantener visible la página de inicio en el sitio de la base de conocimientos. Si se desactiva, la página de inicio se ocultará y los usuarios serán dirigidos a la página de documentación.
4. Imagen destacada: haz clic en Elegir imagen para subir una imagen destacada de Drive.
Haga clic {{variable.Save}} para aplicar los cambios.

Settings menu for Document360 with SEO options and visibility settings displayed.

Documentación

La página Documentación le permite personalizar la navegación por categorías ajustando la posición de la barra de búsqueda y aplicando colores de fondo.

Ver: Cómo personalizar la página de documentación

Acceso a la configuración de diseño de la página Documentación

Para acceder a la configuración de diseño de la página Documentación:

Vaya a {{variable.Settings}} () en la barra de navegación izquierda del portal de la base de conocimientos.
En el panel de navegación izquierdo, vaya a {{variable.Knowledge base site}} > {{variable.Customize site}}.
Aparece la {{variable.Customize site}} página que muestra todas las configuraciones básicas de diseño del sitio.
Haga clic en {{variable.Customize site}}.
En el menú desplegable de la izquierda, seleccione Documentación en Páginas principales.
Un diseño de página de documentación predeterminado estará disponible para que lo personalice. Las opciones de personalización se enumeran a la izquierda y una vista previa en vivo está disponible a la derecha.
Elija la posición de la barra de búsqueda:
- Encabezado secundario: Coloque la barra de búsqueda en el encabezado secundario en la parte superior derecha. De forma predeterminada, se seleccionará esta opción.
- Panel izquierdo: Coloque la barra de búsqueda en la parte superior del panel de navegación izquierdo.
Elija el estilo de barra de búsqueda deseado: Cuadro de entrada o botón.
Seleccione la casilla de verificación Color de fondo personalizado para aplicar un color personalizado a la barra de búsqueda.
NOTA
Al seleccionar un color de fondo personalizado, el color primario de los temas oscuro y claro se rellena automáticamente. Puede personalizar estos colores según sea necesario.
La casilla de verificación Mostrar método abreviado de teclado está seleccionada de forma predeterminada.
- Si está activado, Ctrl + K aparece en la barra de búsqueda.
- Esto se aplica tanto a la barra de búsqueda de navegación izquierda (dentro de los artículos) como a la barra de búsqueda de la página de inicio principal.
En la sección Navegación por categorías , seleccione Agregar color de fondo para aplicar un color de fondo a la sección de categorías en el sitio de Knowledge Base. De forma predeterminada, se aplica un color ceniza claro (#F4F4F5), que no se puede personalizar.
Haga clic {{variable.preview}} para ver cómo aparecerán los cambios en el sitio de la base de conocimientos.
Haga clic {{variable.Save}} para guardar los cambios sin aplicarlos inmediatamente.
Haga clic {{variable.Publish}} para que los cambios recientes sean visibles para los lectores.
Haga clic en el {{variable.More}} icono () y seleccione esta opción {{variable.Reset to published version}} para descartar todas las personalizaciones guardadas y no guardadas y volver a la última versión publicada.

NOTA
{{snippet.Reset to published version}}

Document360 interface showing documentation options and search functionality for users.

Página de inicio de sesión

Si su base de conocimientos es de acceso privado o mixto, los lectores deben iniciar sesión con sus credenciales para ver el contenido. Puede personalizar esta página de inicio de sesión mediante la opción Personalizar sitio disponible en Document360.

Ver: Cómo personalizar la página de inicio de sesión

Acceso a la configuración de diseño de la página de inicio de sesión

Para acceder a la configuración de diseño de la página de inicio de sesión:

Vaya a {{variable.Settings}} () en la barra de navegación izquierda del portal de la base de conocimientos.
En el panel de navegación izquierdo, vaya a {{variable.Knowledge base site}} > {{variable.Customize site}}.
La página contiene todas las configuraciones básicas de diseño del sitio.
Haga clic en el botón Personalizar sitio .
En el menú desplegable de la izquierda, selecciona Iniciar sesión en Páginas principales.
Verás un diseño de página de inicio de sesión predeterminado listo para personalizar.
Elija una de las siguientes opciones:
- Estilo básico: Personaliza solo la imagen predeterminada. Expanda el menú desplegable Imagen con texto y seleccione Imagen. Se abrirá el panel Imagen. Haga clic en Cambiar y elija la imagen deseada de las imágenes del sistema. En la sección Alineación, seleccione Izquierda, Centro o Derecha para ajustar la alineación de la imagen.
- Estilo personalizado: agregue HTML y CSS personalizados. Puede activar o desactivar el botón de alternancia Vista previa a la derecha para cambiar entre la vista renderizada y la vista de código.
Haga clic {{variable.preview}} para ver cómo aparecerán los cambios en el sitio de la base de conocimientos.
Haga clic {{variable.Save}} para guardar los cambios sin aplicarlos inmediatamente.
Haga clic {{variable.Publish}} para que los cambios recientes sean visibles para los lectores.
Haga clic en el {{variable.More}} icono () y seleccione esta opción {{variable.Reset to published version}} para descartar todas las personalizaciones guardadas y no guardadas y volver a la última versión publicada.

NOTA
{{snippet.Reset to published version}}

Preguntas frecuentes

¿Cómo agrego imágenes a la página de inicio?

Para agregar imágenes a la página de inicio, pegue el siguiente código en el Custom HTMLarchivo :

<img src="paris.jpg" alt="Paris" class="center">

Para personalizar la alineación, agregue el siguiente código CSS en la Custom CSS & JavaScript sección:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

¿Cómo puedo cambiar la posición de la barra de búsqueda para que se refleje en el sitio de la base de conocimientos?

Para ajustar la posición de la barra de búsqueda en el sitio de la base de conocimientos, siga estos pasos:

Vaya a {{variable.Settings}} () en la barra de navegación izquierda del portal de la base de conocimientos.
En el panel de navegación izquierdo, vaya a {{variable.Knowledge base site}} > {{variable.Customize site}}.
Haz clic en Personalizar sitio. Seleccione el menú desplegable y haga clic en Documentación.
En el panel izquierdo, tiene dos opciones para cambiar la posición de la barra de búsqueda.
Panel izquierdo: Coloque la barra de búsqueda en el árbol de categorías en el lado izquierdo.
Encabezado secundario: Coloque la barra de búsqueda en el lado derecho del encabezado secundario.
Si es necesario, marque la casilla Agregar color de fondo para aplicar el color de fondo a la barra de búsqueda.
Una vez hecho esto, haga clic en Guardar y publicar.

¿Cómo puedo cambiar el título de la pestaña del navegador para la página de inicio de mi base de conocimientos?

El título SEO de la página de inicio aparece como el nombre de la pestaña del navegador. Para cambiar el título SEO de la página de inicio:

Vaya a {{variable.Settings}} () en la barra de navegación izquierda del portal de la base de conocimientos.
En el panel de navegación izquierdo, vaya a {{variable.Knowledge base site}} > {{variable.Customize site}}.
Aparecerá la página Personalizar sitio , que contiene todas las configuraciones básicas de diseño del sitio.
Haga clic en el botón Personalizar sitio .
En el menú desplegable de la izquierda, selecciona Inicio.
Haga clic en el icono Configuración () en la página de inicio.
Aparecerá el panel Configuración .
Introduzca el título deseado para su página de inicio.
Una vez hecho esto, haga clic en Guardar y publicar.

¿Cómo integrar un cargador de video en tu página de inicio?

Agregar un cargador de video visualmente atractivo a su página de inicio puede crear una sensación de curiosidad e interactividad para sus visitantes. Siga estos sencillos pasos para integrar sin problemas un cargador de vídeo:

Vaya a {{variable.Settings}} () en la barra de navegación izquierda del portal de la base de conocimientos.
En el panel de navegación izquierdo, vaya a {{variable.Knowledge base site}} > {{variable.Customize site}}.
Aparecerá la página Personalizar sitio , que contiene todas las configuraciones básicas de diseño del sitio.
Haga clic en el botón Personalizar sitio .
En el menú desplegable de la izquierda, selecciona Inicio.
Crea una nueva sección de código personalizado e inserta el siguiente código HTML, reemplazando el src enlace con el enlace de video de tu unidad:
```
htmlCopy code<div class="video__loader">
    <video muted autoplay loop>
        <source src="https://cdn.document360.io/560b3c6e-18a1-4ad6-babc-d0257662eab2/Images/Documentation/Revolving_Video.mp4" />
    </video>
</div>
```
Este código integrará a la perfección el cargador de video en su página de inicio, mejorando su atractivo visual y cautivando a su audiencia desde el momento en que lleguen.
En el menú desplegable de la izquierda, seleccione CSS/JavaScript personalizado y vaya a la pestaña CSS .

Reemplace "Innovate" en el siguiente fragmento de código el nombre de su tema configurado (por ejemplo, Participar, Aprender, Innovar o Predeterminado):

cssCopy codebody.innovate {
    position: relative;
    overflow: hidden !important;
}

body.innovate.custom--loaded {
    overflow: auto !important;
}

/* Loader */
.video__loader {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--color-dark);
    opacity: 1;
    visibility: visible;
    z-index: 9999999999;
    transition: all 1s ease;
}

.video__loader.remove--loader {
    opacity: 0;
    visibility: hidden;
}

.video__loader video {
    width: 100%;
}

Esto garantiza que el estilo CSS se alinee con el tema elegido, optimizando la presentación visual para mejorar la experiencia del usuario.

Vaya a la pestaña JavaScript .

Reemplace "innovate" en el siguiente fragmento de código con el nombre de su tema:

javascriptCopy code/* Loader */
var elBody = document.querySelector("body.innovate");
var customLoaderVideo = document.querySelector(".video__loader");

document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        elBody?.classList.add("custom--loaded");
        customLoaderVideo?.classList.add("remove--loader");
    }, 5000);
});

Esta personalización garantiza que la funcionalidad de JavaScript se integre a la perfección con su tema, mejorando el rendimiento general de su sitio.

NOTA
La función de cargador de vídeo funcionará exclusivamente en la página de inicio y no se aplicará a las páginas de documentación.

¿Cómo desactivar la página de inicio en el sitio de la base de conocimientos?

Vaya a {{variable.Settings}} () en la barra de navegación izquierda del portal de la base de conocimientos.
En el panel de navegación izquierdo, vaya a {{variable.Knowledge base site}} > {{variable.Customize site}}.
Haga clic en el icono Configuración () en la página de diseño de la página de inicio.
Desactive el botón de alternancia Configuración de visibilidad y haga clic en Guardar.

¿Cómo agregar un botón de contacto/registro a su página de inicio de sesión?

Agregar un botón de soporte a su página de inicio de sesión puede simplificar el proceso de búsqueda de ayuda. Siga estos sencillos pasos para integrar sin problemas un botón de soporte en su página de inicio de sesión:

Vaya a {{variable.Settings}} () en la barra de navegación izquierda del portal de la base de conocimientos.
En el panel de navegación izquierdo, vaya a {{variable.Knowledge base site}} > {{variable.Customize site}}.
Seleccione el botón Personalizar sitio .
Seleccione Iniciar sesión en el menú desplegable de la izquierda en el grupo Páginas principales.
A continuación, elija el botón de opción Estilo personalizado para activar las modificaciones específicas para su página de inicio de sesión.

En la pestaña Personalización de HTML, agregue el siguiente código para crear el botón de soporte:

htmlCopy code<div class="login-form--support">
    <button class="support-button">
        <a href="Support portal button or registration button link">Contact Support</a>
    </button>
    <p>Click here to Contact Support</p>
</div>

Junto a la pestaña HTML, busca la pestaña de personalización de CSS. Pegue el siguiente código para asegurarse de que el botón de soporte esté centrado en la página:
```
cssCopy code.login-form--support {
    text-align: center; /* Centers the content inside the element */
}
```

Siguiendo estos pasos, agregará con éxito un botón de soporte a su página de inicio de sesión. Esta mejora permite a los usuarios que enfrentan desafíos acceder fácilmente a los recursos de soporte sin salir de la interfaz de inicio de sesión, lo que mejora significativamente su experiencia. Proporcionar asistencia rápida justo donde se necesita puede conducir a una mayor satisfacción del usuario.