Cómo crear una base de conocimiento para su sitio web con Div

Mantener una base de conocimiento 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 conocimiento puede convertirse en un signo a largo plazo de calidad de seguro para su negocio. Pueden ser una excelente solución para frecuentes Preguntas, documentación, software, tutorial y más. En este tutorial, le mostraré cómo agregar una base de conocimiento a su sitio web con Div. Para hacer esto, utilizaré el complemento Echo Knowledge Base, que tiene algunas opciones de configuración útiles que facilitan la organización y el estilo de las páginas de la base de conocimiento. También le mostraré cómo puede enfatizar la página principal de la base de conocimiento y las páginas de los artículos utilizando Divi Builder.
Tire del ojo aquí hay una breve mirada a lo que construiremos. La página principal de la base de conocimiento

Ejemplo de la página del artículo

¿Qué necesitas para este tutorial?
El tema de la división (instalado y activo)
Echo Knowledge Base Plugin (instalado y activo)
Paquete digital de productos (disponible en divulder)
Active el tipo de publicación de la base de conocimiento en la división facilita la provisión de asistencia para ciertos tipos de puestos personalizados de terceros. Debido a que la base de conocimiento del complemento utiliza sus propios tipos de publicaciones para artículos, deberá activarlas en el DIV. Esto le permitirá usar Divin Builder para editar esos elementos.
Para hacer esto, vaya al tablero de WordPress y explore las opciones de temas de división>. Haga clic en la pestaña Generador y active el tipo de publicación “KB: Base de conocimiento”.

Creación de artículos y categorías en la base de conocimiento para tener una buena idea de cómo se verá el diseño, tendrá que tener algunos artículos de la base de conocimiento y categorías configuradas. Por ahora, está bien usar contenido simulado. Creación de las categorías de base de conocimiento Puede crear categorías de bases de conocimiento, así como para publicaciones normales de WordPress. Para hacer esto, explore las categorías de la base de conocimiento>. Luego agregue un nombre, un Slog y una categoría principal (si corresponde) para cada una de las categorías que utilizará para los artículos en la base de conocimiento. Para este ejemplo, hemos agregado 6 categorías de padres cada una con algunas subcategorías. Para darle una idea de hacia dónde va, así es como se mostrarán las categorías de padres y la subcategoría en la página principal de la base de conocimiento.

Asignando categorías a nuevos artículos en este momento. Sus categorías están en su lugar, pero no hay artículos que se les asignen. Deberá crear artículos y asignar una (o más) categorías que haya creado a cada uno. Puede crear un nuevo elemento tal como haría una nueva publicación en WordPress. Navegue a su base de conocimiento> Agregue un nuevo elemento. Luego agregue un título y asigne una categoría al artículo. Notará que Divi Builder se puede activar porque activamos este tipo de publicación en las opciones de temas. Compartiré algunos consejos para hacer esto más tarde. Pero por ahora, solo puede agregar un editor predeterminado de WordPress. Luego publique el artículo.

Continúe el mismo proceso para crear todos los elementos necesarios para que cada categoría tenga al menos un artículo asignado. Verifique la página predeterminada de la base de conocimiento Una vez que activa el complemento, se crea automáticamente una página de base de conocimiento. Esta página contiene el código corto necesario para implementar la base de conocimiento principal.

La configuración de la apariencia y el estilo del complemento de la base de conocimiento de la base de conocimiento tiene muchas opciones útiles para configurar la base de conocimiento 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.

Configuración de la página principal de configuración de la página principal, haga clic en el botón principal de la página en la parte superior de la página de configuración de la base de conocimiento. En la pestaña Configuración, puede dejar el estilo y los colores implícitos. Pero para este ejemplo, cambiaré la opción de plantilla para usar el “conocimiento del conocimiento diseñado para artículos”. Lo hago principalmente porque le permite personalizar la página de archivo con diferentes opciones de estilo prefabricado. Pero, si desea mantener las plantillas de temas de la Divic para esto, puede mantener la opción seleccionada en “Plantillas de tema actuales utilizadas para mensajes y páginas”.

En la ventana de plantilla emergente, anule la selección de la opción de visualización del título principal y establezca todos los rellenos y bordes 0px. Esto nos permitirá usar el Builder Divin para el título y el espacio de la página.

Página principal de opciones de organización y todos los textos por ahora, dejaré las opciones organizadas y todo el texto para sus valores predeterminados, pero no dude en cambiarlas por su cuenta. En la pestaña Organizar, incluso puede deslizar y colocar las categorías en cualquier orden que desee. Y las opciones de todos los texto le permiten cambiar la formulación utilizada en toda la página (es decir, el título de búsqueda y el texto del botón). Este es la mayor parte del estilo para la base principal del conocimiento. No usaré todas estas configuraciones, pero cambiaré algunos colores y agregaré algunos iconos. Así es como puede igualar la base de conocimiento con su división premoded. Como tengo la intención de usar el paquete de productos digitales, usaré esos colores para enfatizar la página de base de conocimiento. Busque los colores del cuadro en la categoría de cuadro de búsqueda, seleccione los colores y actualice lo siguiente: Título: # 33333 Base de búsqueda: #FFFFF El fondo del botón: # 091C4F
Estilo de contenido en la categoría de contenido, seleccione Estilo y actualice lo siguiente: Ancho de página: Ancho completo

Lista de elementos de estilo y colores en la lista de categoría de artículos, seleccione estilo y actualice lo siguiente:
Icono: flecha triangular La altura de la lista de artículos: 100px de altura min (esto es útil para que todas las cajas tengan la misma altura)

Luego seleccione Colores y actualice lo siguiente: Texto de los artículos: # 091C4F Icono Artículos: # 6767EF

Categorías Estilo y colores Luego, en categorías, seleccione Estilo y actualice lo siguiente: Iconos de ubicación: UP

Luego haga clic en uno de los cuadros de categoría en la vista previa para seleccionarlo. Luego seleccione un icono de categoría respectivo. Haga esto para cada uno de los cuadros de categoría. ¡Hay más de 500 iconos de los cuales puede elegir! Luego seleccione colores y actualice lo siguiente: icono de categoría de nivel superior: #fffff text e icono: #333333 Divitador: #fffff Texto del título de cuadro de categoría: #FFFFFF de fondo de El cuadro de categoría: # 091C4F

Las 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 Características. Aquí puede personalizar elementos como el botón Atrás y las migas de pan que aparecerán en la parte superior del artículo.

Por ahora, solo coincidiré con el botón Atrás con el aspecto prefabricado que usaré para la página del elemento. En posiciones, seleccione la navegación de retroceso y actualice lo siguiente: Color de texto: #fffff Color del sótano: # 091C4F Color de borde: # 091C4F Ancho: 3 PX
Archive el estilo de estilo de la página para cambiar la apariencia de la página de archivo, haga clic en “Archivo” en la parte superior de la página. En la pestaña Configuración, verá una lista vertical de diferentes estilos disponibles. Mantengo los valores implícitos, pero me siento libre de experimentar con los otros estilos. Aquí hay un ejemplo de cómo se ve una página de archivo de categorías con estilo predeterminado 1.

Diseñando la página de la base de conocimiento con Div Now, después de completar la configuración de las páginas de nuestra base de conocimiento, estamos listos para completar el diseño de la página principal de la base de conocimiento con Div Builder. Primero, vaya a editar los títulos de la página “Base del conocimiento” que fue creado automáticamente por complemento. Luego, implementa Divi Builder. Seleccione la opción “Elija un aspecto prefabricado” y luego en la ventana de carga emergente en la biblioteca, seleccione el paquete de producto digital. Luego implementa la apariencia de la página de documentación en la página.

Después de cargar la aparición en la página, seleccione “Construir en la parte delantera”. Verá que la sección superior contiene el módulo de texto con el código corto que muestra nuestra nueva base de conocimiento. Ahora, todo lo que tenemos que hacer es moverlo donde queremos que esté en el aspecto prefabricado y ajustar el diseño según sea necesario con las opciones de Div Builder. Para este ejemplo, moví el módulo de texto que contiene el código corto KB directamente debajo del módulo de texto con el título “Documentación”. Luego eliminé todo hasta que lo único que me quedó fue la sección superior que contiene una fila con el módulo de texto “Documentación” y el módulo de texto que contiene el código corto. También mantuve la sección inferior con CTA.
Para completar el diseño, abra la configuración del módulo de texto que contiene el código corto y actualice lo siguiente: Wallpaper: #FFFFFFF Font Texto: Poppins Cornillas redondeadas: 10 PX

Aquí está el diseño final.

Y también se ajusta maravillosamente en el móvil.

Diseño de la página del artículo utilizando Divi Builder porque activé el tipo de publicación de la base de conocimiento de KB En las opciones del tema de la Divic, puede diseñar sus artículos con Divi Builder. La plantilla del artículo de la base de conocimiento limita Divi Builder al contenido de la página de título y el botón Pesmet y el botón Atrás. También limita el contenido del Builder Divii a un ancho máximo de 1080px. Para este ejemplo, comenzaré a diseñar un artículo de la base de conocimiento con un aspecto prefabricado. Para hacer esto, vaya a editar uno de los artículos e implementar Divi Builder. Seleccione “Elija un aspecto prefabricado” y en la ventana de la biblioteca de carga emergente de carga, seleccione el paquete de diseño del producto digital e implementa la página de contacto del producto digital. Mira ahora cómo se ve el artículo. Tenga en cuenta que el contenido de Divi Builder está directamente bajo el título del artículo, Pesmet y el botón Atrás, que no son personalizables por Divi Builder. Puede usar los antecedentes de la sección superior de la página de contacto. Busque buscar como una sección para diferentes secciones (o pasos) del artículo. Y puede agregar fácilmente capturas de pantalla con el módulo de imagen. Básicamente, tiene el potencial ilimitado de Divi Builder para todo el artículo. Aquí hay un ejemplo simple de lo que una página de artículo diseñada con Div.