Cómo agregar widgets de menú para publicar categoría en su Div Global

Al crear un sótano personalizado en el constructor de Divin, hay varias formas de agregar los elementos del sótano. Puede elegir una base basada en módulos, en el que agrega elementos del sótano de arriba en los módulos de enlace apropiados, pero también puede decidir agregar diferentes widgets de sótano a su diseño, utilizando el módulo de barra lateral de Divbar y estilizarlos utilizando el módulo Built -IN Built. Opciones. En el tutorial de hoy, le mostraremos cómo pasar por la segunda opción. Específicamente, le mostraremos cómo agregar widgets desde el menú Post Categoría a su sótano. Comenzaremos agregando las diferentes categorías de publicaciones en nuestro sitio. Luego construiremos los menús del sótano en WordPress. Luego, crearemos nuestros widgets y por último, pero no menos importante, agregaremos un widget a nuestro Divol personalizado de la división del constructor de temas. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la plantilla de sótano global gratuita para poner su mano en la plantilla de sótano global gratuita, primero deberá descargarla usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Configure publicaciones para su sitio web. Acceda a sus publicaciones en la primera parte de este tutorial, nos aseguraremos de que todas las publicaciones estén configuradas antes de comenzar a agregarlas a menús de sótanos personalizados. Para hacer esto, explore las publicaciones de publicaciones dentro de WordPress Backynd.
Configure la estructura de la categoría publicada en su elección, configure todas las diferentes publicaciones que desea incluir en su sótano si aún no lo ha hecho. Para este tutorial, necesitaremos tres grupos diferentes de publicaciones, porque incluiremos tres widgets diferentes en el menú de categoría de publicación en nuestro sótano personalizado. Cree más categorías de menús de acceso a los menús de WordPress, crearemos un menú separado para cada grupo de publicaciones. Navegue a los menús desde la configuración de apariencia de su sitio de WordPress.

Cree el menú del primer sótano Agregue un menú para el primer sótano y otorgue un nombre reconocido.

Nombre del menú: menú subsol no. 1

Agregue las publicaciones de publicaciones Agregue el primer grupo de publicaciones a este nuevo menú.
Cree el segundo y tercer menú del sótano para otras publicaciones post -Categorias HAGA LO MISMO PARA OTROS OTROS DOS GRUPOS DE POSTAS.

Nombre del menú: menú subsol no. 2

Nombre del menú: menú subsol no. 3

3. Cree widgets de sótano Widgets de acceso ahora que tenemos las publicaciones y los menús de los menús para la publicación, podemos colocarlos en los widgets en el área del sótano. Para hacer esto, explore widgets desde el fondo de WordPress.

Agregue el menú del sótano no. 1 en el área del sótano no. 1 allí, agregue un widget del primer menú de navegación al área del sótano no. 1. En el menú de navegación, seleccione el primer menú del sótano que creó en la parte anterior de este tutorial.

Agregue el menú del sótano no. 2 en el área del sótano no. 2 Coloque el segundo menú de la categoría de publicaciones en el segundo área del sótano.

Agregue el menú del sótano no. 3 en el área del sótano no. 3 y el tercer menú del sótano en el área del tercer sótano. Ajuste las publicaciones recientes en el sótano # 4 El último widget que necesitamos, que agregaremos al cuarto área del sótano, es el widget para las publicaciones recientes. Este widget le mostrará dinámicamente las últimas 5 publicaciones recientes como enlaces.


3. Construya el subsol global dentro del constructor de temas Divin Divin Builder y comience a construir las plantillas del sótano ahora que nuestras publicaciones, publicaciones y categorías de widget están en su lugar, ¡es hora de pasar a Div! Vaya a Divic Builder Divin y comience a crear un sótano global o personalizado.

Configuración de la sección Color de fondo Una vez que llegue a la plantilla del sótano, notará una sección. Abra esa sección y agregue un color de fondo. El estilo que usamos a lo largo de este diseño se ajusta perfectamente al paquete de alimentos, pero el enfoque funcionará con cualquier tipo de diseño que elija.

Color de fondo: # FF7864

Imagen de fondo Agregar una imagen de fondo adicional. Si desea usar exactamente lo mismo que en este tutorial, puede encontrarla en la carpeta que puede descargar al comienzo de este tutorial.

Tamaño de la imagen de fondo: adecuado
Espacio ir a la pestaña de diseño de la sección y eliminar todos los rellenos predeterminados e inferiores.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:
Fondo de gradiente sin agregar módulos, abrir la configuración de línea y aplicar un fondo de gradiente.
Color 1: RGBA (10,10,10,05) Color 2: RGBA (10,10,10,18)

Dimensión Vaya a la pestaña Diseño de fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí

Ancho máximo: 1680 PX
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Configuración de la columna 1 Espacio Luego, abra la configuración de la columna 1 y agregue algunos valores de llenado personalizados en la pestaña de diseño.

Revestimiento superior: 5%
Finamiento inferior: 5%
ENLIZACIÓN IZQUIERDA: 5%


Revestimiento derecho: 5%
Borde usamos un borde recto en el escritorio.
El ancho del borde recto:
Escritorio: 2 PX
Tableta y teléfono: 0 PX

Color de borde derecho: # FF7864
Configuración de la columna 2 Espacio Luego abra la configuración de la columna 2 y aplique los siguientes valores de llenado:
Revestimiento superior: 5%
Finamiento inferior: 5%
ENLIZACIÓN IZQUIERDA: 5%

Revestimiento derecho: 5%
Agregue el módulo de imagen a la columna 1 Cargue el logotipo es hora de agregar módulos, comenzando con un módulo de imagen en la columna 1. Cargue un logotipo y estilice como desee.
Agregue un módulo de texto a la columna 2 Agregue el contenido H2 en la segunda columna, agregue un módulo de texto con un contenido descriptivo de H2.
Configuración de texto H2 Cambiar a la pestaña de diseño y cambiar la configuración de texto H2 en consecuencia:
2 Sección de fuentes: Cormoran Garamond

Fuente 2 Sección de peso: Medio

Rúbrica 2 color de texto: #ffffff

Rúbrica 2 Dimensión de texto:
Escritorio y tableta: 40 PX
Teléfono: 35 PX
Título 2 Altura de la línea: 1.3em
Agregue la fila # 2 La estructura de la columna pasamos la siguiente fila. En esta fila, colocaremos todos nuestros widgets. Elija la siguiente estructura de columnas: color de fondo sin agregar módulos, abra la configuración de línea y aplique un color de fondo.
Color de fondo: RGBA (10,10,10,05)
Dimensión Vaya a la pestaña Diseño y cambie la configuración de tamaño de la siguiente manera:
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Igualar las alturas de la columna: sí
Ancho máximo: 1680 PX

Espacio eliminar y todo el revestimiento predeterminado, superior e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Todas las columnas luego abren las columnas individualmente y apliquen los siguientes valores de llenado para cada uno de ellos:
Revestimiento superior: 5%

Finamiento inferior: 5%
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%

Columna 1 Border Además, agregaremos un borde a la columna 1.
El ancho del borde recto:
Desktop y tableta: 2 PX
Teléfono: 0px
Color de borde derecho: # FF7864


Border de la columna 2 Usamos el mismo borde, con algunos valores de respuesta diferentes, para la segunda columna.
El ancho del borde recto:
Escritorio: 2 PX
Teléfono y tableta: 0 PX
Color de borde derecho: # FF7864

Columna 3 Border y por último, pero no menos importante, agregaremos un borde recto a la tercera columna.
El ancho del borde recto:
Desktop y tableta: 2 PX
Teléfono: 0px
Color de borde derecho: # FF7864

¡Agregue el módulo de barra lateral a la columna 1 es el momento de agregar nuestros widgets desde el menú Post Category! Para hacer esto, utilizaremos el módulo integrado de la barra lateral de la Divica. Agregue uno a la primera columna de la fila.
Seleccione el área del sótano # 1 Seleccione el primer área del sótano. Esto está relacionado con nuestro menú para la primera categoría de publicaciones que creamos. Widget Zone: pie de página no. 1
Cambio de apariencia a la pestaña Diseño del módulo y apague el separador de borde.
Muestra el separador de borde: no
Configuración de texto de CORP modificada y configuración para el texto del cuerpo.

Font Corp: Montserrat

Cuerpo de fuente de peso: medio
Color del texto del cuerpo: #ffffff

Tamaño del texto del cuerpo: 13 PX
Espacio y complete la configuración del módulo agregando algunos rellenos superior e inferior a la configuración de espaciado.

Revestimiento superior: 5%
Finamiento inferior: 5%
Clone el módulo de barra lateral dos veces y coloque los duplicados en las columnas 2 y 3 Después de haber completado el primer módulo de la barra lateral, puede clonar dos veces y colocar los duplicados en la columna 2 y 3.
Cambie las áreas del sótano, cambie el área del widget para cada duplicado para mostrar los diferentes menús que ha creado.
Área de widget: área de pie # 2

Área de widget: área de pie # 3
Agregue el módulo de barra lateral a la columna 4 ahora, en la última columna, agregue un nuevo módulo de la barra lateral.
Seleccione el área del sótano # 4 En este módulo, seleccionamos el cuarto área del sótano que creamos, que contiene nuestras publicaciones recientes.

Área de widget: área de pie # 4

Configuración de texto de título Cambiar a la pestaña Diseño del módulo y modificar la configuración del texto del título de la siguiente manera:
Título de la fuente: Cormoran Garamond

Color de texto del título: #ffffff

Título Tamaño del texto: 30 PX

Configuración del texto del cuerpo hace y algunos cambios en la configuración del texto del cuerpo.
Font Corp: Montserrat

Cuerpo de fuente de peso: medio
El color del texto del cuerpo: #dddddddddimize el texto del cuerpo: 13 px
Espacio y complete la configuración del módulo y este tutorial, agregando algunos rellenos personalizados en la parte superior e inferior a la configuración de espaciado del módulo. ¡Eso es todo! Asegúrese de guardar todas las divisiones de Divic Builder antes de ver el resultado en su sitio web.
Revestimiento superior: 5%

Finamiento inferior: 5%
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En este tutorial, te he mostrado cómo combinar el constructor de temas divinos con el sótano de WordPress y el módulo de barra lateral. Específicamente, le mostré cómo agregar widgets desde el menú Categoría de publicaciones a su sótano global para hacer que sus visitantes naveguen más fácilmente. Este enfoque lo ayudará a estilizar los elementos del sótano utilizando las opciones de división incorporadas, mientras mantiene los menús y los widgets del sótano en WordPress. ¡Podrías descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.