Tutorial Divi: Hacer fijo el pié de página (footer)

El otro día me preguntaban en los comentarios cómo hacer que el pié de página de Divi, el footer, se quede fijo abajo, pues tiene la costumbre de que cuando tienes una página con poco contenido se queda como a la mitad, flotante, en vez de estar abajo del todo.

Me refiero a esta horripilancia:

Este feo comportamiento da una sensación bastante lamentable, nada acorde con todo lo que puedes conseguir con Divi, así que vamos a solucionarlo ya mismo.

El problema es que el ID CSS del footer es relativo al contenido, por lo que se adaptará, y si tienes un página como la de arriba (un carrito vacío) con poco contenido, entonces el pié de página estará relativo al contenido, poco en esta caso.

La solución pasa por forzar el CSS para que la posición sea absoluta y se quede en el fondo.

Hacer fijo el footer de Divi en cada página

Si solo tienes el problema en una página, porque el resto tienen suficiente contenido, no hay porque añadir CSS adicional a todo tu sitio.

Solo tienes que abrir la página y abrir sus ajustes, aquí:

Y una vez dentro pegar el CSS personalizado para solucionar el problema aquí:

Y el CSS a añadir es el siguiente:

/* Footer de Divi fijo */
#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Hacer fijo el footer de Divi en todas las páginas

Por el contrario, si prefieres aplicar el CSS personalizado para hacer fijo el footer de Divi en todas las páginas entonces abre el Personalizador y añade el CSS a la sección de CSS adicional.

El CSS es el mismo, este:

/* Footer de Divi fijo */
#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

El resultado

Lo que queremos obtener es, por supuesto, esto:

¡Que lo disfrutes!

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(8 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

11 comentarios en “Tutorial Divi: Hacer fijo el pié de página (footer)”

  1. Muchísimas gracias, estaba buscando cómo solucionar esto, he colocado el código en la página del carrito y funciona.

    Ahora tengo otro problemilla: cuando el carrito está vacío, el footer se ve estupendo en el pie (que es donde debe estar). Pero cuando hay algo en el carrito, el footer me tapa parte del contenido de la página. ¿Hay alguna forma de indicarle que se sitúe a una altura relativa según lo que ocupe el contenido de la página? Algo como la altura fija y sumarle lo que se pase el contenido.

    Gracias de nuevo y un saludo.

      1. Se lo he aplicado sólo a la página de carrito, en ajustes de la página tal y como indicas en el tutorial. Si el carrito está vacío se ve genial, pero si hay algún producto… el footer se superpone al desglose y de hecho tapa el botón de «finalizar compra».

      2. Marcelo Astorga

        Hola!
        Precisamente esto mismo he hecho. Aplicarlo de forma global, pero cuando hay contenido, el footer se superpone a los productos de la tienda, no se queda fijo en el pie que es lo que quiero. Tal como decia anteriormente he sigo bien las instrucciones. Como dice Meri, cuando no hay nada, se queda fijo,cuando hay contenido se mueve y molesta a los elementos.

      3. Marcelo Astorga

        Hola Fernando, lo aplique a nivel de pagina, y sucede lo mismo. no se queda en el pie. se pone por encima de los elementos. No funciona.

  2. Jose Luis López de Ciordia

    ¡Hola! Estupenda sugerencia. Algo a tener en cuenta: por las pruebas que he hecho, esto no funciona si se pone el menú en vertical. En ese caso concreto, me ha funcionado mejor forzar que la imagen de cabecera sea de altura completa. ¡Saludos!

  3. Rafael Lora-Silverio

    Gracias por compartir esto Fernando. Eso lo solucione en una de mis paginas. Pero si quiero fijar un modulo o fila dentro de una o varias paginas como lo hago? Me imagino que igual, con codigo CSS, pero no se como hacerlo. Lo que quiero es colocar una barra encima del footer, al cual solo le coloqué los creditos. En dicha barra iria tanto el logo como las redes sociales. Ya la tengo hecha, pero quiero que siempre este visible.

  4. Marcelo Astorga

    Hola Fernando,
    Muy bien explicado el tema. Pero tengo un problema, que no hace caso divi ni en pagina ni en global. A que puede ser debido?. he siguido las instrucciones tal cual.

Deja un comentario

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

 

Ir arriba Ir al contenido