Cómo crear un efecto de desplazamiento de paralaje en cualquier tema de WordPress










  • ¿Quieres crear un efecto de paralaje en tu sitio web de WordPress? El efecto de desplazamiento de paralaje es un efecto de diseño que hace que la imagen de fondo se desplace hacia abajo más lentamente que el contenido de primer plano. Esto provoca una sensación de profundidad que se agrega a la página en la que se produce el efecto.

    Esto puede agregar una dinámica genial a sus páginas de WordPress sin tener que comprar un tema premium.

    Hay tres pautas clave a seguir al crear un sitio web : tener un excelente contenido, asegurarse de que el sitio web funcione correctamente y hacer que el sitio web se vea genial. Agregar efectos de diseño simples a sus páginas puede hacer que un tema gratuito común de WordPress se vea mejor que algunos temas premium.

    Hoy demostraré cómo agregar el efecto de paralaje a WordPress usando cualquier tema.

    ¿Por qué usar el efecto Parallax para mejorar su sitio web?

    Mejorar la apariencia de su sitio web es una tarea continua y siempre debe mejorar y pensar en formas de hacer que su sitio web se vea mejor. Muchos visitantes juzgarán un sitio web basándose únicamente en la apariencia de la página de inicio y en ese primer vistazo. Elegirán quedarse o irse, lo que hace que la primera impresión sea especialmente importante.

    La apariencia de su sitio web comienza con el tema que elija usar. Hay muchas formas de modificar la apariencia de los temas gratuitos , pero a veces puede optar por pagar por un tema premium que tenga la característica deseada incorporada.

    Por supuesto, es posible que no desee pagar por temas premium y le complacerá saber que puede crear un sitio web increíble sin gastar dinero.

    Una de las mejores maneras de crear un tema dinámico es agregar el efecto de desplazamiento de paralaje a sus páginas. Dependiendo de la naturaleza de las imágenes de fondo y de primer plano, la profundidad añadida realmente puede hacer que se vean muy bien juntas.

    Hoy demostraré cómo agregar efectos de paralaje a WordPress usando cualquier tema. Hay varias formas de agregar el efecto de paralaje a su sitio web de WordPress. Le mostraré cómo hacerlo con un complemento y cómo hacerlo usando HTML.

    Echemos un vistazo al complemento en cuestión y veamos todo lo que tiene para ofrecer.

    Método 1: usar un complemento de WordPress para el efecto de desplazamiento Parallax

    Fondos avanzados de WordPressFondos avanzados de WordPress

    Fondos avanzados de WordPress  le permite usar fondos de paralaje con imágenes, videos, YouTube y Vimeo. El complemento tiene soporte para Gutenberg y WPBakery Page Builder. Es un complemento simple y fácil de usar. Proporciona muchas funciones, pero sigue siendo liviano y no ralentizará su sitio web.

    Algunas de las características principales de los fondos avanzados de WordPress incluyen:

    • fondo de color
    • Fondo de imagen
    • Imágenes de patrón
    • Vídeo autohospedado
    • Vídeos de YouTube/Vimeo
    • Opción de velocidad personalizada
    • Habilitar o deshabilitar para dispositivos móviles
    • Efecto de desplazamiento
    • Efecto de opacidad
    • Efecto de escala
    • Color de superposición
    • Creador visual de códigos abreviados

    Y esto es solo la punta del iceberg. El complemento le brinda todas las herramientas que necesita para crear WordPress de paralaje. Vamos a instalarlo y configurarlo juntos.

    Paso 1: Instalar y activar el complemento

    Para crear efectos de paralaje en WordPress, primero debe instalar y activar el complemento. Haga clic en Complementos y seleccione la opción Agregar nuevo en el panel de administración de la izquierda.

    Agregar nuevoAgregar nuevo

    Busque AWB en el cuadro de búsqueda disponible. Esto abrirá complementos adicionales que pueden resultarle útiles.

    Busque AWB en el cuadro de búsqueda disponible.Busque AWB en el cuadro de búsqueda disponible.

    Desplácese hacia abajo hasta que encuentre el complemento Fondos avanzados de WordPress y haga clic en el botón "Instalar ahora" y active el complemento para su uso.

    haga clic en el botón "Instalar ahora"haga clic en el botón "Instalar ahora"

    Paso 2: Ve a cualquier publicación o página

    A diferencia de otros complementos, el complemento Fondos avanzados de WordPress no tiene la página de configuración principal. En cambio, puede acceder a él en cualquier página o publicación en su sitio web.

    Vaya a la página o publicación a la que le gustaría agregar el efecto de paralaje. Mire en la barra de herramientas, ahora debería ver el botón "Fondo avanzado de WordPress". Haz click en eso.

    Haga clic en el botón "Fondo avanzado de WordPress".Haga clic en el botón "Fondo avanzado de WordPress".

    Paso 3: Configure el cuadro emergente de Parallax

    Aparecerá una ventana emergente. En esta ventana, puede crear muchos efectos de fondo y combinaciones diferentes además del efecto de paralaje, pero nos centraremos en él. Seleccione la opción "Imagen" para el cuadro desplegable Tipo de fondo. Haga clic en la casilla de verificación Estirar que aparece junto al cuadro desplegable.

    Haga clic en la casilla de verificación EstirarHaga clic en la casilla de verificación Estirar

    Haga clic en el botón "Seleccionar imagen" y elija la imagen que desea utilizar como fondo. Dado que será una imagen de fondo, asegúrese de que sea una imagen grande o el estiramiento la pixelará.

    Haga clic en el botón "Seleccionar imagen"Haga clic en el botón "Seleccionar imagen"

    El siguiente cuadro es el color de superposición y es posible que desee usarlo o no. Desplácese hacia abajo y verá la sección Parallax. De forma predeterminada, está deshabilitado, pero puede cambiarlo a uno de los muchos efectos disponibles.

    El más común es el efecto de desplazamiento hacia abajo, pero siéntete libre de elegir el que más te guste. Siempre puedes experimentar con cada uno hasta que encuentres el que sea perfecto para tu sitio web. A continuación, puede elegir la velocidad de desplazamiento y si es compatible con dispositivos móviles o no.

    Elija el mejor tipo para su sitio web.Elija el mejor tipo para su sitio web.

    Una vez que esté satisfecho con la configuración o esté listo para probar cómo se ven, haga clic en el botón "Insertar".

    Paso 4: agregue el contenido que desee

    Ahora verá aparecer algunas líneas de shortcode en la página. Debería leerse así:

    1
    2
    3
    4
    5
    [nk_awb awb_type="image" awb_image="34" awb_image_size="full" awb_image_background_size="cover" awb_image_background_position="50% 50%" awb_parallax="scroll" awb_parallax_speed="0.5"]
     
    Your Content Here
     
    [/nk_awb]

    ¡Simplemente reemplace "Su contenido aquí" con su contenido real y ya está!

    Felicitaciones, ha agregado con éxito el efecto de paralaje a su sitio web. Tenga en cuenta que hay múltiples efectos que puede hacer con este complemento y puede agregar diferentes a diferentes páginas.

    Recuerde, no hay una opción masiva, por lo que si desea agregar el mismo efecto a varias publicaciones o páginas, deberá copiar el código abreviado y pegarlo en cada página en la que lo desee.

    Agregar efecto de desplazamiento de paralaje usando Gutenberg

    Agregar el mismo efecto que se describió anteriormente usando el editor de bloques de Gutenberg no es un problema. El complemento Fondos avanzados de WordPress viene con su propio bloque. En todo caso, el proceso es más fácil.

    Simplemente vaya a la publicación o página a la que desea agregar el efecto y abra el editor.

    Haga clic en el botón "agregar un bloque". Si no aparece, busque el bloque usando el término "Fondo (AWB)". Cuando aparezca, simplemente agregue el bloque y edítelo como le gustaría usar la configuración a la derecha.

    Bloque Gutenberg AWBBloque Gutenberg AWB

    Método 2: efecto de desplazamiento de paralaje con CSS

    Si no tiene experiencia con HTML, no recomendaría probar esto porque podría insertar el código en la ubicación incorrecta y estropear el sitio web. Debe cargar la imagen que le gustaría usar como imagen de fondo en su biblioteca de medios . Una vez cargada, seleccione la imagen para ver el enlace URL y cópiela para su uso posterior.

    seleccione la imagen para ver el enlace URL y cópielo para su uso posterior.seleccione la imagen para ver el enlace URL y cópielo para su uso posterior.

    Ahora es donde entrarán en juego tus conocimientos de HTML. Debe agregar las siguientes líneas HTML en su publicación o página donde desea que esté presente el efecto:

    1
    2
    3
    4
    5
    <div class="parallax">
    <div class="parallax-content">
    Insert Content here
    </div>
    </div>

    Por supuesto, debe colocar su contenido en el lugar de Insertar contenido aquí.

    Ahora es el momento de usar CSS para agregar el efecto. Ahora debe agregar el siguiente CSS a los archivos de su tema:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    dieciséis
    17
    .parallax {
    background-image: url("IMAGE URL HERE");
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left:-410px;
    margin-right:-410px;
    }
     
    .parallax-content {
    width:50%;
    margin:0 auto;
    color:#FFF;
    padding-top:50px;
    }

    Reemplace la "URL DE LA IMAGEN AQUÍ" con la URL de la imagen que seleccionó al principio. También puede editar las otras configuraciones a su gusto. Asegúrate de guardar tus cambios. Su publicación o página ahora debería tener el efecto de paralaje funcionando.

    El diseño del sitio web nunca termina

    Casi todos los sitios web importantes reciben cambios de diseño significativos cada año y es importante que lo hagan. En algunos casos, no quieren que la apariencia cambie drásticamente y mover un cuadro de búsqueda determinado unos pocos píxeles hacia la izquierda puede no parecer gran cosa, ¡pero lo es!

    Es importante asegurarse de que su sitio web se destaque entre todos los de la competencia. Dar una buena primera impresión con una página de inicio bien diseñada realmente ayudará a los visitantes a decidirse a echar un vistazo. Esto se puede hacer usando las técnicas anteriores, o usando un tema de WordPress de paralaje.

    Pensamientos finales

    Agregar excelentes efectos a su sitio de WordPress puede atraer a más usuarios y mantener a las personas en su sitio por más tiempo. Ayuda con la estimulación visual y muestra a las personas que tiene un sitio web profesional y bien construido.

    Espero que este artículo haya podido mostrarte lo fácil que es agregar un efecto de paralaje a cualquier tema de WordPress. Puedes usar un complemento, que es la forma más fácil, o puedes usar tu propio código, que tal vez prefieras.

    ¿Qué tipo de efecto ha agregado a su sitio web? ¿Prefieres usar el complemento o el método CSS?










  • Subir