Efecto Parallax – Guía completa de cómo aplicarlo en WordPress

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.

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:

  1. Instalas y activas el plugin
  2. En el editor de bloques de WordPress añade el bloque «Parallax section block» que encontrarás en el grupo de widgets.
  3. Personaliza el comportamiento del efecto parallax en los ajustes del bloque «Parallax section block»
  4. 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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4.7 / 5. Total de votos: 17

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

1 comentario en “Efecto Parallax – Guía completa de cómo aplicarlo en WordPress”

  1. ¡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!

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido