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
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.
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;
}
}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í:
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.
¿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 :)
Hola,
Me ha servido de mucho la ayuda, sobre todo ahora que estoy empezando a indagar en esto. Lo único que necesito preguntar es ¿Cómo hago para que el efecto y el footer en general se vean con el efecto de scrooll? Vamos sin tener que empujar con la barra de scroll si no que mientras bajas con la rueda del ratón no se pare en seco justo cuando va a aparecer el footer.
Gracias
Pues es la idea de este truco, si te he entendido bien
Hola Fernando, la verdad que muy chulo. Lo he probado en mi web y para PC se ve bien pero cuando cambias a dispositivo movil, los widgets de pierden en el cuadro.