Möchten Sie Ihrer WordPress-Website einen Partikelhintergrund hinzufügen?
Animierte Particle.js-Effekte können Ihrer Website ein interaktiveres Gefühl verleihen und wichtige Inhalte hervorheben. In dieser Anleitung zeige ich Ihnen Schritt für Schritt, wie Sie Partikelhintergründe in WordPress mit einem Plugin oder Seitenersteller hinzufügen, ganz ohne Code.
Sie erfahren auch, wie Sie die Partikel für Ihren eigenen Stil anpassen und Ihre Website schnell und mobilfreundlich halten.
Schnelle Schritte zum Hinzufügen von Partikelhintergründen zu WordPress:
Was ist ein Partikelhintergrund?
Ein Partikelhintergrund ist eine animierte Sammlung von sich bewegenden Elementen (Partikeln), 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 leichten JavaScript-Bibliothek, angetrieben. Sie können damit Partikelformen, Farben, Größen und Bewegungen anpassen, ohne Ihre Hauptinhalte zu beeinträchtigen.
Hier ist ein Beispiel für einen Partikelhintergrund in Aktion:
Warum Partikelhintergründe in WordPress verwenden?
Partikelhintergründe können Ihrer Website ein dynamisches, interaktives Gefühl verleihen. Sie helfen, Aufmerksamkeit auf wichtige Bereiche zu lenken und Besucher länger zu fesseln.
- Wichtige Inhalte hervorheben: Verwenden Sie einen dezenten Partikelhintergrund hinter Hero-Bereichen oder Handlungsaufforderungen.
- Kreativität zeigen: Perfekt für Portfolios, Kreativagenturen oder designorientierte Websites.
- Wahrgenommene Ladezeiten verbessern: Sie können Partikel.js-Effekte sogar als Ladeanimationen verwenden, während schwere Medien im Hintergrund geladen werden.
Hier ist ein Beispiel: Eine Design-Portfolio-Website könnte eine sanfte Partikelanimation zu ihrer Kopfzeile hinzufügen, um Kreativität zu zeigen, ohne die ausgestellten Arbeiten abzulenken.
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.
Erstens können Sie ein WordPress Particle.js-Plugin oder einen WordPress-Seitenersteller mit integrierten Partikeleffektfunktionen verwenden. Wir empfehlen diese Option für Anfänger, da sie in der Regel keine Programmierkenntnisse oder technischen Fähigkeiten erfordert.
Eine weitere Möglichkeit, Partikeleffekte zu Ihrer Website hinzuzufügen, ist die Verwendung eines WordPress-Themes, das particle.js enthält. Dies ist praktisch, wenn Sie eine neue Website starten und noch ein WordPress-Theme benötigen.
Die letzte Option ist die Verwendung von benutzerdefiniertem Code, um Partikeleffekte manuell zu Ihrer Website hinzuzufügen. Wir empfehlen diese Option 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!
Fügen Sie mit SeedProd einen Partikelhintergrund zu WordPress-Bereichen hinzu
Zuerst verwenden wir ein WordPress-Seitenersteller-Plugin mit der in seine Funktionalität integrierten particles.js-Bibliothek: SeedProd.
SeedProd ist der beste Website- und Seitenersteller für WordPress mit über 1 Million Nutzern. Sie können den Drag-and-Drop-Builder verwenden, um benutzerdefinierte WordPress-Themes, Landing Pages, WooCommerce-Websites und jedes andere Layout zu erstellen, ohne Code schreiben zu müssen.
Mit Hunderten von vorgefertigten Seitenvorlagen, Designelementen und integrierten Partikelhintergründen dauert die Erstellung beeindruckender Partikelanimationen nur wenige Minuten.
Befolgen Sie die nachstehenden Schritte, um Partikelhintergründe mit SeedProd zu Ihrer Website hinzuzufügen.
Schritt 1. SeedProd installieren und aktivieren
Klicken Sie zuerst hier, um mit SeedProd zu beginnen und das Plugin herunterzuladen. Installieren und aktivieren Sie dann das Plugin auf Ihrer WordPress-Website.
Wenn Sie hierbei Hilfe benötigen, können Sie unsere Dokumentation zur Installation von SeedProd einsehen. Sie führt Sie durch den Installationsprozess und das Finden und Aktivieren Ihres Plugin-Lizenzschlüssels.
Schritt 2. Wählen Sie eine vorgefertigte Vorlage
Ihr nächster Schritt ist die Auswahl einer vorgefertigten Vorlage. Die Art der Vorlage, die 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 Wahl dieser Option überschreibt jedoch Ihr bestehendes Website-Design.
Alternativ können Sie mit dem Landing Page Builder beliebige Seiten erstellen, ohne Ihr bestehendes Theme zu berühren. Für diese Anleitung wählen wir diese Option.
Navigieren Sie in Ihrem WordPress-Admin-Dashboard zu SeedProd » Landing Pages. Auf dieser Seite sehen Sie oben verschiedene Seitenmodi 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 sie nach Typ filtern, indem Sie auf die Registerkarten oben klicken, 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-Fenster, in dem Sie den Namen Ihrer Landing Page eingeben können. SeedProd generiert automatisch den Slug (URL) der Landing Page für Sie, aber wenn Sie möchten, können Sie diesen ändern.
Wenn Sie mit diesen Details zufrieden sind, klicken Sie auf die Schaltfläche Speichern und Seite bearbeiten starten.
Navigation im Page Builder
Ihre Vorlage wird nun im visuellen Drag-and-Drop-Editor von SeedProd geöffnet. Sie sehen ein linkes Bedienfeld mit Blöcken, Abschnitten und Einstellungen sowie eine Live-Vorschau auf der rechten Seite.
Wenn Sie irgendwo auf die Vorschau klicken, können Sie die Einstellungen dieses Elements anzeigen und anpassen und die Änderungen in Echtzeit sehen.
Wenn Sie beispielsweise auf den Hauptkopfzeilenabschnitt klicken, werden dessen Einstellungen im linken Bedienfeld geöffnet. Von dort aus können Sie ein neues Hintergrundbild auswählen, eine andere Hintergrundposition wählen und den Hintergrund abdunkeln mit einer Farbüberlagerung.
Zusätzlich können Sie Ihrer Vorlage neue Elemente hinzufügen, indem Sie sie aus dem linken Blöcke-Bedienfeld ziehen und an der gewünschten Stelle ablegen.
Schritt 3. Partikelhintergründe aktivieren und anpassen
Wie bereits erwähnt, hat SeedProd particle.js in die Einstellungen des Seitenerstellers integriert. Derzeit können Sie diese Funktion für jeden Seitenabschnitt verwenden.
Klicken Sie dazu auf einen beliebigen Abschnitt, bis Sie einen lila Rahmen sehen, und wählen Sie dann die Registerkarte Erweitert.
Suchen Sie nun die Überschrift Partikelhintergrund , erweitern Sie sie und schalten Sie den Schalter Partikelhintergrund aktivieren auf Ein.
Sofort sehen Sie einen Polygon-Animationseffekt auf dem Abschnittshintergrund.
Wenn Sie auf das Dropdown-Menü „Stil“ klicken, können Sie die Partikel ändern in:
- Weltraum
- Schnee
- Schneeflocken
- Weihnachten
- Halloween
- Benutzerdefiniert
Nachdem Sie einen Partikelstil ausgewählt haben, können Sie die Partikeldeckkraft, die Flussrichtung und die Farbe festlegen.
Wenn Sie mehr Kontrolle über die Partikelanpassung wünschen, aktivieren Sie den Schalter Erweiterte Einstellungen .
Hier können Sie die Anzahl der Partikel erhöhen, die Partikelgröße ändern und mit dem Selektor die Geschwindigkeit der Partikelbewegung anpassen.
Hinweis: Die Erhöhung der Partikelanzahl kann die Ladegeschwindigkeit Ihrer Seite beeinträchtigen. Es ist am besten, diese Einstellung zur optimalen Leistung so niedrig wie möglich zu halten.
Im selben Bereich gibt es eine Option zum Aktivieren von Partikel-Hover-Effekten. Wenn Sie diese aktivieren, verteilen sich die Partikel, wenn Sie mit dem Cursor darüber fahren. Diesen Effekt können Sie jedoch nur in der Vorschau Ihrer Seite außerhalb des Seitenerstellers sehen.
Hinzufügen von benutzerdefinierten Partikelhintergründen
Wenn Sie benutzerdefinierte Partikeleffekte hinzufügen möchten, wählen Sie einfach die Option Benutzerdefiniert aus dem Dropdown-Menü Stil. Wie Sie sehen können, weisen die Anweisungen darauf hin, dass Sie eine benutzerdefinierte JSON-Datei hinzufügen müssen.
Glücklicherweise enthalten die Anweisungen einen Link zu vincentgarreau.com/particle.js, einer JavaScript-Bibliothek, mit der Sie benutzerdefinierte Attribute für Ihren Partikelhintergrund durch Zeigen und Klicken festlegen können.
Im Partikel-JSON-Konfigurationspanel können Sie benutzerdefinierte Formen, Dichten, Größen, Geschwindigkeiten, Farben und mehr auswählen. Sie können auch benutzerdefiniertes CSS für den Hintergrund festlegen und Bewegungseffekte aktivieren.
Wenn Sie mit Ihren Partikeleinstellungen zufrieden sind, klicken Sie auf die Überschrift „Aktuelle Konfiguration herunterladen“. Dadurch wird die Konfigurationsdatei auf Ihren Computer heruntergeladen.
Öffnen Sie nun den Code aus der Datei, kopieren Sie ihn und fügen Sie ihn in das leere Feld in Ihrem Seitenersteller ein.
Ihr benutzerdefinierter Partikelhintergrund wird sofort angezeigt!
Passen Sie von dort aus Ihre Landingpage weiter an, bis sie genau so aussieht, wie Sie es möchten. Denken Sie daran, auf Speichern zu klicken, um Ihre Änderungen zu speichern.
Schritt 4. Veröffentlichen Sie Ihre Änderungen
Sobald Sie mit den Anpassungen Ihrer Landingpage zufrieden sind, können Sie sie live schalten.
Klicken Sie dazu auf den Dropdown-Pfeil Speichern und dann auf Veröffentlichen.
Nun können Sie Ihre Landingpage besuchen, um Ihren Partikelhintergrund in Aktion zu sehen.
Verwenden Sie das Plugin „Particle Background WP“
Eine weitere Möglichkeit, Partikelhintergründe zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung des Plugins „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-Plugin für particle.js. Seine Anpassungsoptionen sind jedoch nicht so einfach oder umfangreich wie bei SeedProd.
Zuerst müssen Sie Particle Background WP auf Ihrer WordPress-Website installieren und aktivieren. Klicken Sie dann im WordPress-Admin-Bereich auf den Menüpunkt Particle Background.
Im ersten Bereich können Sie das Partikel-Hintergrundbanner auf Ihren Front- und Blog-Seiten oder mit dem Shortcode anzeigen. Wir haben das Banner für unsere Blog-Seite aktiviert.
Darunter befindet sich ein Inhaltsbereich, den Sie mit dem WYSIWYG-Editor anpassen können. Hier können Sie eine Überschrift für Ihr Banner, eine Beschreibung und einen Call-to-Action 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, können Sie Ihre Blog-Seite besuchen und das Banner mit einem Partikel-Hintergrund sehen.
Sie können den Shortcode auch verwenden, um dasselbe Banner auf jeder Seite oder jedem Beitrag hinzuzufügen. Es ist jedoch wichtig zu beachten, dass Ihr Banner über dem Inhalt liegt und nicht dahinter, wie bei SeedProd.
Weitere Möglichkeiten, Particle.js zu WordPress hinzuzufügen
Wenn Sie immer noch nach anderen Möglichkeiten suchen, particle.js zu Ihrer WordPress-Site hinzuzufügen, finden Sie die folgenden Tools möglicherweise hilfreich:
- Ultimate Addons for Elementor: Mit diesem Addon können Sie Partikeleffekte zu Seiten hinzufügen, die Sie mit dem Elementor Page Builder Plugin erstellt haben.
- Ultimate Addons for Beaver Builder: Fügen Sie Partikelanimationen zu Seiten hinzu, die mit dem Beaver Builder Plugin erstellt wurden.
- Manuell: Wir empfehlen diesen Ansatz nur, wenn Sie mit HTML, PHP, JavaScript und anderen Programmiersprachen vertraut sind.
Letztendlich ist der einfachste Weg, Partikel-Hintergründe zu WordPress hinzuzufügen, mit SeedProd. Es ist einfach zu bedienen, erfordert keine Programmierung und bietet unzählige Anpassungsoptionen, die mit wenigen Klicks eingerichtet sind.
FAQs zu WordPress Partikel-Hintergründen
Nein, Sie benötigen keine Programmierkenntnisse, um Partikel-Hintergründe zu WordPress hinzuzufügen. SeedProd verfügt über eine codefreie Oberfläche, um das Hinzufügen des Effekts zu Ihrer Website ohne Code zu vereinfachen.
Obwohl Partikel.js-Hintergründe visuell ansprechend sein können, erfordern sie zusätzliches JavaScript und können die Ladezeit Ihrer Website verlangsamen. Es ist wichtig, Ihre Website zu optimieren, um sicherzustellen, dass sie schnell geladen wird und die Benutzererfahrung nicht beeinträchtigt.
Wir empfehlen, Partikel-Hintergründe mit geringer Dichte nur in den wichtigsten Bereichen Ihrer Website zu verwenden.
Ja! SeedProd ermöglicht es Ihnen, Farbe, Form, Dichte und andere Parameter des Partikels anzupassen, um einen einzigartigen und visuell ansprechenden Effekt auf Ihrer Website zu erzielen.
Ja, Partikel.js-Hintergründe können mobilfreundlich sein, wenn sie richtig optimiert sind. Es ist jedoch wichtig, Ihren Partikel-Hintergrund auf verschiedenen Geräten und Bildschirmgrößen zu testen, um sicherzustellen, dass die Benutzererfahrung nicht beeinträchtigt wird. Dies können Sie mit der integrierten mobilen Vorschaufunktion von SeedProd tun.
Ja, Sie können Partikel.js-Code manuell zu Ihrem WordPress-Theme hinzufügen, aber dies erfordert die Bearbeitung von Vorlagendateien und kann schwieriger zu warten sein.
Da haben Sie es!
Wir hoffen, dieser Leitfaden hat Ihnen geholfen zu lernen, wie Sie Partikel-Hintergründe in WordPress erstellen.
Vielleicht gefällt Ihnen auch dieser Leitfaden zu den besten WordPress-Galerie-Plugins als Ergänzung zu Ihren neuen Partikel-Hintergründen. Oder dieser Leitfaden, wie man Schnee-Effekte 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.
