Efecto Parallax – Guía completa de cómo aplicarlo en WordPress
Uno de los recursos visuales más utilizados en la actualidad es el paralaje o paralaje, entonces trae dinamismo a las secciones de la web donde se utiliza, convirtiendo el contenido estático en elementos atractivos que moverse con la navegación del usuario.
cual es el efecto paralaje
El efecto paralaje no es nuevo, viene de viejos videojuegosy se refiere al efecto de elementos que se mueven sobre un fondo que permanece inmóvil.
Es un efecto donde los diferentes elementos de la misma sección son como si estuvieran en diferentes capas y se mueven independientemente unos de otrosalgunos permanecen fijos mientras que otros se mueven a diferentes velocidades encima o detrás del resto.
El ejemplo más simple, y también el más común en los sitios web actuales, es un sección con una imagen de fondo o video donde otros elementos superpuestos como texto o botones se mueven cuando el usuario se desplaza.
Cómo aplicar el efecto de paralaje en WordPress
Lo mejor de todo es que puedes aplicar efectos de paralaje en WordPress de muchas maneras diferentesy casi todos ellos de una forma muy sencilla, sin tener que aprender a programar con la mayoría de métodos.
¿Nos vemos?
Aplicar efecto Parallax en WordPress con temas
Hay muchos temas que ofrecen secciones predeterminadas que ya incluyen efectos de paralaje. Con estos temas solo necesitas agregar la sección y ya tienes los controles necesarios para crear el efecto de paralaje, mientras solo tienes que elegir los diferentes elementos de la secciónlos fijos y los que “flotarán” al navegar.
Ninguna temas gratis Las secciones que encontrarás que ofrecen este tipo de parallax son las siguientes:
Aplicar efecto de paralaje con Elementor
Si usa el constructor Elementor, tanto la versión gratuita como la versión Pro, puedes aplicar efectos de paralaje muy fácilmente a cualquier secciónmodificando el estilo para corregir su archivo adjunto, ya sea una imagen o un video.
Aplicar efecto de paralaje con Divi
Si usas Divi, también puedes aplicar efecto de paralaje muy fácilmente.
Simplemente abra la sección de fondo de la sección con la imagen a la que desea aplicar el efecto de paralaje (parallax) y elija entre las opciones 2 métodos de aplicación de paralaje:
Ambos métodos aplican el efecto de paralaje, pero aplicar el efecto de manera diferente:
- Él paralaje verdadero usa JavaScript para aplicar diferentes velocidades a los elementos.
- Él paralaje css solo usa estilos CSS y el efecto es menos impactante según las secciones.
Por razones de rendimiento y optimización de la carga, el método de paralaje de CSS es más ligero, pero a veces querrás un verdadero paralaje para propósitos de impacto.
Aquí tienes los 2 métodos aplicados, para que veas las diferencias. Haga clic en la galería para ver el efecto...
Aplicar efecto de paralaje en WordPress con complementos
¿No usa Elementor, Divi o un tema que ya viene con secciones de paralaje? No hay problema, también tienes complementos para aplicar efecto de paralaje.
Algunas realmente interesantes son las siguientes:
Bloque de sección de paralaje
Esto es muy interesante y fácil de usar, solo necesitas hacer lo siguiente:
- Instalar y activar el complemento
- En el editor de bloques de WordPress, agrega el “Bloque de sección de paralaje” que encontrarás en el grupo de widgets.
- Personaliza el comportamiento del efecto de paralaje en la configuración del "Bloque de sección de paralaje"
- Dentro de este bloque, agregue cualquier otro bloque estándar o personalizado, que heredará el efecto de paralaje del bloque del complemento.
Fondos avanzados de WordPress
Este otro complemento no solo te permite agregar efectos de paralaje con bloques, sino también también con el editor clásicoincluso con el famoso diseño de WP Bakery.
permite aplicar todo tipo de efectos de paralaje para imágenes, videos y fondos coloridoscon multitud de ajustes y posibles personalizaciones, tanto a través del bloque que añade al editor, como a través del generador de shortcodes del editor clásico.
Aplicar Efecto Parallax en WordPress sin plugins ni temas
Bueno, hemos llegado al final de esta guía y solo nos queda una posibilidad, que es aplique el agradable efecto de paralaje pero sin usar diseñadores de diseño, complementos o temas específicosutilizando WordPress con cualquier tema.
El proceso es muy simple y solo requiere que use el editor de bloques o HTML y copie y pegue algo de CSS. Verás lo fácil que es...
Sube la imagen de fondo
Lo primero es subir la imagen que usaremos como fondo para el efecto de paralaje. Cárguelo como lo haría normalmente y copia la urlporque lo vamos a usar a continuación.
Un poco de CSS
Ahora vamos crea los estilos CSS que harán posible el efecto de paralajecreando unas clases que usaremos más adelante en el HTML y, muy importante, poniendo como imagen de fondo la URL que copiamos antes.
Sería 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, aplique los cambios de estilo CSS que crea que se adaptan mejor al diseño de su sitio web.
El CSS lo agrega en la sección de CSS adicional del personalizador de WordPress (Administrador de WordPress → Apariencia → Personalizar → CSS adicional) y publique los cambios.
un poco de html
Ahora que hemos definido y diseñado las clases CSS que aplicarán el efecto de paralaje, Solo tenemos que editar el contenido que estará en segundo plano especificado en el CSS.
Mi consejo es el siguiente:
- Si usas el editor clásico primero crea el contenido de fondo con parallax, usando el editor visual, como lo haces habitualmente. Luego cuando lo tengas, agrega el
divs(ver más abajo) en la pestaña del editor HTML, encima y debajo del contenido creado. - Si usas el editor de bloques crea el contenido de fondo de parallax con tus bloques habituales y cuando lo tengas edítalo como HTML y agrega el
divs(vea abajo).
Esta es la forma en que menos cambiará su forma habitual de trabajar.
entonces seria un ejemplo con el editor clásico:
Es así con el editor de bloques:
Ahora, cuando tenga su contenido que irá sobre la imagen de fondo con parallax, yl HTML para agregar 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 ha gustado este artículo? No puedes imaginar lo que te estás perdiendo y youtube!
Deja una respuesta
Artículos Relacionados