Recientemente, uno de nuestros lectores nos preguntó cómo agregar 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 se desplaza 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?
Contents
El efecto de paralaje es una técnica moderna de diseño web en la que el elemento de fondo se desplaza más lentamente que el contenido de primer plano. Este efecto agrega profundidad a las imágenes de fondo y las hace interactivas. El efecto de paralaje se puede utilizar en páginas de destino, contenido extenso, páginas de ventas o la página de inicio de un sitio web comercial. Es una excelente manera de resaltar diferentes secciones en una página larga. Muchos temas premium de WordPress tienen 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 complementos 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 personalizados solo para el efecto de paralaje. Veamos cómo agregar fácilmente un efecto de fondo de paralaje a cualquier tema de WordPress.
Método 1: agregue un efecto de paralaje a cualquier tema de WordPress usando un complemento
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 complemento Advanced WordPress Backgrounds. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Tras la activación, debe editar la página o publicación a la que desea agregar el efecto de paralaje. Notará el nuevo botón «Fondos avanzados de WordPress» en el editor visual.
Al hacer clic en él, aparecerá una ventana emergente en la que puede cambiar varias configuraciones del fondo que desea agregar. Primero, debe seleccionar una imagen como tipo de fondo y luego marcar la opción de « estirar ».
Luego, 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, debes activar Parallax eligiendo un tipo de paralaje. Hay varios estilos disponibles con los que puede experimentar. El efecto de paralaje más utilizado es el scroll. Haga clic en el botón Insertar para continuar. El complemento ahora agregará un código corto en su editor de publicaciones de WordPress. Se verá algo como 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 aquí
[/nk_awb]
Reemplace «Your Content Here» con su propio contenido, luego guarde su página. Ahora puede visitar su sitio web para verlo en acción.
Método 2: agregue efecto de paralaje a cualquier tema de WordPress con CSS
Este método requiere que tenga un buen conocimiento de HTML / CSS y también de 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.
Luego, 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 en su tema de WordPress o tema hijo.
Tu contenido va aquí …
Luego, debe agregar el siguiente CSS personalizado a su tema de WordPress. .parallax {imagen de fondo: url («http://example.com/wp-content/uploads/2017/08/my-background-image.jpg»); altura: 100%; archivo adjunto de fondo: fijo; posición de fondo: centro; repetición de fondo: sin repetición; tamaño de fondo: cubierta; margen izquierdo: -410px; margen derecho: -410px; } .parallax-content {ancho: 50%; margen: 0 automático; color: #FFF; relleno superior: 50px; } Recuerde 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.
Nota: es posible que deba ajustar el CSS para que funcione con el diseño de su sitio. Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente un efecto de paralaje a cualquier tema de WordPress. También puede consultar nuestra mega lista de los consejos, trucos y trucos de WordPress más buscados. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
Originally posted 2021-02-24 10:00:31.
