Cómo agregar un fondo animado en WordPress (2 métodos)

¿Crees que agregar un fondo animado en WordPress es complicado? Piénsalo de nuevo.

Solíamos pensar lo mismo, pero después de experimentar un poco, descubrimos que en realidad no es tan malo.

Sabemos lo importante que es impresionar a tus visitantes desde el momento en que llegan a tu sitio. Un fondo animado es un excelente elemento de diseño de WordPress para crear una primera impresión memorable sin abrumar tu contenido.

Pero si te preocupan los tiempos de carga lentos, la codificación compleja o los plugins costosos, no te preocupes. Hemos descubierto una solución simple usando particle.js, que es una biblioteca ligera de JavaScript que crea impresionantes fondos animados sin comprometer el rendimiento de tu sitio.

En esta guía, te mostraremos exactamente cómo agregar hermosas animaciones de partículas a tu sitio de WordPress, ya sea que prefieras usar un plugin o un poco de código. ¡Hagamos que tu sitio web destaque!

¿Por qué agregar un fondo animado en WordPress?

Personalizar el fondo de tu sitio web puede parecer poco importante al principio. Pero, después de años en el mundo de WordPress y el diseño web, hemos notado que los sitios con fondos animados cuidadosamente diseñados tienden a mantener a los visitantes más tiempo.

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

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

Por ejemplo, puedes ver tiendas de comercio electrónico agregando copos de nieve animados o árboles de Navidad cayendo en sus páginas web para crear una atmósfera festiva para la temporada navideña.

Algunos sitios web también usan una animación de fondo de precarga.

Con esto, los visitantes pueden tener la sensación de que el sitio se está cargando, lo que hace que sea más probable que esperen pacientemente a que aparezcan los elementos de la página web. Puedes leer nuestro artículo sobre cómo agregar una animación de fondo de precarga para más información.

En esta guía, te mostraremos cómo agregar un fondo animado usando particle.js. Si quieres saber qué es, simplemente continúa con la siguiente sección.

¿Qué es particle.js?

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

Estas partículas se pueden personalizar por tamaño, color, forma y movimiento. También responden a las interacciones del usuario, como movimientos del ratón o clics, para agregar una capa adicional de interacción a tu sitio web.

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

• Método 1: Cómo agregar un fondo animado con un constructor de páginas (sin código)
• Method 2: How to Add an Animated Background With Code (Free)

Método 1: Cómo agregar un fondo animado con un constructor de páginas (sin código)

El primer método es usar SeedProd, que es el mejor plugin constructor de páginas de WordPress del mercado. Ofrece una función de fondo de partículas incorporada y altamente personalizable.

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

Para obtener más información sobre SeedProd, puedes consultar nuestra reseña detallada de SeedProd. Hemos cubierto todo, incluyendo las opciones de personalización, las selecciones de plantillas y bloques, y las integraciones de terceros.

En esta guía, utilizaremos la versión premium de SeedProd, ya que la función de fondo de partículas está disponible allí.

Para usar SeedProd, primero deberás instalar y activar el plugin. Puedes encontrar más detalles sobre esto en nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Después de eso, simplemente copia y pega tu clave de licencia en el plugin. Solo ve a tu panel de WordPress, navega a SeedProd » Configuración, y inserta la clave de licencia en el campo correspondiente. Luego, haz clic en ‘Verificar clave’.

Si deseas personalizar tu tema antes de agregar un fondo de partículas en WordPress, puedes seguir nuestra guía sobre cómo crear fácilmente un tema personalizado con SeedProd.

Ahora, necesitas abrir el constructor de arrastrar y soltar para la página en la que deseas insertar el fondo de partículas. Si has creado un tema con SeedProd, ya deberías tener algunas páginas agregadas en WordPress para ti.

A continuación, simplemente ve a Páginas » Todas las páginas y coloca el cursor sobre una página, como la página de inicio, la página acerca de o algo más. Luego, elige el botón ‘Editar con SeedProd’.

Si esta opción no aparece en tu caso, no te preocupes.

Simplemente haz clic en el botón ‘Editar’ en su lugar, y en el editor de bloques, haz clic en el botón ‘Editar con SeedProd’.

Ahora deberías estar dentro del constructor de páginas de SeedProd.

Simplemente coloca el cursor sobre la sección de la página donde deseas agregar el fondo de partículas en WordPress y selecciónala. Sabrás que has seleccionado una sección si aparece un borde morado y una barra de herramientas en la parte superior.

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

Todo lo que tienes que hacer ahora es cambiar a la pestaña ‘Avanzado’ y activar la configuración ‘Habilitar fondo de partículas’.

Hay varias configuraciones de fondo de partículas que puedes configurar.

Una es Estilo, donde puedes 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 sobre cómo agregar una animación de fondo de partículas personalizada más adelante en el artículo.

También está la Opacidad, que controla qué tan opaca se ve la animación, y la Dirección del flujo, que establece la dirección hacia la que deben dirigirse las partículas.

Para ciertos estilos de partículas, también puedes personalizar sus colores.

Sin embargo, para Navidad y Halloween, no hay configuraciones de color, ya que las partículas son imágenes.

Debajo de Color está ‘Configuración avanzada’. Habilitarla te permite personalizar el Número de partículas, el Tamaño de las partículas, la Velocidad de movimiento y Habilitar efecto de desplazamiento.

Con la última función, las partículas se moverán según la dirección de tu mouse. Ten en cuenta que esto no funcionará cuando veas tu sitio web de WordPress en el área del constructor de páginas o si el contenido dentro de la sección ocupa todo el espacio de esa sección.

Y eso es todo lo que necesitas hacer.

Una vez que hayas terminado de personalizar tu fondo de partículas de WordPress, puedes hacer clic en el botón 'Guardar' en la esquina superior derecha para publicar los cambios. También puedes elegir el botón 'Vista previa' para ver cómo se ve el fondo de partículas.

Creación de un fondo de partículas personalizado para tu 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 la configuración del fondo de partículas.

Después de eso, haz clic en el enlace en la línea 'Por favor, visita el enlace aquí y elige los atributos requeridos para la partícula.'

Este enlace te llevará al sitio web de Vincent Garreau, que presenta una biblioteca de Javascript para animaciones de partículas.

En este sitio web, puedes personalizar el diseño de partículas deseado, su interactividad y el color de fondo.

Dentro de la configuración de 'partículas', puedes ajustar el número de partículas, color, forma, tamaño, opacidad, líneas que unen las partículas y movimiento.

Debajo de eso está 'interactividad'.

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

Finalmente, 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 puedes subir la URL de una imagen de fondo personalizada.

Una vez que hayas terminado, puedes 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 necesitas abrir usando una aplicación de editor de texto. Mantén la ventana del editor de texto abierta mientras continúas con los siguientes pasos.

Ahora, volvamos al constructor de páginas SeedProd.

Navega al menú Fondo de Partículas dentro de la configuración Avanzada nuevamente. Luego, copia y pega el código JSON en el cuadro de texto apropiado.

Ahora deberías ver tu fondo de partículas en la sección de vista previa.

Haz clic en 'Vista previa' para ver cómo se ve el fondo de partículas en el front-end y en 'Guardar' para finalizar los cambios.

Aquí tienes un ejemplo de cómo puede verse el fondo de partículas:

Método 2: Cómo agregar un fondo animado con código (Gratis)

Si usar un constructor de páginas para insertar un fondo animado parece demasiado trabajo, también puedes agregarlo usando código. No te preocupes si no eres un experto en codificación, ya que usaremos WPCode para hacer que este proceso sea seguro y sencillo.

Puedes usar la versión gratuita o premium de WPCode para este tutorial. Si bien la versión gratuita funciona perfectamente, la versión premium incluye funciones útiles como la generación de código con IA y un modo de prueba.

Puedes leer nuestra reseña de WPCode si necesitas más información.

Primero, procede a instalar el plugin en tu administrador de WordPress.

Después de la activación, dirígete a Fragmentos de código » + Añadir fragmento en tu panel, luego haz clic en ‘Añadir tu código personalizado (Nuevo fragmento)’ seguido del botón ‘+ Añadir fragmento personalizado’.

Ahora, necesitarás seleccionar el tipo de tu fragmento.

Dado que trabajaremos con una combinación de HTML, JavaScript y CSS, puedes elegir ‘Fragmento HTML’ de las opciones.

Ahora, dale a tu fragmento un nombre fácil de recordar.

Puede ser algo simple como ‘Fondo de Particle.js’.

Ahora, procede a pegar el código a continuación.

Este código fue adaptado del mismo sitio web de Vincent Garreau que se presentó en el primer método, pero te mostraremos cómo personalizarlo aún más solo con código:

<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Particles.js Background</title>

  <!-- Include the particles.js library -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

  <!-- Include your custom styles -->
  <style>
    /* Reset styles */
    body {
      margin: 0;
      font: normal 75% Arial, Helvetica, sans-serif;
    }
    canvas {
      display: block;
      vertical-align: bottom;
    }

    /* Particles.js container */
    #particles-js {
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;

      /* Background color; change this to any valid CSS color value */
      background-color: #b61924; /* <-- Customize background color here */

      /* Optional background image; add the URL inside the quotes */
      background-image: url(""); /* <-- Add background image URL here */

      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
      z-index: -1; /* Ensure the particles are behind other content */
    }

    /* Optional stats styles */
    .count-particles {
      background: #000022;
      position: absolute;
      top: 48px;
      left: 0;
      width: 80px;
      color: #13E8E9;
      font-size: 0.8em;
      text-align: left;
      text-indent: 4px;
      line-height: 14px;
      padding-bottom: 2px;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;
      border-radius: 0 0 3px 3px;
      -webkit-user-select: none;
      margin-top: 5px;
      margin-left: 5px;
    }
    .js-count-particles {
      font-size: 1.1em;
    }
  </style>
</head>
<body>
  <!-- Particles.js container -->
  <div id="particles-js"></div>

  <!-- Optional Stats Display -->
  <div class="count-particles">
    <span class="js-count-particles">--</span> particles
  </div>

  <!-- Initialize particles.js -->
  <script>
    /* Customize the particles.js parameters below */
    particlesJS("particles-js", {
      "particles": {
        "number": {
          "value": 80, /* <-- Number of particles; adjust this value */
          "density": {
            "enable": true,
            "value_area": 800 /* <-- Particle density area */
          }
        },
        "color": {
          "value": "#ffffff" /* <-- Particle color; change to any valid CSS color */
        },
        "shape": {
          "type": "circle", /* <-- Particle shape: "circle", "edge", "triangle", etc. */
          "stroke": {
            "width": 0,
            "color": "#000000" /* <-- Stroke color of particles */
          },
          "polygon": {
            "nb_sides": 5 /* <-- Number of sides for polygon shape */
          },
          "image": {
            "src": "img/github.svg", /* <-- URL of custom image for particles */
            "width": 100,
            "height": 100
          }
        },
        "opacity": {
          "value": 0.5, /* <-- Opacity of particles */
          "random": false, /* <-- Whether opacity is random */
          "anim": {
            "enable": false,
            "speed": 1,
            "opacity_min": 0.1,
            "sync": false
          }
        },
        "size": {
          "value": 3, /* <-- Size of particles; adjust to change particle size */
          "random": true, /* <-- Whether particle size is random */
          "anim": {
            "enable": false,
            "speed": 40,
            "size_min": 0.1,
            "sync": false
          }
        },
        "line_linked": {
          "enable": true, /* <-- Enable lines between particles */
          "distance": 150, /* <-- Maximum distance for linking particles */
          "color": "#ffffff", /* <-- Color of the lines */
          "opacity": 0.4, /* <-- Opacity of the lines */
          "width": 1 /* <-- Width of the lines */
        },
        "move": {
          "enable": true, /* <-- Enable particle movement */
          "speed": 6, /* <-- Speed of particle movement */
          "direction": "none", /* <-- Direction of movement */
          "random": false, /* <-- Randomize movement direction */
          "straight": false, /* <-- Move in straight lines */
          "out_mode": "out", /* <-- Action when particles go out of canvas */
          "bounce": false, /* <-- Enable particles to bounce off edges */
          "attract": {
            "enable": false, /* <-- Attract particles toward mouse */
            "rotateX": 600,
            "rotateY": 1200
          }
        }
      },
      "interactivity": {
        "detect_on": "canvas", /* <-- Interaction events occur on "canvas" or "window" */
        "events": {
          "onhover": {
            "enable": true, /* <-- Enable interaction on hover */
            "mode": "repulse" /* <-- Interaction mode on hover: "grab", "bubble", "repulse" */
          },
          "onclick": {
            "enable": true, /* <-- Enable interaction on click */
            "mode": "push" /* <-- Interaction mode on click: "push", "remove", "bubble", "repulse" */
          },
          "resize": true /* <-- Enable reactivity to window resize */
        },
        "modes": {
          "grab": {
            "distance": 400, /* <-- Distance for grab mode */
            "line_linked": {
              "opacity": 1
            }
          },
          "bubble": {
            "distance": 400, /* <-- Distance for bubble mode */
            "size": 40, /* <-- Size of particles in bubble mode */
            "duration": 2, /* <-- Duration of bubble effect */
            "opacity": 8, /* <-- Opacity of particles in bubble mode */
            "speed": 3 /* <-- Speed of bubble effect */
          },
          "repulse": {
            "distance": 200, /* <-- Distance for repulse mode */
            "duration": 0.4 /* <-- Duration of repulse effect */
          },
          "push": {
            "particles_nb": 4 /* <-- Number of particles added on click */
          },
          "remove": {
            "particles_nb": 2 /* <-- Number of particles removed on click */
          }
        }
      },
      "retina_detect": true /* <-- Enable retina display support */
    });

    /* Optional: Variables for stats.js (if used) */
    var count_particles, stats, update;
  </script>
</body>
</html>

Este código es bastante largo, así que veamos las partes que puedes personalizar.

Para cambiar el color de fondo, modifica la propiedad background-color bajo #particles-js. Reemplaza #b61924 con cualquier valor de color CSS válido, como #FF0000 para rojo o rgb(255,0,0) o incluso nombres de colores como red.

background-color: #b61924; /* <-- Customize background color here */

Para añadir una imagen de fondo, establece la propiedad background-image añadiendo la URL de tu imagen dentro de url("").

Asegúrate de que la ruta o URL de la imagen de fondo sea correcta.

background-image: url("path/to/your/image.jpg"); /* <-- Add background image URL here */

Para cambiar el número de partículas, ajusta el "valor" en "número".

Aumentar el valor agrega más partículas, mientras que disminuirlo reduce la cantidad.

"number": {
  "value": 80, /* <-- Number of particles; adjust this value */
  // ...
}

Para cambiar el tamaño de las partículas, puedes modificar el "valor" en "tamaño".

Un número mayor aumenta el tamaño de la partícula y viceversa.

"size": {
  "value": 3, /* <-- Size of particles; adjust to change particle size */
  "random": true, /* <-- Set to false for uniform size */
  // ...
}

Para cambiar el color de las partículas, reemplaza el "valor" en "color" con cualquier valor de color CSS válido.

"color": {
  "value": "#ffffff" /* <-- Particle color; change to any valid CSS color */
},

Para cambiar la forma de las partículas, puedes modificar el "tipo" en "forma".

Puedes usar formas como "círculo", "borde", "triángulo", "polígono",  o incluso "estrella".

"shape": {
  "type": "circle", /* <-- Particle shape: "circle", "edge", "triangle", etc. */
  // ...
},

Para cambiar las propiedades de las líneas entre partículas, puedes ajustar las propiedades en "línea_enlazada".

Por ejemplo, si cambias "habilitar": verdadero a "habilitar": falso, entonces no verás ninguna línea conectando las partículas.

"line_linked": {
  "enable": true, /* <-- Enable lines between particles */
  // ...
},

También puedes cambiar el color, la opacidad y el ancho de la línea.

"line_linked": {
  "color": "#ffffff", /* <-- Line color */
  "opacity": 0.4, /* <-- Line opacity */
  "width": 1, /* <-- Line width */
  // ...
},

No te preocupes si necesitas hacer cambios más tarde, ya que siempre puedes modificar el código incluso después de la activación.

Después de haber personalizado el código a tu gusto, es hora de configurar dónde y cuándo aparece tu fondo animado.

Desplázate hacia abajo hasta la sección de Inserción de tu fragmento de WPCode. Asegúrate de seleccionar 'Insertar automáticamente' como tu Método de Inserción y elige 'Pie de página de todo el sitio' para la Ubicación.

WPCode también ofrece una potente función llamada lógica condicional, que está disponible tanto en la versión gratuita como en la premium. Esta función te permite controlar exactamente dónde aparece tu fondo animado en tu sitio web.

Para usar esta función, localiza la sección ‘Smart Conditional Logic’ y activa ‘Enable Logic’. Verás opciones para establecer condiciones específicas para mostrar tu fondo.

Por ejemplo, si quieres que el fondo animado aparezca solo en tu página de inicio, selecciona ‘Page URL’ en el menú desplegable de condiciones, elige ‘Is’ e ingresa la URL de tu página de inicio.

Puedes agregar múltiples grupos de condiciones haciendo clic en el botón ‘+ Add new group’.

El último paso es activar tu fragmento. Busca el interruptor ‘Inactive’ en la parte superior de la página y haz clic en él para cambiarlo a ‘Active’. No olvides hacer clic en ‘Save Snippet’ para guardar tus cambios.

¡Eso es todo! Visita tu sitio web en móvil o escritorio para ver tu nuevo fondo animado en acción. Así es como se ve en nuestro sitio de prueba:

¿Los fondos animados ralentizan los sitios web?

Si no se hace correctamente, los fondos animados pueden ralentizar tu sitio web. Pero hay formas de evitarlo.

Para los fondos de partículas, el número de partículas y la velocidad a la que se mueven pueden afectar la rapidez con la que carga tu página. Más partículas y un movimiento más rápido requieren más potencia de procesamiento, lo que puede ralentizar las cosas.

Para solucionar esto, puedes probar diferentes configuraciones de densidad y velocidad de partículas para encontrar lo que mejor funciona para tu sitio web. Durante este proceso, puedes realizar pruebas de velocidad de WordPress para ver los efectos.

También es una buena idea usar fondos animados solo en las páginas donde más importan. No los necesitas en todas partes, o podrían volverse aburridos.

Por último, para mantener tu sitio web rápido con un fondo de partículas, asegúrate de seguir las mejores prácticas para la velocidad de los sitios web. Puedes aprender más en nuestra guía definitiva para hacer WordPress más rápido.

Esperamos que este artículo te haya ayudado a aprender cómo agregar un fondo de partículas animado en WordPress. También te puede interesar nuestra guía sobre cómo obtener comentarios sobre el diseño de tu sitio web en WordPress y nuestra selección experta de los mejores constructores de temas de WordPress.

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.