¿Qué es el efecto de paralaje? Por qué y cómo usarlo en su sitio de WordPress

¿Qué es el efecto de paralaje? Por qué y cómo usarlo en su sitio de WordPress

El efecto Parallax 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 cruzado al diseño web. Y hasta ahora, esta tendencia principal no parece ir a ninguna parte, si es que se está utilizando más ampliamente que nunca. Entonces, ¿qué es el efecto de paralaje y por qué debería considerar usarlo 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 el complemento gratuito Parallax Scroll.

¿Qué es el efecto de paralaje??

Veinte diecisiete

El efecto Parallax involucra la página web 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, dando 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, que le permite agregar el efecto a cualquier página o publicación en su sitio web. Y, por supuesto, hay 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 de paralaje??

Existen varios beneficios al usar un efecto de paralaje en su sitio web de WordPress. El primero, y más obvio, es el aspecto visual de un efecto de paralaje. Un efecto de paralaje es estéticamente agradable, dándole a su sitio web una apariencia fresca, elegante y moderna. Esta efecto WOW puede hacer que tu contenido realmente destaque y crea una experiencia de navegador emocionante e interesante.

Otra razón clave para usar el efecto de paralaje en su sitio es ayudar romper una página, particularmente una página de inicio, en fragmentos legibles. Use este efecto para enfatizar las diferentes secciones y tipos de contenido que desea mostrar. Esto puede ayudar a promover diferentes aspectos de su sitio web, iluminar información importante y alentar a los usuarios a navegar por su sitio y acceder al contenido de la manera que elija.

El efecto Parallax se puede usar en cualquier página o publicación de un sitio web, pero se puede ver particularmente en páginas de inicio, páginas de destino o sitios de una página. El sorprendente paralaje visual crea, y el efecto positivo que tiene en la experiencia del usuario, puede hacer que los visitantes permanezcan más tiempo en su sitio y ayudar a mejorar las tasas de conversión de su sitio en relación con sus objetivos.

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 generalmente usan navegación de deslizamiento (en lugar de un desplazamiento como los escritorios), los efectos de paralaje pueden no reproducirse correctamente. Por supuesto, esto dependerá del método y las animaciones que use para su propia sección de paralaje, sin embargo, para una buena usabilidad, puede considerar deshabilitar el paralaje en los dispositivos.

Seleccione un tema con efecto Parallax

Total

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, puede considerar un tema multipropósito que viene con un generador de páginas avanzado. Temas como Divi de Elegant Themes, Parallax by Themify y nuestro propio tema Total, todos incluyen constructores de páginas que proporcionan herramientas de efectos de paralaje.

Agregue controles deslizantes Parallax con el complemento de WordPress Revolution Slider

Slider Revolution Parallax

Si desea un control deslizante destacado con un efecto de paralaje, nuestra mejor opción es el complemento Slider Revolution. Este complemento premium incluye cientos de opciones y características integradas para fuentes, capas, efectos deslizantes, 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 Revolución de control deslizante para obtener más detalles).

Configuración de Slider Revolution Parallax

Luego, edite la diapositiva Antecedentes principales para agregar un Fuente imagen de fondo y seleccione el Parallax / 3D pestaña para asignar un nivel de paralaje. Luego, a medida que agrega capas, seleccione 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 generador de páginas como Visual Composer, puede usar el elemento Revolución del control deslizante del generador de páginas para seleccionar e insertar rápidamente el control deslizante.

Agregue secciones de Parallax con el complemento de WordPress Scroll de Parallax

Rollo de paralaje

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. Rollo de paralaje 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 un código corto simple.

Así que ahora veamos cómo instalar y comenzar a usar Parallax Scroll …

Instalación de Parallax Scroll

Para instalar Parallax Scroll, inicie sesión en su panel de WordPress como administrador y seleccione Complementos> Agregar nuevo del menú.

Agregar nuevo complemento

Buscar Rollo de paralaje, luego seleccione Instalar ahora> Activar.

Parallax Scroll Activate

Ahora encontrará que se ha agregado una pestaña de desplazamiento de Parallax a su menú de WordPress.

Agregar una sección de desplazamiento de paralaje

Para comenzar con Parallax Scroll, primero debe crear una nueva sección de paralaje. Para hacerlo, seleccione Parallax Scroll> Agregar nuevo desde tu menú de WordPress.

Parallax Scroll Agregar nuevo

Aquí ahora puede crear su nueva sección de paralaje …

Agregar nuevo paralaje

Configuración de la imagen de fondo de paralaje de desplazamiento

En primer lugar, debe establecer una imagen para su fondo de paralaje de desplazamiento. Para hacerlo, haga clic en Establecer imagen destacada y agregue la imagen a la sección Imagen destacada.

Foto principal

Piensa cuidadosamente en la imagen que usas para cada sección de fondo. Asegúrese de que sean relevantes para su sitio y sincronícelos con su marca. Si va a mostrar un encabezado o contenido adicional sobre 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 y promueva su contenido, en lugar de distraerlo.

Si opta por utilizar fotografías, las imágenes deben ser de alta calidad. Hermosas imágenes 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. Hay una gran variedad de sitios web en stock desde los que puede descargar imágenes de alta calidad. Echa un vistazo a nuestra colección de sitios web de fotos gratis y premium donde encontrarás rápidamente impresionantes fotografías para tus fondos de paralaje.

Crear un texto de encabezado sobre el fondo de paralaje

Agregar encabezado

Si desea crear un texto de encabezado con un fondo de paralaje, luego debe ingresar el título de una publicación. Este título aparecerá como título de encabezado sobre la parte superior de la imagen de fondo de paralaje elegida.

Es posible que no desee un encabezado en su sección de paralaje. Si este es el caso, aún debe dar a cada paralaje un título de publicación, para que cada sección que cree sea fácilmente identificable. Luego deberá seleccionar para ocultar el título en el Opciones de desplazamiento de paralaje (cubierto más adelante en este artículo), por lo que no se muestra un encabezado en la parte frontal de su sitio.

Mostrar cualquier contenido con un fondo de desplazamiento Parallax

Es posible que desee que la sección de paralaje muestre otro contenido sobre la imagen de fondo. Esto podría incluir todo lo necesario para su sitio, desde texto e imágenes hasta códigos cortos. Decida qué desea mostrar y luego ingrese este contenido en el cuadro de publicación.

Personalizar la configuración de desplazamiento de Parallax

Una vez que esté satisfecho con el contenido, debe personalizar la configuración de la sección de paralaje para adaptarla a su página.

Opciones de desplazamiento de paralaje

Desplácese hacia abajo hasta Opciones de desplazamiento de paralaje. En Estilo, puede cambiar la altura del paralaje y el tamaño de la imagen, así como seleccionar Ancho completo para forzar que su tema muestre la imagen de fondo en todo el ancho de la pantalla si aún no está.

También puede modificar la posición horizontal y vertical del encabezado en el fondo de paralaje. Y si desea ocultar el título de la publicación, puede hacerlo aquí escribiendo pantalla: ninguno; en Estilo de encabezado.

Configuraciones de paralaje le permitirá personalizar cómo se comporta su desplazamiento de paralaje. Esto incluye alterar la velocidad del fondo de paralaje. Pruebe diferentes velocidades para ver qué funciona para su sitio web y audiencia.

También hay una Configuraciones móviles opción, que le permite deshabilitar la imagen de fondo de paralaje y / o el contenido en móviles, si cree que las secciones de paralaje no funcionan bien en dispositivos móviles.

Una vez que haya ajustado la configuración y haya terminado de crear su sección de paralaje, haga clic en Publicar.

Insertar la sección de paralaje en una publicación o página

A continuación, debe insertar su sección de paralaje en una publicación o página de su sitio web. Seleccione Parallax Scroll desde su menú de WordPress.

Parallax Scroll Shortcode

En la tabla presentada, ahora verá un código corto para la sección de paralaje que acaba de crear. Copie el código y luego abra la página o publicación correspondiente. Pegue el código en el contenido de la página en la posición adecuada.

Insertar código corto

Obtenga una vista previa de los cambios y, si está satisfecho con su nueva sección de paralaje, haga clic en Publicar. Ahora puede crear más secciones para darle a la página o publicar un efecto de paralaje completo. Y si necesita hacer modificaciones, simplemente vuelva a abrir la página de la sección de paralaje y realice los cambios necesarios..

Pensamientos finales

Si su tema no tiene una función de efecto de paralaje incorporada, o si desea agregar un efecto a algo más que su página de inicio, Parallax Scroll le permitirá crear rápidamente secciones de paralaje para agregar a sus páginas o publicaciones.

Como ha visto, puede valer la pena agregar un efecto de paralaje a su sitio web. 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 a contenido, y aumentará el tiempo que pasan en su sitio. Esta experiencia de usuario mejorada debería, en última instancia, ayudar a que su sitio se convierta en función de sus objetivos, ya 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? Por favor comparta sus pensamientos en los comentarios a continuación …

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me