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

Descarga Divi

Manual de Divi

Aprende a usar y configurar todos los módulos de 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 lograr que nuestro pie de página de Divi sea dinámico, es decir 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 siguiente 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 área 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 área 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 global para el sitio web.

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

FONDO:

  • Color de fondo: #ff7864

SEPARACIÓN:

  • Relleno superior y base: 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 altura entre columnas: Sí

SEPARACIÓN:

  • Relleno superior y base: 0px.

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

SEPARACIÓN:

  • Relleno superior y base: 5%.
  • Relleno izquierda y derecha: 5%.

Y por último vamos a la columna 1 y además 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 dentro un titular H2 a elección. 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 altura entre columnas: Sí

SEPARACIÓN:

  • Relleno superior y base: 0px

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

SEPARACIÓN:

  • Relleno superior y base: 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:

  • Área de widget: Seleccionar el área 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 base: 5%.

 

Solo queda guardar 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 global 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 aprender todo lo que se puede hacer con Divi.

Manual de Divi

Aprende a usar y configurar todos los módulos de Divi.

Jorge Baffa

Jorge Baffa

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Comienza tu Web con Divi

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *