Certains arrière-plans restent immobiles, et certains dérivent Des points flottants reliés par des lignes fines, ou de la neige tombant derrière un titre : les effets de particules donnent un mouvement silencieux de section sans fichier vidéo en vue Le libre Extension particulaire dans Modules complémentaires principaux pour Elementor rend exactement cela derrière votre contenu, alimenté par la bibliothèque de particules.js bien connue et configuré avec un seul champ JSON.
Voici la section démo exécutant le préréglage Snow sur la page publiée :
Ce que fait l'extension Particules #
Une fois activées, les sections, colonnes et conteneurs obtiennent un Particules panneau dans leur Style onglet. Retourner Activer le fond de particules to Yes et le fond de section devient une toile de particules vivantes Le panneau le garde minimal :
- Activer le fond de particules : l'interrupteur marche/arrêt pour l'effet.
- Z-indice : où la couche de particules se trouve dans la pile, elle reste donc derrière le contenu.
- Particule JSON : un champ de code contenant la configuration des particules.js : nombre de particules, couleur, forme, taille, lignes de liaison, vitesse de mouvement et interactivité de survol vivent tous ici.
Une configuration par défaut est livrée dans la boîte, des points blancs reliés par un réseau de lignes subtiles et le panneau est relié directement au générateur de particules.js pour créer le vôtre.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? Suivez le guide d'installation d'abord.
- Particules est une extension libre, donc aucune licence Pro n'est requise.
- Aucun codage nécessaire : le JSON provient d'un générateur pointer-cliquer.
Comment activer l'extension Particules #
Depuis votre tableau de bord WordPress, rendez-vous sur Additions maîtres et ouvrez le Extensions onglet. Les particules se trouvent dans le Widgets d'animation groupe avec un badge Populaire, à côté de Effets Flottants et Gradient animé BG. Cliquez sur sa bascule pour qu'elle devienne violette, puis frappez Enregistrer Modifications et attendez l'avis de” vert “Settings enregistré avec succès.
Trouvez le panneau Particules sur une section #
Sélectionnez le conteneur ou la section dans l'éditeur Elementor et ouvrez le Style onglet. Le Particules la section avec le badge MA violet se trouve avec les autres outils d'arrière-plan Master Addons : fond dégradé animé, Curseur d'arrière-plan& Modèles.
Allumez-le et répondez à l'effet par défaut #
Développez les particules et changez Activer le fond de particules à Oui. Le canevas exécute immédiatement la configuration par défaut : des points blancs dérivant sur la section, reliés par des lignes fines dans un réseau en mouvement. Le Particule JSON le champ ci-dessous contient la configuration qui le pilote, et Z-index garde le calque derrière votre texte.
Prenez un préréglage du générateur de particules.js #
Le Cliquez ici lien au-dessus du champ JSON ouvre le site de démonstration particles.js, un générateur en direct avec des configurations prédéfinies : Par défaut, NASA, Bubble, Snow et Nyan Cat. Choisissez-en un, réglez les curseurs si vous le souhaitez et frappez Télécharger la configuration actuelle (json).
Ouvrez le fichier téléchargé, copiez le JSON et collez-le dans le champ Particle JSON. La démo va avec le préréglage Snow et le canevas passe du réseau de lignes aux flocons blancs mous tombant sur la section au moment où la configuration atterrit.
Le résultat sur la page #
Publier et la section neige toute seule, comme dans le GIF en haut de cette page Les particules s'affichent sur une toile derrière le contenu, donc tout ce qui se trouve en haut reste net pendant que l'arrière-plan continue de bouger Les configs par défaut réagissent également au curseur ; l'effet réseau standard repousse les particules en vol stationnaire.
Une remarque pratique : le nombre de particules détermine les performances Le préréglage Snow exécute 400 particules et reste lisse, mais si une page empile plusieurs sections de particules, gardez le nombre modeste et vérifiez-le sur un téléphone de milieu de gamme.
Où s'adaptent les fonds de particules #
- Sections héros. Le réseau de points connectés lit la technologie et le moderne derrière un titre audacieux.
- Campagnes saisonnières. Le préréglage Snow transforme n'importe quelle section promotionnelle hivernale en une seule pâte.
- SaaS et pages de démarrage. Les particules à dérive lente ajoutent de la profondeur sans détourner l'attention du brai.
- Sections sombres. Les configurations de champ stellaire comme la NASA donnent l’impression que les arrière-plans sombres sont délibérés.
- Pages d'événements et de lancement. Le mouvement derrière un compte à rebours maintient une page clairsemée en vie.
Tutoriel Vidéo #
Regardez toute la configuration, depuis l'activation de l'extension jusqu'à la neige tombant sur la page publiée.
Foire aux questions #
Comment ajouter un fond de particule dans Elementor ?
Activer l'extension Particules dans l'onglet Extensions des addons principaux, sélectionner une section et ouvrir Particules dans l'onglet Style Basculer Activer l'arrière-plan des particules sur Oui et le réseau animé par défaut apparaît immédiatement, aucune configuration requise.
Où puis-je obtenir différents effets de particules ?
Le lien Cliquez ici dans le panneau ouvre le générateur de particules.js avec des préréglages comme NASA, Bubble, Snow et Nyan Cat. Ajustez les paramètres en direct, téléchargez la configuration sous forme JSON et collez-la dans le champ Particle JSON.
Les particules ralentissent-elles la page ?
L'effet fonctionne sur une toile légère et reste fluide à des comptes typiques ; la démo Snow exécute 400 particules sans bégaiement Gardez un nombre raisonnable et évitez d'empiler de nombreuses sections de particules sur une seule page, en particulier pour les visiteurs mobiles.
Les particules peuvent-elles réagir à la souris ?
Oui. La configuration particles.js inclut des paramètres d'interactivité, et la configuration par défaut repousse les particules lorsque le curseur se déplace sur la section Les comportements de survol et de clic sont tous deux configurables dans le JSON.
L'extension Particules est-elle gratuite ?
Oui. Particules est livré avec la version gratuite de Master Addons for Elementor, dans le groupe Animation Widgets de l'onglet Extensions La page de tarification couvre ce que les plans Pro ajoutent.
Envelopper #
L'extension Particules met une toile de particules en direct derrière n'importe quelle section Elementor : une bascule pour le réseau par défaut, une JSON collée pour tout ce que le générateur de particules.js peut imaginer Gardez les comptes sains d'esprit, laissez Z-index maintenir la couche derrière le contenu, et la section se déplace sans un seul téléchargement d'actifs. Elle se trouve naturellement à côté du Fond de dégradé animé et Curseur d'arrière-plan extensions dans le même onglet Style et l'ensemble complet de Widgets et extensions Master Addons est à une page Pour le comparer avec l'ajout de particules.js à la main, voir le Page d'extension des particules.
