Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir un fondo animado en WordPress (2 métodos)

¿Quieres crear un fondo animado para tu sitio web en WordPress?

Un fondo animado puede añadir atractivo visual a su sitio web. Hará que su sitio sea más atractivo y memorable, dejando una impresión duradera en sus visitantes.

En esta guía, le mostraremos cómo añadir un fondo de partículas en WordPress usando particle.js, una biblioteca de animación JavaScript.

How to Add an Animated Background in WordPress

¿Por qué añadir un fondo animado en WordPress?

Personalizar el fondo de su sitio web puede parecer poco importante. Sin embargo, puede influir en la primera impresión que los visitantes tengan de su marca y en su experiencia en el sitio.

Un fondo animado puede mejorar el atractivo visual de su sitio web, haciéndolo más interactivo y llamativo para los visitantes. Da la impresión de que su sitio WordPress utiliza un diseño innovador y de alta calidad.

Muchos sitios web también utilizan efectos animados cuando quieren celebrar una ocasión especial.

Por ejemplo, puede ver tiendas de comercio electrónico que añaden copos de nieve animados o árboles de Navidad que caen en sus páginas web para crear un ambiente festivo para la temporada navideña.

An example of a Christmas particle background

Algunos sitios web también utilizan una animación de fondo de precarga en su sitio web.

Con esto, los visitantes pueden tener la sensación de que el sitio se está cargando, haciéndolos más propensos a esperar pacientemente a que aparezcan los elementos de la página web. Puedes leer nuestro artículo sobre cómo añadir una animación de fondo al precargador para obtener más información.

En esta guía, te mostraremos cómo añadir un fondo animado usando particle.js. Si quieres saber de qué se trata, continúa con la siguiente sección.

¿Qué es particle.js?

particle.js es una biblioteca de JavaScript que permite crear efectos visuales sorprendentes con partículas, que son pequeños elementos gráficos animados.

Estas partículas pueden personalizarse por tamaño, color, forma y movimiento. También responden a las interacciones del usuario, como los movimientos del ratón o los clics, para añadir una capa extra de participación a su sitio web.

Ahora que sabes qué es particle.js, veamos cómo puedes usarlo para añadir un fondo animado en WordPress. Hay dos métodos para los principiantes, y se puede navegar a través de esta guía con los enlaces rápidos a continuación:

El primer método es utilizar SeedProd, que es el mejor plugin maquetador de páginas de WordPress del mercado. Ofrece una característica de fondo de partículas incorporado y altamente personalizable.

Con él, puedes elegir una de las animaciones de partículas que ya están disponibles o añadir tú mismo una personalizada. También es posible modificar el número de partículas, los movimientos de animación y los efectos al pasar el cursor para adaptarlos a tus preferencias.

Para obtener más información acerca de SeedProd, puede marcar / comprobar nuestra profunda reseña de SeedProd. Hemos cubierto todo, incluyendo las opciones de personalización, las opciones de plantillas y bloques, y las integraciones de terceros.

The SeedProd page builder plugin for WordPress

En esta guía, vamos a utilizar la versión premium de SeedProd, ya que la característica de fondo de partículas está disponible allí.

Para utilizar SeedProd, primero tendrás que instalar y activar el plugin. Puede encontrar más detalles acerca de esto en nuestra guía para principiantes sobre la instalación de un plugin de WordPress.

Después de eso, simplemente copia y pega tu clave de licencia en el plugin. Sólo tienes que ir a tu escritorio de WordPress, navegar a SeedProd ” Ajustes, e insertar la clave de licencia en el campo correspondiente. A continuación, haga clic en “Verificar clave”.

Adding a SeedProd license key to WordPress

Si desea personalizar su tema primero antes de añadir un fondo de partículas en WordPress, puede seguir nuestra guía sobre cómo crear fácilmente un tema personalizado con SeedProd.

Ahora, necesitas abrir el editor de arrastrar y soltar para la página en la que quieres insertar el fondo de partículas. Si ha creado un tema con SeedProd, entonces ya debería tener algunas páginas añadidas en WordPress para usted.

A continuación, vaya a Páginas ” Todas las páginas y pase el cursor por encima de una página, como la página de inicio, la página acerca de o cualquier otra. A continuación, seleccione el botón “Editar con SeedProd”.

Clicking Edit with SeedProd on a WordPress page

Si esta opción no aparece en su terminal, no se preocupe.

Simplemente haga clic en el botón “Editar” y, en el editor de bloques, haga clic en el botón “Editar con SeedProd”.

Clicking Edit with SeedProd inside the WordPress block editor

Ahora debería estar dentro del maquetador de páginas de SeedProd.

Sólo tienes que pasar el cursor sobre la sección de la página en la que quieres añadir el fondo de partículas en WordPress y seleccionarla. Sabrás que has seleccionado una sección si aparece un borde morado y una barra de herramientas en la parte superior de la misma.

Una vez que haya hecho clic en una sección, debería aparecer la barra lateral Sección de la izquierda.

Todo lo que tienes que hacer ahora es cambiar a la pestaña “Avanzado” y activar el ajuste “Activar fondo de partículas”.

Enabling the particle background settings in SeedProd

Hay varios ajustes de fondo de partículas que puede establecer.

Uno es Estilo, donde puede elegir cualquiera de los efectos de animación disponibles, que son Polígono, Espacio, Nieve, Copos de nieve, Navidad, Halloween y Personalizado.

Hablaremos más acerca de añadir una animación de fondo de partículas personalizada más adelante en el artículo.

Configuring the basic particle background settings in SeedProd

También está la Opacidad, que controla el aspecto opaco de la animación, y la Dirección del flujo, que establece la dirección hacia la que deben encabezarse las partículas.

Para determinados estilos de partículas, también puede personalizar su color.

Sin embargo, para Navidad y Halloween, no hay ajustes de color, ya que las partículas están en forma de imágenes.

What the Christmas particle background in SeedProd looks like

Debajo de Color está ‘Ajustes Avanzados’. Activándola podrás personalizar el Número de Partículas, el Tamaño de las Partículas, la Velocidad de Movimiento y Activar el Efecto Hover.

Con esta última característica, las partículas se moverán según la dirección del ratón. Tenga en cuenta que esto no funcionará cuando vea el sitio web en el área del maquetador de páginas o si el contenido dentro de la sección ocupa todo el espacio de esa sección.

The particle background's advanced settings in SeedProd

Y eso es todo lo que tienes que hacer.

Una vez que haya terminado de personalizar el fondo de partículas de WordPress, puede hacer clic en el botón ‘Guardar’ situado en la esquina superior derecha para publicar los cambios. También puedes elegir el botón ‘Vista previa’ para ver el aspecto del fondo de partículas.

Saving or previewing changes in SeedProd

Cómo crear un fondo de partículas personalizado para su sitio web

Si los efectos animados disponibles no se adaptan a tus necesidades, también puedes crear uno personalizado. Lo que debes hacer es seleccionar el estilo “Personalizado” en los ajustes de Fondo de partículas.

A continuación, haga clic en el enlace de la línea “Visite este enlace y seleccione los atributos obligatorios / requeridos / necesarios para las partículas”.

Selecting the Custom style and clicking the link provided in SeedProd to make a custom particle background

En este sitio web, puede personalizar el diseño de las partículas que desee, su interactividad y el color de fondo.

Dentro del ajuste “partículas”, puede ajustar el número de partículas, el color, la forma, el tamaño, la opacidad, las líneas que enlazan las partículas y el movimiento.

Editing the Particles settings in Vincent Garreau's particle.js website

Por debajo está la “interactividad”.

Aquí es donde puedes ajustar cómo se comportan las partículas cuando pasas el cursor por encima de ellas y haces clic en ellas.

The particle interactivity settings in Vincent Garreau's website

Por último, tienes ‘fondo de página (css)’. Aquí puedes cambiar el color de fondo de la animación de partículas y modificar su tamaño, posición y repetición.

Si es necesario, también puede subir una URL de imagen de fondo personalizada.

The particle page background settings in Vincent Garreau's website

Una vez que haya terminado, puede hacer clic en el botón “Descargar configuración actual (json)” en la parte inferior.

Esto descargará el archivo de código JSON del fondo de partículas, que deberás abrir utilizando una aplicación de editor de texto. Mantén la ventana del editor de texto abierta mientras continúas con los siguientes pasos.

Downloading the JSON file for the particle background

Ahora, volvamos al maquetador de páginas de SeedProd.

Navega de nuevo al menú Fondo de partículas dentro de los ajustes avanzados. A continuación, copie y pegue el código JSON en el cuadro de texto correspondiente.

Ahora debería ver su fondo de partículas en segundo plano.

Inserting the JSON code  in the particle background settings of SeedProd

Haga clic en “Vista previa” para ver el aspecto del fondo de partículas en la parte frontal y en “Guardar” para finalizar los cambios.

He aquí un ejemplo del aspecto que puede tener el fondo de partículas:

Example of an animated particle background made with SeedProd

Método 2: Cómo añadir un fondo animado con un plugin gratuito

El segundo método es una alternativa gratuita al uso de SeedProd. Para ello, necesitará el plugin Particle Background WP, que es un plugin de animación gratuito.

Como antes, asegúrate de instalar y activar el plugin WP Particle Background. Si necesitas un poco de orientación, puedes marcar / comprobar nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activado, vaya a Particle Background desde el escritorio de WordPress. Aquí verás varias secciones.

Uno es Deploy. Incluye un shortcode para el fondo de partícula terminado si desea añadirlo más tarde a sus páginas o entradas.

También puede marcar las casillas “Añadir a la página de inicio” y/o “Añadir a la página del blog” para insertar automáticamente el fondo en esas páginas.

Configuring the Particle Background WP Deploy settings

Desplazándose hacia abajo, verá la sección Contenido. Aquí es donde puede añadir texto sobre el fondo de partículas.

Si sabes HTML, puedes añadir algún código HTML para personalizar el texto. También puede hacer clic en “Añadir medios” para insertar imágenes o archivos de la biblioteca de medios de WordPress.

Inserting some text in the Particle Background WP plugin

A continuación se muestran los ajustes para la animación de fondo de partículas de WordPress. Puede ajustar la Densidad de Partículas, que controla lo cerca y lejos que están las partículas, el Color de Punto de las partículas y el Color de Fondo. También es posible hacer el fondo transparente.

Una desventaja de este plugin de WordPress es que no se puede ajustar la forma de las partículas de la misma manera que lo haría con SeedProd. Por lo tanto, eso es algo a considerar si usted está mirando para utilizar este plugin.

Configuring the Particle Background WP's animated particle background settings

¡Y ya está!

Este es un ejemplo de cómo se ve el fondo animado por partículas usando este plugin de WordPress.

An animated background example using Particle Background WP plugin

Opción alternativa: Añadir un fondo de vídeo de WordPress

Si desea añadir un efecto animado a su sitio web pero no le gustan los métodos que le hemos mostrado, le recomendamos que añada un fondo de vídeo.

Un fondo de vídeo te da más opciones sobre qué tipo de efectos animados puedes tener en tu sitio web. Además, puedes hacer que el vídeo se reproduzca automáticamente en bucle para que parezca animado.

Por supuesto, no recomendamos subir un vídeo entero a tu sitio web. Eso ralentizará WordPress significativamente y frustrará a los visitantes.

En su lugar, puedes incrustar un vídeo de YouTube y utilizarlo como fondo animado a pantalla completa.

Video background example made with Thrive Architect

Para más información, comprueba nuestra guía sobre cómo añadir un fondo de vídeo de YouTube a pantalla completa en WordPress.

¿Los fondos animados ralentizan los sitios web?

Si no se hacen bien, los fondos animados pueden ralentizar su sitio web. Pero hay formas de evitarlo.

En los fondos de partículas, el número de partículas y la velocidad a la que se mueven pueden afectar a la velocidad de carga de la página. Un mayor número de partículas y un movimiento más rápido requieren más capacidad de procesamiento, lo que puede ralentizar la carga.

Para corregir esto, puede probar diferentes ajustes para la densidad de partículas y la velocidad para encontrar lo que funciona mejor para su sitio web. Durante este proceso, puedes ejecutar pruebas de velocidad de WordPress para ver los efectos.

También es buena idea utilizar fondos animados solo en las páginas en las que sean más importantes. No los necesitas en todas partes, o podrían resultar aburridos.

Por último, para mantener su sitio web rápido con un fondo de partículas, asegúrese de seguir las mejores prácticas para la velocidad del sitio web. Puedes obtener más información en nuestra guía definitiva sobre cómo hacer WordPress más rápido.

Esperamos que este artículo te haya ayudado a aprender cómo añadir un fondo animado de partículas en WordPress. También puedes marcar / comprobar nuestra guía práctica sobre cómo obtener comentarios / opiniones sobre el diseño de sitios web en WordPress y nuestra selección de los mejores maquetadores de temas para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

3 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Carlos Rangel

    Nice article. I wonder if is possible to achieve this effect using some code like vanilla JavaScript and maybe some CSS styles. This as become my favorite WordPress blog :)

    • WPBeginner Support

      While possible, it would require coding knowledge and would not be a beginner task which is why we do not currently recommend it.

      Administrador

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.