Mantener el footer abajo del todo en Divi

Divi tiene un pequeño problema de diseño que nos puede afectar en algunos casos. El problema es que no mantiene el footer abajo del todo de nuestra web, sino que lo coloca justo debajo de nuestro contenido. En algunos casos puede que nos interese cambiar esto y hacer que sea fijo abajo, ya sea porque nuestra página principal tenga poco contenido y entonces el resultado es feo para las primeras visitas a nuestra web.

Así es el footer de Divi recién instalado

Este es un ejemplo de un wordpress con Divi recién instalado donde la página principal tiene poco contenido.

Como se puede ver, el footer queda justo debajo de la publicación. Queda mucho espacio libre debajo del pie, y puede quedar un poco feo según nuestros gustos. Para cambiar esto y que el footer quede abajo del todo, la web de ElegantThemes nos da la solución.

¿Cómo hacerlo fijo abajo del todo?

Si quieres que el footer de Divi quede fixed (fijo) abajo del todo, añadiendo el siguiente código en Divi > Opciones del tema > Integración > Agregar código al body podrás conseguirlo:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

De esta manera el pie quedará fijo en la parte inferior de la web mostrando un estilo más robusto de cara a los usuarios finales. El resultado sería este:

Ahora, sea la publicación corta o larga, el footer siempre quedará en la parte inferior de la web.

Una forma de verificar que funciona es utilizando el buscador de la web, buscando algo que tenga muy pocos resultados o ninguno.

Divi con Diseño en caja

En caso de que estemos usando Divi con el Diseño en caja, esta solución no funciona correctamente. He modificado el código para que el ancho del footer se ajuste a la caja, pero no se queda fija en el pie. Si consigo corregirlo actualizaré el post.

Con este script solucionamos el problema de que se ajuste a la caja:

<script text="text/javascript">
jQuery(function($) {
var wh = jQuery('#main-content').width();
$("#main-footer").css("position","fixed").css("bottom",0).css("width",wh');
});
</script>

El resultado es este:

Pero seguimos teniendo hueco en la parte inferior.

Con este otro código solucionamos el problema del espacio en blanco en la parte inferior pero si redimensionamos la ventana no se ajusta al tamaño de esta.

<script text="text/javascript">
jQuery(function($) {
var wh = jQuery('#main-content').width();
$("#main-footer").css("position","fixed").css("bottom",0).css("width",wh');
});
</script>
<script>// <![CDATA[
var th = jQuery('#top-header').height();
var hh = jQuery('#main-header').height();
var fh = jQuery('#main-footer').height();
var wh = jQuery(window).height();
var ch = wh - (th + hh + fh);
jQuery('#main-content').css('min-height', ch-fh);
// ]]></script>

El footer queda escondido por debajo del scroll. Así que nada, seguiré probando y ya os comentaré la solución si doy con ella.

Conclusiones

En algunos casos puede que este truco nos sea útil. Pero es cierto que por regla general este truco apenas lo usaremos, ya que siempre se recomienda tener una Landing Page o Página de Aterrizaje en nuestra web con suficiente contenido como para retener a los visitantes. Por lo que no sería necesario mantener el footer abajo del todo ya que estaremos obligados a usar el scroll para ver todo el contenido. Pero nunca está de más conocer estos trucos por si se diera la necesidad en un momento dado.

Espero que os haya servido y lo veáis útil en algún momento.

Si aún no conoces Divi debes ver este artículo: Qué es Divi. Seguro que te sorprenderá y verás que este theme no solo es un theme sino que te servirá para construir cualquier tipo de web hecha con WordPress. Consulta el resto de mis tutoriales de Divi para ver conocer sus posibilidades.