Cómo agregar widgets de menú de categoría de publicación a su pie de página global de Divi

Cuando está creando 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, usando el Módulo de barra lateral de Divi, y diseñarlos usando Divi’s incorporado. 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ía de publicación a su pie de página. El estilo de diseño que estamos usando coincide con el paquete de diseño de recetas de comidaperfectamente. Comenzaremos agregando las diferentes categorías de publicaciones a nuestro sitio web. Luego construiremos 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 poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Configura categorías de publicaciones para tu sitio web

Ir 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.

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

Configure todas las diferentes categorías de publicaciones que desea 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. Crear menús de varias categorías de WordPress

Ir a 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 primer menú de pie de página

Agrega un primer menú de pie de página y dale un nombre reconocible.

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

Añadir 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

Haga lo mismo para 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. Crear 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 nuestros widgets del área de pie de página. Para hacer eso, navegue a los widgets en su backend de WordPress.

Agregue el 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.

Agregue el 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 la segunda área de pie de página.

Agregue el 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 #4

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

3. Cree un pie de página global dentro del generador de temas Divi

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.

Ajustes de sección

Color de fondo

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

  • Color de fondo: #ff7864

Imagen de fondo

Agregue una imagen de fondo a continuación. Si desea usar exactamente el mismo que en este tutorial, puede encontrarlo en la carpeta que puede descargar al comienzo de este tutorial.

  • Tamaño de la imagen de fondo: Ajuste

Espaciado

Pase 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
  • Relleno inferior: 0px

Añadir Fila #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 la fila y aplique un fondo degradado.

  • Color 1: rgba(10,10,10,0.05)
  • Color 2: rgba (10,10,10,0,18)

Dimensionamiento

Pase 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 del canalón: 1
  • Igualar alturas de columna: Sí
  • Ancho máximo: 1680px

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

  • Relleno superior: 0px
  • Relleno 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%
  • Relleno izquierdo: 5%
  • Relleno derecho: 5%

Borde

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%
  • Relleno izquierdo: 5%
  • Relleno derecho: 5%

Agregar módulo de imagen a la columna 1

Cargar logotipo

Es hora de agregar módulos, comenzando con un módulo de imagen en la columna 1. Sube un logotipo de tu elección y dale el estilo que quieras.

Agregar módulo de texto a la columna 2

Agregar contenido H2

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

Configuración de texto H2

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

  • Encabezado 2 Fuente: Cormorant Garamond
  • Encabezado 2 Peso de fuente: Medio
  • Título 2 Color del texto: #ffffff
  • Título 2 Tamaño del texto:

    • Escritorio y tableta: 40px
    • Teléfono: 35px
  • Encabezado 2 Altura de línea: 1,3 em

Añadir Fila #2

Estructura de la columna

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

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

Pase 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 del canalón: 1
  • Igualar alturas de columna: Sí
  • Ancho máximo: 1680px

Espaciado

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

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

Espaciado de todas las columnas

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

  • Acolchado superior: 5%
  • Acolchado inferior: 5%
  • Relleno izquierdo: 5%
  • Relleno 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ía de publicación! Para hacer eso, usaremos el módulo de barra lateral incorporado de Divi. Agregue uno a la primera columna de la fila.

Seleccionar área de pie de página #1

Seleccione la primera área de 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 #1

Disposición

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

  • Mostrar separador de borde: 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 cuerpo del texto: #ffffff
  • Tamaño del cuerpo del texto: 13px

Espaciado

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

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

Clonar módulo de barra lateral dos veces y colocar 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 #2

  • Área de widgets: Área de pie de página #3

Agregar módulo de barra lateral a la columna 4

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

Seleccionar área de pie de página #4

En este módulo, estamos seleccionando el cuarto pie de página que hemos creado que contiene nuestras publicaciones recientes.

  • Área de widgets: Área de pie de página #4

Configuración del texto del título

Pase 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 algunos cambios en la configuración del texto del cuerpo también.

  • Fuente del cuerpo: Montserrat
  • Peso de la fuente del cuerpo: Medio
  • Color del cuerpo del texto: #dddddd
  • Tamaño del cuerpo del texto: 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ía de publicación 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 widgets del pie de página dentro de su backend de WordPress. ¡También pudo descargar el archivo JSON de forma gratuita! 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 regalos de Divi, 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 los beneficios de este contenido gratuito.