So fügen Sie einen Partikelhintergrund zu WordPress hinzu (kein Code erforderlich) 

Sie haben eine Portfolio-Website oder einen Heldenabschnitt, der flach aussieht, und möchten etwas visuelle Tiefe hinzufügen, ohne die gesamte Seite neu zu erstellen. Ein Partikelhintergrund, diese langsam bewegten Punkte und Verbindungslinien hinter Ihren Inhalten, ist eine der schnellsten Möglichkeiten, dies zu tun.

In dieser Anleitung zeige ich Ihnen, wie Sie mit einem Plugin einen Partikelhintergrund in WordPress hinzufügen, ganz ohne Code. Sie erfahren auch, wie Sie die Partikel an Ihren eigenen Stil anpassen und Ihre Website schnell und mobilfreundlich halten.

Was ist ein Partikelhintergrund?

Ein Partikelhintergrund ist eine animierte Sammlung von sich bewegenden Elementen, die hinter Ihren Website-Inhalten angezeigt werden. Diese Partikel können sich bewegen, die Farbe ändern und auf Benutzerinteraktionen reagieren.

Die meisten Partikelhintergründe werden von particle.js, einer leichtgewichtigen JavaScript-Bibliothek, angetrieben. Sie können die Partikelformen, -farben, -größen und -bewegungen anpassen, ohne Ihre Hauptinhalte zu beeinträchtigen.

Eine Sache, die es wert ist zu wissen: Die ursprüngliche particle.js-Bibliothek wird nicht mehr aktiv entwickelt und wird jetzt als tsParticles gepflegt. Wenn Sie SeedProd oder das Particle Background WP-Plugin verwenden, kümmert sich die Integration darum. Wenn Sie eine benutzerdefinierte Konfiguration von Grund auf neu erstellen möchten, finden Sie das aktive Tool unter tsparticles.js.org.

Hier ist ein Beispiel für einen Partikelhintergrund in Aktion:

Warum Partikelhintergründe in WordPress verwenden?

Partikelhintergründe verleihen Ihrer Website ein dynamisches, interaktives Gefühl und helfen, die Aufmerksamkeit auf wichtige Abschnitte zu lenken. Der Trick besteht darin, den Effekt an die Art Ihrer Website anzupassen.

Hier sind vier Anwendungsfälle, bei denen ein Partikelhintergrund seinen Platz verdient:

• Portfolio-Websites: Eine dezente Polygon-Animation im Heldenabschnitt zeigt Kreativität, ohne von der Arbeit abzulenken.
• Tech- und SaaS-Landingpages: Verbindungslinien-Partikel signalisieren eine moderne, datenorientierte Marke.
• Saisonale Aktionen: Schneepartikel für Feiertagsangebote oder schwebende Formen für einen Frühlings-Launch.
• Demnächst-Seiten: Eine Partikelanimation hält die Seite visuell lebendig, während Ihre Inhalte noch in der Entwicklung sind.

Bei letzterem greife ich am häufigsten zu diesem Effekt. Demnächst-Seiten sind die stärkste Funktion von SeedProd im kostenlosen Tarif, und ein Partikelhintergrund verleiht einer ansonsten leeren Platzhalterseite etwas zum Anschauen.

Wie füge ich Particle.js-Hintergründe zu meiner WordPress-Website hinzu?

Es gibt verschiedene Möglichkeiten, Partikelhintergründe zu Ihrer WordPress-Website hinzuzufügen, auch wenn Sie Anfänger sind.

Zuerst können Sie ein WordPress particle.js-Plugin oder einen WordPress Page Builder mit integrierten Partikeleffekt-Funktionen verwenden. Ich empfehle diese Option für Anfänger, da sie normalerweise keine Programmierkenntnisse oder technischen Fähigkeiten erfordert.

Eine andere Möglichkeit ist die Verwendung eines WordPress-Themes, das particle.js enthält. Dies ist praktisch, wenn Sie eine neue Website starten und noch ein Theme benötigen.

Die letzte Option ist die Verwendung von benutzerdefiniertem Code, um Partikeleffekte manuell hinzuzufügen. Ich empfehle dies nur, wenn Sie mit dem Programmieren vertraut sind.

In dieser Anleitung bleiben wir bei der einfachsten Option: der Verwendung eines WordPress-Plugins. Legen wir los.

So fügen Sie mit SeedProd einen Partikelhintergrund in WordPress hinzu

SeedProd ist ein Drag-and-Drop-Website-Builder mit Partikel-Hintergründen, die direkt in den Editor integriert sind. Sie benötigen kein separates Plugin oder benutzerdefinierten Code, der Effekt ist nur einen Schalter entfernt.

Über 700.000 WordPress-Websites verwenden SeedProd, um Seiten und Themes zu erstellen, ohne Code anzufassen. Sie können es verwenden, um benutzerdefinierte WordPress-Themes, Landing Pages und praktisch jedes benötigte Layout zu erstellen.

Mit Hunderten von vorgefertigten Seitenvorlagen und integrierten Partikel-Hintergründen dauert die Einrichtung eines Partikel-Hintergrund-WordPress-Effekts nur wenige Minuten. Befolgen Sie die nachstehenden Schritte, um einen auf Ihre Website zu setzen.

Schritt 1. SeedProd installieren und aktivieren

Zuerst starten Sie mit SeedProd und laden Sie das Plugin herunter. Installieren und aktivieren Sie es dann auf Ihrer WordPress-Website.

Wenn Sie dabei Hilfe benötigen, lesen Sie die SeedProd-Installationsdokumentation. Sie führt Sie durch den Installationsprozess und die Aktivierung Ihres Plugin-Lizenzschlüssels.

Schritt 2. Wählen Sie eine vorgefertigte Vorlage

Ihr nächster Schritt ist die Auswahl einer vorgefertigten Vorlage. Der Typ, den Sie auswählen, hängt davon ab, ob Sie ein WordPress-Theme oder eine Landing Page erstellen möchten.

Mit dem Theme Builder von SeedProd können Sie ein komplettes WordPress-Theme von Grund auf neu erstellen. Die Auswahl dieser Option überschreibt Ihr bestehendes Website-Design.

Der Landing Page Builder ermöglicht es Ihnen, beliebige Seiten zu erstellen, ohne Ihr bestehendes Theme anzufassen. Für diese Anleitung wählen wir diese Option.

Gehen Sie in Ihrem WordPress-Admin-Dashboard zu SeedProd » Landing Pages. Sie sehen verschiedene Seitenmodi oben und die Option, Ihre eigene benutzerdefinierte Seite zu erstellen.

Klicken Sie auf die Schaltfläche Neue Landing Page hinzufügen. Hier können Sie aus Hunderten von vorgefertigten Landing-Page-Vorlagen wählen.

Sie können die Vorlagen nach Typ filtern, indem Sie die Tabs oben verwenden, einschließlich:

• Wartungsmodus (Coming Soon)
• Wartungsmodus
• 404-Seite
• Verkäufe
• Webinar
• Lead Squeeze
• Danke
• Anmelden

Um ein Vorlagendesign auszuwählen, klicken Sie auf das orangefarbene Häkchensymbol.

Dies öffnet ein Popup, in dem Sie den Namen Ihrer Landing Page eingeben können. SeedProd generiert den Seiten-Slug für Sie, aber Sie können ihn ändern, wenn Sie möchten.

Wenn Sie mit diesen Details zufrieden sind, klicken Sie auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen. Sobald Ihre Vorlage im Editor geöffnet ist, können Sie Partikeleffekte aktivieren.

Schritt 3. Partikelhintergründe aktivieren und anpassen

SeedProd hat particle.js in den Editor integriert und Sie können es in jedem Seitenabschnitt verwenden. Klicken Sie auf einen Abschnitt, bis Sie einen lila Rahmen sehen, und wählen Sie dann die Registerkarte Erweitert.

Suchen Sie die Überschrift Partikel-Hintergrund, erweitern Sie sie und aktivieren Sie den Schalter Partikel-Hintergrund aktivieren. Sie sehen sofort einen Polygon-Animationseffekt auf dem Hintergrund des Abschnitts.

Klicken Sie auf das Dropdown-Menü Stil, um die Partikel auf eine der integrierten Optionen zu ändern:

• Weltraum
• Schnee
• Schneeflocken
• Weihnachten
• Halloween
• Benutzerdefiniert

Nachdem Sie einen Stil ausgewählt haben, können Sie die Partikel-Deckkraft, die Flussrichtung und die Farbe festlegen. Für mehr Kontrolle aktivieren Sie den Schalter Erweiterte Einstellungen.

Hier können Sie die Anzahl der Partikel erhöhen, die Partikelgröße ändern und die Bewegungsgeschwindigkeit anpassen.

So halten Sie Ihren Partikel-Hintergrund auf Mobilgeräten schnell

Die Partikel-Dichte ist die Einstellung, die die Leistung am stärksten beeinflusst. Je mehr Partikel Sie rendern, desto mehr Arbeit leistet der Browser bei jedem Frame.

Ein paar Richtlinien, die ich befolge, um die Dinge reibungslos zu halten:

• Dichte begrenzen: Halten Sie die Partikel für Desktop-Hero-Bereiche unter etwa 60 und für mobile Bereiche um die 30.
• Hover-Effekte auf Mobilgeräten testen: Hover-Interaktionen fügen zusätzliches JavaScript hinzu. Überprüfen Sie daher, wie sie sich auf einem Telefon anfühlen, bevor Sie veröffentlichen.
• Mobile Vorschau verwenden: Die integrierte mobile Vorschau von SeedProd ermöglicht es Ihnen, die Renderleistung zu überprüfen, bevor die Seite live geschaltet wird.

SeedProd hat auch eine Option für Hover-Effekte im selben Bedienfeld. Wenn Sie diese aktivieren, verteilen sich die Partikel von Ihrem Cursor weg und treiben zurück, wenn Sie sich durch den Abschnitt bewegen.

Eine Sache zu beachten: Sie können den Hover-Effekt nur sehen, wenn Sie Ihre Seite außerhalb des Editors in der Vorschau anzeigen, nicht im Builder selbst.

Hinzufügen von benutzerdefinierten Partikelhintergründen

Um einen benutzerdefinierten Partikeleffekt hinzuzufügen, wählen Sie die Option Benutzerdefiniert aus dem Dropdown-Menü Stil. Die Anweisungen besagen, dass Sie eine benutzerdefinierte JSON-Konfigurationsdatei hinzufügen müssen.

Die Anweisungen enthalten einen Link zu vincentgarreau.com/particles.js, einem Tool, mit dem Sie benutzerdefinierte Attribute durch Zeigen und Klicken festlegen können. Das gleiche JSON-Konfigurationsformat funktioniert mit der aktuellen tsParticles-Bibliothek, sodass eine dort erstellte Konfiguration in SeedProd ausgeführt wird.

Im Konfigurationsbereich können Sie benutzerdefinierte Formen, Dichten, Größen, Geschwindigkeiten und Farben auswählen. Wenn Sie Ihr eigenes Logo oder Bild als Partikelform verwenden möchten, ist der benutzerdefinierte JSON-Ansatz der richtige Weg. Sie verweisen die Formkonfiguration auf eine benutzerdefinierte Bild-URL.

Wenn Sie mit Ihren Einstellungen zufrieden sind, klicken Sie auf die Überschrift Aktuelle Konfiguration herunterladen, um die Konfigurationsdatei auf Ihrem Computer zu speichern.

Öffnen Sie nun die Datei, kopieren Sie den Code und fügen Sie ihn in das leere Feld in Ihrem Editor ein.

Ihr benutzerdefinierter Partikel-Hintergrund wird sofort angezeigt. Von dort aus passen Sie Ihre Landingpage weiter an, bis sie genau so aussieht, wie Sie es möchten, und klicken Sie auf Speichern, um Ihre Änderungen zu speichern.

Schritt 4. Veröffentlichen Sie Ihre Änderungen

Sobald Sie mit Ihrer Landingpage zufrieden sind, können Sie sie live schalten. Klicken Sie auf den Dropdown-Pfeil Speichern und dann auf Veröffentlichen.

Besuchen Sie nun Ihre Landingpage, um Ihren Partikel-Hintergrund in Aktion zu sehen.

Bevor Sie es als erledigt betrachten, öffnen Sie die Seite auf Ihrem Handy mit der mobilen Vorschau von SeedProd, um zu überprüfen, ob der Effekt auf einem kleineren Bildschirm gut aussieht. Es lohnt sich auch, die Live-Seite durch Google PageSpeed Insights laufen zu lassen, um zu prüfen, ob der Partikelhintergrund Ihre Ladezeit nicht verlangsamt hat.

Verwenden Sie das Plugin „Particle Background WP“

Eine weitere Möglichkeit, Partikelhintergründe zu Ihrer WordPress-Website hinzuzufügen, ist das Plugin Particle Background WP.

Preise: Kostenlos
Kostenloser Plan / Testversion: Ja
Herausragende Merkmale: Einfache Partikeleffekte, Shortcode-Unterstützung, einfache Einstellungen
Bewertung: B
Am besten geeignet für: Benutzer, die eine kostenlose, leichte Option wünschen

Dies ist ein kostenloses WordPress particle.js-Plugin. Seine Anpassungsoptionen sind nicht so einfach oder umfangreich wie die von SeedProd.

Installieren und aktivieren Sie zuerst Particle Background WP auf Ihrer Website. Klicken Sie dann im WordPress-Admin-Panel auf den Menüpunkt Particle Background.

Im ersten Bereich können Sie das Partikelhintergrund-Banner auf Ihrer Startseite und Ihren Blog-Seiten oder mit einem Shortcode anzeigen. Wir haben das Banner für unsere Blog-Seite aktiviert.

Darunter befindet sich ein Inhaltsbereich, den Sie mit dem Editor anpassen können. Hier können Sie eine Überschrift, eine Beschreibung und eine Handlungsaufforderung für Ihr Banner eingeben.

Der nächste Bereich enthält Partikel-Anpassungsoptionen, einschließlich Dichte, Farbe und Hintergrundfarbe. Sie können auch benutzerdefiniertes CSS eingeben.

Nachdem Sie Ihre Änderungen gespeichert haben, besuchen Sie Ihre Blog-Seite, um das Banner mit seinem Partikelhintergrund an Ort und Stelle zu sehen.

Sie können den Shortcode auch verwenden, um dasselbe Banner auf jeder beliebigen Seite oder jedem Beitrag hinzuzufügen. Eine Sache zu beachten: Ihr Banner liegt über dem Inhalt, nicht dahinter, wie es bei SeedProd der Fall ist.

Weitere Möglichkeiten, Particle.js zu WordPress hinzuzufügen

Wenn Sie einen anderen Seitenersteller verwenden, können einige Add-ons Partikeleffekte in Ihr bestehendes Setup bringen:

• Ultimate Addons for Elementor: Fügt Seiten, die mit dem Elementor Page Builder Plugin erstellt wurden, Partikeleffekte hinzu.
• Ultimate Addons for Beaver Builder: Fügt Seiten, die mit dem Beaver Builder Plugin erstellt wurden, Partikelanimationen hinzu.
• Manuell: Ich empfehle diesen Ansatz nur, wenn Sie mit HTML, PHP, JavaScript und anderen Programmiersprachen vertraut sind.

Der einfachste Weg, einen Partikelhintergrund zu WordPress hinzuzufügen, ist mit SeedProd. Es erfordert keine Programmierung und bietet Ihnen Anpassungsoptionen, deren Einrichtung nur wenige Klicks erfordert.

FAQs zu WordPress Partikel-Hintergründen

Verlangsamt das Hinzufügen eines Partikelhintergrunds meine WordPress-Website?

Das kann es, da particle.js zusätzlichen JavaScript-Code ausführt, den der Browser in jedem Frame verarbeitet. Die Auswirkung hängt davon ab, wie viele Partikel Sie rendern.

Halten Sie die Dichte niedrig, beschränken Sie den Effekt auf einen wichtigen Abschnitt und testen Sie auf Mobilgeräten. Ein leichter Partikelhintergrund in einem Hero-Bereich verursacht selten eine spürbare Verlangsamung.

Kann ich einen Partikelhintergrund in einem beliebigen Abschnitt meiner WordPress-Seite verwenden?

Mit SeedProd, ja. Partikelhintergründe funktionieren in jedem Abschnitt einer Seite, sodass Sie den Effekt auf einen Hero-Block, ein Call-to-Action-Band oder eine Fußzeile anwenden können, ohne den Rest der Seite zu beeinträchtigen.

Welche Partikelstile unterstützt SeedProd?

SeedProd enthält sechs integrierte Stile: Polygon (Standard), Space, Snow, Snowflakes, Christmas und Halloween. Es gibt auch eine Option "Benutzerdefiniert", mit der Sie Ihre eigene particle.js JSON-Konfiguration laden können, um die Form, Dichte und Bewegung vollständig zu steuern.

Gibt es ein kostenloses WordPress-Plugin für Partikel-Hintergründe?

Ja. Particle Background WP ist ein kostenloses Plugin, das ein Partikel-Banner über einen Shortcode oder eine Einstellung auf der Startseite hinzufügt. Es ist eingeschränkter als SeedProd, und das Banner liegt über Ihrem Inhalt und nicht dahinter.

Funktionieren Partikel-Hintergründe auf Mobilgeräten?

Ja, solange Sie sie optimieren. Reduzieren Sie die Partikel-Dichte für Mobilgeräte, etwa 30 Partikel sind ein sicheres Ziel, und testen Sie den Effekt auf einem echten Gerät.

Die integrierte Mobilvorschau von SeedProd ermöglicht es Ihnen zu überprüfen, wie der Hintergrund auf einem kleineren Bildschirm gerendert wird, bevor Sie veröffentlichen.

Fügen Sie noch heute Partikel-Hintergründe hinzu

Sobald Sie Ihr Portfolio-Stück oder Ihre Hero-Sektion im Sinn haben, verleiht ein Partikel-Hintergrund diesem flachen Layout mit wenigen Klicks Tiefe. Mit SeedProd können Sie es erstellen, anpassen und veröffentlichen, ohne eine einzige Zeile Code zu schreiben.

Vielleicht gefällt Ihnen auch unser Leitfaden zu den besten WordPress-Galerie-Plugins, um Ihre neuen Partikel-Hintergründe zu ergänzen. Oder sehen Sie wie man einen Schnee-Effekt in WordPress hinzufügt.

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.