Cerrar video

Crear un fondo de partículas animadas en Divi

por | Nov 10, 2018 | Tutorial gratuito | 36 Comentarios

En este tutorial te voy a enseñar a crear un fondo de partículas animadas en Divi. Este efecto es muy bonito y lo puedes implementar en cualquier sitio web diseñado con Divi de forma muy fácil.

Para realizar este efecto nos apoyaremos de un plugin creado por Munir Kamal de cakewp.com y de una biblioteca de JS creada por Vicent Garreau.

El plugin se llama Particle Background y lo puedes descargar haciendo click aquí.

Y el sitio para generar el efecto de partículas es el siguiente: https://vincentgarreau.com/particles.js/

También vamos a necesitar de un código que pegaremos en el el plugin, para facilitarte el trabajo aquí te lo dejo para que lo copies:

particlesJS('NOMBRE_ID',
Pegar aquí el código json generado de particlesJS
);

Tutoriales Relacionados

36 Comentarios

  1. Daiana

    Hola, he seguido todos los pasos pero no me aparecen las particulas. ¿Que puede estar sucediendo?

    Responder
    • Oscar Viedma

      Hola Daiana, haz colocado el ID correctamente tanto en la sección de tu página como en el plugin de partículas? ¿Tienes tu sitio en línea para poder verlo y revisar qué está pasando?

      Saludos Daiana.

      Responder
  2. 20 S Agencia

    Gracias muy útil tu tutorial.

    Responder
  3. Miguel

    Hola, sólo comentar que en DIVI 4.0.2 ha dejado de funcionar de forma correcta. Hay un formualrio de divi y no deja entrar en los campos del formulario. Espero cualquier comentario.
    Gracias.

    Responder
    • Oscar Viedma

      Hola Miguel qué tal. No lo he probado para divi 4.0+ 🙁 voy a intentar para saber que pasa. Un abrazo

      Responder
  4. Jhosse

    Gracias amigo super tu ayuda mil bendiciones…

    Responder
  5. tito coral

    Cualdo paso el cursor por la imágen, el efecto se quita

    Responder
    • Oscar Viedma

      Hola Tito… qué raro, sigues teniendo ese problema?

      Responder
  6. Facundo

    Muchas gracias por el tutorial, la verdad que muy claro. Pero en mi computadora lo puedo ver pero en otras y en el celular no sale nada. Queda el fondo blanco que puedo hacer?

    Responder
    • Oscar Viedma

      Hola Facundo, ¿Cuál es tu sitio? Quiero revisarlo 🙂

      Responder
  7. Claudia

    Gracias, gracias, gracias! Funciona perfecto.

    Responder
  8. CHRISTIAN

    BUEN DIA COMO PUEDO HACER PARA COLOCAR EL EFECTO EN TODO EL BODY.

    Responder
    • Oscar Viedma

      Hola Christian prueba colocando » body » en lugar del NOMBRE_ID

      particlesJS(‘body’,
      Pegar aquí el código json generado de particlesJS
      );

      Si no funciona prueba con este nombre de ID: page-container

      Responder
  9. Julia

    ¿Cómo puedo usarlo para colocarlos en dos espacios diferentes?
    P ej. Header y Formulario de contacto.
    Gracias eres genial!

    Responder
    • Oscar Viedma

      Hola Julia lo que debes hacer es duplicar el código, es decir, copiar el código json y pegarlo abajo del que ya tienes pero para el segundo debes reemplazar el nombre de ID ya que solo tenemos permitido usar un nombre de ID por página.

      Responder
  10. Yeniffer Andaur

    Hola hice todos los pasos y tampoco me funciona.. tengo la última versión de Divi 2020

    Responder
  11. Cristina

    Hola, gracias por el tutorial.
    Hola a todas! y gracias por el tutorial, lo primero.

    No consigo que funcione con body, ni con page-container ( con esa opción hace un corte rarísimo). de momento lo he solucionado repitiendo por cada sección con su ID. No estoy segura de querer eso :-), pero si alguien ha encontrado cómo hacer que funcione a pantalla completa (sin repetir por cada sección) me encantaría saberlo.

    http://www.lakalma.com/Olimpia/ (en pruebas, claro)

    Gracias y saludos

    Responder
    • Oscar Viedma

      Hola Cristina, la verdad tiene tiempo que no realizo este ejercicio. No sé cómo se comporté con las últimas versiones de divi. Tendría que hacer mis pruebas.

      Un abrazo Cristina.

      Responder
  12. Juan

    Y para elementor se podría?

    Responder
  13. Pam

    Hola Oscar! Primero agradecerte mucho por todo lo que nos enseñas.
    Una pregunta, las partículas me funcionan en el ordenador pero no puedo visualizarlas en el móvil. Sólo se ve el fondo degradado que he puesto.
    ¿Podría hacer algo para solucionarlo? muchísimas gracias!
    Un abrazo.

    Responder
    • Oscar Viedma

      Hola Pam puede estar relacionado con la altura definida en móvil. Compárteme la url de tu ejercicio para que lo inspeccione

      Responder
  14. Pam

    Muchísimas gracias por tu respuesta Oscar! Ya está solucionado! Agradezco enormemente y desde otra parte del mundo, todo lo que enseñas. Un abrazo grande!

    Responder
    • Oscar Viedma

      Excelente Pam! 🙂 Un abrazo para ti también.

      ¡Saludos!

      Responder
    • Oscar Viedma

      Hola Fernando, el efecto funciona tanto en escritorio como móvil 🤔

      Responder
  15. felipe

    Hola! hay forma de usar mas de una vez las partículas en la misma pagina? como podría hacerlo?

    Responder
    • Oscar Viedma

      Hola Felipe, no es posible usando este método amigo. En otras páginas si puedes agregarlas aplicando el mismo ID, pero en la misma web solamente se puede colocar un nombre de ID único por sección.

      Responder
  16. victor

    como puedo hacer para que se almacenen dos codigos json de particulas en el plugin?

    Responder
    • Oscar Viedma

      Hola Victor, por ahora no es posible. Voy a realizar otro tutorial para agregar más de un fondo 🙂

      Responder
  17. matias

    Hola oscar, como estas? hago todo paso a paso pero no se reproduce en mi pagina web, gracias!

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest