Tutorial Divi: Efecto parallax en el footer

Publicado por Fernando Tellado el 23 Sep, 2016

Índice de contenidos

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

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?

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.