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

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

¿Qué es un efecto de paralaje?

El efecto de paralaje es una técnica moderna de diseño web en la que el elemento de fondo fluye más lento que el contenido de primer plano. Este efecto agrega profundidad a las imágenes de fondo y las hace sentir interactivas.

El efecto de paralaje se puede utilizar en páginas de destino, contenido de formato largo, páginas de ventas o la página de inicio de un sitio web comercial. Es una excelente manera de resaltar varias secciones en una página larga.

Muchos temas premium de WordPress vienen con un efecto de paralaje integrado en su página de inicio. También puede utilizar el efecto de paralaje en la mayoría de los plugins de creación de páginas de WordPress.

Sin embargo, no todos los temas tienen un efecto de paralaje incorporado, y es posible que no desee utilizar un generador de páginas para crear diseños de página personalizados solo para lograr un efecto de paralaje.

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

Método 1: agregue el efecto de paralaje a cualquier tema de WordPress usando el plugin

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 usuarios.

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

Después de la activación, debe editar la página o publicación donde desea agregar el efecto de paralaje. Notará el nuevo botón «Fondos de pantalla avanzados de WordPress» en el editor visual.

Botón de fondo avanzado de WordPress

Al hacer clic en él, aparecerá una ventana emergente en la que puede cambiar varias configuraciones para el fondo de pantalla que desea agregar.

Primero, debe seleccionar una imagen como tipo de fondo y luego seleccionar 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 una imagen que desee utilizar. Asegúrate de estar usando una imagen grande, de lo contrario, aparecerá pixelada.

Después de eso, debe habilitar Parallax eligiendo un tipo de paralaje. Hay numerosos estilos disponibles para que experimente. El efecto de paralaje más utilizado es el desplazamiento.

Haga clic en el botón Insertar para continuar.

El plugin ahora agregará un código corto dentro de su editor de publicaciones de WordPress. Se verá así:

[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 aquí

[/nk_awb]

Reemplaza «Tu contenido aquí» con tu contenido y guarda la página.

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

Vista previa del efecto de paralaje

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

Este método requiere un buen conocimiento de HTML / CSS y cómo funcionan los temas de WordPress.

Primero, deberá 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.

Copia la URL de la imagen

A continuación, debe agregar el siguiente código HTML en 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 hijo.

<div class="parallax">
<div class="parallax-content">

Your content goes here...

</div>
</div>

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


.parallax {  
background-image: url("https://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.

Efecto de paralaje agregado con CSS

Nota: es posible que deba modificar CSS para que funcione con el diseño del sitio.

Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente el efecto de paralaje a cualquier tema de WordPress. Es posible que también desee ver nuestra mega lista de los consejos, trucos y trucos de WordPress más solicitados.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *