Recientemente, uno de nuestros lectores nos preguntó cómo agregar un efecto de paralaje a cualquier tema de WordPress. El efecto Parallax es una tendencia de diseño web en la que las imágenes de fondo se desplazan más lentamente que el contenido de primer plano. En este artículo, le mostraremos cómo agregar fácilmente un efecto de paralaje a cualquier tema de WordPress.

Agregue efecto de paralaje a cualquier tema de WordPress

¿Qué es el efecto de paralaje?

El efecto Parallax es una técnica moderna de diseño web en la que los elementos de fondo se desplazan más lentamente que el contenido de primer plano. Este efecto agrega profundidad a las imágenes de fondo y las hace parecer interactivas.

Los efectos de paralaje se pueden usar en páginas de destino, contenido de formato largo, páginas de ventas o la página de inicio de un sitio web comercial. Esta es una excelente manera de resaltar diferentes secciones en páginas largas.

Muchos temas premium de WordPress vienen con efectos de paralaje incorporados en su página de inicio. También puede usar efectos de paralaje en la mayoría de los complementos de creación de páginas de WordPress.

Sin embargo, no todos los temas tienen efectos de paralaje incorporados, y es posible que no desee utilizar creadores de páginas para crear diseños de página personalizados solo para obtener el efecto de paralaje.

Veamos cómo agregar fácilmente un efecto de fondo de paralaje a cualquier tema de WordPress.

Método 1: use un complemento para agregar un efecto de paralaje a cualquier tema de WordPress

Este método no requiere que agregue ningún código a su tema de WordPress. Es más fácil y recomendado para la mayoría de los usuarios.

Lo primero que debe hacer es instalar y activar el complemento Fondos avanzados de WordPress. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Una vez activado, debe editar la página o publicación donde desea agregar el efecto de paralaje. Notarás el nuevo botón Fondos avanzados de WordPress en el editor visual.

Botón de fondo Premium de WordPress

Al hacer clic en él, aparecerá una ventana emergente donde puede cambiar diferentes configuraciones para el fondo que desea agregar.

Primero, debe elegir una imagen como tipo de fondo, luego marque la opción “Estirar”.

Configuración de fondo de paralaje

A continuación, debe hacer clic en el botón “Seleccionar imagen” para cargar o seleccionar la imagen que desea usar. Asegúrate de usar una imagen grande, de lo contrario se verá pixelada.

Después de eso, debe habilitar el paralaje seleccionando el tipo de paralaje. Puedes probar muchos estilos. El efecto de paralaje más utilizado es el desplazamiento.

Haga clic en el botón Insertar para continuar.

El complemento ahora agregará un código abreviado a su editor de publicaciones de WordPress. Se parece a esto:

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]

Tu contenido está aquí

[/nk_awb]

Reemplace “su contenido” con su propio contenido y guarde su página.

Ahora puede visitar su sitio web para verlo en acción.

Vista previa del efecto de paralaje

Método 2: agregue efecto de paralaje a cualquier tema de WordPress usando CSS

Este método requiere que tenga una comprensión justa de HTML/CSS y cómo funcionan los temas de WordPress.

Primero, debe cargar la imagen que desea usar para el efecto de paralaje en su biblioteca de medios de WordPress visitando Medios » Agregar nuevo Página.

Después de cargar la imagen, debe copiar la URL de la imagen editando la imagen en la biblioteca de medios de WordPress.

Copiar url de la imagen

A continuación, debe agregar el siguiente HTML a la página o publicación donde desea mostrar el efecto de paralaje. También puede agregar este HTML a su tema de WordPress o tema secundario.

<div >
<div >

Your content goes here...

</div>
</div>

A continuación, debe agregar el siguiente CSS personalizado a su tema de WordPress.


.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
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; 
} 

No olvide reemplazar la URL de la imagen de fondo con su propia imagen de fondo.

Ahora puede guardar sus cambios y visitar su sitio web para verlo en acción.

Añadir efecto de paralaje con CSS

Nota: Es posible que deba ajustar el CSS para que se ajuste al diseño de su sitio.

Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente efectos de paralaje a cualquier tema de WordPress. También puede consultar nuestra súper lista de los consejos, trucos y trucos de WordPress más buscados.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.