Los menús de WordPress del pie de página de Divi son una parte importante de cualquier pie de página. Los menús se pueden crear con enlaces de texto, módulos de menú o widgets. El módulo de menú Divi coloca los enlaces en una línea horizontal. Sin embargo, los pies de página a menudo utilizan menús con enlaces que se apilan verticalmente. Afortunadamente, estos menús son fáciles de agregar a los pies de página de Divi. En este artículo, veremos cómo agregar menús de WordPress a su pie de página de Divi.
Aquí están los menús de WordPress de pie de página de Divi que crearemos. Nos permitirán cambiarlos fácilmente. En lugar de agregar los menús de WordPress de pie de página de Divi con el módulo de menú Divi, los agregaremos con widgets. Esto permite que los elementos del menú se apilen verticalmente y es fácil cambiarlos más tarde.
Escritorio
Esta es la vista del escritorio. Crearemos los menús Categorías de la tienda y Acerca de nosotros .
Móvil
Así es como se verán en el móvil.
Comenzaremos creando los menús de WordPress del pie de página de Divi. Estoy creando dos menús: uno para una tienda con las páginas de la tienda y otro para información sobre la empresa.
Primero, cree los menús que desea incluir en su pie de página. En el tablero de WordPress, ve a Apariencia > Menús . Haga clic en Crear un nuevo menú . Asigne un nombre a su menú y haga clic en Crear menú . No necesitará configurarlos como menús de pie de página porque los seleccionaremos dentro de Divi.
Cree el menú y guárdelo. A continuación, agregue las páginas que desee. Luego, organícelos en el orden en que desea mostrarlos. Cuando esté listo, haga clic en Guardar Menú .
Para el menú de la tienda, estoy usando WooCommerce. Cree un nuevo menú seleccionando Crear un nuevo menú en la parte superior del editor de menús. Proporcione un nombre en el campo de nombre del menú y haga clic en Crear menú .
WooCommerce agrega nuevas opciones a la estructura del menú. Seleccione Categorías de productos en la barra lateral izquierda. Elija las categorías que desea incluir en el menú. Haga clic en Agregar el menú . Colócalas en el orden que quieras. Haga clic en Guardar menú . Agregaremos estos menús a los widgets.
A continuación, agregue los menús a los widgets de pie de página. Primero, ve a Apariencia > Widgets en el tablero de WordPress. A continuación, seleccione un área de pie de página que no esté utilizando. Divi tiene seis áreas de pie de página para elegir y puede agregar una nueva área de widget usando la herramienta en la parte inferior de la página si es necesario. He seleccionado Área de pie de página #1 .
Dentro del área de pie de página que desea usar, haga clic en el símbolo más para abrir la lista de bloques. Busque «menú» y seleccione Menú de navegación de sus opciones.
Asigne un nombre al menú y elija el menú que desea mostrar. Haz clic en Actualizar en la esquina superior derecha. Ahora es el momento de repetir este proceso para el siguiente menú.
Para este, he seleccionado Footer Area #2 . Inserte el bloque Menú de navegación , agregue un título, elija Menú de compras y seleccione Actualizar .
Sus menús ahora están listos para agregarse a sus plantillas de Theme Builder.
Primero, necesitará una plantilla de pie de página. Puedes crear el tuyo propio o subir uno. Estoy usando la plantilla de pie de página de la plantilla gratuita de encabezado y pie de página para el paquete de diseño de aceites esenciales de Divi . Encuentre más en el blog de Divi buscando «pie de página gratuito». Descarga la plantilla y descomprímela.
A continuación, agregue una plantilla al Divi Theme Builder . En el panel de control de WordPress, ve a Divi > Generador de temas . Seleccione Portabilidad y haga clic en Importar en el modal que se abre. Haga clic en Elegir archivo , navegue hasta el archivo, selecciónelo y haga clic en Importar plantillas de Divi Theme Builder .
Esto incluirá un archivo de encabezado. Bórralo si no quieres usarlo. Guarde sus cambios y navegue hasta el front-end de su sitio web. Haremos el resto del trabajo utilizando la nueva función de edición frontal del sitio completo de Divi .
En el front-end de su sitio web, seleccione Habilitar Visual Builder en la parte superior de su pantalla. Dado que el pie de página es global, no importa en qué página se encuentre.
Pase el cursor sobre el pie de página y seleccione Editar plantilla de pie de página . Agregaremos los dos menús reemplazando las áreas Nuestros productos y Acerca de nosotros. En este diseño, ambas áreas se crearon con múltiples módulos de texto. Los reemplazaremos con módulos de barra lateral para mostrar los menús que creamos.
Primero, elimine los dos módulos de texto que crean el menú Acerca de nosotros.
A continuación, debemos agregar un módulo de barra lateral donde desee mostrar el menú. Pase el cursor sobre el área en la que desea agregar el módulo y haga clic en el símbolo negro más . Busque «barra lateral» y haga clic en el módulo Barra lateral .
Se abrirá la configuración del módulo. Seleccione Área de pie de página #1 . Esto mostrará el menú debajo del módulo de texto que queremos reemplazar.
Configuración de diseño y texto
Seleccione la pestaña Diseño para la configuración del módulo de la barra lateral. Deshabilite Mostrar separador de bordes . En Texto, seleccione Alineación central .
- Mostrar separador de bordes: deshabilitar
- Alineación de texto: Centro
Configuración de texto del teléfono
Pase el cursor sobre Alineación de texto y seleccione el icono del dispositivo cuando aparezca. Haga clic en el icono del teléfono y seleccione Alineación central .
- Alineación del texto
- Teléfono: Centro
- Fuente del título: Spartan
- Peso de la fuente del título: Negrita
- 18px
- Altura de la línea: 1,4 em
- Tamaño del texto del título
- Teléfono: 13px
- Altura de la línea del título: 1,4 em
- Fuente del cuerpo: Predeterminado
- Peso de fuente: ligero
- Estilo de fuente: Subrayado
- Escritorio
- Tamaño del cuerpo del texto: 18px
- Altura de la línea del cuerpo: 1,4 em
- Teléfono
- Tamaño del cuerpo del texto: 14px
- Altura de la línea del cuerpo: 1,2 em
- Configuración del área del widget: Área de pie de página n.º 2
Texto del título
Desplácese hacia abajo hasta Texto del título . Elija Spartan para la Fuente del título y seleccione Negrita para el Peso de la fuente del título.
Deje el Texto del título en 18px . Establezca la altura de la línea de título en 1,4 em .
Pase el cursor sobre Tamaño del texto del título y seleccione el icono del dispositivo. Elija el icono Teléfono y establezca el Tamaño del texto del título en 13 . Deje la altura de la línea de título en 1,4 em .
Cuerpo de texto
En Texto del cuerpo , deje la Fuente en Predeterminado . Establezca el Grosor de la fuente en Liviano . Establezca el Estilo de fuente en Subrayado .
Establezca el Tamaño del texto del cuerpo para el escritorio en 18 px . Establezca la altura de la línea del cuerpo en 1,4 em .
Seleccione el icono del dispositivo para el tamaño del texto del cuerpo . Establezca el Tamaño del texto del cuerpo del teléfono en 14 px . Seleccione el icono del dispositivo para la altura de la línea del cuerpo y establezca la altura de la línea del cuerpo del teléfono en 1,2 em .
A continuación, reemplazaremos el menú Nuestros productos con una barra lateral que mostrará las categorías de nuestra tienda. Primero, elimine los dos módulos de texto.
A continuación, duplique el módulo de la barra lateral Acerca de nosotros y arrástrelo a la ubicación de nuestro menú Categorías de la tienda.
Abra el módulo de la barra lateral. En la configuración del Área de widgets, seleccione Área de pie de página #2 .
Ahora guarde los cambios y salga de Visual Builder. hemos terminado
Ahora tenemos dos nuevos menús que son fáciles de cambiar. Así es como se ven en computadoras de escritorio y dispositivos móviles.
Escritorio
Aquí están los dos menús en el escritorio. Trabajan bien dentro de su espacio.
Móvil
Aquí están los dos menús móviles. Se apilan normalmente y combinan bien con el menú en el medio que no cambiamos.
Ese es nuestro vistazo a cómo agregar menús de WordPress de pie de página Divi a su sitio web. Estos menús son fáciles de crear utilizando los widgets de pie de página y agregándolos con los módulos de la barra lateral. Tienen la ventaja de ser fáciles de cambiar. Una vez que haya configurado su módulo de barra lateral, puede cambiar el menú fácilmente.
Queremos escuchar de ti. ¿Ha agregado menús de WordPress de pie de página de Divi a su sitio web? Háganos saber en los comentarios.