Cómo Hacer un Pie de Página Dinámico con Divi

Hoy vamos a ver cómo crear un pie de página con Divi que tenga menús del sitio web y publicaciones recientes.

La forma en que lo vamos a construir permite que el pie de página de Divi se actualice de forma dinámica cuando publicamos nuevos contenidos o modificamos los menús desde WordPress.

Cómo Hacer un Pie de Página Dinámico con Divi

Para alcanzar que nuestro pie de página de Divi sea dinámico, es asegurar que se actualice con los cambios que hagamos en WordPress, vamos a usar las áreas de widgets de WordPress y los menús.

Recursos necesarios

Para crear el pie de página con menús y entradas recientes con Divi vamos a usar las siguientes herramientas:

Paso a paso

En el ulterior video te muestro paso a paso cómo crear un pie de página con menús de WordPress y entradas recientes del blog con Divi.

Paso 1 – Crear los Menús en WordPress

Lo primero que tenemos que hacer es crear en WordPress los menús que queramos mostrar en el pie de página.

Para este ejemplo voy a usar 3 menús: Principal, Categorías y Social.

Paso 2 – Configurar las Areas de Widgets de Pie de Página de Divi

El segundo paso es configurar las áreas de widgets que vamos a mostrar en el pie de página dinámico con Divi.

Podemos imaginar cada campo de acción de widgets como una columna del pie de página en la que vamos a mostrar un menú.

Así que añadimos un widget Menú de Navegación a cada campo de acción de widget de pie de página y seleccionamos el menú que vamos a mostrar en cada uno.

También podemos añadir un widget de Entradas recientes, o el widget que se te ocurra.

Paso 3 – Crear un Pie de Página Global

Ahora estamos listos para ir al Theme Builder y crear un Pie de Página integral para el sitio web.

En primer oportunidad configuramos la sección predeterminada para que pueda contener nuestro pie de página con inicio de sesión.

FONDO:

SEPARACIÓN:

• Relleno superior y cojín: 0px

Paso 4 – Fila con 2 columnas

Insertamos una primera fila con estructura de dos columnas: la columna 1 angosta y la columna 2 ancha.

FONDO:

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

TAMAÑO:

• Uso Personalizado del Canalón de Ancho: Sí
• Espacio entre columnas: 1
• Igualar cumbre entre columnas: Sí

SEPARACIÓN:

• Relleno superior y cojín: 0px.

Accedemos a las columnas 1 y 2 para añadirles el ulterior relleno.

SEPARACIÓN:

• Relleno superior y cojín: 5%.
• Relleno izquierda y derecha: 5%.

Y por extremo vamos a la columna 1 y encima le añadimos un borde derecho.

BORDE:

• Ancho del borde derecho: 2px
• Color del borde derecho: #ff7864

Paso 5 – Módulo Imagen

Dentro de la columna 1 insertamos un Módulo Imagen de Divi para colocar el logo del sitio web.

TAMAÑO:

• Ancho: 80px (ajustar según las dimensiones de tu logo).
• Alineación: centrado.

Paso 6 – Módulo Texto

Insertamos un Módulo Texto de Divi en la columna 2 y escribimos en el interior un titular H2 a alternativa. Ajustamos los estilos así:

TEXTO DEL TITULO:

• Fuente: Cormorant Garamound
• Peso: Medio
• Color: blanco
• Tamaño: 40px

Paso 7 – Fila con 4 columnas

FONDO:

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

TAMAÑO:

• Uso Personalizado del Canalón de Ancho: Sí
• Espacio entre columnas: 1
• Igualar cumbre entre columnas: Sí

SEPARACIÓN:

• Relleno superior y cojín: 0px

Luego vamos a los ajustes de la columnas y asignamos los siguientes estilos:

SEPARACIÓN:

• Relleno superior y cojín: 5%.
• Relleno izquierda y derecha: 5%.

BORDE:

• Ancho del borde derecho: 2px
• Color del borde derecho: #ff7864

Paso 8 – Módulo Barra Lateral

En cada una de las columnas vamos a insertar un módulo Barra Lateral de Divi.

CONTENIDO:

• Radio de widget: Seleccionar el campo de acción de widget que quieras mostrar en cada columna del pie de página dinámico.

TEXTO DEL CUERPO:

• Fuente: Montserrat
• Peso: Medio
• Color: blanco
• Tamaño: 13px

TEXTO DEL TITULO:

• Fuente: Cormorant Garamound
• Peso: Medio
• Color: blanco
• Tamaño: 25px

SEPARACIÓN:

• Relleno superior y cojín: 5%.

Solo queda meter los cambios en el constructor Divi y en el Theme Builder para proceder a recargar la página y ver terminado nuestro pie de página integral que se actualiza de forma dinámica cuando publicamos nuevo contenido o modificamos algún menú.

Déjame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi y ayudame compartiéndolo para que más personas puedan estudiar todo lo que se puede hacer con Divi.