El efecto de paralaje es una característica de diseño extremadamente popular que se usa comúnmente en los sitios web de WordPress. Este efecto especial ha aparecido en el mundo de los juegos durante años, pero más recientemente se ha trasladado al diseño web. Y hasta ahora, esta importante tendencia no parece ir a ninguna parte, en todo caso, se está utilizando más ampliamente que nunca. Entonces, ¿qué es el efecto de paralaje y por qué debería considerar su uso en su sitio web de WordPress?
En este artículo, consideraremos qué es un efecto de paralaje y los beneficios que puede aportar a su sitio y negocio. Luego, discutiremos cómo agregar rápida y fácilmente un efecto de paralaje a cualquier sitio web, página o publicación de WordPress, con un tema o un complemento.
¿Qué es el efecto Parallax?
El efecto de paralaje implica la el fondo se mueve a un ritmo más lento que el primer plano. Esto crea una ilusión de profundidad en la página, lo que le da al contenido un efecto 3D a medida que los espectadores se desplazan hacia abajo.
La mayoría de los temas premium de WordPress ahora vienen con un efecto de paralaje incorporado en su página de inicio. Incluso el tema predeterminado gratuito de WordPress Twenty Seventeen viene con una función de paralaje. La mayoría de los creadores de páginas también incorporan una herramienta de efecto de paralaje, lo que le permite agregar el efecto a cualquier página o publicación en su sitio web. Y, por supuesto, existen numerosos complementos de WordPress que puede instalar para agregar elementos de efecto de paralaje a su sitio web.
¿Cuáles son los beneficios de usar un efecto Parallax?
Hay una serie de beneficios al usar un efecto de paralaje en su sitio web de WordPress. El primero, y el más obvio, es el aspecto visual de un efecto de paralaje. Un efecto de paralaje es estéticamente agradable, dando a su sitio web un aspecto fresco, elegante y moderno. Esta efecto WOW puede hacer que su contenido realmente destaque y crear una experiencia de navegador emocionante e interesante.
Otra razón clave para utilizar el efecto de paralaje en su sitio es ayudar romper una página, en particular una página de inicio, en fragmentos legibles. Utilice este efecto para enfatizar las diferentes secciones y tipos de contenido que desea mostrar. Esto puede ayudar promover diferentes aspectos de su sitio web, ilumine información importante y anime a los usuarios a navegar por su sitio y acceder al contenido de la forma que elija.
El efecto Parallax se puede utilizar en cualquier página o publicación de un sitio web, pero se ve con mayor frecuencia en las páginas de inicio, las páginas de destino o los sitios de una página. Los impresionantes efectos visuales que crea el paralaje y el efecto positivo que tiene en la experiencia del usuario pueden hacer que los visitantes permanezcan más tiempo en su sitio y ayudar a mejorar los objetivos de tasa de conversión de su sitio.
Consideraciones al usar Parallax
Si bien existen beneficios, hay algunos puntos clave que debe tener en cuenta al agregar secciones de paralaje a su sitio web.
Elección de imágenes de fondo
Piense detenidamente en la imagen que utiliza para cada sección de fondo. Asegúrese de que sean relevantes para su sitio y que estén sincronizados con su marca. Si va a mostrar un encabezado o más contenido en la parte superior de esta imagen de fondo, considere usar un color de bloque o patrones sutiles en lugar de una foto o un gráfico que llame la atención. Esto puede ayudar a garantizar que su imagen funcione con su contenido y lo promueva, en lugar de distraerlo.
Si opta por utilizar fotografías, las imágenes deben ser de alta calidad. Las imágenes hermosas y llamativas pueden ayudar a darle a su sitio una apariencia profesional y única. Estas imágenes crearán una fuerte impresión en su audiencia, lo que a su vez hará que las personas recuerden y regresen a su sitio. Existe una amplia variedad de sitios web de valores de los que puede descargar imágenes de alta calidad. Eche un vistazo a nuestra colección de sitios web de fotografías de archivo premium y gratuitos donde encontrará rápidamente fotografías impresionantes para sus fondos de paralaje.
Parallax en el móvil
Si bien el paralaje es excelente para agregar interés visual, no siempre funciona bien en dispositivos móviles. Debido a que los teléfonos y las tabletas suelen utilizar la navegación por deslizamiento (en lugar de un desplazamiento como los escritorios), es posible que los efectos de paralaje no se muestren correctamente. Por supuesto, esto dependerá del método y las animaciones que utilice para su propia sección de paralaje. Sin embargo, para la usabilidad, es posible que desee considerar deshabilitar el paralaje en los dispositivos.
Paralaje y accesibilidad
Además de la usabilidad reducida en dispositivos móviles, el paralaje también puede presentar algunos desafíos de accesibilidad. Debido a que el paralaje se basa en el movimiento, puede aumentar la dificultad de lectura y puede presentar problemas de compatibilidad con el navegador o el dispositivo (como se mencionó, especialmente en dispositivos móviles). Además, a medida que las capas se mueven, pueden crear problemas de contraste que complican aún más la legibilidad. Por estas razones, debe poner especial cuidado en crear secciones de paralaje en su sitio web.
Seleccione un tema con efecto Parallax
Para aquellos de ustedes que comienzan un nuevo proyecto, deben seleccionar un tema premium que incluya una función de efecto de paralaje. Y si desea utilizar un efecto de paralaje en una variedad de páginas de su sitio web, no solo en la página de inicio, entonces puede considerar un tema multipropósito que viene con un creador de páginas avanzado.
Temas como Divi de Elegant Themes, Parallax de Themify y nuestro propio tema de WordPress Total Multipurpose, todos incluyen creadores de páginas que proporcionan herramientas de efecto de paralaje.
Agregar fondos Parallax con total
Para darle una idea de cómo el paralaje puede funcionar con los temas, a continuación se muestra una guía sobre cómo agregar un fondo de paralaje a una fila con el tema Total. Total usa WPBakery para la creación de páginas frontend, pero muchos otros creadores de páginas de WordPress incluyen opciones similares.
Primero, deberá insertar una fila y agregarle contenido. Luego haga clic en el ícono de lápiz para editar su fila. Debido a que el diseño que creamos arriba no está encuadrado y no incluye una barra lateral, seleccionamos la opción “Estirar fila” para asegurarnos de que nuestro fondo de paralaje llene la fila por completo (nota: Total también incluye una opción de pantalla completa que puedes habilitar si desea que su fondo de fila y paralaje llene completamente la ventana del navegador).
A continuación, en la sección Parallax, puede agregar fácilmente una imagen de fondo y establecer una velocidad de desplazamiento para el efecto de paralaje (cuanto mayor sea el número, más se moverá la imagen, lo que también puede requerir una imagen grande).
Total también ofrece una opción de paralaje avanzada con más configuraciones para habilitar / deshabilitar el efecto en el móvil, elegir el estilo de la imagen (cubrir, fija o repetir), definir la dirección del efecto y por supuesto la velocidad.
También puede usar la configuración de Superposición en una pestaña para asegurarse de tener suficiente contraste entre el fondo de la fila y el contenido (agregamos una superposición blanca a nuestra imagen). Una vez que haya terminado, asegúrese de guardar los cambios de fila y la página.
Agregue controles deslizantes Parallax con Slider Revolution
Si desea un control deslizante destacado con un efecto de paralaje, nuestra primera opción es el complemento Slider Revolution. Este complemento premium incluye cientos de opciones y funciones integradas para fuentes, capas, efectos de control deslizante, diseños y, por supuesto, paralaje.
Habilitar Slider Revolution Parallax
Primero instale el complemento, luego importe una plantilla de control deslizante o comience a construir su propio control deslizante desde cero (puede leer nuestra guía completa de Slider Revolution para obtener más detalles).
A continuación, edite la diapositiva Antecedentes principales para agregar una imagen de fondo de origen y seleccione la pestaña Parallax / 3D para asignar un nivel de paralaje. Luego, a medida que agrega capas, seleccione el Parallax / 3D opción de capa para profundidad de paralaje para agregar movimiento a su texto, imagen, botón y otras capas. ¡Es fácil!
Cuando haya terminado, guarde su control deslizante y use el código corto para insertarlo en cualquier publicación o página. O si está utilizando un creador de páginas como WPBakery (anteriormente Visual Composer), puede usar el elemento Slider Revolution del creador de páginas para seleccionar e insertar rápidamente su control deslizante.
Agregue secciones de Parallax con el complemento de fondos de WordPress avanzado gratuito
Si ya tiene un tema y no incluye una opción de efecto de paralaje incorporada, entonces debería considerar usar un complemento de WordPress para hacer el trabajo. Advanced WordPress Backgrounds (AWB para abreviar) es una opción gratuita popular que le permitirá agregar una imagen de fondo de desplazamiento de paralaje a diferentes elementos en una página o publicación de su sitio web. Agregue un fondo de desplazamiento a un solo elemento, un texto de encabezado o una sección completa que contenga cualquier contenido, todo mediante el uso de un código abreviado simple.
Así que ahora echemos un vistazo a cómo instalar y comenzar a usar fondos avanzados de WordPress con paralaje.
Instalación de AWB
Para instalar el complemento, inicie sesión en su panel de WordPress como administrador y seleccione Complementos> Agregar nuevo del menú.
Busque fondos avanzados de WordPress, luego seleccione Instalar ahora> Activar.
Con AWB, la forma de agregar un fondo de paralaje dependerá del editor de WordPress que esté utilizando: Gutenberg, Classic o un creador de páginas de terceros como WPBakery. No importa cuál utilice, AWB ofrece toneladas de opciones sencillas para:
- Fondos de medios de color, imagen o video
- Tamaño de visualización de los medios (portada, contenido o patrón)
- Posición del medio de fondo, con porcentajes para alinear su fondo (ejemplo: 50% 50% al centro)
- Selector de color de superposición, utilizando el selector Alfa para hacer que su color sea más o menos transparente
- Parallax Scroll, Scale y Opacity con velocidad y opción para habilitar en dispositivos móviles
- Paralaje del mouse (que hace que el fondo cambie ligeramente de acuerdo con los movimientos del mouse)
Además, también encontrará que se ha agregado una pestaña AWB a su menú de configuración de WordPress. Aquí es donde puede elegir una configuración de visibilidad global para deshabilitar los efectos de paralaje (y videos) para dispositivos móviles, así como navegadores específicos.
AWB Gutenberg
Los fondos avanzados de WordPress son totalmente compatibles con Gutenberg e incluso incluyen su propio bloque personalizado para que lo uses.
Para comenzar, deberá insertar el bloque AWB. Luego haga clic para agregar otros bloques para su contenido dentro de AWB.
Cuando haya terminado, haga clic en el bloque AWB y luego haga clic en la pestaña “Bloquear” en el menú de la derecha. Aquí es donde puede agregar y editar las opciones de fondo para su bloque.
Editor clásico de AWB
Con el editor clásico, AWB usa un código corto para agregar un fondo de paralaje. Por lo tanto, primero deberá crear su contenido, luego resaltar la sección que desea que tenga un fondo y hacer clic en el ícono de AWB en el editor.
Elija su imagen de fondo y luego comience a desplazarse hacia abajo para agregar el resto de sus opciones. Por ejemplo, agregar un color de superposición y un tipo de paralaje. Cuando haya terminado, haga clic para “insertar”.
El código abreviado se verá así:
[nk_awb awb_type="image" awb_image="1234" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awb_parallax_speed="0.5"]This is where the content within your parallax background goes.[/nk_awb]
El editor clásico puede ser un poco menos fácil de usar en este caso. Debido a que AWB es un código corto, no puede ver su configuración de fondo desde el editor.
AWB con WPBakery
Por último, los fondos avanzados de WordPress también funcionan con el creador de páginas WPBakery. Usarlo aquí es simple, ya que agregaron una pestaña a la configuración de la fila.
Simplemente haga clic en la pestaña “Fondos (AWB)” para crear y personalizar su propio fondo de paralaje en cualquier fila.
Reflexiones finales sobre los efectos de paralaje
Si su tema no tiene una función de efecto de paralaje incorporada, o si desea agregar un efecto a algo más que a su página de inicio, pruebe con un complemento. Slider Revolution o los fondos de WordPress avanzados gratuitos son geniales. Cualquiera de las dos te permitirá crear rápidamente secciones de paralaje para agregar a tus páginas o publicaciones.
Como ha visto, agregar un efecto de paralaje a su sitio web puede ser muy útil. No solo puede mejorar en gran medida las imágenes de su sitio web, sino que también ayudará a atraer a su audiencia, les permitirá navegar fácilmente por su sitio y acceder al contenido, y aumentará el tiempo que pasan en su sitio. Esta experiencia de usuario mejorada debería ayudar en última instancia a que su sitio se convierta en función de sus objetivos. Ya sea que su objetivo sea aumentar los visitantes que regresan, recopilar clientes potenciales o vender productos o servicios.
¿Agregará un efecto de paralaje a su página de inicio, una página de destino, una publicación o en otro lugar? Comparta sus pensamientos en los comentarios a continuación.
