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.
Índice de contenidos
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!
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
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.
Deberías aplicarlo no globalmente sino solo a las páginas posiblemente afectadas
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».
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.
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.
¡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!
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.
Si la has hecho con el builder puedes guardarla en la biblioteca (mejor como global) e insertarla en cualquier página que tenga builder ¿es eso?
Gracias por responder tan rapido.
No. Lo que quiero es que esté siempre visible.
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.
Tenéis incluso un plugin para hacer esto de una forma más lógica, quedando el footer fijo sólo cuando es necesario: http://divi4u.com/divi-quasi-sticky-footer-plugin/