Uno de los recursos visuales más empleados actualmente es el efecto parallax o de paralaje, pues aporta dinamismo a las secciones de la web en las que se utilice, convirtiendo contenido estático en atractivos elementos que se mueven con la navegación del usuario.
Índice de contenidos
Qué es el efecto parallax
El efecto parallax no es nuevo, proviene de los antiguos videojuegos, y se refiere al efecto de elementos que se mueven sobre un fondo que permanece fijo.
Es un efecto en el que los distintos elementos de una misma sección están como en distintas capas, y se mueven independientemente unos de otros, permaneciendo algunos fijos mientras otros se mueven a distintas velocidades encima o detrás del resto.
El ejemplo más simple, y también mas habitual en las webs actuales es una sección con una imagen o vídeo de fondo sobre la que se mueven, al hacer scroll el usuario, otros elementos superpuestos, como textos o botones.
Cómo aplicar el efecto parallax en WordPress
Lo mejor de todo es que puedes aplicar efectos parallax en WordPress de muy distintas maneras, y casi todas de modo muy sencillo, sin tener que aprender a programar con la mayoría de métodos.
¿Los vemos?
Aplicar efecto parallax en WordPress con temas
Hay montones de temas que ofrecen secciones por defecto que ya incluyen efectos parallax. Con estos temas solo tienes que añadir la sección y esta ya dispone de los controles necesarios para crear el efecto parallax, mientras que tú solo tienes que elegir los distintos elementos de la sección, los fijos y los que «flotarán» al navegar.
Algunos temas gratuitos que encontrarás que ofrecen este tipo de secciones parallax son los siguientes:
Aplicar efecto parallax con Elementor
Si usas el maquetador Elementor, tanto en su versión gratuita como en la Pro, puedes aplicar efectos parallax de manera muy sencilla a cualquier sección, modificando el estilo para hacer fijo el adjunto de la misma, ya sea una imagen o un vídeo.
Aplicar efecto parallax con Divi
Si utilizas Divi también puedes aplicar efecto parallax de manera realmente sencilla.
Solo tienes que abrir el apartado del fondo de la sección con la imagen a la que quieras aplicar el efecto de parallax (paralaje) y elegir entre los 2 métodos de aplicar paralaje:
- Paralaje verdadero
- CSS
Ambos métodos aplican el efecto parallax pero aplicando de manera diferente el efecto:
- El paralaje verdadero utiliza JavaScript para aplicar distintas velocidades a los elementos.
- El paralaje CSS solo usa estilos CSS y el efecto es menos impactante en según qué secciones.
Por cuestiones de rendimiento y optimización de carga es más ligero el método de paralaje por CSS, pero en ocasiones querrás el paralaje verdadero para efectos de impacto.
Aquí tienes los 2 métodos aplicados, para que veas las diferencias. Haz clic en la galería para ver el efecto…
Aplicar efecto parallax en WordPress con plugins
¿No usas Elementor, Divi ni un tema que venga ya con secciones parallax? No hay problema, también tienes plugins con los que aplicar el efecto parallax.
Un par de ellos realmente interesantes son los siguientes:
Parallax Section block
Este es muy interesante y sencillo de utilizar, solo tienes que hacer lo siguiente:
- Instalas y activas el plugin
- En el editor de bloques de WordPress añade el bloque «Parallax section block» que encontrarás en el grupo de widgets.
- Personaliza el comportamiento del efecto parallax en los ajustes del bloque «Parallax section block»
- Dentro de este bloque añade cualquier otro bloque estándar o personalizado, que heredarán el efecto parallax del bloque del plugin.
Advanced WordPress Backgrounds
Este otro plugin no solo te permite añadir efectos parallax con bloques sino también con el editor clásico, incluso con el famoso maquetador WP Bakery.
Permite aplicar todo tipo de efectos parallax a imágenes, vídeos y fondos de color, con montones de ajustes y posibles personalizaciones, tanto mediante el bloque que añade al editor, como mediante el generador de shortcodes del editor clásico.
Aplicar efecto parallax en WordPress sin plugins ni temas
Bueno, y llegamos al final de esta guía, y ya solo nos queda una posibilidad, y es la de aplicar el bonito efecto parallax pero sin usar maquetadores, ni plugins, ni temas específicos, usando WordPress con cualquier tema.
El proceso es muy sencillo, y solo requiere que uses el bloque o editor HTML y copiar y pegar un poco de CSS ¿nos animamos? Verás qué fácil es…
Sube la imagen de fondo
Lo primero es subir la imagen que usaremos como fondo del efecto parallax. Súbela como harías normalmente y copia la URL, porque la usaremos a continuación.
Un poco CSS
Ahora vamos a crear los estilos CSS que harán posible el efecto parallax, creando unas clases que luego usaremos en el HTML y, muy importante, poniendo como imagen de fondo la URL que antes copiamos.
Sería tal que así:
.paralaje {
background-image: url("http://midominio.com/wp-content/uploads/2022/04/mi-imagen-de-fondo.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
.contenido-paralaje {
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px;
}Este CSS es un ejemplo, aplica los cambios de estilos CSS que consideres que mejor encaja con el diseño de tu web.
El CSS añádelo en la sección de CSS adicional del personalizador de WordPress (Administración de WordPress → Apariencia → Personalizar → CSS adicional) y publica los cambios.
Un poco de HTML
Ahora que ya tenemos definidas y aplicados estilos a las clases CSS que aplicarán el efecto parallax, solo nos queda editar el contenido que irá sobre el fondo especificado en el CSS.
Mi consejo es el siguiente:
- Si usas el editor clásico crea primero el contenido que irá sobre el fondo con parallax, usando el editor visual, al modo en el que lo hagas habitualmente. Luego, cuando lo tengas, añade los
divs(ver abajo)en la pestaña del editor HTML, encima y debajo del contenido creado. - Si usas el editor de bloques crea el contenido que irá sobre el fondo con parallax con tus bloques habituales y, cuando lo tengas, edítalo como HTML y añade los
divs(ver abajo).
De este modo es del que cambiarás menos tu modo habitual de trabajar.
Así sería un ejemplo con el editor clásico:
Y así con el editor de bloques:
Ahora, cuando ya tengas tu contenido que irá sobre la imagen de fondo con parallax, el HTML a añadir es este:
<div class="paralaje"> <div class="contenido-paralaje"> Aquí está tu contenido... </div> </div>
Y tendrás tu efecto parallax sin plugins ni temas, solo con HTML, un poco de CSS y tu editor de WordPress.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
¡Muy práctico, gracias, Fernando! Especialmente te agradezco haber incluido también las opciones de cómo hacerlo manual y desde el editor de bloques. Porque trucos y soluciones manuales aisladas de contexto (sin estar dentro de wordpress) podrían no funcionar en nuestro wordpress. Y desde el editor de bloques… porque tampoco se suele explicar por ahí, la verdad. Se da casi por sentado que todo el mundo tiene que trabajar con Elementor… en fin. Tendríamos, al usar wordpress, que ser (no sólo en teoría) libres de utilizar o no una herramienta concreta externa al mismo. Aunque eso ya es otro debate… ¡Saludos y buen fin de semana!