Tutorial Divi: Efecto parallax en el footer

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.

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:

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.

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.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (12 votos, promedio: 4,67 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Share This