Manche Hintergründe sitzen still, manche treiben Schwebende Punkte, die durch dünne Linien verbunden sind, oder Schnee, der hinter eine Schlagzeile fällt: Partikeleffekte geben einem Abschnitt leise Bewegung, ohne dass eine Videodatei in Sicht ist Die freie Partikelverlängerung In Master-Addons für Elementor Rendert genau das hinter Ihren Inhalten, unterstützt von der bekannten particles.js-Bibliothek und konfiguriert mit einem einzigen JSON-Feld.
Hier ist der Demo-Bereich, in dem die Snow-Voreinstellung auf der veröffentlichten Seite ausgeführt wird:
Was die Particles-Erweiterung bewirkt #
Sobald diese Option aktiviert ist, erhalten Abschnitte, Spalten und Container eine Partikel Panel in ihrem Stil Tab. Flip Aktivieren Sie den Partikelhintergrund zu Ja und der Abschnittshintergrund wird zu einer Live-Partikel-Leinwand Das Panel hält es minimal:
- Partikelhintergrund aktivieren: Der Ein-/Ausschalter für den Effekt.
- Z-index: Wo die Partikelschicht im Stapel sitzt, so bleibt sie hinter dem Inhalt.
- Partikel JSON: Ein Codefeld, das die Partikel-JS-Konfiguration enthält: Partikelanzahl, Farbe, Form, Größe, Verbindungslinien, Bewegungsgeschwindigkeit und Schwebe-Interaktivität leben hier.
Eine Standardkonfiguration wird in der Box geliefert, weiße Punkte werden durch ein subtiles Liniennetzwerk verbunden und das Panel wird direkt mit dem Partikel-JS-Generator verknüpft, um einen eigenen zu erstellen.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? folgen Sie dem Installationsführung Zuerst.
- Particles ist eine kostenlose Erweiterung, daher ist keine Pro-Lizenz erforderlich.
- Keine Codierung erforderlich: Der JSON stammt von einem Point-and-Click-Generator.
So aktivieren Sie die Particles-Erweiterung #
Gehen Sie von Ihrem WordPress-Dashboard aus zu Master Addons Und öffnen Sie die Erweiterungen Tab. Partikel sitzen in der Animations-widgets Gruppe mit einem beliebten Abzeichen, neben schwebenden Effekten und Animierter Gradient BG. Klicken Sie auf den Knebel, damit er violett wird, und schlagen Sie dann Änderungen speichern und warten auf den grünen Hinweis “Einstellungen erfolgreich gespeichert”.
Finden Sie das Partikelpanel in einem Abschnitt #
Wählen Sie den Container oder Abschnitt im Elementor-Editor aus und öffnen Sie den Stil Tab. Die Partikel Abschnitt mit dem lila MA-Abzeichen steht mit den anderen Master Addons Hintergrundwerkzeugen: Animierter Gradient Hintergrund, Hintergrundschieberund Muster.
Schalten Sie es ein und erfüllen Sie den Standardeffekt #
Erweitern Sie Partikel und schalten Sie um Aktivieren Sie den Partikelhintergrund Zu Ja. Die Leinwand führt sofort die Standardkonfiguration aus: Weiße Punkte driften über den Abschnitt, verbunden durch dünne Linien in ein bewegliches Netzwerk Die Partikel JSON Das Feld unten enthält die Konfiguration, die es steuert, und Z-index Behält die Ebene hinter Ihrem Text.
Schnappen Sie sich eine Voreinstellung vom Partikel-JS-Generator #
Die Hier klicken Link über dem JSON-Feld öffnet die particles.js-Demo-Site, einen Live-Generator mit voreingestellten Konfigurationen: Standard, NASA, Bubble, Snow und Nyan CatWählen Sie einen aus, stimmen Sie die Schieberegler, wenn Sie möchten, und schlagen Sie Aktuelle Config herunterladen (json).
Öffnen Sie die heruntergeladene Datei, kopieren Sie die JSON und fügen Sie sie in das Particle JSON-Feld ein. Die Demo wird mit der Snow-Voreinstellung fortgesetzt und die Leinwand wechselt vom Leitungsnetzwerk zu weichen weißen Flocken, die über den Abschnitt fallen, sobald die Konfiguration landet.
Das Ergebnis auf der Seite #
Veröffentlichen und der Abschnitt schneit von alleine, wie im GIF oben auf dieser Seite Die Partikel rendern auf einer Leinwand hinter dem Inhalt, so bleibt alles oben knackig, während der Hintergrund sich weiterbewegt Die Standard-Configs reagieren auch auf den Cursor; der Standard-Netzeffekt stößt Partikel im Hover ab.
Ein praktischer Hinweis: Partikelanzahl treibt Leistung an Die Snow-Voreinstellung läuft mit 400 Partikeln und bleibt glatt, aber wenn eine Seite mehrere Partikelabschnitte stapelt, halten Sie die Zählungen bescheiden und überprüfen Sie sie auf einem Mittelklasse-Telefon.
Wo Partikelhintergründe passen #
- Heldensektionen. Das Netzwerk der verbundenen Punkte liest Technik und Moderne hinter einer kühnen Schlagzeile.
- Saisonale Kampagnen. Die Snow-Voreinstellung macht jeden Promo-Bereich winterlich in einer Paste.
- SaaS - und Startup-Seiten. Langsam treibende Partikel sorgen für mehr Tiefe, ohne von der Tonhöhe abzulenken.
- Dunkle Abschnitte. Star-Field-Konfigurationen wie die NASA geben dunklen Hintergründen das Gefühl, bewusst zu sein.
- Veranstaltungs - und Startseiten. Bewegung hinter einem Countdown hält eine spärliche Seite am Leben.
Video-Tutorial #
Beobachten Sie das gesamte Setup, von der Aktivierung der Erweiterung bis zum Schneefall auf der veröffentlichten Seite.
Häufig gestellte Fragen #
Wie füge ich einen Partikelhintergrund in Elementor hinzu?
Aktivieren Sie die Particles-Erweiterung im Reiter Master Addons Extensions, wählen Sie einen Abschnitt aus und öffnen Sie Particles im Reiter Stil Schalten Sie Particle Background auf Ja ein und das standardmäßige animierte Netzwerk wird sofort angezeigt, keine Konfiguration erforderlich.
Woher bekomme ich verschiedene Partikeleffekte?
Der Link Hier klicken im Panel öffnet den particles.js-Generator mit Voreinstellungen wie NASA, Bubble, Snow und Nyan Cat. Passen Sie die Einstellungen live an, laden Sie die Konfiguration als JSON herunter und fügen Sie sie in das Particle JSON-Feld ein.
Verlangsamen Partikel die Seite?
Der Effekt läuft auf einer leichten Leinwand und bleibt bei typischen Zählungen glatt; die Snow-Demo läuft 400 Partikel ohne Stottern Halten Sie die Zählungen angemessen und vermeiden Sie das Stapeln vieler Partikelabschnitte auf einer Seite, insbesondere für mobile Besucher.
Können die Partikel auf die Maus reagieren?
Ja. Die particles.js-Konfiguration enthält Interaktivitätseinstellungen, und die Standardkonfiguration repulst Partikel ab, wenn sich der Cursor über den Abschnitt bewegt Hover - und Klickverhalten sind beide im JSON konfigurierbar.
Ist die Particles-Erweiterung kostenlos?
Ja. Particles wird mit der kostenlosen Version von Master Addons for Elementor ausgeliefert, in der Gruppe Animation Widgets des Reiters Erweiterungen Die Preisseite behandelt, was die Pro-Pläne hinzufügen.
Einwickelnd #
Die Particles-Erweiterung platziert eine Live-Partikel-Leinwand hinter jedem Elementorabschnitt: einen Umschalter für das Standardnetzwerk, einen eingefügten JSON für alles, was sich der Particles-Js-Generator ausdenken kann. Halten Sie die Zählungen bei klarem Verstand, lassen Sie den Z-Index die Ebene hinter dem Inhalt halten, und der Abschnitt bewegt sich ohne einen einzigen Asset-Upload. Er sitzt natürlich neben dem Hintergrund des animierten Gradienten und Hintergrundschieber Erweiterungen im selben Style-Tab und der vollständige Satz von Master Addons Widgets und Erweiterungen Ist eine Seite entfernt Zum Vergleich mit dem Hinzufügen von Partikeln.js von Hand siehe die Seite zur Partikelerweiterung.
