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
);
Hola, he seguido todos los pasos pero no me aparecen las particulas. ¿Que puede estar sucediendo?
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.
Gracias muy útil tu tutorial.
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.
Hola Miguel qué tal. No lo he probado para divi 4.0+ 🙁 voy a intentar para saber que pasa. Un abrazo
Gracias amigo super tu ayuda mil bendiciones…
De nada Jhosse 🙂
Cualdo paso el cursor por la imágen, el efecto se quita
Hola Tito… qué raro, sigues teniendo ese problema?
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?
Hola Facundo, ¿Cuál es tu sitio? Quiero revisarlo 🙂
Gracias, gracias, gracias! Funciona perfecto.
Genial Claudia 🙂 ¡Un abrazo!
BUEN DIA COMO PUEDO HACER PARA COLOCAR EL EFECTO EN TODO EL BODY.
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
¿Cómo puedo usarlo para colocarlos en dos espacios diferentes?
P ej. Header y Formulario de contacto.
Gracias eres genial!
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.
Hola hice todos los pasos y tampoco me funciona.. tengo la última versión de Divi 2020
https://www.ghderma.cl/promociones-y-tratamientos-faciales
El tutorial todavía funciona a la perfección Yeniffer. ¿En qué sección de tu sitio estás deseando implementar las partículas? Entré pero no supe en dónde deseabas el efecto.
Saludos
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
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.
Y para elementor se podría?
Hola Juan, claro que se puede 🙂
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.
Hola Pam puede estar relacionado con la altura definida en móvil. Compárteme la url de tu ejercicio para que lo inspeccione
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!
Excelente Pam! 🙂 Un abrazo para ti también.
¡Saludos!
hola como lo hago para que se vea en el movil?
Hola Fernando, el efecto funciona tanto en escritorio como móvil 🤔
Hola! hay forma de usar mas de una vez las partículas en la misma pagina? como podría hacerlo?
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.
como puedo hacer para que se almacenen dos codigos json de particulas en el plugin?
Hola Victor, por ahora no es posible. Voy a realizar otro tutorial para agregar más de un fondo 🙂
Hola oscar, como estas? hago todo paso a paso pero no se reproduce en mi pagina web, gracias!
Hola Matias, revisa en divi performance que estés utilizando esta configuración por fa. Puede ser eso.
Hola estoy dentro la academia, en version mobile se ven distorcionados los elementos, y se mueven mas rapido.
hay alguna forma de solucionarlo ?
Hola Juan Pablo. Compárteme la url de tu ejercicio para darle un vistazo.
Saludos
Gracias
http://www.starrymountainatitlan.com
En los ajustes de la página / Avanzado / CSS Personalizado pega este código:
@media only screen and (max-width: 768px) { canvas.particles-js-canvas-el { height: auto !important; } }Me dices si con eso ha quedado por fa.
A mi me funciona solo en la compùtadora pero cuando estoy en wordpress pero ya afuera como cliente no se ven y en el telefono tampoco 🙁
Hola Nicole, lo acabo de hacer y me funcionó sin problema. Seguramente es por Divi Performance. Te recomiendo utilices esta configuración.
no no funciona ya probe
Hola Oscar
cuando lo publicaste lo puse a funcionar yanda perfecto, pero ahora tengo un desafio para ver si sabes como se puede implementar en DIVI, me encanto este efecto lo quiero usar. a ver si me das una mano
te paso link https://codepen.io/soju22/pen/wvyBorP
Gracias!!!
Hola Hector, si estás suscrito en los tutoriales exclusivos me puedes escribir por el chat de soporte y puedo darte una mano con el ejercicio que deseas implementar 😉
No es algo que tenga resuelto pero podemos intentarlo.