Cómo agregar un efecto parallax a cualquier tema de WordPress

El efecto parallax es una tendencia de diseño web donde una imagen de fondo se desplaza más lento que el contenido del primer plano. Esto crea la ilusión de profundidad y movimiento, generando una experiencia de usuario más interactiva en tu sitio web.

En nuestra opinión, usar un efecto parallax es una excelente manera de captar la atención de los visitantes. Atrae a las personas y las anima a quedarse más tiempo, lo que puede aumentar la participación. Hemos descubierto que no solo le da a tu sitio una sensación elegante y profesional, sino que también puede generar mayores conversiones.

En este artículo, te mostraremos cómo agregar fácilmente un efecto parallax a cualquier tema de WordPress. Exploraremos varios métodos, incluido el uso de plugins y código personalizado, para brindarte opciones flexibles.

¿Qué es un efecto parallax?

El efecto parallax es una técnica moderna de diseño web donde el fondo se desplaza más lento que el contenido del primer plano. Este efecto agrega profundidad a las imágenes de fondo y las hace sentir más interactivas.

El efecto parallax se puede usar en páginas de destino, contenido extenso, páginas de ventas o la página de inicio de un sitio web de negocios.

Puede resaltar diferentes secciones en una página larga, mejorar el atractivo visual general del sitio, aumentar la participación del usuario y ser una herramienta increíble para transmitir un mensaje o contar una historia en tu blog.

Muchos temas premium de WordPress vienen con un efecto parallax incorporado en su página de inicio. También puedes usar este efecto en la mayoría de los plugins de constructores de páginas de WordPress.

Sin embargo, no todos los temas tienen esta función, y es posible que no quieras usar un constructor de páginas para crear diseños de página personalizados solo para un efecto parallax.

Dicho esto, veamos cómo agregar fácilmente un efecto de fondo parallax a cualquier tema de WordPress. Cubriremos un par de métodos diferentes, y puedes usar los enlaces rápidos a continuación para saltar al que deseas usar:

• Método 1: Agregar efecto parallax al tema de WordPress usando un plugin
• Método 2: Agregar efecto parallax al tema de WordPress con CSS
• Extra: Agregar un video de YouTube como fondo a pantalla completa en WordPress

Método 1: Agregar efecto parallax al tema de WordPress usando un plugin

Este método no requiere agregar ningún código a tu tema de WordPress. Es fácil y se recomienda para la mayoría de los usuarios.

Primero, necesitas instalar y activar el plugin Advanced WordPress Backgrounds. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, visita la página Ajustes » AWB desde el panel de WordPress. Aquí, puedes marcar las casillas de los navegadores o dispositivos donde no deseas mostrar el efecto parallax.

Por ejemplo, si no quieres mostrar el efecto parallax a los usuarios en dispositivos móviles, puedes marcar esa casilla.

Después de eso, haz clic en el botón ‘Save Changes’ para guardar tu configuración.

A continuación, abre una página o publicación de tu agrado en el editor de bloques de Gutenberg.

Una vez allí, haz clic en el botón ‘+’ para agregar un bloque en la esquina superior izquierda de la pantalla para abrir el menú de bloques.

Desde aquí, necesitas encontrar y agregar el bloque Fondo (AWB) a la publicación.

Ahora abre el panel de bloques en el lado derecho de la pantalla y cambia a la pestaña ‘Imagen’ si deseas agregar una imagen como fondo paralaje.

Después de eso, haz clic en el botón ‘Seleccionar imagen’ para abrir la biblioteca de medios. También puedes hacer clic en el botón ‘Usar imagen destacada’ para agregar automáticamente la imagen destacada como fondo.

Incluso puedes agregar un color de fondo o un video para el efecto cambiando a esas pestañas.

Al agregar una imagen, puedes ajustar su punto focal desde el panel de bloques y configurar el tamaño del fondo. Sin embargo, recomendamos dejar el tamaño del fondo como ‘Cubrir’.

A continuación, puedes usar el control deslizante para cambiar la opacidad de la imagen.

Una vez que hagas eso, desplázate hacia abajo hasta la pestaña ‘Parallax’ y expándela.

Desde aquí, puedes elegir tu tipo de parallax en el menú desplegable. Una vez que elijas una opción, los cambios se aplicarán automáticamente en el editor de bloques donde puedes probarlo.

En nuestro ejemplo, estamos usando ‘Opacidad + Desplazamiento’.

Después de haber agregado el efecto, haz clic en el botón ‘+’ en el bloque AWB para abrir el menú de bloques.

Ahora puedes agregar un párrafo, imagen, video, cita o cualquier otro bloque que desees. Este bloque se mostrará entonces con el efecto parallax.

Finalmente, haz clic en el botón 'Actualizar' o 'Publicar' en la parte superior para guardar tu configuración.

Ahora, puedes visitar tu sitio de WordPress para ver el efecto parallax en acción.

Método 2: Agregar efecto parallax al tema de WordPress con CSS

Si deseas usar una sola imagen como fondo parallax en todo tu sitio web, entonces este método es para ti.

Primero, necesitarás subir la imagen que deseas usar a tu biblioteca de medios de WordPress visitando la página Medios » Agregar Nuevo Archivo Multimedia.

Al hacer eso, debes copiar la URL de la imagen haciendo clic en ella y abriendo su ventana de ‘Detalles del archivo adjunto’.

Una vez que hagas eso, debes agregar código CSS personalizado a los archivos de tu tema. Sin embargo, el más mínimo error al escribir el código puede dañar tu sitio y hacerlo inaccesible.

Es por eso que recomendamos usar WPCode. Es el mejor plugin de fragmentos de código de WordPress del mercado que hace que sea súper seguro y fácil agregar código personalizado, incluido CSS.

Primero, necesitas instalar y activar el plugin WPCode. Para obtener instrucciones detalladas, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Tras la activación, visita la página Code Snippets » + Add Snippet desde el panel de WordPress y haz clic en el botón ‘Use Snippet’ bajo la opción ‘Add Your Custom Code (New Snippet)’.

Esto te llevará a la página ‘Crear fragmento personalizado’, donde puedes comenzar agregando un título para tu código personalizado.

Después de eso, elige la opción ‘Fragmento CSS’ del menú desplegable Tipo de código a la derecha.

A continuación, agrega el siguiente código CSS personalizado en el cuadro ‘Vista previa del código’:

.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; 
} 

Una vez que lo hagas, asegúrate de reemplazar la URL de ejemplo en la línea background-image: url del código con la URL de tu imagen.

Esta imagen se utilizará como fondo del efecto parallax en todo tu sitio web.

A continuación, desplázate hacia abajo hasta la sección 'Inserción' y elige el modo 'Inserción automática'.

El fragmento se ejecutará automáticamente en tu sitio web una vez que le agregues código HTML.

Finalmente, desplázate hacia arriba en la página y cambia el interruptor ‘Inactivo’ a ‘Activo’.

Luego, haz clic en el botón ‘Guardar fragmento’ para almacenar tu configuración.

Ahora es el momento de que abras la publicación o página de WordPress donde deseas agregar el efecto parallax.

Una vez que estés allí, haz clic en el ícono de tres puntos en la esquina superior derecha de la pantalla para abrir un menú. Luego, selecciona el modo ‘Editor de código’.

Ahora, necesitas agregar el siguiente código HTML en el editor de código con el contenido para el efecto parallax en medio:

<div class="parallax">
<div class="parallax-content">
 
Your content goes here...
 
</div>
</div>

Luego, puedes volver fácilmente al editor visual de bloques haciendo clic en el enlace 'Salir del editor de código' en la parte superior.

Después de eso, agrega el resto del contenido para la página o publicación en el editor visual de bloques.

Finalmente, haz clic en el botón 'Actualizar' o 'Publicar' para guardar tu configuración.

Ahora, simplemente visita tu blog de WordPress para ver el efecto parallax en acción.

Extra: Agregar un video de YouTube como fondo a pantalla completa en WordPress

Además del efecto parallax, también puedes agregar un video de YouTube como fondo de pantalla completa en WordPress.

Esto puede proporcionar una experiencia inmersiva para tus usuarios y mejorar el atractivo visual de tu sitio de WordPress. Un video de YouTube a pantalla completa como fondo puede evocar emociones y crear una conexión más profunda con tu audiencia.

Por ejemplo, si estás organizando un sorteo en tu sitio web, entonces puedes usar un video de YouTube de fondo para hacer la página más emocionante y animar a los usuarios a unirse al concurso.

De manera similar, si tienes una organización benéfica sin fines de lucro, entonces puedes usar videos de fondo para mostrar el impacto, la misión de tu organización y las historias de las personas o comunidades a las que sirves. Incluso podrías mostrar historias de éxito en el video de fondo a pantalla completa.

Para más detalles, puedes ver nuestro tutorial sobre cómo agregar un video de YouTube como fondo de pantalla completa en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente un efecto parallax a cualquier tema de WordPress. También podrías querer ver nuestra guía para principiantes sobre cómo agregar scroll infinito a tu sitio de WordPress y nuestra lista de las mejores alternativas a Canva para gráficos de sitios web.

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