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.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
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.
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.
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ú.
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
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.
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.
Coloque el menú de la segunda categoría de publicación en la segunda área de pie de página.
Y el menú del tercer pie de página en el área del tercer pie de página.
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.
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
¡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%
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
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.