Partikelhintergründe fügen animierte, schwebende Formen zu Ihren Elementorabschnitten hinzu, die sich bewegen, verbinden und auf Mausbewegungen reagieren. Sie verwandeln statische Abschnitte in auffällige, interaktive Bereiche, die sofort Aufmerksamkeit erregen.
In diesem Handbuch erfahren Sie, wie Sie mit dem kostenlosen Elementarteilchenhintergrund zu jedem Abschnitt Ihrer Website hinzufügen Partikelverlängerung In Master-Addons für Elementor. Wir behandeln den grundlegenden Aufbau, die Voreinstellungen auf dem Particles.js-Generator (NASA, Bubble, Snow) und wie Sie Ihre eigenen benutzerdefinierten Partikeleffekte mithilfe der Particles.js JSON-Konfiguration erstellen.
Keine Codierung erforderlich Der ganze Vorgang dauert ca. 5 Minuten.
Was ist ein Partikelhintergrund?
Ein Partikelhintergrund ist ein animierter Effekt, der kleine Formen (Punkte, Kreise, Sterne oder benutzerdefinierte Formen) anzeigt, die über einen Abschnitt schweben Diese Partikel bewegen sich mit unterschiedlichen Geschwindigkeiten, verbinden sich mit dünnen Linien, wenn sie nahe beieinander liegen, und können auf Ihren Cursor im Schwebeflug reagieren.
Der Effekt wird angetrieben durch Partikel.jsEine beliebte JavaScript-Bibliothek Master Addons integriert particles.js direkt in Elementor, sodass Sie den Effekt aktivieren und anpassen können, ohne Code zu berühren.
Der Partikel-JS-Generator, der über das Partikelpanel verbunden ist, verfügt über Voreinstellungen, die gute Ausgangspunkte bieten:
| Voreingestellt | Effekt | Am besten für |
|---|---|---|
| Standard | Verbundene Punkte, die in zufällige Richtungen schweben | Tech-Websites, SaaS-Landingpages |
| NASA | Raumartige schwimmende Teilchen mit Tiefenwirkung | Abschnitte zu dunklen Helden, Seiten zum Thema Weltraum |
| Blase | Größere, kreisförmige Blasen steigen nach oben | Kreative Portfolios, verspielte Designs |
| Schnee | Kleine weiße Partikel fallen wie Schneeflocken | Saisonale Seiten, Abschnitte zum Thema Winter |
Sie können auch vollständig benutzerdefinierte Effekte erstellen, indem Sie Ihre eigene Particles.js JSON-Konfiguration generieren.
Was Sie brauchen werden
- WordPress Mit Elementor (kostenlos oder Pro) installiert
- Master-Addons für Elementor Installiert und aktiviert
- Die Partikel Erweiterung in den Master Addons-Einstellungen aktiviert
Stellen Sie sicher, dass die Partikelverlängerung eingeschaltet ist: Gehen Sie zu Master-Addons → Erweiterungen In Ihrem WordPress-Dashboard und schalten Sie um Partikel AN.
So fügen Sie Partikelhintergrund in Elementor hinzu: Schritt für Schritt
Befolgen Sie diese Schritte, um einem Elementorabschnitt oder -container auf Ihrer Seite einen Partikelhintergrund hinzuzufügen.
Schritt 1: Erstellen oder Wählen Sie einen Abschnitt aus
Öffnen Sie Ihre Seite im Elementor-Editor Erstellen Sie einen neuen Abschnitt oder wählen Sie einen vorhandenen aus, in dem Sie den Partikeleffekt hinzufügen möchten.
Wählen Sie Ihre bevorzugte Säulenstruktur Der Partikeleffekt funktioniert mit jedem Layout, egal ob es sich um eine einzelne Spalte, zwei Spalten oder mehr handelt.
Schritt 2: Fügen Sie Inhalte zum Abschnitt hinzu
Ihr Abschnitt benötigt mindestens ein Widget darin, um in der Vorschau sichtbar zu sein. Wenn Sie einen eigenständigen Partikelbereich erstellen (z. B. einen animierten Heldenbereich), lassen Sie einen fallen Abstandhalter Widget in den Abschnitt und stellen Sie die Höhe auf 400-600 px.
Sie können auch Überschriften, Schaltflächen, Bilder oder andere Widgets hinzufügen. Die Partikel werden hinter all Ihren Inhalten angezeigt.
Schritt 3: Stellen Sie den Abschnitt auf die volle Breite ein (optional)
Für die beste visuelle Wirkung stellen Sie das Schnittlayout auf ein Volle Breite. Dadurch erstrecken sich die Partikel über die gesamte Browserbreite.
Klicken Sie auf das Bearbeitungssymbol des Abschnitts, gehen Sie zu der Layout Tabulator und Set Inhaltsbreite zu Volle Breite.
Dieser Schritt ist optional Partikel funktionieren auch in Abschnitten mit Boxed-Breite.
Schritt 4: Fügen Sie eine Hintergrundfarbe hinzu
Dieser Schritt ist wichtig Partikel sind standardmäßig weiß, daher benötigen Sie einen dunklen oder farbigen Hintergrund, um sie sichtbar zu machen.
Klicken Sie auf das Bearbeitungssymbol des Abschnitts, gehen Sie zu der Stil Tab, und unter Hintergrund, eine einfarbige Farbe oder einen Farbverlauf einstellen Dunkle Blaue, Schwarze und tiefe Lila arbeiten am besten mit den standardmäßigen weißen Partikeln.
Tipp: Für einen dynamischeren Look versuchen Sie es mit der Hintergrunderweiterung für animierte Gradienten (Pro) von Master Addons statt einer einfarbigen Farbverlaufshintergründe in Kombination mit Partikeln erzeugen einen atemberaubenden visuellen Effekt.
Schritt 5: Aktivieren Sie den Partikeleffekt
Nun zum Hauptteil Mit dem gewählten Abschnitt bleiben Sie auf der Stil Tab und scrollen Sie nach unten zum Partikel Abschnitt mit dem MA-Abzeichen Schalter Aktivieren Sie den Partikelhintergrund Auf.
Der Standard-Elementor-Partikeleffekt wird sofort in Ihrem Abschnitt angezeigt. Sie sehen kleine weiße Punkte, die schweben und sich mit dünnen Linien verbinden.
Wenn der Default-Effekt für dein Design gut aussieht, bist du fertig Hit Aktualisieren Sparen Aber wenn Sie den Partikelstil anpassen möchten, lesen Sie weiter.
So passen Sie Ihren Elementarteilcheneffekt an
Sie passen die Partikel mit dem freien Partikel-JS-Generator an, einem visuellen Konfigurator, der vom Panel aus verknüpft ist. Sie können die Anzahl der Partikel, ihre Form, Größe, Geschwindigkeit, Farbe und ihr Bewegungsverhalten ändern, alles ohne Code zu schreiben.
Schritt 1: Öffnen Sie den Partikelkonfigurator
Unterhalb des Partikel-Kipphebels sehen Sie eine Meldung: “Klicken Sie hier, um JSON für das folgende Feld zu generieren.” Klicken Sie auf den Link, um den visuellen Konfigurator von particles.js zu öffnen.
Klicken Sie oben im Konfigurator auf “Standard” Um die Voreinstellungen anzuzeigen: Standard, NASA, Bubble, Snow und Nyan Cat. Wählen Sie eine beliebige Voreinstellung als Ausgangspunkt aus oder beginnen Sie mit der Standardkonfiguration.
Schritt 2: Passen Sie die Partikeleigenschaften an
Der Konfigurator hat drei Hauptabschnitte Konzentrieren Sie sich auf die Partikel Abschnitt für visuelle Anpassung:
- Nummer „Höhere Werte erscheinen. Höhere Partikel erzeugen einen dichteren Effekt, verwenden jedoch mehr Browserressourcen.
- Farbe „Die Partikelfarbe verwenden Sie Weiß für dunkle Hintergründe oder passen Sie die Farben Ihrer Marke an.
- Form „Wählen Sie Kreis-, Kanten- (Quadrat-), Dreiecks-, Polygon- oder Sternformen.
- Größe „Die Partikelgröße wird zufällig aktiviert. Aktivieren Sie eine natürlichere Optik.
- Opazität Durchsichtigkeit erzeugt Teilopazität einen dezenten, eleganten Effekt.
- Linie verknüpft „Die Verbindungsleitungen zwischen nahegelegenen Partikeln können deaktiviert werden.
- Bewegung „Die Geschwindigkeit und Richtung der Partikelbewegung.
Schritt 3: Laden Sie Ihre Konfiguration herunter
Wenn Sie mit dem Aussehen der Partikel in der Live-Vorschau zufrieden sind, scrollen Sie zum unteren Rand des Konfigurators und klicken Sie “Download Current Config (JSON)”.
Eine Datei namens particlesjs-config.json Computer heruntergeladen werden.
Schritt 4: Kopieren Sie den JSON-Code
Öffnen Sie die heruntergeladene particlesjs-config.json Datei in einem beliebigen Texteditor (Notepad, VS Code, oder TextEdit) Wählen Sie den gesamten Code aus und kopieren Sie ihn.
Bearbeiten Sie das JSON nicht manuell, es sei denn, Sie wissen, was Sie tun Der visuelle Konfigurator hat bereits die genauen Einstellungen generiert, die Sie benötigen.
Schritt 5: In Elementor einfügen
Gehen Sie zurück zu Ihrem Elementor-Editor. In den Abschnitten Stil Tab, öffnen Partikel und finden die Partikel JSON Feld. Fügen Sie den von Ihnen kopierten Code ein und klicken Sie Aktualisieren.
Ihr benutzerdefinierter Partikel-Effekt ist jetzt live auf der Seite Vorschau, um zu bestätigen, dass alles richtig aussieht.
Kreative Möglichkeiten, Partikelhintergründe zu verwenden
Hier sind einige praktische Anwendungsfälle für den elementar animierten Hintergrund mit Partikeln:
- Heldenabschnitte „Partikel zu Ihrem Homepage-Helden für einen technisch-vorwärts gerichteten, modernen Look. Kombinieren Sie sie mit einer Überschrift, einem Subtext und einer CTA-Taste.
- Preisabschnitte „Um den Rest der Seite von einem subtilen Partikeleffekt mit geringer Dichte hinter Ihrer Preistabelle abzuheben, können Sie ihn aus dem Rest der Seite hervorheben.
- Zeugnisbereiche „Ein sanfter Schnee- oder Blaseneffekt hinter den Erfahrungsberichten sorgt für visuelles Interesse.
- Fußteilchen „Eine polierte, fertige Optik am unteren Rand der Seite wird mit Partikeln auf Ihrer Fußzeile versehen.
- Demnächst Seiten Schaffen Sie Bewegung auf einem statischen, einseitigen Layout. Schauen Sie sich unseren Leitfaden zum Erstellen eines an Elementor kommt bald Seite.
- Call-to-action-abschnitte „Auf Ihr CTA achten, indem Sie es auf einen Abschnitt mit animierten Partikeln legen.
Leistungstipps für Partikel
Particle-Effekte laufen im Browser des Besuchers per JavaScript, Damit Ihre Seite schnell bleibt:
- Grenzpartikelzahl. Für einen guten optischen Effekt reichen meist 40-80 Partikel, über 150 zu gehen kann ältere Geräte bremsen.
- Verwenden Sie Partikel in 1-2 Abschnitten pro Seite. Fügen Sie nicht jedem Abschnitt Partikel hinzu. Der Effekt verliert seine Wirkung, wenn er überbeansprucht wird, und erhöht den Verarbeitungsaufwand.
- Test auf Mobilgeräten. Partikeleffekte können den Akku von Telefonen belasten. Erwägen Sie, die Partikelzahl zu reduzieren oder den Effekt auf Mobiltelefonen mithilfe der responsiven Sichtbarkeitseinstellungen von Elementor zu deaktivieren.
- Vermeiden Sie Partikel auf inhaltslastigen Seiten. Lange Blogbeiträge und Dokumentationsseiten brauchen keine animierten Hintergründe Speichern Sie Partikel für Landingpages und Schlüsselabschnitte.
Für weitere Leistungstipps lesen Sie unseren Leitfaden auf So beschleunigen Sie Elementor-Websites.
Andere Elementor-Hintergrundeffekte
Partikel sind nur einer von mehreren Elementor-Hintergrundeffekten, die in Master-Addons verfügbar sind Schauen Sie sich diese zugehörigen Erweiterungen an:
- Hintergrund des animierten Gradienten (Pro): glatte Farbverläufe, die sich kontinuierlich verschieben
- Hintergrundschieber: Zyklen durch mehrere Hintergrundbilder mit Übergangseffekten
- Rellax (Parallax) (Pro): Parallaxenscrollen für ein Gefühl von Tiefe
- Enthüllen (Pro): Animationen aufdecken, wenn Abschnitte in Sicht scrollen
All dies ist enthalten in Die 80+ Widgets und Erweiterungen von Master Addons.
Häufig gestellte Fragen
Ist der Partikeleffekt in Master Addons frei?
Ja. Die Partikelverlängerung Frei ist, einschließlich des Particle JSON-Feldes, so dass Sie jede Konfiguration aus dem particles.js-Generator ohne Pro-Lizenz einfügen können.
Funktionieren Partikel mit Elementorbehältern?
Ja. Die Particles-Erweiterung von Master Addons funktioniert sowohl mit den älteren Elementor-Abschnitten als auch mit den neueren Flexbox-Containern Aktivieren Sie es auf die gleiche Weise über die Registerkarte Stil eines beliebigen Containers.
Werden Partikel meine Website verlangsamen?
Partikel laufen im Browser mit JavaScript, sodass sie auf Client-Seite etwas Verarbeitungs-Overhead hinzufügen Mit 40-80 Partikeln ist der Einfluss auf moderne Geräte minimal Vermeiden Sie die Verwendung von mehr als 150 Partikeln oder das Hinzufügen des Effekts zu mehreren Abschnitten auf derselben Seite Die particles-js-Bibliothek ist leicht (etwa 25 KB), sodass die Auswirkung auf die Dateigröße auf die Seitenlast vernachlässigbar ist.
Kann ich die Partikelfarbe passend zu meiner Marke ändern?
Ja. Verwenden Sie den visuellen Konfigurator particles.js (verlinkt mit den Erweiterungseinstellungen), um Partikelfarbe, Form, Größe, Geschwindigkeit, Opazität und mehr zu ändern. Sie können jeden Hex-Farbwert für die Partikel und die Verbindungslinien unabhängig einstellen.
Wie deaktiviere ich Partikel auf Mobilgeräten?
Sie können die integrierten responsiven Sichtbarkeitseinstellungen von Elementor verwenden, um den Partikelbereich auf mobilen Geräten auszublenden Alternativ erstellen Sie einen separaten mobiloptimierten Abschnitt ohne Partikel Dies spart Batterie und Rechenleistung auf Telefonen und Tablets.
Beginnen Sie mit dem Hinzufügen von Partikeln zu Ihrer Elementor-Site
Das Hinzufügen eines Elementarteilchenhintergrunds erfordert mit Master Addons nur wenige Klicks. Beginnen Sie mit einem Generator, der wie NASA, Bubble oder Snow für einen schnellen Aufbau voreingestellt ist, oder erstellen Sie Ihren eigenen benutzerdefinierten Effekt mit dem Partikel-JS-Konfigurator für die vollständige Steuerung.
Der Schlüssel liegt darin, Teilchen strategisch einzusetzen Wählen Sie den einen oder anderen Abschnitt mit hoher Wirkung, wählen Sie einen dunklen Hintergrund und halten Sie die Teilchenzahl angemessen. Das ist alles, was nötig ist, um eine statische Seite in etwas zu verwandeln, das sich lebendig anfühlt.
Bereit, es auszuprobieren? Master Addons für Elementor herunterladen und fügen Sie Ihren ersten Partikelhintergrund in weniger als 5 Minuten hinzu.
