Cómo crear una base de conocimientos para su sitio web con Divi


Tener una base de conocimientos en su sitio web puede ser un activo extremadamente valioso tanto para sus clientes como para sus empleados. Y si se hace correctamente, una base de conocimientos puede convertirse en un sello de garantía de calidad de larga data para su negocio. Pueden ser una gran solución para preguntas frecuentes, documentación, manuales de software, tutoriales y mucho más.

En este tutorial, le mostraré cómo agregar una base de conocimientos a su sitio web con Divi. Para hacer esto, usaré el Complemento Echo Knowledge Base (versión gratuita) que tiene algunas opciones de configuración útiles que facilitan la organización y el estilo de las páginas de la base de conocimientos. También mostraré cómo se puede diseñar la página principal de la base de conocimientos y las páginas de artículos con Divi Builder.

Vistazo

Aquí hay un adelanto de lo que estaremos construyendo.

La página principal de la base de conocimientos

base de conocimientos divi

Ejemplo de página de artículo

base de conocimientos divi

Qué necesitas para este tutorial

Habilitar el tipo de publicación de la base de conocimientos en Divi

Divi facilita la prestación de asistencia para determinados tipos de publicaciones personalizadas de terceros. Dado que el complemento de la base de conocimientos utiliza sus propios tipos de publicaciones para los artículos, deberá habilitarlos en Divi. Esto le permitirá utilizar Divi Builder para editar esos artículos.

Para hacer esto, vaya a su Panel de WordPress y navegue a Divi> Opciones de tema. Haga clic en la pestaña Creador y habilite el tipo de publicación "KB: Base de conocimientos".

base de conocimientos divi

Creación de artículos y categorías de la base de conocimientos

Para tener una buena idea de cómo se verá el diseño, necesitará configurar algunos artículos y categorías de la base de conocimientos. Por ahora, está bien usar contenido simulado.

Creación de categorías de la base de conocimientos

Puede crear categorías de la base de conocimientos como lo haría para las categorías de publicaciones normales en WordPress.

Para hacer esto, vaya a Base de conocimientos> Categorías. Luego agregue un Nombre, Slug y Categoría principal (si corresponde) para cada una de las categorías que usará para los artículos de la base de conocimientos. Para este ejemplo, agregué 6 categorías principales, cada una con un par de subcategorías.

base de conocimientos divi

Para darle una idea de hacia dónde se dirige, así es como se mostrarán las categorías principales y las subcategorías en la página principal de la base de conocimientos.

base de conocimientos divi

Asignar categorías a artículos nuevos

En este momento, sus categorías están en su lugar pero no hay artículos asignados a ellas. Deberá crear artículos y asignar una (o más) de las categorías que creó a cada uno.

Puede crear un nuevo artículo como lo haría con una nueva publicación en WordPress. Vaya a Base de conocimientos> Agregar artículo nuevo. Luego agregue un título y asigne una categoría al artículo. Notará que Divi Builder se puede activar porque habilitamos este tipo de publicación en Opciones de tema. Compartiré algunos consejos para hacer esto más tarde. Pero por ahora, puede agregar un editor de WordPress predeterminado de contenido simulado. Después de eso publique el artículo.

base de conocimientos divi

Continúe con este mismo proceso para crear todos los artículos necesarios para que cada categoría tenga al menos un artículo asignado.

Consulte la página de la base de conocimientos predeterminada

Una vez que activa el complemento, se crea automáticamente una página de la base de conocimientos. Esta página tiene el código abreviado necesario para implementar la base de conocimientos principal.

base de conocimientos divi

Así es como se verá la página de forma predeterminada.

base de conocimientos divi

Configurar el diseño y el estilo de la base de conocimientos

El complemento de la base de conocimientos tiene muchas opciones útiles para configurar la base de conocimientos para que coincida con el diseño de su sitio web. Hay opciones personalizables para la página principal, la página del artículo y la página de archivo.

base de conocimientos divi

Configurar la página principal

Configuración de la página principal

Primero, haga clic en el botón Página principal en la parte superior de la página de configuración de la base de conocimientos. En la pestaña de configuración, puede dejar el estilo y los colores de diseño predeterminados. Pero para este ejemplo, voy a cambiar la opción de plantilla para usar las "Plantillas de la base de conocimientos diseñadas para artículos". Hago esto principalmente porque te permite personalizar la página de archivo con diferentes opciones de estilo predefinidas. Pero, si desea conservar las Plantillas de temas Divi para esto, puede mantener seleccionada la opción "Plantillas de temas actuales utilizadas para publicaciones y páginas".

En la ventana emergente Plantillas, anule la selección de la opción Mostrar título principal y configure todos los rellenos y márgenes en 0px. Esto nos permitirá usar Divi Builder para el título y el espaciado de la página.

base de conocimientos divi

Opciones de Organizar página principal y Todo el texto

Por ahora, dejaré las opciones Organizar y Todo el texto en sus valores predeterminados, pero siéntase libre de cambiarlas por su cuenta. En la pestaña Organizar, incluso puede arrastrar y soltar sus categorías en el orden que desee. Y las opciones de Todo el texto le permiten cambiar la redacción utilizada en toda la página (es decir, el título de búsqueda y el texto del botón).

Opción de ajuste de la página principal

A continuación, haga clic en la pestaña Tuning. Aquí es donde se lleva a cabo la mayor parte del estilo de la base de conocimientos principal. No voy a usar todas estas configuraciones, pero cambiaré algunos colores y agregaré algunos íconos. De esta manera puede hacer coincidir la base de conocimientos con su diseño Divi prediseñado. Dado que planeo usar el paquete de diseño de Producto digital, usaré esos colores para diseñar la página de la base de conocimientos.

Colores del cuadro de búsqueda

Bajo la caja de búsqeda categoría, seleccione colores y actualice lo siguiente:

Título: # 333333
Fondo de búsqueda: #ffffff
Fondo del botón: # 091c4f

base de conocimientos divi

Estilo de contenido

Bajo la Contenido categoría, seleccione Estilo y actualice lo siguiente:

Ancho de página: ancho completo

base de conocimientos divi

Lista de artículos Estilo y colores

Bajo la Lista de artículos categoría, seleccione Estilo y actualice lo siguiente:

Icono: Triángulo de flecha
Altura de la lista de artículos: altura mínima de 100 px (esto es útil para hacer que todas las cajas tengan la misma altura)

base de conocimientos divi

Luego seleccione Colores y actualice lo siguiente:

Texto de los artículos: # 091c4f
Icono de artículos: # 6767ef

base de conocimientos divi

Categorías Estilo y colores

Siguiente, debajo Categorías, Seleccione Estilo y actualice lo siguiente:

Ubicación de los iconos: arriba

Luego, haga clic en uno de los cuadros de categoría en la vista previa para seleccionarlo. Luego, seleccione un icono de categoría de esa categoría específica. Haga esto para cada uno de los cuadros de Categoría.

¡Hay más de 500 iconos para elegir!

base de conocimientos divi

Luego seleccione Colores y actualice lo siguiente:

Icono de categoría de nivel superior: #ffffff
Texto e icono de la subcategoría: # 333333
Divisor: #ffffff
Texto del encabezado del cuadro de categoría: #ffffff
Fondo del encabezado del cuadro de categoría: # 091c4f

base de conocimientos divi

Características de la página del artículo

Ahora que tenemos la página principal configurada, haga clic en la página del artículo en la parte superior de la página. Luego haga clic en la pestaña de características. Aquí puede personalizar elementos como el botón Atrás y las rutas de navegación que aparecerán en la parte superior del diseño del artículo.

Por ahora, solo voy a hacer coincidir el botón Atrás con el diseño prediseñado que usaré para la página del artículo. En Funciones, seleccione Navegación hacia atrás y actualice lo siguiente:

Color del texto: #ffffff
Color de fondo: # 091c4f
Color del borde: # 091c4f
Ancho del borde: 3px

base de conocimientos divi

Estilo de diseño de página de archivo

Para cambiar el diseño de la página de archivo, haga clic en "Página de archivo" en la parte superior de la página. En la pestaña de configuración, verá una lista desplegable de los diferentes estilos disponibles. Conservo los valores predeterminados, pero siéntase libre de experimentar con los otros estilos.

A continuación, se muestra un ejemplo de cómo se ve una página de archivo de categorías con el Estilo 1 predeterminado.

base de conocimientos divi

Diseñar la página de la base de conocimientos con Divi

Ahora que hemos completado la configuración de nuestras páginas de la base de conocimientos, estamos listos para completar el diseño de la página principal de la base de conocimientos con Divi Builder.

Primero, vaya a editar la página de Títulos "Base de conocimientos" que fue creada automáticamente por el complemento.

base de conocimientos divi

Luego, implemente Divi Builder. Seleccione la opción "Elegir un diseño prefabricado" y luego en la ventana emergente Cargar desde biblioteca, seleccione el paquete de diseño de producto digital. Luego implemente el diseño de página de documentación en la página.

base de conocimientos divi

Una vez que el diseño se cargue en la página, seleccione "Construir en la interfaz".

Verá que la sección superior contiene el módulo de texto con el código corto que muestra nuestra base de conocimientos con un nuevo estilo.

Ahora todo lo que tenemos que hacer es moverlo al lugar que queremos que esté dentro del diseño prefabricado y ajustar el diseño según sea necesario con las opciones de Divi Builder.

Para este ejemplo, moví el módulo de texto que contiene el código corto de KB directamente debajo del módulo de texto con el título "Documentación".

Luego borré todo hasta que lo único que me quedaba era la sección superior que contenía una fila con el módulo de texto "Documentación" y el módulo de texto que contenía el código corto. También mantuve la sección inferior con el CTA.

base de conocimientos divi

Para terminar el diseño, abra la configuración del módulo de texto que contiene el código corto y actualice lo siguiente:

Color de fondo: #ffffff
Fuente de texto: Poppins
Esquinas redondeadas: 10px

base de conocimientos divi

Aquí está el diseño final.

base de conocimientos divi

Y también se ajusta muy bien en dispositivos móviles.

base de conocimientos divi

Diseñar la página del artículo con Divi Builder

Debido a que activamos el tipo de publicación de KB Knowledge Base en Divi Theme Options, puede diseñar sus artículos usando Divi Builder. La plantilla de artículo de la base de conocimientos limita el Divi Builder al contenido que se encuentra debajo del título de la página, las rutas de navegación y el botón Atrás. También limita el contenido del generador de divi a un ancho máximo de 1080px.

Para este ejemplo, voy a poner en marcha el diseño de un artículo de la base de conocimientos con un diseño prediseñado. Para hacer esto, vaya a editar uno de los artículos e implemente Divi Builder. Seleccione "Elegir un diseño prediseñado" y en la ventana emergente Cargar desde biblioteca, seleccione el paquete de diseño de producto digital e implemente la página de contacto del producto digital.

Ahora mira cómo se ve el artículo. Tenga en cuenta que el contenido de Divi Builder se encuentra directamente debajo del título del artículo, las migas de pan y el botón Atrás, que no son personalizables por Divi Builder.

base de conocimientos divi

Pero aún tiene algunas opciones de personalización poderosas para el contenido que permiten Divi Builder. Puede utilizar el fondo de la sección superior del diseño de la página de contacto para buscar como fondo de sección las diferentes secciones (o pasos) del artículo. Y puede agregar fácilmente una captura de pantalla usando el módulo de imagen. Básicamente, tienes el potencial ilimitado de Divi Builder para todo el artículo.

Aquí hay un ejemplo simple de cómo podría verse una página de artículo diseñada con Divi.

base de conocimientos divi

Por supuesto, puede agregar CSS personalizado para ajustar el ancho del contenedor del artículo para obtener un diseño de ancho completo. Y puede agregar código para ocultar el título y luego usar el contenido dinámico de Divi para colocar el título del artículo en cualquier lugar que desee dentro de Divi Builder.

Pensamientos finales

El complemento Echo Knowledge Base es sorprendentemente poderoso, incluso sin todos los complementos premium disponibles (aunque vale la pena revisarlos) .Las opciones de configuración le permiten organizar y diseñar sus páginas de base de conocimientos para que coincidan con su diseño Divi fácilmente. Para colmo, incluso puede usar Divi Builder para diseñar su página de base de conocimientos y su página de artículo. Espero que este tutorial sea útil para aquellos que buscan agregar una base de conocimientos a su sitio web Divi.

Espero tener noticias tuyas en los comentarios.

¡Salud!