Cómo agregar widgets del menú de categorías de publicaciones a su pie de página global de Divi

Cuando crea un pie de página personalizado dentro del Generador de temas de Divi, hay varias formas de abordar la adición de elementos de pie de página. Puede optar por un pie de página basado en módulos, donde agrega elementos de pie de página dentro de los módulos de texto con los enlaces adecuados, pero también puede decidir agregar diferentes widgets de pie de página a su diseño, utilizando el módulo de barra lateral de Divi, y diseñarlos utilizando el módulo integrado de Divi. opciones. En el tutorial de hoy, le mostraremos cómo realizar la segunda opción. Más específicamente, le mostraremos cómo agregar widgets de menú de categorías de publicaciones a su pie de página. El estilo de diseño que estamos usando coincide perfectamente con el paquete de diseño de recetas de comida. Comenzaremos agregando las diferentes categorías de publicaciones a nuestro sitio web. Luego, crearemos los menús de pie de página dentro de WordPress. A continuación, crearemos nuestros widgets y, por último, pero no menos importante, agregaremos los widgets a nuestro pie de página Divi personalizado dentro de Divi Theme Builder. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de pie de página global GRATIS

Para tener en sus manos la plantilla de pie de página global gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Configure categorías de publicaciones para su sitio web

Ve a las categorías de tus publicaciones

En la primera parte de este tutorial, nos aseguraremos de que todas las categorías de publicaciones estén configuradas antes de comenzar a agregarlas a los menús de pie de página personalizados. Para hacer eso, navegue a las categorías de sus publicaciones dentro de su backend de WordPress.

Configurar la estructura de categoría de publicación de su elección

Configure todas las categorías de publicaciones diferentes que desee incluir en su pie de página si aún no lo ha hecho. Para este tutorial, necesitaremos tres grupos diferentes de categorías de publicaciones, ya que vamos a incluir tres widgets de menú de categorías de publicaciones diferentes en nuestro pie de página personalizado.

2. Cree varios menús de categoría de WordPress

Ir a los menús

A continuación, crearemos un menú separado para cada grupo de categorías de publicaciones. Navegue a los menús dentro de la configuración de apariencia de su sitio web de WordPress.

Crear menú de primer pie de página

Agregue un menú de primer pie de página y dándole un nombre reconocible.

• Nombre del menú: Menú de pie de página # 1

Agregar categorías de publicaciones

Agregue su primer grupo de categorías de publicaciones a este nuevo menú.

Crear menú de segundo y tercer pie de página para otras categorías de publicaciones

Haz lo mismo con otros dos grupos de categorías de publicaciones.

• Nombre del menú: Menú de pie de página # 2

• Nombre del menú: Menú de pie de página # 3

3. Cree widgets de pie de página

Ir a Widgets

Ahora que tenemos nuestras categorías de publicaciones y menús de categorías de publicaciones en su lugar, podemos colocarlos dentro de los widgets del área de pie de página. Para hacer eso, navegue a los widgets en su backend de WordPress.

Agregar menú de pie de página n. ° 1 al área de pie de página n. ° 1

Allí, agregue un primer widget de menú de navegación a su Área de pie de página # 1. Dentro del menú de navegación, seleccione el primer menú de pie de página que creó en la parte anterior de este tutorial.

Agregar menú de pie de página n. ° 2 al área de pie de página n. ° 2

Coloque el menú de la segunda categoría de publicación en el área del segundo pie de página.

Agregar menú de pie de página n. ° 3 al área de pie de página n. ° 3

Y el menú del tercer pie de página en el área del tercer pie de página.

Agregar publicaciones recientes al área de pie de página n. ° 4

El último widget que necesitamos, que agregaremos al área del cuarto pie de página, es el widget de publicaciones recientes. Este widget mostrará dinámicamente sus 5 últimas publicaciones recientes como enlaces.

3. Cree un pie de página global dentro de Divi Theme Builder

Vaya a su creador de temas Divi y comience a crear una plantilla de pie de página

Ahora que nuestras categorías de publicaciones, menús de categorías de publicaciones y widgets están en su lugar, ¡es hora de cambiar a Divi! Vaya a su Divi Theme Builder y comience a crear un pie de página global o personalizado.

Configuración de la sección

Color de fondo

Una vez dentro de la plantilla de pie de página, verá una sección. Abra esa sección y agregue un color de fondo. El estilo que usamos en este diseño coincide perfectamente con el paquete de diseño de recetas de comida, pero el enfoque funcionará con cualquier tipo de diseño que elija.

• Color de fondo: # ff7864

Imagen de fondo

A continuación, agregue una imagen de fondo. Si desea utilizar exactamente el mismo que en este tutorial, puede encontrarlo en la carpeta que puede descargar al principio de este tutorial.

• Tamaño de la imagen de fondo: Ajustar

Espaciado

Vaya a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado a continuación.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de fila y aplique un fondo degradado.

• Color 1: rgba (10,10,10,0.05)
• Color 2: rgba (10,10,10,0.18)

Dimensionamiento

Vaya a la pestaña de diseño de la fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de canalón: 1
• Ecualizar alturas de columna: Sí
• Ancho máximo: 1680px

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Configuración de la columna 1

Espaciado

Luego, abra la configuración de la columna 1 y agregue algunos valores de relleno personalizados en la pestaña de diseño.

• Acolchado superior: 5%
• Acolchado inferior: 5%
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Frontera

También estamos usando un borde derecho en el escritorio.

• Ancho del borde derecho:
  • Escritorio: 2px
  • Tableta y teléfono: 0px
• Color del borde derecho: # ff7864

Configuración de la columna 2

Espaciado

A continuación, abra la configuración de la columna 2 y aplíquele los siguientes valores de relleno:

• Acolchado superior: 5%
• Acolchado inferior: 5%
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Agregar módulo de imagen a la columna 1

Subir logotipo

Es hora de agregar módulos, comenzando con un Módulo de imagen en la columna 1. Cargue un logotipo de su elección y ajústelo como desee.

Agregar módulo de texto a la columna 2

Agregar contenido H2

En la segunda columna, agregamos un módulo de texto con contenido descriptivo H2.

Configuración de texto H2

Vaya a la pestaña de diseño y cambie la configuración del texto H2 en consecuencia:

• Fuente del encabezado 2: Cormorán Garamond
• Peso de fuente del encabezado 2: Medio
• Color del texto del encabezado 2: #ffffff
• Tamaño del texto del encabezado 2:
  • Escritorio y tableta: 40px
  • Teléfono: 35px
• Altura de la línea del rumbo 2: 1.3em

Agregar fila n. ° 2

Estructura de la columna

A la siguiente fila. En esta fila, colocaremos todos nuestros widgets. Elija la siguiente estructura de columnas:

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la fila y aplique un color de fondo.

• Color de fondo: rgba (10,10,10,0.05)

Dimensionamiento

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

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho máximo: 1680px

Espaciado

Elimine también todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Espaciado de todas las columnas

Luego, abra las columnas individualmente y aplique los siguientes valores de relleno a cada una de ellas:

• Acolchado superior: 5%
• Acolchado inferior: 5%
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Borde de la columna 1

A continuación, agregaremos un borde a la columna 1.

• Ancho del borde derecho:
  • Escritorio y tableta: 2px
  • Teléfono: 0px
• Color del borde derecho: # ff7864

Borde de la columna 2

Estamos usando el mismo borde, con algunos valores de respuesta diferentes, para la segunda columna.

• Ancho del borde derecho:
  • Escritorio: 2px
  • Teléfono y tableta: 0px
• Color del borde derecho: # ff7864

Borde de la columna 3

Y por último, pero no menos importante, también agregaremos un borde derecho a la tercera columna.

• Ancho del borde derecho:
  • Escritorio y tableta: 2px
  • Teléfono: 0px
• Color del borde derecho: # ff7864

Agregar módulo de barra lateral a la columna 1

¡Es hora de agregar nuestros widgets de menú de categorías de publicaciones! Para hacer eso, usaremos el módulo de barra lateral incorporado de Divi. Agregue uno a la primera columna de la fila.

Seleccione el área de pie de página n. ° 1

Seleccione el área del primer pie de página. Esto está vinculado a nuestro primer menú de categorías de publicaciones que hemos creado.

• Área de widgets: Área de pie de página n. ° 1

Diseño

Vaya a la pestaña de diseño del módulo y desactive el separador de bordes.

• Mostrar separador de bordes: No

Configuración del texto del cuerpo

Modifique también la configuración del texto del cuerpo.

• Fuente del cuerpo: Montserrat
• Peso de la fuente del cuerpo: Medio
• Color del texto del cuerpo: #ffffff
• Tamaño del texto del cuerpo: 13px

Espaciado

Y complete la configuración del módulo agregando algo de relleno superior e inferior a la configuración de espaciado.

• Acolchado superior: 5%
• Acolchado inferior: 5%

Clonar el módulo de la barra lateral dos veces y colocar los duplicados en las columnas 2 y 3

Una vez que haya completado el primer módulo de la barra lateral, puede clonarlo dos veces y colocar los duplicados en las columnas 2 y 3.

Cambiar áreas de pie de página

Modifique el área del widget para cada duplicado para mostrar los diferentes menús de categorías de publicaciones que ha creado.

• Área de widgets: Área de pie de página n. ° 2

• Área de widgets: Área de pie de página n. ° 3

Agregar módulo de barra lateral a la columna 4

Ahora, en la última columna, agregamos un nuevo módulo de barra lateral.

Seleccione el área de pie de página n. ° 4

En este módulo, seleccionamos el área del cuarto pie de página que hemos creado y que contiene nuestras publicaciones recientes.

• Área de widgets: Área de pie de página n. ° 4

Configuración del texto del título

Vaya a la pestaña de diseño del módulo y modifique la configuración del texto del título de la siguiente manera:

• Fuente del título: Cormorant Garamond
• Color del texto del título: #ffffff
• Tamaño del texto del título: 30px

Configuración del texto del cuerpo

Realice también algunos cambios en la configuración del texto del cuerpo.

• Fuente del cuerpo: Montserrat
• Peso de la fuente del cuerpo: Medio
• Color del texto del cuerpo: #dddddd
• Tamaño del texto del cuerpo: 13px

Espaciado

Y complete la configuración del módulo, y este tutorial, agregando un relleno superior e inferior personalizado a la configuración de espaciado del módulo. ¡Eso es todo! Asegúrese de guardar todos los cambios de Divi Theme Builder antes de ver el resultado en su sitio web.

• Acolchado superior: 5%
• Acolchado inferior: 5%

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En este tutorial, le mostramos cómo combinar Divi Theme Builder con widgets de pie de página de WordPress y el módulo Divi Sidebar. Más específicamente, le mostramos cómo agregar widgets de menú de categorías de publicaciones a su pie de página global para facilitar el viaje de navegación de sus visitantes. Este enfoque lo ayudará a diseñar los elementos del pie de página utilizando las opciones integradas de Divi mientras mantiene los menús y los widgets del pie de página dentro de su backend de WordPress. ¡También pudo 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 aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.