¿Cómo integrar la biblioteca de Javascript "Particles.js" en Divi? ¿Alguna vez has visto a este tipo? fondo interactivo en Divi o en cualquier otro tipo de sitio? Constelaciones que magnetiza en el pasaje de su ratón, estrellas o incluso nieve ¿Quién se está cayendo? Este tipo. fondo interactivo es posible gracias a la Biblioteca del Javascript de la Vincent Garreau : Artículos.
Nada más hipnotizante que este tipo de antecedentes, ¿verdad?
En este artículo, explicaré cómo añadir un fondo interactivo con partículas. js. Usted verá que en unos minutos, y sin gran conocimiento (sin codificación), usted puede obtener este hermoso efecto y utilizarlo en sus sitios Divi.
Aquí está el procedimiento:
- Instala el plugin que te permitirá utilizar la biblioteca Particles.js
- Define el tipo de partículas que desea mostrar
- Añadir fondo interactivo a una sección de Divi
- ¿Cuáles son las otras posibilidades?
Actualización del 2 de junio de 2024: Después de muchos comentarios dejados por los lectores sobre errores encontrados, confirmo que Particles.js es bien compatible con la última versión de Divi o WordPress. Acabo de comprobar con el versión 4.25.1 de Divi y versión 6.5.3 de WordPress. Todo funciona bien. Si encuentra errores, compruebe cada paso y asegúrese de que no hay error de código: un espacio simple o coma mal colocado podría resultar en un fallo. También te aconsejo que Haga sus pruebas en un sitio de prueba y no en un sitio de producción.
1. Instala el plugin que te permitirá utilizar la biblioteca Particles.js en Divi
Incluso si este plugin no es indispensable, hará la vida más fácil para usted y evitar poner sus manos en sus Divi child theme. Incluso si en muchos casos es interesante no añadir demasiados plugins, este es realmente ligero y hará su vida más fácil, así que ¿por qué no?
Así que, para añadir un fondo interactivo en Divi, el primer paso será descargar, instalar y activar la extensión llamada ParticleJS-WP-Plugin. Si quieres saber más, aquí está el Enlace del directorio Github.
Esto significa que no es una extensión que está disponible directamente desde el directorio oficial de plugins de WordPress (a través del menú Prórrogas Instala) pero desde Github, un repositorio dedicado a los desarrolladores y en el que usted puede confiar.
Una vez que haya instalado y habilitado esta extensión, aparecerá una nueva pestaña: "Contexto de partículas"
Hasta ahora, nada bueno sale... Eso va a ser interesante...
¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"
2. Defina el tipo de partículas que desea mostrar en su sitio
El segundo paso importante será establecer el tipo de partículas que quieres ver aparecer como fondo interactivo. Por esto, te doy una cita el sitio web oficial de las partículas. js.
Esta pantalla le permitirá crear sus partículas y puede definir:
- estilo de partícula: círculos, polígonos, estrellas, imágenes, etc...
- velocidad y número,
- Fijación de partículas,
- la dirección del movimiento,
- Interactividad con los usuarios de Internet,
- el color de las partículas / color de fondo,
- etc...
Una vez que haya establecido las partículas ideales utilizando el Panel de Control (top, derecha), ya no se quedará que para descargar el código generado. Para hacer esto, haga clic en « Descargar configuración actual (json) », el último elemento en la parte inferior del panel de control de partículas.
3. Añadir fondo interactivo a una sección de Divi
Ahora tienes los dos elementos esenciales para crear tus Hermoso fondo interactivo en Divi :
- on Particle Background plugin
- y el código de partículas.
Sólo tendrá que montarlo e integrarlo en Divi. Esto es lo que necesitas hacer:
3.1 – Agregue el código apropiado en el plugin de fondo de partículas
Nos vemos en la pestaña Particle Background y añadir este código:
partículasJS('mis partículas',
Añádete a tu padre aquí.
);
En este ejemplo, identificador único (ID) es "Mis partículas". Esto puede ser cambiado por una identificación de su elección. Sin embargo, sepa que un ID (HTML ID) solo se puede utilizar una vez en una página. Esta es información importante que debe tener en cuenta.
The line where is noted "Acepta tu código aquí" es la ubicación donde usted debe pegar el código obtenido después de la configuración de sus partículas. El que tienes en el paso 2 de este tutorial.
Así que el código para pegar en el campo proporcionado para la ficha Particle Background debería parecer así:
############## mi-particles', { "particles": { "number": { "valor": 109, "density": { "enable": true, "value_area": 800 }, "color": {"
Desde cada ID debe ser único, si desea utilizar varios antecedentes interactivos, tendrá que cambiar el ID cada vez que repita el código.
Si observas mi video al principio del artículo, podrías haber notado que he añadido 3 fondos seguidos. Esto fue posible porque para cada fondo, usé diferentes IDs como "Mis partículas", "Mis partículas-2" o "Mis partículas3".
Actualización de 23 junio 2019 : Aquí está el ejemplo del código que solía ser capaz de usar integrar 3 diferentes artículos de fondo dentro de una página. Los 3 pedazos de código fueron pegados en una fila con 1 doble salto para separarlos =
############## mi-particles', { "particles": { "number": { "valor": 109, "density": { "enable": true, "value_area": 800 }, "color": {"
3.2 – Integra tus partículas en una sección de Divi
Ahora todo está listo insertar sus partículas en una sección de Divi. Dependiendo de si prefiere utilizar el Divi Builder o Visual Builder, aquí está el método :
Método con Divi Builder (oficina trasera):
Cuando tú Construya su diseño (distribución de página)agrega secciones, líneas y módulos.
La idea es que estas partículas cubren el fondo de una sección (sección estándar, sección de ancho completo o incluso sección especial).
1 – Usted necesitará añadir (o editar si ya está presente) una sección:
2 - Añade un fondo de color a tu elección (especialmente si tus partículas son blancas) a través de la pestaña Contenido > Antecedentes :
3 – Insertar el identificador único (ID) que usaste en el código de plugin de Particle Background (código previamente visto, ejemplo "mi partícula"). Este ID inserta en la pestaña ID y clases de CSS avanzados :
¿Quieres moverte a mayor velocidad? ¡Consigue el tema Divi ahora!
4 - Guarda tus cambios, actualiza tu página y admira tu cielo estrellado! Tenga en cuenta que es posible que necesite añadir algún margen interno para ampliar la sección.
Método con Visual Builder (front-office):
Si prefieres use Visual BuilderSerá el mismo procedimiento.
IMPORTANTE: Tenga en cuenta que no verá que sus partículas aparecen en vivo cuando utiliza el Constructor Front End. Usted tendrá que guardar y salir del constructor visual para ver su fondo de intercación aparecer.
4. ¿Cuáles son las otras posibilidades?
Por último, quería informarle de que hay otras soluciones para insertar partículas como fondo interactivo.
Podrías descargar la biblioteca de Javascript y añadirlo al tema de su hijo. Esto requeriría la integración manual.
De lo contrario, hay un plugin gratuito en el directorio oficial. Esto es Partícula Backgroung WP. Es muy simple de usar. La única preocupación es que no podrás personalizar tus partículas, sólo el color de fondo. Un código corto le permitirá añadirlo fácilmente pero no es la forma ideal de integrarlo en una sección de Divi...
Antes de salir: ¿te gustan los diseños que salen de lo común? Descubre cómo insertar un fondo que cambia el color en Divi.
¿Necesita más recursos en Divi? Visita Elegante El blog del tema lleno de ideas y tutos!
bonjour,
merci pour votre tuto,
j’ai un petit souci pour configurer plusieurs arrière plans(j’en ai un seul qui fonctionne ou aucun selon la syntaxe), quelle est la syntaxe exacte dans particles background pour pouvoir le faire?
Comment fait t’on pour charger des images (glaces dans le tuto)?
merci d ‘avance pour la réponse
Salut Damien, dans mon tuto, j’explique que si tu veux utiliser plusieurs arrières-plan tu dois utiliser des ID différents, c’est très important (voir section 3 => Ajouter le code adéquat dans le plugin Particle Background : l’exemple « my-particles » doit être changé pour chaque nouveau code).
Concernant l’image à insérer (comme la glace dans ma vidéo), tu dois la paramétrer lorsque tu définis tes particules sur le site https://vincentgarreau.com/particles.js/
Cette image doit déjà être déjà hébergée dans ton site. Tu vas dans ta bibliothèque de médias et tu récupères l’URL de l’image en question.
Ensuite, cette URL doit être insérée dans le paramétrage de tes particules au chemin suivant : PARTICLES > SHAPES > IMAGE > IMAGE.SRC
Tu me diras…
bonjour
je voulais ajouter un logo citroen sur le fond de ma page d’acceuil
j’indique le chemin dans PARTICLES > SHAPES > IMAGE > IMAGE.SRC et l’image sous forme jpg se trouve dans ma bibliotheque
pourtant il ne semble pas la reconnaitre et affiche des particules en mouvement
que faire?
C’est plutôt bizarre, ça devrait marcher. Avez-vous réessayé ? N’auriez-vous pas une erreur dans le lien de l’image ?
Bonjour, merci pour ce tuto.
J’ai malheureusement un problème aucune image ne fonctionne lorsque je rentre l’url d’une image cela me remet des particules de bases pourrais tu m’aider stp ?
Merci
Bonjour Sonny,
Dommage, il y a certainement une étape qui s’est mal passée. Par exemple : est-ce que l’URL de l’image est bonne ? As-tu essayé avec une autre URL pour voir si ça ne venait pas de l’image en elle-même ? Parfois, ça ne tient à pas grand chose !
Bonjour, comment puis-je utiliser plusieurs backgrounds différents pour différentes pages ?
Sur votre tuto je lis de les différencier d’un ID différent.
Je ne suis pas sûr de la syntaxe dans le code JSon, je ne sais pas comment ajouter un deuxième id.
J’ai essayé de les « raccorder » comme ça :
https://www.zupimages.net/up/19/19/rxdm.png
Et comme ça :
https://www.zupimages.net/up/19/19/dzai.png
J’ai ensuite préciser l’idée my-particles-2 dans les id css,
mais aucun des deux ne semble fonctionner.
Si vous pouviez me renseigner svp, ça m’aiderait beaucoup 🙂
Salut Desportj,
Tu as trouvé finalement ? Tes captures me semblent bonnes. Tu peux effectivement préfixer l’ID pour pouvoir dupliquer le code et qu’il n’y ait pas de conflits : my-particle, my-particle-2, my-particle-3
Peut-être que le souci vient d’ailleurs ?
As-tu copié-collé le code de mon article ? Si c’est le cas, regarde que les « apostrophes-droites » n’aient pas été remplacées par des « apostrophes-virgule » par exemple. C’est souvent le cas quand on copie-colle.
Bonjour j’ajoute les particules elles fonctionnent en haut de page mais j’aimerais uniquement l’insérer dans une section divi et rien ne fonctionne. pouvez vous m’aidez?
Quand j’inscris le code « json » il s’inscrit sur tout le site.
Comment puis-je faire?
Salut Morgane,
Je ne comprends pas trop ta question. Je crois que tout est bien expliqué dans le tuto. As-tu suivi les étapes scrupuleusement ?
pouvez vous indiquer comment vous faites pour mettre plusieurs particle background, au niveau du codage ? plusieurs personnes on ce probleme on dirait. une capture d’ecran par exemple ?
Bonjour,
Merci pour ce tuto, cependant fonctionne t-il avec la version 3.23.2 du thème divi ?
Cela ne fonctionne pas chez moi….. :/
Bonjour Laurent, ça devrait fonctionner normalement… je crois…
Salut Yoyo!
Je vois que certains n’arrivent pas à utiliser plusieurs backgrounds au sein de la même page. Pourtant, je ne peux pas être plus claire, c’est écrit dans le tutoriel :
« Étant donné que chaque ID doit être unique, si vous souhaitez utiliser divers arrières-plans interactifs, vous devrez changer l’identifiant à chaque fois que vous répétez le code.
Si vous avez regardé ma vidéo en début d’article, vous avez pu remarqué que j’ai ajouté 3 arrières-plans à la suite. Cela a été possible car pour chaque background, j’ai utilisé des ID différents comme « my-particles », « my-particles-2 » ou « my-particles3 ». »
Bonjour,
Je rencontre un petit problème avec ce plugin
J’ai suivi à la lettre les instructions d’installation et de paramétrage
Il fonctionne très bien avec Chrome, mais les particules sont invisibles avec Mozilla ou Safari
Merci d’avance pour votre aide
Cordialement
Salut Gilles,
Hummm… C’est très bizarre. Pour ma part, j’ai réalisé le tuto sur Firefox et ça marchait très bien… Je n’ai pas réessayé depuis mais je ne vois pas pourquoi ça ne marcherait pas ?
Bonjour, je ne comprend pas, dans l’onglet paramètre j’ai seulement « Personnaliser Css » et rien d’autre.
Je ne peux donc pas rentrer l’ID CSS.
Bonjour,
Après 150 essais je n’arrive toujours pas à mettre en oeuvre les particules !
Pourtant j’ai le sentiment de tout faire, j’ai peur qu’un élément de mon divi donne un contre ordre ou je ne sais quoi.
Pouvez vous m’aider ?
Bien à vous.
Salut Boby
Ça dépend de ce que tu cherches. Dans « personnaliser CSS », tu peux saisir l’ID et la Class normalement.
Salut Antoine,
Tu n’es apparemment pas le seul qui rencontre des problèmes d’intégration. Du coup, je viens de suivre mon tuto comme un internaute le ferait. Tout fonctionne. Je confirme donc que Particles.js est compatible avec la dernière version de Divi et de WordPress (soit 5.23 et 5.2).
Par contre, j’attire ton attention sur le fait que si tu insères l’ID depuis le Visual Builder (en front-end), c’est normal de ne pas les voir apparaître au moment de la confection de ta page. Ajoute bien l’ID, enregistre le module et la page puis quitte le Visual Builder : les particules apparaîtront.
Si rien ne fonctionne, tu as peut-être un conflit avec un autre plugin.
Salut Lycia,
Merci pour tous tes tuto.
Je rencontre non pas un souci d’intégration mais un souci au niveau des dimensions.
Dans l’impression d’écran ci dessous, la section fait 300px.
Du coup l’effets est totalement écrasé.
https://zupimages.net/up/19/26/chyv.png
Ça te parle ?
Ah oui, effectivement les particules sont écrasées. Lors de mes tests, moi aussi l’icône de mon logo (la glace) s’est affichée écrasée pendant un instant, mais après rechargement de la page, le logo est redevenu normal. Peut-être une histoire de cache ?
Aurais-tu mis une règle CSS pour donner une taille spécifique à ton BG ?
Genre [width:300px height:200px]. Si c’est le cas, il vaudrait mieux mettre un truc du genre [width:300px height:auto].
Sinon inspecte le code, ça pourrait venir de là.
Tu nous diras…
Bonne journée.
Lycia
Merci de ta rapidité.
Ce n’était pas un problème de cache et je n’avais rien de spécifié au niveau du BG.
Par contre le plugin ajoute un parametre de style « width: 100%; height: 100%; »
En ajoutant un parametre sur la class qui va bien, tout est OK 🙂 !
.particles-js-canvas-el {
height: auto!important;
}
Ah super !
J’en étais sûre que c’était une histoire de height:auto !!!
Pour ma part, je n’ai pas rencontré ce problème car mon icône est un .png carré. Genre 200px par 200px.
Ton image ne devait pas être carrée, d’où le problème rencontré je pense !
Ton cas pourras en aider d’autres…
Merci 😉
Très bien, merci pour vos commentaires, une requête, j’utilise un curseur et je veux mettre cet effet sur ce curseur, mais l’effet n’apparaît que lorsque la page est chargée et que la diapositive suivante est affichée, l’effet disparaît. ou cet effet ne fonctionne pas sur un curseur?
Je vous serais reconnaissant de bien vouloir m’aider, Lycia, merci beaucoup pour votre aide.
Rolando Segovia
Lima Pérou
Salut Rolando, en parlant de curseur, tu parles d’un diapo ? Effectivement, c’est possible que cela ne marche pas, à moins de trouver l’ID qui va bien mais je n’ai pas testé et je ne sais pas si cela est possible. Désolée de ne pas pouvoir plus t’aider…
Bonjour lycia je n’ai pas trouvé les autres vidéos pour la suite de ce démo, comment faire des particules en images dans ta chaine sur YouTube
Salut Skander. Ce tuto est pour Divi et WordPress. Je ne pense pas que tu puisses t’en servir pour ta chaine YT.
Bonjour, je souhaiterais utiliser mon logo (comme vous vous utilisez la glace) comment faire s’il vous plaît.
Bonjour Amandine,
Tout est expliqué dans le tuto. Tu devras héberger ton image sur ton site et récupérer le lien (adresse URL). Ensuite, tu paramètres les particules depuis le site officiel de ParticleJS avec l’adresse de ton image. Tu récupères le code et tu l’insères dans ton site. Elle doit être en .png (fond transparent).
Bonne journée
bonjour j’aimerai configurer des particules dans ma section mais le problème est que ma section à déjà un id qui me permet de faire reference à mon menu ancre comment je peux gérer ça?
Salut Levy, je vois ce que tu veux dire… Je ne sais pas, il faudrait regarder de plus près. Peut-être que tu pourrais utiliser une CLASSE CSS au lieu d’un ID ? Il faudrait voir si ça fonctionne… Je parle pour les particules, car pour ton ancre de lien, tu es obligé d’utiliser un ID…
J’ai un problème. J’ai bien installé les particules, ça fonctionne super, tant que je suis connecté. . .
Dès que je ne suis plus connecté, plus de particules.
Savez-vous d’où ça peut venir ?
C’est bizarre Charly.
Y’a peut-être un conflit quelque part ?
Possible, effectivement faudrait que je fasse des petits tests à ce niveau.
Bonjour,
Le tuto est parfait, merci. J’arrive à mettre des flocons de neiges ou même des images, le problème que je rencontre c’est que je ne peux pas faire les deux en même temps. Que ce soit sur une même page ou deux pages différentes, j’ai l’impression que dès que je change l’ID ça rentre en conflit.
Aurait tu une idées.
Bonjour,
Après un nouvel essais en utilisant ton code à toi, ça fonctionne parfaitement sur une même pages. Par contre lorsque je veux appeler les différents ID sur des pages différentes ça ne fonctionne pas, aurais tu une astuce pour contrer le bug ?
Salut Jonathan.
Je ne vois pas trop… Il te faut utiliser des ID bien distinct à chaque fois, comme expliqué dans ce tuto. As-tu fait attention à cela ?
Ah d’accord, j’avais pas vu ton second commentaire !
Euh, normalement ça dois marcher si c’est sur une autre page.
Hi, im just having some issue. 🙁 When i am logged in in DIVI it is working. But when i logged out it is not working.
I tried to inspect and it says Uncaught ReferenceError: particlesJS is not defined.
Hello Chris,
I don’t know what is wrong. Did you made the tutorial step by step ?
Bonjour
Je tente ma chance pour avoir de l’aide. J’ai suivi le tuto et rien à faire, impossible d’avoir la moindre animation alors que j’ai tout suivi sur 2 tutos différents. Mon code json est bon mais quand je mets mon ID CSS après avoir défini ou non une couleur de fond, rien. Pas de réaction…
Merci
Salut Sof.., ben je sais pas, il faut retenter jusqu’à trouver d’où vient le problème…
Bonjour.
Pendant plus de 4H sans mentir j’ai bien suivi le tutoriel et je n’ai toujours pas les particule qui s’affiche… aucune mise à jour depuis 2019 du coup je ne sais pas si le problème viens de moi qui comprend mal ou pas…
Hello Lux, pas besoin de mettre l’article à jour, car le code fonctionne toujours 😉 Mais si tu savais le nombre d’internautes qui me disent « j’ai suivi à la lettre » et qui reviennent ensuite me dire, « ah en effet, j’avais pas bien lu le point n°x »… Donc, je ne saurais quoi te dire, peut-être que j’explique mal…
Bonjour,
Ça fonctionne bien ! Par contre c’est limité à la taille de l’écran, si la section est plus petite que l’écran, les particules sont écrasées et si elle est plus grande, elles sont étirées…
J’ai remarqué ça car j’ai voulu le mettre sur toute la page (header et footer compris). J’ai réussi mais les particules ne vont que quelques centimètres dans le footer (j’ai essayé de changer « detect on : window ou canvas ou parent »)
Ou peut-être que j’ai fait quelque chose de faux ?
Je sais pas il faudrait faire plusieurs essais, merci du retour
Hello, déjà merci pour ce super tuto et cette superbe extension !
Alors par contre super bizarre, à partir du moment où j’ai installé l’extension, tout les séparateurs entre mes modules ont disparus…. et impossible à les remettre en place ! Sure mon builder il y est et quand je le quitte les séparation n’y sont plus…
Ah oui c’est bizarre
Bonjour,
J’ai le même soucis que Djin dans les commentaires le 25 Juin 2019
Seulement je n’ai pas compris sa solution …. Quel est la class qui va bien ? Je ne comprends pas sorry….
Pouvez-vous m’aider s’il vous plait ?
Merci beaucoup !
Salut Adrien, en fait Djin explique qu’une height est définie et que c’est cela qui « écrase les particules ». En forçant le « height: auto!important; » cela corrige le problème. Du coup, il faut effectivement inspecter le code dans ton navigateur pour trouver sur quelle classe positionner ces valeurs. Selon Djin, ce code règlerait le problème :
.particles-js-canvas-el {
height: auto!important;
}