Cómo crear efectos de paralaje con Elementor Free y Pro

Todos hemos visto sitios web increíbles que hacen un gran uso del parallax scrolling. fondo se mueve a menor velocidad que los elementos en primer plano para transmitir profundidad. Puede encontrar parallax en todo tipo de sitios web, desde consultas dentales y agencias de marketing hasta carteras creativas y sitios web de juegos. dentales y agencias de marketing, carteras creativas y sitios web de juegos.

Parallax es sin duda un efecto llamativo, y realmente puede hacer que su sitio web destaque entre la multitud y darle un aspecto profesional. Pero, ¿es posible añadirlo a su sitio web WordPress utilizando Elementor sin tener muchos conocimientos técnicos?

La respuesta es sí.

Parallax es una función integrada en Elementor Propero también puedes crear un efecto de paralaje en la versión gratuita de Elementor. ¡Sigue leyendo para descubrir cómo se hace!

Parallax en acción

En primer lugar, ¿por qué un efecto de paralaje? Compruébelo usted mismo:

Este es el sitio web de un popular videojuego llamado Firewatch. En su sitio web, el desarrollador del juego utilizó paralaje para la sección del héroe con un efecto hermoso. Si se hace bien, el paralaje puede aumentar drásticamente el factor "wow" de tu sitio web.

He aquí otro ejemplo de una empresa de la que probablemente haya oído hablar:

Fíjese en lo con todos estos elementos entrando y saliendo. Obviamente, Apple tiene aún trucos bajo la manga para deslumbrar a sus visitantes, pero el paralaje es una razón enorme por la que sus páginas de productos son tan llamativas.

¿Puedes Crear Efecto Parallax Con Elementor Gratis?

Si actualmente utilizando Elementor Libre y quieres un efecto de paralaje, tengo buenas noticias - es más fácil de lo que piensas. Puedes utilizar un plugin de paralaje o trabajar un poco con un código sencillo.

Vamos a caminar a través de el proceso juntos muy rápido.

Cómo Crear Parallax con Elementor Free

Para crear paralaje con Elementor Gratis, primero inicia sesión en tu panel de WordPress. Si aún no tienes instalado Elementor, puedes ir a a la página de inicio de Elementor para obtener el archivo ZIP gratuito del plugin a cambio de su dirección de correo electrónico.

Una vez instalado, es hora de crear, editar una página o un post con Elementor. Sólo tienes que ir a la barra lateral y haga clic en "Añadir nuevo,"Asegúrate de pulsar el botón "Editar con Elementor."

Con una nueva página en blanco lista, voy a tomar una plantilla existente como punto de partida para nuestro efecto de paralaje. Puedes seguirme pulsando Control-Mayúsculas-L (Comando-Mayúsculas-L en Mac) para abrir Biblioteca de plantillas de Elementor.

He elegido el "Página de inicio - Estudio" de la Biblioteca Elementor. Basta con pasar el ratón por encima y hacer clic en "Inserte" para añadir toda la plantilla a su página en blanco.

Cuando empieces a desplazarte hacia abajo, verás que ya hay un efecto de paralaje. Esto se debe a que la imagen de fondo para la sección de héroe se establece en fijo.

Incluso en la versión gratuita de Elementor, deberías poder modificar algunos ajustes básicos como éste para imitar un efecto de paralaje. También puedes utilizar una cabecera adhesiva para obtener un resultado similar. Consulte este artículo para obtener más información sobre la creación de un encabezado adhesivo. Sin embargo, si quieres conseguir un verdadero efecto de paralaje con elementos en la página que se desplacen a diferentes velocidades, entonces necesitarás algún control adicional.

Para crear tu propio efecto de paralaje en Elementor Free, tendrás que utilizar código o un plugin independiente. Ninguna de estas opciones es tan efectiva como lo que puedes hacer con Elementor Pro, pero esperamos que sean suficientes para lo que necesitas hacer.

Código para Parallax

Antes incluso de dar el siguiente paso, debes determinar qué tipo de look quieres. En El enfoque de paralaje más básico es tener dos velocidades de desplazamiento diferentes para unas pocas imágenes o secciones de la página para que se superpongan.

Sin embargo, puede simplificarlo aún más asignando una imagen de fondo en una sección con el botón "Fijo"para que el resto de la página se desplace a su alrededor.

Si quieres personalizar el efecto de paralaje, es útil tener conocimientos de código. Sin embargo, esta página tiene código que puedes utilizar como punto de partida para tu sección de paralaje en Elementor.

Las instrucciones son bastante sencillas: Cualquier código CSS va en Panel > Apariencia > Personalizar > CSS adicionaly, a continuación, añadir la clase paralaje en el Avanzado para la sección que desea tener el efecto de paralaje en su página web.

Para el código JavaScript, puede obtener el plugin Code Snippets y pégalo allí directamente.

Plugins para Parallax

También es posible encontrar plugins para Elementor Free que ofrezcan una función de paralaje, aunque estos no están totalmente actualizados, por lo que su kilometraje puede variar.

El más popular en los últimos años ha sido el plugin gratuito Controles granulares para Elementorque añade otras funciones además de las opciones de paralaje.

Cómo crear Crear paralaje con Elementor Pro

Si por casualidad la versión de pago de Elementor - también conocida como Elementor Pro - entonces todo este proceso es mucho más fácil y versátil. Créeme.

Todo lo que tienes que hacer es ir a la pestaña Avanzado de cualquier sección o elemento (puedes llegar allí haciendo clic en los seis puntos). A partir de ahí, encontrarás una serie de efectos de movimiento diferentes que puedes emplear en tu página.

Conceptualmente, piense el paralaje como la manipulación de una serie de elementos separados en un espacio tridimensional. Con imágenes transparentes alfa y diferentes velocidades de desplazamiento, aquí están sólo algunas cosas que puedes hacer:

• Hacer que los títulos se muestren detrás de una imagen
• Hacer que elementos que empiezan visibles queden ocultos tras otros
• Hacer que los elementos se muevan por la página horizontalmente

Si tiene varios elementos y necesita colocarlos en orden, hay un campo Z-Index en el campo Avanzado ajustes. Cuanto mayor sea el número, más cerca estará del espectador y viceversa.

Puedes ver fácilmente estas capas con el Navegador de Elementor, que se encuentra en la parte inferior de la barra lateral.

Para cambiar la velocidad de desplazamiento de estos elementos, vaya a Avanzado > Efectos de movimiento y haz clic en el efecto de desplazamiento que quieras cambiar. Hay una barra que puedes arrastrar para ajustar la velocidad de desplazamiento.

Si quieres saber más acerca de cómo configurar un efecto de paralaje, aquí hay un video directamente de Elementor sobre el tema:

A Página Con Parallax en Elementor Pro

Listo para hacer nuestra propia página con parallax en Elementor Pro?

Primero te recomiendo que navegues hasta el pequeño icono de engranaje en la barra lateral de Elementor y te asegures de que has configurado el diseño de página como "Elementor ancho completo". el diseño de página "Elementor ancho completo".

A continuación, asegúrese de que tener al menos algunas secciones construidas para su página. Estoy usando elementos pero te harás una idea.

Para configurarlo, vaya a Avanzado > Efectos de movimientoy gire Efectos de desplazamiento en. A continuación, verás una serie de opciones para conseguir interesantes efectos de movimiento basados en el desplazamiento.

Vertical

Para este ejemplo, estoy que la segunda sección se desplace a una velocidad diferente que la sección del héroe. Recuerde que para cualquier efecto de desplazamiento, tiene ajustes adicionales que puede ajustar. En el caso del desplazamiento vertical, puede elegir que el elemento desplazarse hacia arriba o hacia abajo, cambiar el porcentaje visible y hacer que el efecto sea relativo a la ventana gráfica o a toda la página.

Horizontal

Al igual que hicimos con desplazamiento vertical, tenemos la posibilidad de hacer que una imagen o sección se desplace horizontalmente por la pantalla. Sus opciones aquí son izquierda o derecha, velocidad y porcentaje visible desde abajo y desde arriba.

Transparencia

Puedes conseguir un efecto de fundido realmente bonito utilizando el efecto de movimiento de transparencia. Ten en cuenta que también hay una animación de entrada justo debajo de esta área que logra algo similar, pero el efecto de movimiento de transparencia te da mucho más control sobre cómo y cuándo aparece. Para esta opción, puedes decidir si quieres que aparezca, desaparezca, desaparezca y luego aparezca, o aparezca y luego desaparezca. También puedes ajustar el nivel de transparencia total de 1 a 10. 

Desenfoque

El efecto de movimiento Desenfocar te permite hacer que las imágenes empiecen borrosas y se enfoquen como una toma con profundidad de campo, o que empiecen enfocadas y se vayan desenfocando a medida que te desplazas por ellas. Es un efecto realmente atractivo. Al igual que con la transparencia, el desenfoque te permite elegir entre un fundido de entrada, un fundido de salida, un fundido de salida y luego de entrada, o un fundido de entrada y luego de salida. El nivel total del efecto también es una opción de 1 a 15.

Estos cuatro son probablemente los principales efectos de movimiento que se verá en base a parallax parallax. Sin embargo, hay muchos más a tener en cuenta, incluyendo animaciones de rotación y escala, además de una serie de opciones de estilo, efectos de ratón y otros efectos. animaciones de escala, además de una serie de opciones de estilo, efectos de ratón, y otros efectos impresionantes que harán que los elementos de tu sitio web destaquen.

En Ventajas de Parallax

¿Todavía te preguntas si ¿merece la pena tomarse tantas molestias?

Pues bien, el paralaje puede ofrecer una serie de ventajas para su sitio web y su negocio en general. Estas son algunas de las razones por las que deberías considerar añadirlo a tu página de inicio, páginas de destinoy otras páginas importantes de su sitio.

1. Haga que una buena impresión.

La ventaja La ventaja más obvia del efecto de paralaje es que queda muy bien. En comparación con una página estática estática llena de texto e imágenes fijas, parallax añade una nueva dimensión a su sitio web.

Este "factor cool" se extiende también a su marca. Para prácticamente cualquier organización o industria, es tener páginas más dinámicas y únicas. De hecho, incluso para tradicionales o formales, como la contabilidad o la abogacía, el efecto parallax puede implementarse sutilmente en su sitio web para darle un aspecto distinguido.

2. Gane Mayor compromiso.

Está claro que el paralaje puede ayudar a crear un sitio web impresionante, ¡pero también puede ayudar con el compromiso del usuario! Si Si tienes la oportunidad de hacer una prueba A/B, vale la pena comprobar si añadir un simple efecto efecto de paralaje en su página web puede reducir la tasa de rebote y aumentar el tiempo medio en la página. en la página.

En esos primeros segundos segundos cruciales en los que un usuario entra en su página, un efecto de paralaje puede captar su atención el tiempo suficiente para engancharlo. su atención el tiempo suficiente para engancharlo.

3. Dirija a los usuarios a una llamada a la acción.

El uso estratégico de parallax puede dirigir a los visitantes directamente a su llamada a la acción. El movimiento El movimiento del efecto de paralaje atrae la atención, lo que significa que un botón o un formulario cuidadosamente colocado puede aumentar su tasa de conversión global. puede aumentar la tasa de conversión.

Estas son sólo algunas ventajas del efecto de paralaje. Por supuesto, por muy chulo que sea, eso no es excusa para volverse loco con él. Al igual que con cualquier técnica de diseño de gran alcance, usted debe utilizar con moderación para que tus elementos clave sean el centro de atención, tanto desde el punto de vista de la interfaz de usuario como de la experiencia del usuario. como desde la perspectiva de la UX.

También debe tener en cuenta tener en cuenta que el efecto de paralaje a menudo sólo funciona en ordenadores de sobremesa, no en móviles o tabletas. tableta. Tenlo en cuenta a la hora de crear un diseño responsive.

Y si de verdad quieres darle superpoderes a Elementor, no olvides echa un vistazo a nuestros complementos definitivos para Elementor.

Conclusión

Tanto si utiliza código preexistente como si se queda con las excelentes herramientas incluidas en Elementor ProAhora es más fácil que nunca crear efectos de paralaje verticales, horizontales, difuminados y muchos otros efectos increíbles para que tu sitio web brille con luz propia.

¿Ha utilizado Elementor u otras herramientas para crear un efecto de paralaje de moda? Danos tu opinión y tus recomendaciones en los comentarios.