Efecto de paralaje-HOW para agregar este diseño a su sitio web de WordPress

El efecto de paralaje se ha convertido en una tendencia popular del diseño web y gráfico. Cuando se implementan en una página, los elementos en segundo plano y el primer plano se mueven a diferentes velocidades, dándole una atractiva visual única. Esta característica de diseño del sitio web ayuda a captar la atención de los usuarios en su sitio, haciéndolos permanecer más tiempo. Esto, a su vez, reduce la tasa de rechazo. Entonces, ¿cómo puede agregar efecto de paralaje a su sitio de WordPress? Le mostraremos los pasos en este artículo, así que quédese con nosotros. Contenido:
¿Cuál es el efecto de paralaje?
Los beneficios del efecto de desfile de paralaje
Contra el efecto del desfile de paralaje
Cómo agregar efecto de paralaje a WordPress
Usando complementos
Efecto Paralax en el editor de bloques
Efecto Paralax en el editor clásico
El efecto del mouse
Código CSS personalizado
Cómo copiar la URL de los medios a WordPress
Mostrar el efecto de paralaje en las páginas de WordPress
Conclusión
¿Cuál es el efecto de paralaje? El efecto de paralaje, también llamado Paradex Parade, es una tendencia de diseño web en la que la imagen de fondo del sitio se mueve a una velocidad diferente al contenido de primer plano. Le da al contenido un efecto 3D a medida que los visitantes corren por el sitio, creando así una ilusión de profundidad de la página.
Algunos ejemplos de sitios web de Paralax Paralax incluyen diseño holandés de stock, diseño web e historia del arte, oncorps ai, etc. Puede consultar estos sitios web de Paralax para inspirarlo para sus propios modelos. Los beneficios del efecto de paralaje uno de los beneficios del efecto de contaminación Paralax es su innegable atracción visual. El efecto le da a un sitio web un aspecto moderno, creando así una experiencia de navegación interactiva y animada. Al ver que un visitante debe correr hacia abajo para ver el efecto, le pide que explore activamente el sitio. Esto hace que un visitante se mantenga más largo en su sitio, reduciendo así la tasa de rechazo. Otra ventaja de usar el paralaje que el efecto de paralaje divide su sitio en diferentes secciones, resaltando así el contenido que desea mostrar. Contra el efecto de paralaje como en el caso de cualquier cosa que tenga ventajas, hay desventajas. Aquí hay algunos para el efecto de paralaje. Aumenta el tiempo de carga El efecto de paralaje es una característica basada en el movimiento, lo que significa que se ocupa de una animación pesada. Esto puede hacer que una página se cargue más lentamente, especialmente en dispositivos móviles. Tampoco funciona bien en todos los navegadores web.
Los usuarios de escritorio de recepción móvil no tendrán ningún problema con esta función, pero los usuarios de dispositivos móviles podrían. Esto se debe al hecho de que el efecto de paralaje es una función de desfile, mientras que los dispositivos móviles usan navegación deslizante. Por lo tanto, es posible que los fondos de paralaje no se jueguen correctamente en todos los dispositivos móviles. Desafío de accesibilidad Cuando se usa incorrectamente en un sitio con contenido intenso, puede dificultar la navegación y leer en el sitio. Esto se debe al hecho de que requerirá mucho desfile del usuario, frustrándolo en este proceso. Es posible que el movimiento no pueda lograr el efecto “WoW” de esta característica, podría ser bastante náuseas. El movimiento dentro del efecto paralaje puede causar mareos y desorientación. Agregar el efecto de paralaje en su sitio hay dos formas en que puede agregar el efecto Paralax a su WordPress-Manual o usar un complemento de WordPress. Ambos son efectivos, sin embargo, el método manual requiere escribir un código CSS. Entonces, si no se le conoce en tecnología, puede permanecer con el método de complemento. Mientras tanto, algunos temas de WordPress incluyen esta función de forma predeterminada. Si recién está comenzando y desea aplicar el efecto de paralaje en las páginas de su sitio, puede usar un tema multifuncional con un constructor de sitios web avanzado.
Los temas de WordPress como DIV, Parallax por Themify y el tema total de WordPress multipropósito tienen todas las páginas con instrumentos de diseño de paralaje. Pero si no desea cambiar el tema de sus sitios, puede usar cualquiera de los métodos a continuación. Agregue el efecto de paralaje usando el complemento para nuevos usuarios de WordPress con pocos conocimientos de programación, la mejor manera de agregar esta función es el uso de un complemento de WordPress. Afortunadamente, hay muchos complementos de WordPress con efecto de paralaje que se pueden usar para agregar efectos de desfile en su sitio. Los complementos como Elementor, los fondos avanzados de WordPress y el desplazamiento de paralaje se pueden usar para lograr esto. Para este artículo, utilizaremos el complemento avanzado de WordPress Fondices para agregar efectos de desfile en las páginas de WordPress.
El complemento es gratuito y acepta otras funciones, como agregar imágenes de fondo a una página o en una sección particular en su sitio con el complemento, puede usar el color, una imagen, un video local o videos en YouTube para fondo y objetos con efecto de paralaje. Para instalar este complemento, inicie sesión en la placa de administración de WordPress y luego acceda a los arados de los arados >> Agregar nuevo. En el cuadro de búsqueda, ingrese los “Fondos avanzados de WordPress”. Cuando el complemento aparezca en los resultados, haga clic en Instalar ahora.
Haga clic en la activación después de completar la instalación. Para usar el complemento, simplemente abra cualquier página o publicación en su sitio a continuación, le mostraremos cómo usarlo en el editor de bloques de WordPress y el editor clásico. Usando el editor de bloques usando el editor de bloques, puede agregar fácilmente el efecto Parallex a una página o publicar en su sitio web. Para comenzar, acceda a páginas >> todas las páginas. Luego seleccione Editar en la página donde desea agregar el efecto. En el editor, haga clic en el bloque Agregar (más). Luego escriba “AWB” en el cuadro de búsqueda. Cuando aparezca, seleccione el bloque AWB.
A la derecha, seleccione el tipo de fondo que desea agregar. Las opciones disponibles son color, imagen y video. Seleccione la pestaña “Imagen” y luego haga clic en el botón Seleccionar imagen.

Ahora seleccione una imagen de su biblioteca de medios. Después de eso, haga clic en el menú de caída “Paralaje”, luego seleccione el efecto que desea agregar a la imagen.

En el área de contenido, cambie el icono de altura para mostrar la altura completa de la imagen. Si desea agregar otro efecto de paralaje en la misma página, simplemente siga el mismo procedimiento y elija el efecto del menú desplegable.

El complemento también acepta efectos de contaminación/desplazamiento con el mouse. Obviamente, esto solo funciona en dispositivos de escritorio. Para activar esta función, haga clic en el menú de caída de paralaje del mouse y luego cambie el cuadro de selección de “activación”.

Puede ajustar el tamaño y la velocidad del efecto del mouse. Cuando haya terminado de agregar el efecto de paralaje, publique la página y la vista previa para ver cómo se ve el efecto de desplazamiento de Paralax. Usando su editor clásico si usa el editor clásico, abra la página para la que desea mostrar Parallex en su editor clásico. (Páginas >> todas las páginas >> edición). En el editor de contenido, haga clic en el icono avanzado de fondo de WordPress (AWB). Este icono se agrega automáticamente después de la activación del complemento.

Al hacer clic en él, aparecerá una ventana emergente en la página con la configuración para agregar el efecto. En el “General”, haga clic en el menú Tipo de fondo desplegable y seleccione el tipo de capa de fondo que desea usar.

Si selecciona el fondo de la imagen, haga clic en Seleccionar imagen para elegir la imagen de fondo. Puede marcar la opción de “estiramiento” si desea que la imagen ocupe todo el ancho de su página.
En la “Biblioteca de medios”, elija una imagen de los archivos multimedia de los sitios. Para cargar una nueva imagen, seleccione la pestaña “Cargar archivos” y luego elija una imagen de su computadora. Haga clic en Use esta imagen después de haber hecho la selección.

Bajo el “Paralaje”, seleccione el tipo de efecto que desea aplicar. Para esta guía, utilicé el efecto del desfile vertical, pero usted es libre de usar cualquiera de los efectos.
Puede aumentar la velocidad con la que se muestra el efecto.El valor varía de -1.0 a 2.0.Cuanto mayor sea el valor, más rápido es el efecto del desfile.Con este complemento, puede elegir si activa el efecto de paralaje en los dispositivos móviles.Tenga en cuenta que esta función puede afectar la experiencia del usuario en dispositivos móviles.Asegúrese de probarlo para la capacidad de respuesta antes de agregarlo a su sitio, agregando el efecto del mouse, el paralaje del mouse agrega una animación al pasar el mouse sobre una imagen.Para activar esto, marque la casilla debajo de la sección “Paralaje del mouse”. De manera similar, puede establecer el tamaño y la velocidad del efecto.En la pestaña “Estilos”, puede agregar un margen alrededor de la imagen y también un relleno dentro de la imagen.

Después de personalizar el efecto de paralaje, haga clic en Insertar.


El complemento generará un código corto e lo insertará en su publicación o página.

Entre la etiqueta de código de apertura y de cierre corto, puede agregar contenido que se mostrará en la imagen. Simplemente reemplace el texto “su contenido aquí” con los textos que desea agregar. También puede limpiarlo para mostrar solo la imagen. Luego publique la página después de agregar el efecto de paralaje. Puede obtener una vista previa en el navegador para ver cómo funciona el efecto en su página web. Nota secundaria: una desventaja de usar este complemento es que funciona solo en publicaciones y páginas. No le da flexibilidad total sobre dónde y cómo mostrar los efectos de paralaje. Para controlar completamente la colocación del efecto, necesita un complemento premium, como Elementor Page Builder o puede agregar efectos de paralaje manualmente utilizando códigos CSS personalizados. En la siguiente sección, le mostraremos cómo crear un efecto de desplazamiento básico usando CSS. Agregar el efecto de desfile de paralaje usando CSS Otra forma de agregar desplazamiento de paralaje es el uso de códigos CSS personalizados. CSS se acorta a una elegante hoja de estilo, una biblioteca utilizada para agregar estilo a un sitio web. Usando CSS, puede agregar efectos de paralaje a sus páginas. Nota: Este proceso requiere algún conocimiento técnico y poco conocimiento sobre CSS. Sin embargo, mantendremos este ejemplo simple para que los principiantes puedan seguirlo. Deberá agregar el código CSS al cuadro “CSS adicional” en el menú Personalización. Para acceder al menú de personalización, vaya al aspecto >> Personalización desde WordPress.

En el cuadro de texto “CSS adicional”, copie e inserte el código a continuación. .parallax { / * Imagen desde su medio * / background-image: url (‘ejemplo-prallax.jpg’); / * Altura de la imagen */ altura: 200px; / * El efecto de desplazamiento de paralaje 3D */ Attacamiento de fondo: fijo; Presión de fondo: centro; Background-Read: No-Reed; Tamaño de fondo: cubierta; } En el código anterior, creé una clase CSS y agregué algunos parámetros. Primero, establecemos el parámetro URL de la imagen de fondo. Reemplace “Ejemplo-prallax.jpg” con la URL de la imagen que desea usar. Vea a continuación cómo obtener esta URL. Cómo copiar la URL de los medios a WordPress para usar una imagen en su sitio, vaya a la biblioteca Media >> y luego haga clic en la imagen que desea usar. Consulte URL en el cuadro “Archivo”. Puede copiar el enlace seleccionando la copia de URL en el portapapeles.

Continuando con la explicación anterior, después de agregar la URL de la imagen de fondo, establecemos la altura de la imagen en 200px. Luego agregue el efecto de desfile de paralaje utilizando la posición fija en el objeto de imagen.

Presione el botón de publicación después de agregar el código. Mostrando el efecto de desfile en las páginas de WordPress para usar el efecto CSS Paralax personalizado, puede crear un elemento en la sección estática a la que desea agregar el efecto de desfile. Luego incluya la clase de “paralaje” que acabo de configurar anteriormente como parámetro. Le mostraremos a continuación cómo hacerlo. Para comenzar, acceda a páginas >> Agregar nuevo. Luego haga clic en el bloque Agregar (más). Seleccione el bloque “HTML personalizado”.

Ahora pegue el código a continuación al cuadro HTML personalizado.
Después de eso, puede agregar otro texto y títulos a la página.Tenga en cuenta que puede usar el código anterior en cualquier sección de su sitio Además, puede agregar el elemento DIO en la misma página.Mientras tanto, si usa el editor clásico, simplemente vaya a la pestaña “Texto” e inserte el mismo código anterior.Presione la publicación después de agregar el código y otro contenido de la página.Ahora, abra la página que acaba de crear para ver una vista previa del efecto de desplazamiento Paralax.Observe el efecto de sensacional profundo cuando pase por la imagen.