Particle-Background

1. Installiere das Plugin “ParticleJS-WP-Plugin” damit Du eine Bibliothek deiner Partikel erstellen kannst (.js).
   

Um einen interaktiven Hintergrund in Divi hinzuzufügen, musst Du zunächst die Erweiterung mit dem Namen “ParticleJS-WP-Plugin” herunterladen, installieren und aktivieren.
Wenn Du mehr wissen möchten, finden Du hier den Link zum Github-Verzeichnis.
Dieses Plugin ist nicht im offiziellen WordPress-Plugin Verzeichnis erhältlich!

2. Lege Deine Art der Partikel fest die Du anzeigen möchtest

Der zweite wichtige Schritt besteht darin, die Art der Partikel festzulegen, die als interaktiver Hintergrund angezeigt werden sollen. Dafür gehst Du auf die offizielle Website von Partikeln. js.

In diesem Bildschirm kannst Du deine Partikel erstellen und Folgendes definieren:

• Partikelstil: Kreise, Polygone, Sterne, Bilder usw.
• Geschwindigkeit und Anzahl
• Partikelbindung
• Die Bewegungsrichtung
• Interaktivität mit dem Internetnutzer
• Die Farbe der Partikel / die Hintergrundfarbe
• Usw…

Nachdem Du die idealen Partikel über die Systemsteuerung (oben rechts) eingerichtet hast, musst Du nur den generierten Code herunterladen. Klicke dazu auf “Download current config (JSON)”, das letzte Element am unteren Rand der Partikel-Systemsteuerung.

3. Füge den interaktiven Hintergrund einem Divi-Bereich hinzu

Jetzt hast Du zwei wesentliche Elemente, um Deinen schönen interaktiven Hintergrund in Divi zu erstellen: das Partikelhintergrund-Plugin und den Code Deiner Partikel.
Nun musst Du es noch in Divi integrieren.
Folgendes musst Du tun.

=> Füge den richtigen Code in das Partikelhintergrund-Plugin ein

Gehen zur Registerkarte “Partikelhintergrund” und füge diesen Code hinzu:

PartikelJS (' my-particles ',
 HIER CODE HINZUFÜGEN
 ); 

In diesem Beispiel lautet die eindeutige Bezeichnung “my-particles”. Dies kann durch eine Kennung Deiner Wahl geändert werden. Beachte
jedoch, dass eine Bezeichnung (ID in HTML) nur einmal auf einer Seite verwendet werden kann. Dies sind wichtige Informationen, die Du berücksichtigen musst.

In der mit “HIER CODE HINZUFÜGEN” gekennzeichneten Zeile musst Du den Code einfügen, den Du nach der Konfiguration Deiner Partikel erhalten hast. Die Du in Schritt 2 dieses Tutorials erhalten hast.

Der Code, der in das Feld auf der Registerkarte “Partikelhintergrund” eingefügt werden soll, sollte folgendermaßen aussehen.

particlesJS('my-particles',
{
  "particles": {
    "number": {
      "value": 111,
      "density": {
        "enable": true,
        "value_area": 801.7060304327614
      }
    },
    "color": {
      "value": "#bfb7aa"
    },
    "shape": {
      "type": "image",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "https://tom-po.de/wp-content/uploads/2019/04/logo.png",
        "width": 50,
        "height": 50
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 24.05118091298284,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
);

Da jede “ID” eindeutig sein muss, musst Du die “ID” jedes Mal ändern, wenn Du den Code für verschiedene interaktive Hintergründe verwenden möchtest.

Beispiel:
Unterschiedliche IDs wie: “my-particles”, “my-particles-2”, “My-Particles-3” usw.

=> Integriere deine Partikel in einen Divi-Bereich

Jetzt ist alles bereit, um Deine Partikel in einen Abschnitt von Divi einzufügen. Je nachdem, ob Du den Divi Builder oder den Visual Builder bevorzugen, ist dies die gleiche Methode.

Methode mit Visual Builder (Front-End):

Wenn Du den Visual Builder bevorzugst, beachte das deine beweglichen Partikel nicht angezeigt werden. Du musst erst den Visual Builder speichern und beenden, damit der interaktive-Hintergrund angezeigt wird.

Wenn Du dein Layout (Seitenlayout) erstellst, füge Abschnitte, Linien und Module hinzu.

Der Hintergrund ist, dass diese Partikel den Bereich eines Abschnitts ausfüllen sollen (Standardabschnitt, Abschnitt voller Breite oder sogar spezieller Abschnitt).

1. Du musst einen Abschnitt hinzufügen (oder bearbeiten, falls bereits vorhanden).

2 – Füge Deiner Auswahl über die Registerkarte Inhalt -> Hintergrund einen farbigen Hintergrund hinzu (insbesondere wenn Deine Partikel weiß sind).

3. Gebe die “ID” (eindeutige Kennung) ein, die Du im Plug-in-Code für den Partikelhintergrund verwendet hast (zuvor gesehener Code, Beispiel “my-particles”). Diese “ID” wird auf der Registerkarte Erweitert -> ID- und CSS-Klassen eingefügt.

4. Speichere Deine Änderungen, aktualisiere Deine Seite und bewundere Deinen Sternenhimmel !!!
Achte darauf, dass Du möglicherweise einen internen Rand hinzufügen musst, um den Abschnitt zu erweitern.

4. Was sind die anderen Möglichkeiten?

Schließlich wollte ich Dich noch darüber informieren, dass es andere Möglichkeiten gibt, Partikel als interaktiven Hintergrund einzufügen.

Es gibt ein kostenloses Plugin im offiziellen WP-Verzeichnis. Dies ist WP Backgroung Partikel. Es ist sehr einfach zu bedienen. Das einzige Problem ist, dass Du deine Partikel nicht personalisieren kannst, sondern nur die Hintergrundfarbe. Ein Shortcode ermöglicht es Dir, es einfach hinzuzufügen, aber es ist nicht ideal in einen Divi-Abschnitt.