Qué es y cómo agregar un efecto de paralaje en WordPress
Publicado: 2021-12-12Cualquiera que alguna vez haya buscado un tema de WordPress o haya explorado varias características y funcionalidades que vienen con un tema probablemente haya notado algo llamado desplazamiento de paralaje que se encuentra entre las características principales del tema. No todo el mundo está familiarizado con lo que realmente es el desplazamiento de paralaje, e incluso aquellos que pueden reconocerlo cuando lo ven en un sitio web probablemente no sepan mucho más al respecto. Es por eso que pensamos que sería una buena idea contarte un poco más sobre esta popular técnica y mostrarte cómo puedes tenerla en tu sitio web usando un complemento o eligiendo un tema WP de paralaje . Los sitios web con desplazamiento de paralaje son populares por una buena razón, y si desea mantenerse al día con las últimas tendencias en el mundo en línea, simplemente debe saber todo lo que hay al respecto.
Si no está seguro de agregar un efecto de paralaje a su sitio web, intentaremos ayudarlo a tomar la decisión correcta:
- ¿Qué es el desplazamiento de paralaje?
- Cómo agregar efecto de paralaje usando un complemento
- Los mejores temas y plantillas de paralaje de WordPress
Hay muchas formas de definir el desplazamiento de paralaje y el paralaje de WordPress como un concepto en general. Una posible definición de esto podría ser que el desplazamiento de paralaje es una técnica en la que el fondo y el primer plano están animados, excepto que se mueven a diferentes velocidades . El fondo se mueve más lento que los objetos en primer plano, lo que crea una ilusión de profundidad. La técnica se usa ampliamente en temas de WordPress , pero obviamente no se limita en absoluto a este popular CMS.
Una breve historia
La palabra paralaje en realidad proviene de la astronomía. Describe el aparente desplazamiento o incongruencia en la dirección de un objeto cuando se ve desde dos puntos de vista diferentes. ¿Sabes cómo a veces los objetos en el espacio parecen moverse a diferentes velocidades porque uno de ellos está más cerca de ti? La dinámica de los objetos del primer plano siempre parece ser más rápida y enérgica que la dinámica de los objetos del fondo. En la "vida real", esto tiene sentido, porque la vida real es tridimensional. Pero, ¿qué pasa con el diseño? Bueno, podemos hacer que parezca de la vida real, y ese es uno de los principales efectos que los diseñadores desean lograr con el paralaje.
Parallax como lo conocemos se introdujo por primera vez durante la era dorada del diseño de videojuegos, más precisamente, con los juegos de arcade de desplazamiento lateral. Su propósito era agregar profundidad y dinámica a la escena y mejorar la narración, todo con la esperanza de brindar a los jugadores una experiencia más atractiva e inmersiva.
Esto fue a principios de la década de 1980. Avance rápido hasta principios de la década de 2010 y tendrá los primeros intentos de desplazamiento de paralaje aplicado al diseño web. Hoy, años después, casi no hay una persona en el mundo que no se haya encontrado con el desplazamiento de paralaje de WordPress de una forma u otra.
Cómo funciona
Puede parecer complicado, pero agregar un efecto de paralaje a su sitio es bastante sencillo. El desplazamiento de Parallax en realidad sigue un concepto de diseño muy simple . Tomas el fondo y el primer plano y los haces moverse a diferentes velocidades, usando animación. Cuando un usuario se desplaza hacia abajo en la página, el fondo simplemente se revela más lento que los objetos en primer plano, que pueden incluir imágenes, galerías, videos, texto o cualquier otro contenido. El resultado es que todo parece flotar en el espacio , en lugar de quedarse ahí, fijo al fondo .
Tenga en cuenta que el diseño de desplazamiento de paralaje de WordPress no es una técnica única y universal. Actualmente se utilizan diferentes estilos de diseño de paralaje, pero la mayoría de ellos se basan en el uso de varias capas . A cada una de las capas se le asigna una función de desplazamiento y una velocidad designada. Después de esto, se aplican las correcciones CSS o HTML adecuadas para diferentes navegadores y visores, asegurándose de usar la sintaxis correcta de las últimas versiones de estos recursos, de lo contrario, todo simplemente no funcionará bien.
Por qué es bueno
El desplazamiento de Parallax se ha vuelto tan inmensamente popular en estos días que parece que literalmente no hay sitio web en el mundo que no lo use de alguna manera, forma o formato. Esto, por supuesto, no es cierto, pero el hecho del asunto permanece: esta técnica se usa ampliamente, especialmente en los sitios de WordPress . Entonces, ¿qué tiene el desplazamiento de paralaje que lo hace tan atractivo para los diseñadores web?
La respuesta puede estar en la experiencia del usuario . El desplazamiento Parallax crea una forma dinámica y emocionante en la que percibimos el contenido de un sitio web . Nos atrae creando una ilusión de profundidad y movimiento . Parallax también es una gran herramienta de narración , ya que conduce al usuario a través de diferentes elementos de contenido. Siempre que lo use correctamente, por supuesto. Hay muchos malos ejemplos de uso de paralaje. A veces parece que los diseñadores lo publicaron solo porque saben cómo, cuando en realidad no tienen nada que decir al respecto.
A los usuarios les gusta entretenerse. Y además de recetas probadas como fondos de video que puede agregar fácilmente con los complementos de fondo de video de WordPress , el desplazamiento de Parallax también es una excelente manera de hacerlo. También es una excelente manera para que las empresas arrastren literalmente a los espectadores a las partes de su sitio web donde quieren que se enfoquen. Por ejemplo, las páginas de productos o servicios.
En cualquier caso, el comportamiento de desplazamiento definitivamente conlleva un elemento de sorpresa. Cuando se hace bien, deleita al usuario, y eso siempre es bueno para un sitio web.
Para usuarios principiantes e intermedios, la mejor manera de agregar paralaje es, con mucho, usar un complemento. Hay tantos complementos de paralaje excelentes en el mercado y la mayoría de ellos hacen un excelente trabajo ayudándolo a agregar paralaje a su sitio web de WordPress. Para los propósitos de este artículo, usaremos el complemento Advanced WordPress Backgrounds .
Aunque está hecha principalmente para agregar efecto de paralaje, esta herramienta cubre muchas otras características interesantes. Por ejemplo, puede usarlo para agregar un fondo estático detrás del texto . Además, también le ayuda a agregar fondo a una fila específica. Cuando desee colorear un párrafo agregando un fondo, este complemento le permitirá hacerlo con un solo clic.
Instalación del complemento
Primero, obviamente necesitará instalar y activar el complemento de la forma habitual. Lo primero que debe hacer es ir a su backend y buscar el complemento. Haga clic en Complementos y luego en Agregar nuevo . Escriba Fondos avanzados de WordPress en el campo de búsqueda y, una vez que lo haya encontrado, haga clic en Instalar . Cuando se complete el proceso de instalación, haga clic en Activar . Su nuevo complemento ahora debería aparecer en su menú Complementos.
Uso del complemento para agregar Parallax con el editor clásico
Para agregar realmente paralaje, vaya a la página o publicación donde desea agregarlo. Notarás un nuevo botón en tu editor . Al pasar el mouse sobre él, se revelará que dice Fondos avanzados de WordPress . Haga clic en él y mostrará una ventana emergente en la que establecerá diferentes valores y cambiará la configuración de su efecto de paralaje.
Primero, seleccione el tipo de fondo. En este ejemplo, usaremos una imagen.
Lo siguiente que debe hacer es seleccionar una imagen que desee utilizar. Para una imagen de ancho completo, marque la casilla que dice Estirar .
Después de eso, seleccione el efecto de paralaje. Vamos a optar por Scroll . Aquí también puede establecer la velocidad de desplazamiento deseada.
Además del paralaje, hay un efecto de ratón que vale la pena mencionar. Gracias a él puedes crear el efecto de cámara lenta en la imagen que está debajo del cursor del mouse . Lo mejor es que puedes combinar efectos de ratón y paralaje en la misma imagen. Simplemente elija el que mejor se adapte a sus necesidades, según sus necesidades y objetivos específicos.
Las dimensiones y la altura de su imagen de paralaje se pueden configurar en la pestaña Estilos.
Finalmente, haga clic en el botón Insertar .
El siguiente código abreviado debería aparecer ahora en su editor:
[nk_awb awb_type = ”image” awb_stretch = ”true” awb_image = ”22 ″ awb_image_size =” full ”awb_parallax =” scroll ”awb_parallax_speed =” 0.5 ″ awb_mouse_parallax = ”true” awb_00s_peralize_parallax = ”true” awb_00s ″ Tu contenido aquí [/ nk_awb]
Deberá reemplazar las palabras " Su contenido aquí " con su contenido real (texto, imagen, video ...). No olvide hacer clic en Guardar .
Vaya a su sitio web y revise la publicación o página que acaba de agregar paralaje para ver si todo funciona correctamente.
Uso del complemento para agregar Parallax con Gutenberg Editor
Este complemento también es compatible con Gutenberg. Para usarlo, haga clic en el bloque Fondo (AWB) para comenzar a agregar el efecto de paralaje.
Como cualquier otro bloque, el bloque Fondo (AWB) tiene sus propias opciones que son casi las mismas que las del Editor clásico .
La gran parte es que puede agregar color, imagen o incluso un video a la sección con efecto de paralaje. Además, puede establecer el tamaño del paralaje agregando relleno, su velocidad o el tipo de paralaje. Por último, Gutenberg admite el efecto de mouse que mencionamos anteriormente.
El desplazamiento de Parallax es en realidad más difícil de hacer de lo que parece. Especialmente si eres un principiante de WordPress , agregar un efecto de paralaje puede parecer demasiado complicado para ti. Es por eso que pensamos que podría ayudar si incluyéramos una breve lista de los mejores temas de WordPress de paralaje que puede obtener en el mercado ahora mismo.
- Bazaar: un tema de comercio electrónico moderno y nítido
- PlayerX: un tema de alta potencia para juegos y deportes electrónicos
- Azalea - Tema de fotografía de moda
- Boston - Tema corporativo de WordPress Parallax
- Hypnos - Tema de WordPress OnePage Parallax
Los temas de moda, especialmente las tiendas en línea, son los que más se benefician del desplazamiento de paralaje. De hecho, es difícil imaginar un sitio web de moda y ropa, una tienda o un blog sin él. Bazar es uno de los temas que parece haber acertado. Este hermoso tema viene con algunas páginas impresionantes , incluido un lookbook bellamente diseñado. La página asimétrica de la tienda es ideal para exhibir sus productos de una manera que haga que sus visitantes estén de humor para comprar.
Bazaar viene con el poderoso complemento Select Core, códigos cortos de productos personalizados, secciones de fondo de video, widgets sociales y un mapa de Google personalizable. El tema es, por supuesto, totalmente receptivo e incluye el poderoso creador de páginas WPBakery .
Características que hacen de Bazaar el mejor tema de WordPress de paralaje:
- Desplazamiento suave
- SEO optimizado
- Traducción lista
- Complemento gratuito Slider Revolution
- Importación de contenido de demostración con 1 clic
Este tema emocionante para todo lo relacionado con los juegos, los jugadores, los deportes electrónicos y los estudios es un excelente ejemplo de desplazamiento de paralaje bien hecho . La propia naturaleza de la industria del juego requiere exactamente el tipo de experiencia de usuario dinámica y emocionante que PlayerX trae a la mesa.
Además de los deslizadores y pergaminos de paralaje geniales, PlayerX está repleto de todas las características y funcionalidades necesarias para un sitio de juegos exitoso . Los elementos personalizados incluyen infografías excelentes, tipografía rica, presentaciones para el equipo, testimonios, lista de coincidencias y un cuadro de flujo.
Con todo, PlayerX es un tema que realmente muestra de qué se trata el desplazamiento de paralaje y cómo debe usarse .
Características que hacen de PlayerX el mejor tema de WordPress de paralaje:
- Códigos cortos para partidos y transmisión
- Carrusel de equipo
- Búsqueda integrada
- 7 paquetes de fuentes de iconos
- Compatible con WooCommerce
Azalea es un tema de WordPress hermoso y sofisticado para fotografía con un conjunto de diseños de página de inicio prefabricados, uno de los cuales se basa en gran medida en el desplazamiento de paralaje . Ideal para fotografía de moda, Azalea también se puede utilizar para otros fines, desde estilo de vida y belleza hasta blogs y tiendas donde puede vender sus fotos. Cada una de las páginas de inicio es simplemente impresionante, pero tenemos que decir que la de paralaje tiene un encanto particular que estamos seguros de que la mayoría de los fotógrafos de moda apreciarán.
Azalea es muy robusta, pero eso no quiere decir que sea difícil de usar. Incluso alguien sin experiencia con WordPress debería tener un tiempo fácil para configurar este tema y ejecutar un sitio web de fotografía de moda, belleza y estilo de vida de gran éxito.
Características que hacen de Azalea el mejor tema de WordPress de paralaje:
- Galerías de pruebas protegidas por pase
- Código corto de Parallax
- Carrusel de clientes
- Código corto de CTA
- 5 estilos de encabezado
Una cosa muy interesante de Boston es que le permite elegir entre un sitio web de una página y un sitio web de varias páginas . Además de esta flexibilidad, también obtiene amplias opciones de personalización y, por supuesto, algunas páginas de paralaje impresionantes.
Boston es un tema de WordPress de paralaje diseñado específicamente para corporaciones, grandes empresas y agencias . Ya sea que opte por un sitio web de una página o de varias páginas, obtendrá un sitio web muy inteligente y de aspecto profesional que utiliza paralaje no para presumir, sino para impresionar a los visitantes con una sensación moderna. El tema se desarrolló sobre la base del concepto de dispositivos móviles primero , que es importante ya que es muy probable que sus clientes y clientes realicen la mayor parte de su navegación en sus dispositivos portátiles . Ah, y los usuarios profesionales estarán felices de saber que hay una versión hecha específicamente para ellos, con menos archivos y, por lo tanto, mucho más liviana.
Características que hacen de Boston el mejor tema de WordPress de paralaje:
- Vista previa de Lightbox
- Twitter en vivo
- Obras de cartera ilimitadas
- Flexslider y Revolution Slider
- Formulario de contacto de trabajo y boletín
Si lo que está buscando es un sitio web de una página altamente funcional, completo y moderno, entonces Hypnos podría ser el tema adecuado para usted. Este tema receptivo es verdaderamente polivalente . Puede usarlo para cualquier cosa, desde pequeñas y medianas empresas, agencias o estudios hasta portafolios, blogs y tiendas. Viene con una versión clara y oscura, las cuales se ven fabulosas y tienen excelentes efectos de paralaje .
Además de eso, Hypnos es muy intuitivo, viene con una excelente atención al cliente y una gran cantidad de funciones. El creador de páginas que obtienes con este tema viene con secciones personalizadas, y también obtienes una cartera ordenable, un formulario de contacto funcional, Revolution Slider y fuentes de Google, entre otras cosas.
Características que hacen de Hypnos el mejor tema de WordPress de paralaje:
- Compatible con WPML
- SEO optimizado
- Listo para retina
- Precargador personalizado
- Soporte de chat en vivo
En conclusión
El desplazamiento de Parallax definitivamente mejora su sitio web de WordPress , pero solo si lo hace bien. Agregar paralaje solo por tener paralaje es una tontería. Con tantos sitios web que utilizan este efecto, es posible que estemos acercándonos poco a poco a la sobresaturación y al punto en que se vuelve desagradable, obsoleto y aburrido.
En segundo lugar, el desplazamiento de paralaje debe realizarse correctamente . Debe ejecutarse sin problemas; de lo contrario, los visitantes de su sitio, obviamente, se molestarán.
En tercer lugar, puede resultar muy seductor utilizar el desplazamiento de paralaje para dar vida a su sitio web de una página, pero asegúrese de tener algo que decir y contenido que ofrecer a los usuarios para que puedan desplazarse.
En cuarto lugar, si ha logrado atraer a sus visitantes con un efecto de desplazamiento de paralaje convincente y bien pensado, no olvide hacer que funcione a su favor. Planifique cuidadosamente sus CTA para atraerlos aún más .
Por supuesto, cuando elige un tema WP de paralaje premium, no tiene que preocuparse por estas cosas, ya que los autores del tema lo pensaron bien por usted.
La conclusión es que el desplazamiento de paralaje es bastante impresionante. Sí, hay formas de estropearlo y sí, puede haber algo de sobresaturación. Aún así, es una herramienta poderosa para aumentar el tráfico del sitio y optimizar sus tasas de conversión. Además, se ve muy bien y agrega un toque genial a su sitio web .
¿Cuál es su opinión sobre el desplazamiento de paralaje de WordPress? ¡Nos encantaría saber de ti en la sección de comentarios a continuación!
Esperamos que este artículo le haya resultado útil. Si te gustó, ¡no dudes en consultar también algunos de estos artículos!
- Los mejores temas de WordPress geniales y con estilo
- Complementos de WordPress para ventanas emergentes que hacen sonreír a sus visitantes
- Más de 5 complementos de YouTube de WordPress perfectos para la imagen