Recientemente, uno de nuestros lectores nos preguntó cómo agregar efecto de paralaje a cualquier tema de WordPress.

El efecto Parallax es una tendencia popular en estos días en la web, donde una imagen de fondo se desplaza más lentamente que el contenido en primer plano.

En este tutorial, le mostraremos cómo agregar fácilmente un efecto de paralaje a cualquier tema de WordPress.

Pero, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog 

Pero volvamos a por qué estamos aquí.

Cómo agregar efecto de paralaje a cualquier tema de wordpress e1567702269161

¿Qué es un efecto de paralaje?

El efecto Parallax es una técnica de diseño web moderna 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.

Descubre nuestro Temas de 25 WordPress con paralaje para crear un sitio web

El efecto Parallax se puede utilizar en páginas de destino, 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 usar el efecto de paralaje con la mayoría de los complementos WordPress Creación visual de páginas.

Sin embargo, todos Temas de WordPress no ofrece un efecto de paralaje incorporado y es posible que no desee utilizar un generador de páginas visuales solo para un efecto de paralaje.

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

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

Este método no requiere agregar 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 Fondos avanzados de WordPress. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Después de activar el complemento, debe editar la página donde desea agregar el efecto de paralaje. Notarás el nuevo botón "Fondos avanzados de WordPress»En la barra de herramientas del editor visual.

Agregar fondo de wordpress avanzado

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

En primer lugar, debe seleccionar una imagen como fondo y luego marcar la opción " Stretch".

Fondo de ventana de wordpress avanzado

Luego tienes que hacer clic en el botón Seleccionar imagen Para descargar o seleccionar una imagen que desea usar. Asegúrese de utilizar una imagen grande, de lo contrario, aparecerá pixelada.

Después de eso, debes activar el efecto Paralaje Al elegir un tipo de efecto de paralaje. Hay varios estilos disponibles con los que puede experimentar. El efecto de paralaje más común utilizado es el desplazamiento.

Haga clic en el botón recuadro para continuar.

El complemento agregará un Código corto en su editor. Se verá así:

[Nk_awb awb_type = "imagen" awb_stretch = "true" awb_image = awb_image_size "22" = "completo" awb_parallax = "scroll" awb_parallax_speed = "0.5" awb_mouse_parallax = "true" awb_mouse_parallax_size = "30" awb_mouse_parallax_speed = "10000"] Su contenido aquí [/ nk_awb]

Reemplazar " este contenido Por su propio contenido, luego guarde su página.

Puede visitar su sitio web para verlo en acción.

Efecto de paralaje en wordpressMétodo 2: agregue el efecto "Parallax" a cualquier tema de WordPress con CSS

Este método requiere que tenga algún conocimiento de "HTML / CSS", así como de cómo funcionan los temas y complementos de WordPress.

Primero, debe cargar en su biblioteca de medios de WordPress, la imagen que desea usar para el efecto de paralaje visitando el " medios> Agregar nuevo ".

Ve más allá descubriendo ¿Cómo organizar los medios en su blog de WordPress

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

Copiar la URL de la imagen en wordpress

Luego, debe agregar el siguiente código HTML en la página donde desea mostrar el efecto de paralaje. También puede agregar este código HTML a su Tema de WordPress o el tema de su hijo.

div class = "paralaje"> Tu contenido aquí ...

Luego, debe agregar el siguiente código 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%; background-attachment: fijo; background-position: center; background-repeat: no-repeat; fondo-size: cubierta; margin-left: -410px; margin-right: -410px; } .parallax-contenido {width: 50%; margen: 0 automático; Color: #FFF; padding-top: 50px; }

Recuerde reemplazar la URL de la imagen de fondo con su propia imagen.

Ahora puede guardar sus cambios y visitar su sitio web.

Ejemplo de efecto de paralaje de Wordpress

Listo ! Ahora puede agregar el efecto de paralaje a su sitio web de WordPress.

Descubra también algunos temas y complementos premium de WordPress  

Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.

Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. Donación de WooCommerce

Acepte a través de esta extensión donaciones en su sitio web WooCommerce con cantidades especificadas por los clientes. Esto les permitirá dar tanto como quieran. Cada donación puede presentarse como cualquier producto habitual de WooCommerce


Complemento de donación de Woocommerce

Si el cliente omite la página del carrito o va directamente a la caja sin hacer una donación, aparecerá un enlace encima de la página para que pueda donar.

Cada paso del uso de WooCommerce Donation se explica en una documentación con capturas de pantalla. Simplemente active el complemento y encontrará el campo "Agregar donación" en el carrito.

Descargar | Demo alojamiento web

2. LinkedIn Más

LinkedIn Plus es un Plugin de WordPress que le permite presentar su perfil de LinkedIn en su blog. También funciona para blogs de varios autores. Agrega botones Seguir y Compartir a sus publicaciones, páginas o widgets de WordPress.LinkedIn más plugin de wordpress de LinkedIn

Es una excelente manera de agregar todas las funciones de LinkedIn a su blog y validar su marca con los consumidores. Te brinda la posibilidad de personalizar su apariencia, configurar ajustes y activar otras opciones avanzadas para promocionar tu perfil entre posibles reclutadores o empleadores. 

Descargar | Demo | alojamiento web

3. YouTuber

YouTubeR es un Plugin de WordPress plataforma única, que le permite subir videos a YouTube desde su sitio web e incrustar fácilmente videos, listas de reproducción y canales de YouTube en su sitio web.

Youtuber youtube plugin de wordpress

Con este complemento, tiene la oportunidad de crear galerías de video excepcionales en su sitio web.

Sus otras características son: la posibilidad de cargue fácilmente videos a YouTube desde su sitio web de WordPress, integración videos fáciles, listas de reproducción y canales de YouTube a su sitio web, soporte para Visual Composer, el desplazamiento infinito en las listas de reproducción, almacenamiento en caché excelente, diseño receptivo, documentación detallada y más.

Descargar | Demo | alojamiento web

Recursos recomendados

Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.

Conclusión

¡Eso es todo! Esperamos que te haya sido de gran ayuda. No dude en comparte con tus amigos en tus redes sociales favoritas

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Y si tiene alguna sugerencia o comentario, déjelos en nuestra sección comentarios.

...