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.

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

Al dejar un comentario se solicitan datos como tu correo y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad | Responsable de los datos: Fernando Tellado García | Finalidad: Gestión y moderación de comentarios | Legitimación: Tu consentimiento expreso | Destinatario: Disqus (acogido a EU-US Privacy Shield) | Derechos: Tienes derecho al derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas y para servir más rápidos los contenidos.

gpdr, wpSGCacheBypass

Cookies de terceros

Usamos cookies de terceros en las que se almacenan externamente para conocer tus usos de navegación, si ya estás suscrito al boletín y los elementos compartidos en redes sociales

cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform, _ga, _gid

Pin It on Pinterest