Tutorial Divi: Efecto parallax en el footer

Posted By Fernando Tellado on 23 Sep, 2016

En vista de que hay una gran cantidad y creciente de usuarios de WordPress que usan Divi abrimos una sección de tutoriales para personalizar Divi en la que iremos viendo trucos, consejos y guías de cómo hacer un uso eficiente, y en ocasiones espectacular de este fantástico tema WordPress.

Y hoy empezamos con un truco que seguro que te va a encantar, porque no hay cosa más sosa y fea que el pié de página de cualquier web, el conocido footer, así que vamos a darle algo de brillo y alegría, añadiendo algo de CSS y emoción.

El objetivo es que el footer, en vez de estar fijo al final de tu web, se desvele en un bonito efecto parallax, o paralaje si lo prefieres llamar así, para de este modo, ya que tienes algo ahí abajo, atraiga algo de atención.

Y es que siempre adornamos nuestras portadas web de estupendos efectos y diseños que digan lo buenos que somos, pero llega uno al fina de la página y está ahí ese horrendo y, aparentemente obligatorio, footer. Así que, ya que lo ponemos, al menos que diga algo ¿no?

Índice de contenidos

1 Añadiendo CSS a Divi
2 El código para desvelar el footer en Divi

Añadiendo CSS a Divi

Como casi todo en Divi, añadir código CSS no conlleva que pierdas los cambios cuando haya actualizaciones, siempre y cuando uses la caja de CSS Personalizado que tienes las opciones del tema Divi.

En esta caja puedes añadir tus modificaciones CSS que se aplicarán a toda la web, y solo tienes que copiar y pegar ahí tus códigos, guardar los cambios y se realizará la magia.

Así que para añadir el código CSS iremos a Divi -> Opciones del tema -> General, y abajo del todo tienes la caja de CSS Personalizado.

: 1. Opciones Divi

: 2. Ajustes generales Divi

: 3. CSS personalizado

El código para desvelar el footer en Divi

El código que tienes que introducir en la caja, a continuación de cualquier otro que ya tuvieses, es el siguiente:

/*Footeer que aparece en Divi en vez de estar fijo */
 
#main-content {
 margin-bottom: 350px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/
}
 
#main-footer {
 position: fixed;
 z-index: -1;
 height: 350px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/
 width: 100%;
 bottom: 0;
}
 
#footer-bottom {
 position: fixed;
 width: 100%;
 bottom: 0;
 padding: 10px 0;
}
 
#footer-info, #footer-info a {
 padding: 0;
}
 
#main-footer .container {
 height: 100%;
}
 
#footer-widgets {
 position: absolute;
 bottom: 51px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/
}
 
/*Edita esta sección para pantallas de tablet*/
@media only screen and ( max-width: 980px ) {
  
 #main-content {
 margin-bottom: 450px;
 }
 
#main-footer {
 height: 450px;
 }
 
#footer-widgets {
 bottom: 83px;
 }
 
}
 
/*Edita esta seccion para pantallas de moviles*/
@media only screen and ( max-width: 767px ) {
 
#main-content {
 margin-bottom: 650px;
 }
 
#main-footer {
 height: 650px;
 }
 
#footer-widgets {
 bottom: 83px;
 padding: 5% 0;
 }
 
#footer-widgets .footer-widget:nth-child(n), #footer-widgets .footer-widget .fwidget {
 margin-bottom: 4.5% !important;
 }
 
}

/*Footeer que aparece en Divi en vez de estar fijo */

#main-content {

margin-bottom: 350px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/

}

#main-footer {

position: fixed;

z-index: -1;

height: 350px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/

width: 100%;

bottom: 0;

}

#footer-bottom {

position: fixed;

width: 100%;

bottom: 0;

padding: 10px 0;

}

#footer-info, #footer-info a {

padding: 0;

}

#main-footer .container {

height: 100%;

}

#footer-widgets {

position: absolute;

bottom: 51px; /*Esto puede que tengas que ajustarlo al contenido de tu footer*/

}

/*Edita esta sección para pantallas de tablet*/

@media only screen and ( max-width: 980px ) {

#main-content {

margin-bottom: 450px;

}

#main-footer {

height: 450px;

}

#footer-widgets {

bottom: 83px;

}

/*Edita esta seccion para pantallas de moviles*/

@media only screen and ( max-width: 767px ) {

#main-content {

margin-bottom: 650px;

}

#main-footer {

height: 650px;

}

#footer-widgets {

bottom: 83px;

padding: 5% 0;

}

#footer-widgets .footer-widget:nth-child(n), #footer-widgets .footer-widget .fwidget {

margin-bottom: 4.5% !important;

}

Si te has fijado bien en el código y los comentarios incluidos, hay algunas líneas que es posible que quieras cambiar, dependiendo de la altura de los contenidos de tu footer.

Al final lo que obtienes es algo así:

footer-que-aparece-en-divi

Bonito ¿eh? En cualquier caso mucho mejor que el footer estático y soso, y puede que hasta consigas unos cuantos clics en esa sección, porque para eso la tienes ¿no?

Espero que te haya gustado, otro día vemos más trucos para personalizar Divi.

Si te gusta este contenido prueba tambien a suscribirte al canal en YouTube.

AVISO: esta publicación es de hace dos 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.