Les arrière-plans de particules ajoutent des formes animées et flottantes à vos sections Elementor qui se déplacent, se connectent et réagissent au mouvement de la souris Ils transforment les sections statiques en zones interactives accrocheuses qui attirent instantanément l'attention.
Dans ce guide, vous apprendrez à ajouter un arrière-plan de particules Elementor à n'importe quelle section de votre site Web en utilisant le gratuit Extension particulaire dans Modules complémentaires principaux pour Elementor. Nous allons couvrir la configuration de base, les préréglages sur le générateur de particules.js (NASA, Bubble, Snow), et comment créer vos propres effets de particules personnalisés en utilisant la configuration de particules.js JSON.
Aucun codage requis L'ensemble du processus prend environ 5 minutes.
Qu’est-ce qu’un fond de particules ?
Un fond de particules est un effet animé qui affiche de petites formes (points, cercles, étoiles ou formes personnalisées) flottant sur une section Ces particules se déplacent à différentes vitesses, se connectent avec des lignes fines lorsqu'elles sont proches les unes des autres et peuvent réagir à votre curseur en vol stationnaire.
L'effet est alimenté par particules.js[traduction], une bibliothèque JavaScript populaire Master Addons intègre des particules.js directement dans Elementor, de sorte que vous pouvez activer et personnaliser l'effet sans toucher à aucun code.
Le générateur de particules.js, lié à partir du panneau Particules, a des préréglages qui constituent de bons points de départ :
| Préréglé | Effet | Meilleur Pour |
|---|---|---|
| Défaut | Points connectés flottant dans des directions aléatoires | Sites Web technologiques, pages de destination SaaS |
| NASA | Particules flottantes de type spatial avec effet de profondeur | Sections de héros sombres, pages sur le thème de l'espace |
| Bulle | Des bulles circulaires plus grosses s’élèvent vers le haut | Portfolios créatifs, designs ludiques |
| Neige | Petites particules blanches tombant comme des flocons de neige | Pages saisonnières, sections sur le thème de l'hiver |
Vous pouvez également créer des effets entièrement personnalisés en générant votre propre configuration particles.js JSON.
Ce dont vous aurez besoin
- WordPress avec Élémenteur (gratuit ou Pro) installé
- Modules complémentaires principaux pour Elementor installé et activé
- Le Particules extension activée dans les paramètres de Master Addons
Assurez-vous que l'extension Particules est activée : allez à Additions principales → Extensions dans votre tableau de bord WordPress et basculez Particules à ON.
Comment ajouter des particules en arrière-plan dans l'élémenteur : étape par étape
Suivez ces étapes pour ajouter un arrière-plan de particules à n'importe quelle section ou conteneur Elementor sur votre page.
Étape 1 : Créer ou sélectionner une section
Ouvrez votre page dans l'éditeur Elementor Créez une nouvelle section ou sélectionnez une existante où vous souhaitez ajouter l'effet particulaire.
Choisissez votre structure de colonne préférée L'effet particules fonctionne avec n'importe quelle disposition, qu'il s'agisse d'une seule colonne, de deux colonnes ou plus.
Étape 2 : Ajouter du contenu à la section
Votre section a besoin d'au moins un widget à l'intérieur pour être visible dans l'aperçu Si vous créez une section de particules autonome (comme une zone de héros animée), déposez un Espaceur widget dans la section et réglez la hauteur à 400-600px.
Vous pouvez également ajouter des titres, des boutons, des images ou tout autre widget Les particules apparaîtront derrière tout votre contenu.
Étape 3 : Réglez la section sur la pleine largeur (en option)
Pour un meilleur impact visuel, définissez la disposition des sections sur Largeur complète. Cela fait que les particules couvrent toute la largeur du navigateur.
Cliquez sur l'icône d'édition de la section, allez au Disposition onglet et ensemble Largeur du contenu à Largeur complète.
Cette étape est facultative Les particules fonctionnent également en sections de largeur encadrée.
Étape 4 : Ajoutez une couleur d’arrière-plan
Cette étape est importante Les particules sont blanches par défaut, vous avez donc besoin d'un fond sombre ou coloré pour les rendre visibles.
Cliquez sur l'icône d'édition de la section, allez au Style onglet, et sous Contexte[traduction], définissez une couleur unie ou un dégradé Les bleus foncés, les noirs et les violets profonds fonctionnent mieux avec les particules blanches par défaut.
Conseil : Pour un look plus dynamique, essayez d'utiliser le Extension d'arrière-plan de gradient animé (Pro) de Master Addons au lieu d'une couleur unie Les fonds dégradés combinés à des particules créent un effet visuel époustouflant.
Étape 5 : Activer l'effet des particules
Maintenant pour la partie principale Avec la section sélectionnée, restez sur la Style tabulation et défilement jusqu'au Particules section avec le badge MA. Commuter Activer le fond de particules sur.
L'effet élément ou particule par défaut apparaîtra immédiatement dans votre section Vous verrez de petits points blancs flotter et se connecter avec des lignes fines.
Si l'effet par défaut semble bon pour votre conception, vous avez terminé. Frapper Mise à jour pour enregistrer. Mais si vous souhaitez personnaliser le style des particules, continuez à lire.
Comment personnaliser votre effet de particules d'élément
Vous personnalisez les particules avec le générateur.js de particules libres, un configurateur visuel lié à partir du panneau Vous pouvez modifier le nombre de particules, leur forme, leur taille, leur vitesse, leur couleur et leur comportement de mouvement, le tout sans écrire de code.
Étape 1 : Ouvrez le configurateur de particules
Sous les particules basculent, vous verrez un message : “Cliquez ici pour générer JSON pour le champ ci-dessous.” Cliquez sur le lien pour ouvrir le configurateur visuel particles.js.
En haut du configurateur, cliquez sur “Default” pour voir les préréglages : Par défaut, NASA, Bubble, Snow et Nyan Cat. Sélectionnez n'importe quel préréglage comme point de départ ou démarrez à partir de la configuration par défaut.
Étape 2 : Ajustez les propriétés des particules
Le configurateur comporte trois sections principales Focus sur le Particules section pour la personnalisation visuelle :
- Numéro [TRADUCTION] ?Contrôles du nombre de particules qui apparaissent Des valeurs plus élevées créent un effet plus dense, mais utilisent davantage de ressources de navigateur.
- Couleur ^ La couleur des particules. Utilisez le blanc pour les arrière-plans sombres ou correspondez aux couleurs de votre marque.
- Forme « Choisissez parmi des formes de cercle, d'arête (carré), de triangle, de polygone ou d'étoile ».
- Taille [TRADUCTION] Activer la taille de particule.
- Opacité 15 Transparence partielle crée un effet subtil et élégant.
- Ligne Liée 10044 (100 000) ou désactivez les lignes de connexion entre les particules proches.
- Mouvement 1000 100 100 100 100 1994 1994 1994 1994 1994 1994 1994 199
Étape 3 : Téléchargez votre configuration
Une fois que vous êtes satisfait de l'apparence des particules dans l'aperçu en direct, faites défiler vers le bas du configurateur et cliquez “Télécharger Current Config (JSON)”.
Un fichier nommé particlesjs-config.json téléchargera sur votre ordinateur.
Étape 4 : Copiez le code JSON
Ouvrir le téléchargé particlesjs-config.json fichier dans n'importe quel éditeur de texte (Notepad, VS Code ou TextEdit).Sélectionnez tout le code et copiez-le.
Ne modifiez pas le JSON manuellement à moins de savoir ce que vous faites Le configurateur visuel a déjà généré les paramètres exacts dont vous avez besoin.
Étape 5 : Collez dans l'élémenteur
Retournez à votre éditeur Elementor. Dans la section Style onglet, ouvrez Particules et trouver le Particule JSON champ. Collez le code que vous avez copié et cliquez Mise à jour.
Votre effet de particules personnalisées est maintenant en ligne sur la page. Prévisualisez-le pour confirmer que tout semble bien.
Façons créatives d'utiliser les arrière-plans de particules
Voici quelques cas d'utilisation pratiques pour l'élément ou fond animé avec des particules :
- Sections héros « Ajoutez des particules à votre héros de page d'accueil pour un look technologique et moderne. Combinez avec un titre, un sous-texte et un bouton CTA ».
- Rubriques tarifaires « Utilisez un effet de particule subtil et faible densité derrière votre tableau de tarification pour le faire se démarquer du reste de la page ».
- Zones de témoignage « Une douce neige ou un effet de bulle derrière les témoignages ajoute un intérêt visuel sans détourner l'attention du contenu ».
- Sections de pieds « Ajoutez des particules à votre pied de page pour un regard poli et terminé en bas de page ».
- Bientôt pages Les particules créent un mouvement sur ce qui serait autrement une mise en page statique d'une seule page Consultez notre guide sur la création d'un Elementor à venir bientôt page.
- Sections d'appel à l'action 10000000000000000000000000000000000000000000000
Conseils de performance pour les particules
Les effets de particules s'exécutent sur le navigateur du visiteur à l'aide de JavaScript. Pour que votre site reste rapide :
- Nombre limite de particules. 40-80 particules suffisent généralement pour un bon effet visuel Aller au-dessus de 150 peut ralentir les appareils plus anciens.
- Utilisez des particules sur 1 à 2 sections par page. N'ajoutez pas de particules à chaque section L'effet perd son impact lorsqu'il est surutilisé, et il ajoute une surcharge de traitement.
- Test sur mobile. Les effets de particules peuvent drainer la batterie sur les téléphones Envisagez de réduire le nombre de particules ou de désactiver l'effet sur mobile en utilisant les paramètres de visibilité réactive d'Elementor.
- Évitez les particules sur les pages riches en contenu. Les longs articles de blog et les pages de documentation n'ont pas besoin d'arrière-plans animés Enregistrez les particules pour les pages de destination et les sections clés.
Pour plus de conseils de performance, lisez notre guide sur comment accélérer les sites Web Elementor.
Autres effets de fond de l'élémenteur
Les particules ne sont que l'un des nombreux effets de fond Elementor disponibles dans les modules complémentaires principaux. Découvrez ces extensions associées :
- Fond de dégradé animé (Pro) : gradients de couleur lisses qui se déplacent continuellement
- Curseur d'arrière-plan: parcourt plusieurs images d'arrière-plan avec des effets de transition
- Rellax (Parallaxe) (Pro) : défilement de parallaxe pour une sensation de profondeur
- Révéler (Pro) : révéler des animations lorsque les sections défilent en vue
Tous ces éléments sont inclus dans Les plus de 80 widgets et extensions de Master Addons.
Foire aux questions
L'effet de fond des particules est-il gratuit dans Master Addons ?
Oui. Le Extension particulaire est gratuit, y compris le champ Particle JSON, vous pouvez donc coller n'importe quelle configuration du générateur de particules.js sans licence Pro.
Les particules fonctionnent-elles avec les conteneurs Elementor ?
Oui. L'extension Particules de Master Addons fonctionne à la fois avec les anciennes sections Elementor et les nouveaux conteneurs Flexbox Activez-le de la même manière depuis l'onglet Style de n'importe quel conteneur.
Les particules vont-elles ralentir mon site Web ?
Les particules s'exécutent dans le navigateur à l'aide de JavaScript, elles ajoutent donc une certaine surcharge de traitement côté client Avec 40 à 80 particules, l'impact est minime sur les appareils modernes Évitez d'utiliser plus de 150 particules ou d'ajouter l'effet à plusieurs sections sur la même page La bibliothèque particles.js est légère (environ 25 Ko), donc l'impact de la taille du fichier sur la charge de la page est négligeable.
Puis-je changer la couleur des particules pour correspondre à ma marque ?
Oui. Utilisez le configurateur visuel particles.js (lié à partir des paramètres d'extension) pour modifier la couleur, la forme, la taille, la vitesse, l'opacité des particules, etc. Vous pouvez définir n'importe quelle valeur de couleur hexagonale pour les particules et les lignes de connexion indépendamment.
Comment désactiver les particules sur mobile ?
Vous pouvez utiliser les paramètres de visibilité réactive intégrés d'Elementor pour masquer la section particules sur les appareils mobiles. Alternativement, créez une section distincte optimisée pour les mobiles sans particules. Cela permet d'économiser de la batterie et de l'énergie de traitement sur les téléphones et les tablettes.
Commencez à ajouter des particules à votre site d'élément
L'ajout d'un fond de particules d'élément ou d'élément prend seulement quelques clics avec des modules complémentaires principaux Partez d'un préréglage de générateur comme NASA, Bubble ou Snow pour une configuration rapide, ou créez votre propre effet personnalisé avec le configurateur particles.js pour un contrôle total.
La clé est d'utiliser les particules de manière stratégique Choisissez une ou deux sections à fort impact, choisissez un fond sombre et gardez le nombre de particules raisonnable C'est tout ce qu'il faut pour transformer une page statique en quelque chose qui semble vivant.
Prêt à l'essayer ? Téléchargez les modules complémentaires principaux pour Elementor et ajoutez votre fond de premières particules en moins de 5 minutes.
