Cómo agregar el efecto de paralaje elemental rápido y fácil

El efecto de paralaje a menudo se ve en los sitios web que cultivan la estética contemporánea. Agrega una impresión de profundidad y dinámica y destaca la sensación moderna en el sitio. Hay una amplia variedad de temas de WordPress que vienen con efectos de paralaje, pero siempre tiene la opción de crear un efecto de paralaje solo. Muchos sitios usan el efecto del desfile de Paralax como una poderosa herramienta e historia de participación del usuario. En este artículo, le mostraremos cómo agregar el efecto de paralaje en su sitio utilizando el generador de página Elementer. Elementor es el único generador de páginas que viene con una opción Paralax integrada. Todos los demás constructores requieren el uso de un tipo de complemento o instrumento. Antes de continuar, asegurémonos de comprender exactamente cuál es el efecto de paralaje. En este artículo leerá sobre:
¿Cuál es el efecto del paralaje?
Cómo encontrar la opción del efecto Elemoror Paralax
Cómo establecer la altura de la sección Paralax
Cómo establecer el efecto de paralaje en una fila con múltiples columnas
¿Cuál es el efecto de paralaje?
El efecto de paralaje se obtiene cuando los elementos en segundo plano y los elementos en primer plano se mueven a un ritmo diferente cuando el usuario se ejecuta. Específicamente, los elementos de fondo están configurados para moverse más lentamente que los elementos en primer plano y esto se crea una ilusión de profundidad.

Cómo encontrar la opción del efecto Elemoror Paralax
El elemento del generador de páginas facilitó la adición de un efecto de paralaje, lo que le permite asignar un fondo de paralaje a una determinada fila o columna. Arriba puede ver un ejemplo de un efecto de paralaje creado por el elemento.
Puede aplicar un efecto de paralaje elemental en una fila que no contenga información, solo para servir como una imagen móvil, para que la página sea más atractiva, o puede aplicarla en una fila que contiene cierta información, donde la imagen de paralaje estará detrás información. También es posible agregar un efecto de paralaje a toda la sección o columna que esté contenida en la sección. Puede encontrar la opción Paralax haciendo clic en el pequeño icono que se asemeja a un libro abierto y se puede encontrar en la esquina superior izquierda de la columna que seleccionamos para agregar el paralaje. Si desea agregar paralelo a toda la sección y no a la columna, la misma opción se encuentra en una pestaña azul que aparece en el medio de la fila cuando pasa el mouse sobre ella. Para acceder a la opción de paralaje, elija la opción de edición de columna o edición de sección. En nuestro caso, editamos la columna. Al hacer clic en la columna de edición, se abre un menú a la izquierda con tres pestañas principales. Elija la pestaña Estilo, para comenzar. Haga clic en la opción Tipo de fondo y el campo aparecerá para agregar una imagen. Puede agregar una imagen desde su biblioteca de medios o cargar un archivo nuevo.

Después de elegir la imagen para la sección de paralaje, puede continuar ajustando la configuración de la imagen.

En la configuración de archivos adjuntos, elija la opción fija, porque necesitamos que la imagen se comporte a medida que ejecutamos, si elegimos desplazarse aquí, la imagen se moverá con el fondo.

La configuración de la posición de la imagen proporciona muchas opciones. Puede optar por configurar la imagen en el centro de la sección, derecha a la derecha, arriba a la izquierda, etc. – Lo bueno es que ves inmediatamente la vista previa de la posición de la imagen, lo que hace que sea más fácil decidir.

La siguiente opción de repetición se usa, especialmente cuando la imagen es en realidad un modelo que debe repetirse o en los casos en que la imagen es demasiado pequeña. En nuestro caso, la imagen tiene el tamaño correcto, por lo que elegimos la opción predeterminada. Para el efecto de paralaje, es mejor tener una dimensión de imagen de 1920 píxeles; de esta manera, la imagen ocupará el ancho de toda la sección. Pero, si el tamaño de la imagen no es óptimo, puede ajustarlo en cualquier momento utilizando la configuración de tamaño. Ofrecen varias opciones, incluidas la configuración personalizada que le permiten establecer el tamaño solo con una diapositiva. La vista previa de cada cambio que realice está disponible de inmediato a la derecha, por lo que puede probar cada una de las opciones para ver qué mejores trajes.

Después de ajustar todas estas configuraciones, puede moverse al menú de superposición de fondo. Cuando lo abra, notará que todas las opciones son las mismas que en el menú anterior, pero con una configuración más interesante. Estos son opacidad, filtros CSS y modo de mezcla. El control deslizante de opacidad le permite establecer una superposición base y jugar con opacidad para aumentar o reducir su efecto.


Los filtros CSS y el modo de mezcla le permiten aplicar sus efectos similares de Photoshop. Los efectos del filtro CSS permiten efectos gráficos como desenfoque o cambio de color en las imágenes. Con respecto a los modos de mezcla, Elementor ofrece 13 de ellos: normal (esto es predeterminado y tiene cero mezcla), multiplicar, pantalla, superposición, oscurecer, aclarar, esquivar color, saturación, color, diferencia, exclusión, tono y luminidad.

Cómo establecer la altura de la sección Paralax de la sección Paralax puede depender del contenido de la sección. Si, por ejemplo, hemos definido el contenido del contenido, o el contenido ya tiene su propio relleno predeterminado, el paralaje se ajustará de tal manera que cubra toda la superficie detrás del elemento. Entonces, para establecer la altura en este caso, debemos hacer un ajuste al elemento en sí.

Si esto no es suficiente o tenemos una sección que no tiene contenido, volveremos a la configuración y elegiremos la pestaña avanzada. En la configuración de llenado podemos establecer la altura y ver cómo esto tiene un efecto inmediato en una vista previa en vivo.
Cómo establecer el efecto de paralaje en una fila de columnas múltiples

¿Qué sucede cuando tenemos dos o más columnas seguidas y queremos tener el efecto del paralaje elemental solo en una de las columnas? El procedimiento es muy simple. Acceda al menú de opción de la columna en la que desea establecer el efecto Paralax. Agregue el fondo como lo hizo antes, cuando era solo una columna en una fila. Pero, no puede establecer la altura del paralaje simplemente ajustando el revestimiento, debe agregar contenido a la columna. Puede insertar el contenido en la columna con un efecto de paralaje, o insertar el contenido en la otra columna y luego será posible ajustar la altura de la sección ajustando el relleno en el menú de opciones avanzadas. Si no le gusta cómo se centra la imagen de Paralax, siempre puede volver a la configuración de estilo y ajustar su posición.

Conclusión
Las microinteracciones y las interfaces animadas con el usuario son a menudo los elementos que hacen que la experiencia del usuario sea cautivadora y memorable. Esta es una de las razones por las cuales el efecto de paralaje es tan popular en todo tipo de sitios web hoy en día. Le permite revelar los detalles de su contenido de manera dinámica e inspirar al usuario a sentir que tiene control. El efecto de paralaje realmente puede mejorar muchos aspectos de la experiencia del usuario. Pero, no debe hacerse correctamente y con un propósito. La adición de paralelos solo porque todos tienen sentido y en realidad podría estar molesto, especialmente si no se ajusta al contenido del sitio web. Esperamos que este artículo haya sido útil. Si le gustó, ¡no dude en consultar algunos de estos artículos!

Temas gratuitos de WordPress Paralaje gratis para cualquier nicho
Top complementos de paralaje de WordPress
Las mejores prácticas y ejemplos para el sitio web de Hero Image