Hintergrund freier Elementarteilchen (particles.js)
Particles ist eine kostenlose Master Addons Erweiterung, die hinter jedem Elementorabschnitt, jeder Spalte oder jedem Container eine particles.js Animation laufen lässt Schalten Sie es ein und Sie erhalten sofort den Standard-Effekt: weiße Punkte, die über den Abschnitt treiben, durch dünne Linien verbunden und vom Cursor weggeschoben werden Für alles andere, wie fallenden Schnee, aufsteigende Blasen oder ein Sternenfeld, bauen Sie eine Konfiguration in den Particles.js Generator und fügen Sie dessen JSON in das Panel ein.
Ein beweglicher Hintergrund ohne Videodatei
Die Partikel werden von der Partikel-js-Schrift auf einer Leinwand gezeichnet, es gibt also kein Video oder Bild zum Herunterladen. Die Einstellung des Z-Index entscheidet, wo die Partikelschicht sitzt, sodass Sie sie hinter Ihren Überschriften und Schaltflächen behalten können Wenn Sie Partikel auf mehr als einem Abschnitt verwenden, halten Sie die Partikelanzahl bescheiden und überprüfen Sie die Seite auf einem Telefon.
- Keine Video - oder Bilddateien: die Animation wird im Browser gezeichnet.
- Eine Z-Index-Einstellung, um die Partikelschicht hinter Ihrem Inhalt zu halten.
- Funktioniert auf Abschnitten, Spalten und Containern, jeder mit seiner eigenen Konfiguration.
Jeder Partikel-JS-Effekt aus einem JSON-Feld
Das Particle JSON-Feld steuert alles, was Partikel.js können: Partikelanzahl, Farbe, Form, Größe, Opazität, Verbindungslinien, Geschwindigkeit und Richtung, plus Hover - und Klick-Wechselwirkungen Der Link über dem Feld öffnet den Partikel-js-Generator Wählen Sie eine Voreinstellung wie NASA, Bubble oder Snow, passen Sie sie mit Schiebereglern an und laden Sie die Konfiguration herunter. Einfügen und der Abschnitt aktualisiert sich im Editor.
- Voreinstellungen am Generator: Standard, NASA, Bubble, Snow und Nyan Cat.
- Formen: Kreis, Kante, Dreieck, Polygon, Stern oder eigenes Bild.
- Schweben und Klicken Modi wie Repulse, Greifen, Blasen und Drücken.
So fügen Sie einen Partikelhintergrund in Elementor hinzu
Die standardmäßigen weißen Partikel benötigen einen dunklen oder farbenfrohen Hintergrund, um angezeigt zu werden. Stellen Sie dies also zuerst ein.
- Schalten Sie Partikel in der Registerkarte Erweiterungen des Master Addons-Dashboards ein.
- Wählen Sie einen Abschnitt, eine Spalte oder einen Behälter aus und geben Sie ihm eine dunkle Hintergrundfarbe.
- Öffnen Sie die Registerkarte Stil, erweitern Sie Partikel und schalten Sie den Partikelhintergrund aktivieren ein.
- Für einen anderen Effekt klicken Sie auf den Link über Partikel-JSON, wählen Sie eine Voreinstellung im Generator aus, laden Sie das JSON herunter und fügen Sie es in das Feld ein.
- Stellen Sie den Z-Index so ein, dass die Partikelschicht hinter Ihren Inhalten bleibt, und veröffentlichen Sie ihn dann.
Unser Hintergrundtutorial zu Partikeln Geht durch jeden Schritt mit Screenshots.
Particles.js in WordPress: von Hand oder mit der Erweiterung
particles.js ist eine kostenlose JavaScript-Bibliothek, und Sie können sie selbst zu WordPress hinzufügen. Hier ist, was das im Vergleich zur Erweiterung braucht.
| Zugabe von Particles.js von Hand | Partikelverlängerung | |
|---|---|---|
| Laden des Skripts | Enqueue die Bibliothek in deinem Theme | Wird nur auf Seiten mit einem Partikelabschnitt geladen |
| Partikelschicht | Fügen Sie eine Div hinzu und positionieren Sie sie mit CSS hinter dem Inhalt | Für Sie in den Bereich aufgenommen |
| Konfiguration | Rufen Sie particlesJS () mit Ihrem JSON in einem Skript auf | Fügen Sie das JSON in das Panel ein |
| Vorschau | Am vorderen Ende | Direkt im Elementor-Editor |
| Schichtung | Schreibe deine eigenen z-index Regeln | Z-index-feld |
Partikel passen gut zu Glasmorphie Karten oben Für andere bewegliche Hintergründe, versuchen Hintergrundschieber oder Hintergrund des animierten Gradienten (Pro).
Häufig gestellte Fragen zu Partikeln
Ich bin kein Entwickler, ist mir das JSON-Zeug zu hart?
Nein. Wenn Sie den Effekt einschalten, erhalten Sie das Standard-Look ohne JSON. Für andere Looks arbeitet der particles.js-Generator mit Schiebereglern und Farbwählern. Laden Sie die von ihm erstellte Konfiguration herunter und fügen Sie sie in das Particle JSON-Feld ein.
Kann ich mein eigenes Bild (wie ein Logo) als Partikel verwenden?
Ja. Im particles.js Generator stellen Sie den Formtyp auf Bild ein und geben Sie die URL Ihres Bildes ein, z.B. ein kleines Logo Laden Sie die Config herunter und fügen Sie sie in das Feld Partikel-JSON ein.
Wird das auf Mobiltelefonen funktionieren?
Ja, die Animation läuft auf Telefonen und Tablets. Eine hohe Partikelzahl kann ältere Telefone verlangsamen. Halten Sie die Anzahl daher für Abschnitte, die mobile Besucher sehen, bescheiden.
Kann ich verschiedene Partikeleffekte auf verschiedenen Abschnitten derselben Seite haben?
Ja. Jeder Abschnitt, jede Säule und jeder Behälter hat sein eigenes Particle JSON-Feld, sodass Ihr Held ein Sternenfeld anzeigen kann, während ein anderer Abschnitt Schnee verwendet.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
