Particle.js dans Divi

Fondo interactivo en Divi: Particles.js, constelaciones y cielo estrellado

Actualizado el 24/06/2019 | Publicado el 07/11/2018 | 51 comentarios

2.146 palabras

9

¿Cómo puedo integrar la biblioteca Javascript "Particles.js" en Divi? ¿Has visto alguna vez este tipo de fondo interactivo en Divi o en cualquier otro tipo de sitio? ¿Constelaciones que se magnetizan al pasar el ratón por encima, estrellas o incluso nieve que cae? Este tipo de fondo interactivo es posible gracias a la biblioteca Javascript de Vincent Garreau : Particles.js.

No hay nada más hipnótico que ese tipo de fondo, ¿verdad?

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

 

En este artículo, voy a explicar cómo añadir un fondo interactivo con Particles.js. Verás que en pocos minutos, y sin muchos conocimientos (sin codificación), puedes conseguir este bonito efecto y utilizarlo en tus sitios Divi.

El procedimiento es el siguiente:

  1. Instala el plugin que te permitirá utilizar la librería Particles.js
  2. Defina el tipo de partículas que desea mostrar
  3. Añadir fondo interactivo a una sección de Divi
  4. ¿Cuáles son las otras posibilidades?

 

Actualización 23 de junio de 2019: después de que muchos lectores se pongan en contacto conmigo o dejen un comentario sobre los errores encontrados, confirmo que Particles.js es compatible con la última versión de Divi o WordPress. Después de vuestros numerosos comentarios, acabo de hacer una comprobación con el Divi versión 3.25.2 y WordPress versión 5.2.2. Todo funciona bien. Si se encuentra con algún error, compruebe cada paso y asegúrese de que no hay un error de código: un simple espacio o una coma mal colocados podrían dar lugar a un fallo. También le aconsejo que haga sus pruebas en un sitio Dev y no en un sitio de producción.

 

1. Instala el plugin que te permitirá utilizar la librería Particles.js en Divi

Aunque este plugin no sea imprescindible, te facilitará la vida y evitará que te lleves las manos a la cabeza. Tema infantil Divi. Aunque en muchos casos es interesante no añadir demasiados plugins, éste es realmente ligero y te facilitará la vida, así que ¿por qué privarte de él?

Así, para añadir un fondo interactivo en Divi, el primer paso es descargar, instalar y activar la extensión llamada ParticleJS-WP-Plugin. Si quieres saber más, aquí tienes la enlace al directorio Github.

Esto significa que no es una extensión que esté disponible directamente en el directorio oficial de plugins de WordPress (a través del Extensiones > Instalar) sino desde Github, un repositorio dedicado a los desarrolladores en el que se puede confiar.

Una vez instalada y activada esta extensión, aparece una nueva pestaña: "Fondo de partículas

Arrière-plan interactif / particle-background

Hasta ahora, nada demasiado emocionante... Lo que sigue será interesante...

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA

 

2. Defina el tipo de partículas que desea mostrar en su sitio

El segundo paso importante es establecer el tipo de partículas que quieres que aparezcan como fondo interactivo. Para ello, le invito a visitar el sitio web oficial de Particles.js.

Particles.js

Esta pantalla le permitirá crear sus partículas y podrá definir :

  • el estilo de las partículas: círculos, polígonos, estrellas, imágenes, etc.
  • velocidad y número,
  • la unión de partículas,
  • la dirección del movimiento,
  • interactividad con el usuario de Internet,
  • el color de las partículas / el color de fondo,
  • etc...

Una vez que haya configurado las partículas ideales mediante el panel de configuración (arriba a la derecha), todo lo que tiene que hacer es descargar el código generado. Para ello, haga clic en "Descargar la configuración actual (json)Haga clic en el último elemento de la parte inferior del panel de configuración de partículas.

Export current config

 

3. Añadir el fondo interactivo a una sección de Divi

Ahora tiene los dos elementos esenciales para crear su hermoso fondo interactivo en Divi:

  • el plugin Particle Background
  • y el código de sus partículas.

Todo lo que tienes que hacer es juntarlo e integrarlo en Divi. Esto es lo que tienes que hacer:

 

3.1 - Añadir el código apropiado al plugin Particle Background

Ve a la pestaña de Fondo de Partículas y añade este código:

particlesJS('my-particles',
AJOUTEZ VOTRE CODE ICI
);

En este ejemplo, el identificador único (ID) es "mis-partículas. Esto se puede cambiar a un ID de su elección. Sin embargo, tenga en cuenta que un ID en HTML sólo puede utilizarse una vez en una página. Esta es una información importante a tener en cuenta.

La línea donde se anota " AÑADA SU CÓDIGO AQUÍ es donde debe pegar el código obtenido después de configurar sus partículas. El que tienes en el paso 2 de este tutorial.

Por lo tanto, el código a pegar en el campo de la pestaña de Fondo de Partículas debe ser así:

particlesJS('my-particles',
{
"particles": {
"number": {
"value": 109,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3.9458004845442964,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
);

 

Dado que cada ID debe ser único, si quiere utilizar diferentes fondos interactivos, tendrá que cambiar el ID cada vez que repita el código.

Si has visto mi vídeo al principio del artículo, te habrás dado cuenta de que he añadido 3 fondos seguidos. Esto fue posible porque para cada fondo utilicé diferentes identificaciones como "mis-partículas, "mis-particulas-2 o "mis-particulas3.

 

Actualización 23 de junio de 2019: aquí está el ejemplo del código que utilicé para poder integrar 3 Fondos de Partículas diferentes dentro de la misma página. Los 3 trozos de código se pegaron en una fila con un doble salto de línea para separarlos =>

particlesJS('my-particles',
{
  "particles": {
    "number": {
      "value": 109,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3.9458004845442964,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

particlesJS('my-particles-2',
{
  "particles": {
    "number": {
      "value": 213,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "star",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 7.891600969088593,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

particlesJS('my-particles-3',
{
  "particles": {
    "number": {
      "value": 128,
      "density": {
        "enable": true,
        "value_area": 2209.648271344806
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "image",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "https://astucesdivi.com/wp-content/uploads/2017/12/icon-new.png",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 27.620603391810075,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "bottom-right",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

 

3.2 - Integrar sus partículas en una sección de Divi

Ahora estás listo para insertar tus partículas en una sección de Divi. Dependiendo de si prefiere utilizar el Divi Builder o el Visual BuilderEste es el método:

 

Método con el Constructor Divi (back-office) :

Cuando construye tu diseñoSe añaden secciones, filas y módulos.

La idea es que estas partículas revistan el fondo de una sección (sección estándar, sección de ancho completo o incluso sección especial).

1 - Deberá añadir (o editar si ya existe) una sección :

éditer une section

 

2 - Añade un fondo de tu elección (especialmente si tus partículas son blancas) a través de la pestaña Contenido > Fondo :

fond particules

 

3 - Inserte el ID (identificador único) que utilizó en el código del plugin Particle Background (código visto anteriormente, ejemplo "my-particle"). Este ID se inserta en el Avanzado > ID y clases CSS :

ID particules

 

¿Quieres subir de marcha? ¡Consigue el tema Divi ahora!

 

4 - Guarda los cambios, actualiza tu página y ¡disfruta de tu cielo estrellado! Tenga en cuenta que puede ser necesario añadir algún margen interno para ampliar la sección.

 

Método con el Visual Builder (front-office) :

Si prefiere utilizar el Visual Builder, será el mismo procedimiento.

IMPORTANTE : Tenga en cuenta que no verá sus partículas en vivo cuando utilice el Front End Builder. Tendrás que guardar y salir del constructor visual para ver tu fondo interactivo.

fond via le visual builder

Añade un fondo de color para que se vean tus partículas interactivas

 

ID via le visual

Añade el ID a través de la pestaña Avanzado > ID y clases CSS

 

4. ¿Cuáles son las otras posibilidades?

Por último, quería informarte de que hay otras formas de insertar partículas como fondo interactivo.

Usted podría simplemente descargar la biblioteca de Javascript y añádelo a tu tema hijo. Para ello habría que integrarlo manualmente.

Si no, hay un plugin gratuito en el directorio oficial. Se llama Particle Backgroung WP. Es muy fácil de usar. El único problema es que no puedes personalizar las partículas, sólo el color de fondo. Un shortcode te permitirá añadirlo fácilmente pero no es ideal para integrarlo en una sección de Divi...

Antes de irte: ¿te gustan los diseños inusuales? Descubra cómo insertar un fondo que cambia de color en Divi.

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantTheme que está lleno de ideas y tutoriales.

 

Comment intégrer la librairie Particles.js dans Divi

obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

La nouvelle interface de Divi 5

La nouvelle interface de Divi 5

Découvrez la nouvelle interface de Divi 5 : les comparaisons avec Divi 4 et les similitudes avec Gutenberg (article + vidéo). Alerte spoiler : ça déchire 💣 !

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Votre client souhaite afficher une ligne avec les logos de ses 9 principaux clients… Comment faites vous ? Dans cet article, je vous explique comment aligner plus de 6 éléments sur une même ligne !

Comment utiliser la Flexbox CSS dans Divi ?

Comment utiliser la Flexbox CSS dans Divi ?

Laissez-moi vous faire découvrir une autre manière de créer vos mises en page Divi en utilisant la Flexbox. Ce module CSS puissant permet de faire des choses extraordinaires 🤩.

51 Commentaires

  1. tantin damien

    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

  2. Lycia

    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…

  3. knabach

    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?

  4. Lycia Diaz

    C’est plutôt bizarre, ça devrait marcher. Avez-vous réessayé ? N’auriez-vous pas une erreur dans le lien de l’image ?

  5. Sonny

    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

  6. Lycia Diaz

    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 !

  7. Desportj

    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 🙂

  8. Lycia Diaz

    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.

  9. Morgane Lento

    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?

  10. Lycia Diaz

    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 ?

  11. yoyo

    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 ?

  12. Laurent SEGURA

    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….. :/

  13. Lycia Diaz

    Bonjour Laurent, ça devrait fonctionner normalement… je crois…

  14. Lycia Diaz

    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 ». »

  15. Gilles Sénard

    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

  16. Lycia Diaz

    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 ?

  17. BobiBobBoby

    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.

  18. Antoine

    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.

  19. Lycia Diaz

    Salut Boby
    Ça dépend de ce que tu cherches. Dans « personnaliser CSS », tu peux saisir l’ID et la Class normalement.

  20. Lycia Diaz

    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.

  21. Djin

    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 ?

  22. Lycia Diaz

    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

  23. Djin

    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;
    }

  24. Lycia Diaz

    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 😉

  25. Rolando Segovia

    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

  26. Lycia Diaz

    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…

  27. Skander Nej

    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

  28. Lycia Diaz

    Salut Skander. Ce tuto est pour Divi et WordPress. Je ne pense pas que tu puisses t’en servir pour ta chaine YT.

  29. amandine

    Bonjour, je souhaiterais utiliser mon logo (comme vous vous utilisez la glace) comment faire s’il vous plaît.

  30. Lycia Diaz

    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

  31. levy kambay

    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?

  32. Lycia Diaz

    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…

  33. Charly Rouget

    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 ?

  34. Lycia Diaz

    C’est bizarre Charly.
    Y’a peut-être un conflit quelque part ?

  35. Charly Rouget

    Possible, effectivement faudrait que je fasse des petits tests à ce niveau.

  36. Jonathan

    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.

  37. Jonathan

    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 ?

  38. Lycia Diaz

    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 ?

  39. Lycia Diaz

    Ah d’accord, j’avais pas vu ton second commentaire !
    Euh, normalement ça dois marcher si c’est sur une autre page.

  40. Chris Joe Barcelon

    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.

  41. Lycia Diaz

    Hello Chris,
    I don’t know what is wrong. Did you made the tutorial step by step ?

  42. Sof

    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

  43. Lycia Diaz

    Salut Sof.., ben je sais pas, il faut retenter jusqu’à trouver d’où vient le problème…

  44. Lux pilant Rémi

    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…

  45. Lycia Diaz

    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…

  46. Christ off

    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 ?

  47. Lycia Diaz

    Je sais pas il faudrait faire plusieurs essais, merci du retour

  48. sautjeau léa

    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…

  49. Lycia Diaz

    Ah oui c’est bizarre

  50. Adrien

    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 !

  51. Lycia Diaz

    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;
    }

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.