Cómo añadir efectos de paralaje a su sitio web WordPress: de la codificación manual al uso de Elementor

efecto de paralajees una técnica común de diseño web que crea una sensación de profundidad y dinamismo a medida que la página se desplaza, haciendo que las páginas web sean más vivas e interactivas. En un sitio web de WordPress, puede conseguir efectos de paralaje de varias maneras, incluida la codificación manual, utilizando la funciónplug-in (componente de software)o a través de Elementor Editor de páginas. Este artículo detallará estos métodos para ayudarle a elegir la forma más adecuada de añadir efectos de paralaje a su sitio web.

I. Añadir el efecto de paralaje manualmente (apto para usuarios con experiencia en codificación)

Implementar el efecto de paralaje manualmente requiere una cierta cantidad de HTML y CSS Conocimientos. Si no está familiarizado con el código, puede que este enfoque le resulte más complejo y que las posibilidades de personalización del efecto de paralaje sean más limitadas. Sin embargo, proporciona la máxima libertad.

Paso 1: Cargar imágenes

En primer lugar, debe subir al sitio de WordPress la imagen que desea utilizar como fondo. Después de subir una imagen a través de la biblioteca multimedia de WordPress, copie la URL de la imagen.

Paso 2: Añadir código CSS

A continuación, escriba el código CSS de la imagen para conseguir el efecto de paralaje. Añada el siguiente código CSS a la página de su tema o páginahoja de estiloMedio:

. Parallax {<br>  background-image: url("imagen URL.jpg"); /* Sustituir por la URL de la imagen subida */<br>  height: 500px; /* Establezca la altura del elemento parallax */<br>  background-attachment: fixed; /* Fondo fijo para crear efecto de paralaje */<br>  background-position: center; /* establecer la posición del fondo */<br>  background-repeat: no-repeat; /* background-no-repeat */<br>  background-size: cover; /* background-image-cover-entire-area */<br>}<br>
. Parallax {<br>  background-image: url("imagen URL.jpg"); /* Sustituir por la URL de la imagen subida */<br>  height: 500px; /* Establezca la altura del elemento parallax */<br>  background-attachment: fixed; /* Fondo fijo para crear efecto de paralaje */<br>  background-position: center; /* establecer la posición del fondo */<br>  background-repeat: no-repeat; /* background-no-repeat */<br>  background-size: cover; /* background-image-cover-entire-area */<br>}<br>
. Parallax {
  background-image: url("imagen URL.jpg"); /* Sustituir por la URL de la imagen subida */
  height: 500px; /* Establezca la altura del elemento parallax */
  background-attachment: fixed; /* Fondo fijo para crear efecto de paralaje */
  background-position: center; /* establecer la posición del fondo */
  background-repeat: no-repeat; /* background-no-repeat */
  background-size: cover; /* background-image-cover-entire-area */
}

Paso 3: Añadir código HTML

Inserte el siguiente código HTML en el lugar adecuado de la página:

<div class="Parallax"></div><br>
<div class="Parallax"></div><br>

Este código inserta una imagen de fondo en la página con un efecto de paralaje. Se puede ajustar según sea necesario alturayfondo-posición y otros parámetros.

Limitaciones y retos:

Aunque este enfoque es flexible, tiene algunas limitaciones. Si desea interactuar más o crear efectos de paralaje más complejos, es posible que necesite dominar más técnicas de JavaScript. Este enfoque no es adecuado para principiantes y los errores de codificación pueden provocar problemas en el diseño de su sitio web.

En segundo lugar, utilizando plug-ins para añadir efectos de paralaje (para usuarios no familiarizados con la codificación)

Para la mayoría de los usuarios, añadir un efecto de paralaje utilizando un plugin es una opción más fácil e intuitiva.WordPress ofrece una serie de plugins que facilitan la implementación de efectos de paralaje, tales como Complementos esencialesyScrollMagicyDeslizador Kreatura etc. El siguiente es un ejemplo de Imagen paralela como ejemplo de cómo utilizar el plugin para conseguir el efecto de paralaje.

Paso 1: Instale y active el plugin

Vaya al backend de WordPress, abra la página de gestión de plugins y busque Imagen paralela Plugin e instálelo. Una vez finalizada la instalación, haga clic en el botón "Activar".

Paso 2: Añadir paralaje

Después de instalar y activar el plugin, puede utilizarlo en las páginas o entradas proporcionadas por elcódigo corto(shortcode) para añadir efectos de paralaje. El plugin tiene instrucciones sobre cómo generar efectos de paralaje, y la parte móvil se puede separar por separado.

Por ejemplo, en el editor de páginas, inserte un código similar al siguiente:

[dd-parallax img="Imagen URL.jpg" parallax background "height="600" speed="3" z-index="-100" mobile="mobile-image.jpg"]
     Texto que se superpondrá a la ventana parallax
[/dd-parallax]
[dd-parallax img="Imagen URL.jpg" parallax background "height="600" speed="3" z-index="-100" mobile="mobile-image.jpg"]
     Texto que se superpondrá a la ventana parallax
[/dd-parallax]
[dd-parallax img="Imagen URL.jpg" parallax background "height="600" speed="3" z-index="-100" mobile="mobile-image.jpg"]
     Texto que se superpondrá a la ventana parallax
[/dd-parallax]

De este modo, podrá añadir fácilmente efectos de paralaje a sus páginas sin necesidad de codificar.

Paso 3: Ajuste los parámetros del efecto de paralaje

Algunos plugins como ScrollMagic Existen opciones de configuración y personalización más complejas. Por ejemplo, el plugin ScrollMagic puede controlar los efectos de paralaje con un sencillo código JavaScript:

// Inicializar el controlador<br>var controlador = nuevo ScrollMagic.<br><br>// Cree la escena<br>var scene = new ScrollMagic.Scene({<br>  duración: 100, // duración de la escena<br>  offset: 50 // Distancia de desplazamiento de inicio de escena<br>})<br>.setPin('#my-sticky-element') // fijar el elemento a la página<br>.addTo(controller); // añadir la escena al controlador<br>
// Inicializar el controlador<br>var controlador = nuevo ScrollMagic.<br><br>// Cree la escena<br>var scene = new ScrollMagic.Scene({<br>  duración: 100, // duración de la escena<br>  offset: 50 // Distancia de desplazamiento de inicio de escena<br>})<br>.setPin('#my-sticky-element') // fijar el elemento a la página<br>.addTo(controller); // añadir la escena al controlador<br>
// Inicializar el controlador
var controlador = nuevo ScrollMagic.

// Cree la escena
var scene = new ScrollMagic.Scene({
  duración: 100, // duración de la escena
  offset: 50 // Distancia de desplazamiento de inicio de escena
})
.setPin('#my-sticky-element') // fijar el elemento a la página
.addTo(controller); // añadir la escena al controlador

La ventaja de estos plugins es que ofrecen más opciones de visualización y personalización para los usuarios que no quieren ensuciarse las manos escribiendo código.

Usar Elementor para añadir efectos parallax (lo mejor para la mayoría de los usuarios)

Elementor Es uno de los editores de páginas de WordPress más populares de la actualidad y ofrece a los usuarios una gran cantidad de funciones que hacen que añadir efectos de paralaje sea fácil e intuitivo. Con Elementor, puede añadir fácilmente efectos de paralaje a los elementos y fondos de página. Aquí tiene los pasos detallados:

1. Efectos de paralaje en elementos web

Paso 1: Seleccione los elementos a los que desea aplicar el efecto de paralaje

Primero, abra el editor de Elementorpágina web, seleccione el elemento al que desea añadir el efecto de paralaje. Puede ser una imagen, un texto, un botón, etc.

Paso 2: Habilitar el desplazamiento

en el elemento alto nivel busque la pestaña efecto de movimiento inferior efecto de desplazamientoy ajústelo a escribir (una receta, un cheque, una factura, etc.). De este modo, puede elegir entre 6 animaciones de desplazamiento para el elemento para conseguir diferentes efectos de paralaje.

Paso 3: Ajustar la configuración de la animación

Haga clic en el icono del lápiz para acceder a la interfaz de configuración, donde podrá ajustar la dirección, la velocidad y las posiciones inicial y final de la animación. Por ejemplo, puede configurar la animación para que comience en la parte superior de la página y se amplíe o gire gradualmente a medida que se desplaza.

Paso 4: Aplicar varias animaciones al elemento

Elementor permite aplicar varias animaciones de desplazamiento al mismo elemento, que pueden combinarse según sea necesario hasta obtener un resultado satisfactorio.

Paso 5: Añadir un seguimiento del ratón y un efecto de inclinación 3D

Elementor ofrece más efectos de paralaje interactivos, incluyendo pista del ratón responder cantando Inclinación 3D Efectos. Estos efectos permiten a los elementos crear una sensación de profundidad basada en el movimiento del ratón y son adecuados para dispositivos de sobremesa.

2. Efectos de paralaje en el fondo

Paso 1: Introducir los ajustes de estilo

En Elementor, seleccionecontenedoressección, vaya a tipo Tab.

Paso 2: Activar los efectos de movimiento en el fondo

Puede ajustarse individualmente contextos y luego vaya a la sección alto nivelHabilite efecto de movimiento tal vez Efectos en ratonespara añadir un efecto de paralaje a la imagen de fondo. El efecto de movimiento ajusta el fondo en función del desplazamiento, mientras que el efecto de ratón hace que la imagen de fondo sea interactiva en función del movimiento del ratón.

Paso 3: Ajuste y optimización del efecto

Similar a los efectos de paralaje en los elementosEs posible ajustar el rendimiento del efecto de paralaje en diferentes dispositivos para garantizar que el efecto se muestra sin problemas en teléfonos móviles, tabletas y ordenadores de sobremesa.

IV. Resumen

Existen varias formas de añadir efectos de paralaje a un sitio web WordPress, mediante codificación manual, el uso de plugins y Elementor, todos los cuales pueden lograr una sensación visual de profundidad y movimiento. A continuación encontrará un resumen de los pros y los contras de cada método:

• Codificación manual: Adecuado para usuarios con experiencia en codificación, ofrece un mayor grado de libertad de personalización, pero es complejo de manejar y adecuado para técnicos.
• plug-in (componente de software): Fácil de usar y adecuado para la mayoría de los usuarios. Plugin permite efectos de paralaje rápidos, pero puede requerir algunos ajustes de código de menor importancia.
• ElementorLa forma más fácil e intuitiva. Con Elementor, puede implementar fácilmente efectos de paralaje en elementos y fondos web.