Efecto Parallax – Guía completa de cómo aplicarlo en WordPress

1651845489 Efecto Parallax – Guia completa de como aplicarlo en WordPress

Uno de los recursos visuales más utilizados en la actualidad es el paralaje o paralaje, entonces trae dinamismo a las secciones de la web donde se utiliza, convirtiendo el contenido estático en elementos atractivos que moverse con la navegación del usuario.

Índice

    cual es el efecto paralaje

    El efecto paralaje no es nuevo, viene de viejos videojuegosy se refiere al efecto de elementos que se mueven sobre un fondo que permanece inmóvil.

    Es un efecto donde los diferentes elementos de la misma sección son como si estuvieran en diferentes capas y se mueven independientemente unos de otrosalgunos permanecen fijos mientras que otros se mueven a diferentes velocidades encima o detrás del resto.

    El ejemplo más simple, y también el más común en los sitios web actuales, es un sección con una imagen de fondo o video donde otros elementos superpuestos como texto o botones se mueven cuando el usuario se desplaza.

    Cómo aplicar el efecto de paralaje en WordPress

    Lo mejor de todo es que puedes aplicar efectos de paralaje en WordPress de muchas maneras diferentesy casi todos ellos de una forma muy sencilla, sin tener que aprender a programar con la mayoría de métodos.

    ¿Nos vemos?

    Aplicar efecto Parallax en WordPress con temas

    Hay muchos temas que ofrecen secciones predeterminadas que ya incluyen efectos de paralaje. Con estos temas solo necesitas agregar la sección y ya tienes los controles necesarios para crear el efecto de paralaje, mientras solo tienes que elegir los diferentes elementos de la secciónlos fijos y los que “flotarán” al navegar.

    Ninguna temas gratis Las secciones que encontrarás que ofrecen este tipo de parallax son las siguientes:

    Aplicar efecto de paralaje con Elementor

    Si usa el constructor Elementor, tanto la versión gratuita como la versión Pro, puedes aplicar efectos de paralaje muy fácilmente a cualquier secciónmodificando el estilo para corregir su archivo adjunto, ya sea una imagen o un video.

    Efecto Parallax – Guia completa de como aplicarlo en WordPress

    Aplicar efecto de paralaje con Divi

    Si usas Divi, también puedes aplicar efecto de paralaje muy fácilmente.

    Simplemente abra la sección de fondo de la sección con la imagen a la que desea aplicar el efecto de paralaje (parallax) y elija entre las opciones 2 métodos de aplicación de paralaje:

    Efecto Parallax – Guia completa de como aplicarlo en WordPress

    Ambos métodos aplican el efecto de paralaje, pero aplicar el efecto de manera diferente:

    • Él paralaje verdadero usa JavaScript para aplicar diferentes velocidades a los elementos.
    • Él paralaje css solo usa estilos CSS y el efecto es menos impactante según las secciones.

    Por razones de rendimiento y optimización de la carga, el método de paralaje de CSS es más ligero, pero a veces querrás un verdadero paralaje para propósitos de impacto.

    Aquí tienes los 2 métodos aplicados, para que veas las diferencias. Haga clic en la galería para ver el efecto...

    Aplicar efecto de paralaje en WordPress con complementos

    1651845484 76 Efecto Parallax – Guia completa de como aplicarlo en WordPress

    ¿No usa Elementor, Divi o un tema que ya viene con secciones de paralaje? No hay problema, también tienes complementos para aplicar efecto de paralaje.

    Algunas realmente interesantes son las siguientes:

    Bloque de sección de paralaje

    Esto es muy interesante y fácil de usar, solo necesitas hacer lo siguiente:

    1. Instalar y activar el complemento
    2. En el editor de bloques de WordPress, agrega el “Bloque de sección de paralaje” que encontrarás en el grupo de widgets.
    3. Personaliza el comportamiento del efecto de paralaje en la configuración del "Bloque de sección de paralaje"
    4. Dentro de este bloque, agregue cualquier otro bloque estándar o personalizado, que heredará el efecto de paralaje del bloque del complemento.
    Te puede Interesar  el paso a paso para hacerlo en WordPress

    1651845485 77 Efecto Parallax – Guia completa de como aplicarlo en WordPress

    Fondos avanzados de WordPress

    Este otro complemento no solo te permite agregar efectos de paralaje con bloques, sino también también con el editor clásicoincluso con el famoso diseño de WP Bakery.

    permite aplicar todo tipo de efectos de paralaje para imágenes, videos y fondos coloridoscon multitud de ajustes y posibles personalizaciones, tanto a través del bloque que añade al editor, como a través del generador de shortcodes del editor clásico.

    1651845485 473 Efecto Parallax – Guia completa de como aplicarlo en WordPress

    Aplicar Efecto Parallax en WordPress sin plugins ni temas

    Bueno, hemos llegado al final de esta guía y solo nos queda una posibilidad, que es aplique el agradable efecto de paralaje pero sin usar diseñadores de diseño, complementos o temas específicosutilizando WordPress con cualquier tema.

    El proceso es muy simple y solo requiere que use el editor de bloques o HTML y copie y pegue algo de CSS. Verás lo fácil que es...

    Sube la imagen de fondo

    Lo primero es subir la imagen que usaremos como fondo para el efecto de paralaje. Cárguelo como lo haría normalmente y copia la urlporque lo vamos a usar a continuación.

    1651845486 352 Efecto Parallax – Guia completa de como aplicarlo en WordPress

    Un poco de CSS

    Ahora vamos crea los estilos CSS que harán posible el efecto de paralajecreando unas clases que usaremos más adelante en el HTML y, muy importante, poniendo como imagen de fondo la URL que copiamos antes.

    Sería así:

    .paralaje { 
    background-image: url("http://midominio.com/wp-content/uploads/2022/04/mi-imagen-de-fondo.jpg");
    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left:-410px;
    margin-right:-410px;
    }
    .contenido-paralaje { 
    width:50%;
    margin:0 auto;
    color:#FFF;
    padding-top:50px; 
    }

    Este CSS es un ejemplo, aplique los cambios de estilo CSS que crea que se adaptan mejor al diseño de su sitio web.

    El CSS lo agrega en la sección de CSS adicional del personalizador de WordPress (Administrador de WordPress → Apariencia → Personalizar → CSS adicional) y publique los cambios.

    un poco de html

    Ahora que hemos definido y diseñado las clases CSS que aplicarán el efecto de paralaje, Solo tenemos que editar el contenido que estará en segundo plano especificado en el CSS.

    Mi consejo es el siguiente:

    • Si usas el editor clásico primero crea el contenido de fondo con parallax, usando el editor visual, como lo haces habitualmente. Luego cuando lo tengas, agrega el divs (ver más abajo) en la pestaña del editor HTML, encima y debajo del contenido creado.
    • Si usas el editor de bloques crea el contenido de fondo de parallax con tus bloques habituales y cuando lo tengas edítalo como HTML y agrega el divs (vea abajo).

    Esta es la forma en que menos cambiará su forma habitual de trabajar.

    entonces seria un ejemplo con el editor clásico:

    Es así con el editor de bloques:

    Ahora, cuando tenga su contenido que irá sobre la imagen de fondo con parallax, yl HTML para agregar es este:

    <div class="paralaje">
    <div class="contenido-paralaje">
    Aquí está tu contenido...
    </div>
    </div>

    y tendrás tu efecto parallax sin plugins ni temas, solo con HTML, un poco de CSS y tu editor de WordPress.

    ¿Te ha gustado este artículo? No puedes imaginar lo que te estás perdiendo y youtube!

    Artículos Relacionados

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Más Información