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, ya sea porque nuestra página principal tenga poco contenido y entonces el resultado es feo para las primeras visitas a nuestra web.

Divi recién instalado

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

Divi footer fijo abajo del todo 01 Mantener el footer abajo del todo en Divi

Como se puede ver, 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.

Añadiendo el siguiente código en Divi > Opciones del tema > Integración > Agregar código al body:

<script>// <![CDATA[
varth = jQuery('#top-header').height(); varhh = jQuery('#main-header').height(); varfh = jQuery('#main-footer').height(); varwh = jQuery(window).height(); varch = wh - (th + hh + fh); jQuery('#main-content').css('min-height', ch);
// ]]></script>

Divi footer fijo abajo del todo 02 Mantener el footer abajo del todo en Divi

De esta manera el pie se 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:

Divi footer fijo abajo del todo 03 Mantener el footer abajo del todo en Divi

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 de 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:

Divi footer fijo abajo del todo 04 Mantener el footer abajo del todo en Divi

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: Divi 3.0. 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.

Si te ha parecido interesante este artículo y crees que Divi puede ayudarte con tu proyecto Web y estás pensando en comprarlo, te pido que lo hagas pinchando en la siguiente imagen. Estoy afiliado a ElegantThemes y me llevaría una pequeña comisión si llegas a comprarlo. De esta manera me ayudas a mantener el blog y a escribir más artículos como este. Si además, te haces suscriptor de ElegantThemes, podrás comprarlo con hasta un 20% de descuento en algunos casos. AfiliadosDivi Mantener el footer abajo del todo en Divi Guardar Guardar Guardar
Advertisements

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Puedes suscribirte con total tranquilidad de que no recibirás spam. Lo odio igual que tu. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

¡Gracias por suscribirte!

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!