Integration / HTML /JS / CSS
WebAcappella Fusion ermöglicht die Einbindung von Codes/Skripten auf mehreren Ebenen.
WebAcappella FUSION ist völlig unabhängig von der JQuery-Bibliothek, was die Integration von Codes von Drittanbietern erleichtert (keine Konflikte).
In den Komponenten
- Mit einer HTML-Komponente können Sie einen Code an einer beliebigen Stelle Ihrer Seite platzieren.
- In jeder Komponente können Sie den Namen einer oder mehrerer CSS-Klassen angeben. Diese Klassen können in den Eigenschaften der Seite oder sogar der Website definiert werden.
Der „magische” Selektor
Der „magische” Selektor .$ von WebAcappella erleichtert das Schreiben von CSS-Regeln für Ihre Elemente. Dieser Selektor wird automatisch durch den Selektor ersetzt, der der aktuellen Komponente entspricht.
Beispiel auf einer mit WebAcappella veröffentlichten Seite mit einer Bildkomponente: .$ { filter: sepia(1); } Das Ergebnis ist die Anwendung eines „Sepia”-Filters auf Ihr Bild.
Auf den Seiten
- Auf jeder Seite können Sie im Abschnitt „Eigenschaften – Benutzerdefinierter HTML-Code” CSS/JS-Code eingeben.
Auf der Website
- Im Abschnitt „Allgemeine Eigenschaften” der Website können Sie im Abschnitt „Benutzerdefinierter HTML-Code” CSS/JS-Code eingeben. Jeder Code wird automatisch auf allen Seiten integriert.
Verwendung von Dateien in Ihren HTML-Codes
Möglicherweise müssen Sie Dateien in Ihren HTML-Codes verwenden. Nehmen wir als Beispiel die Integration einer Lottie-Animationsdatei.
Eine Lottie-Animation besteht aus mindestens zwei Elementen auf der Seite:
- Der Code des Lottie-Players Dieser muss in den HEAD-Code Ihrer Seite oder sogar in den HEAD der allgemeinen Eigenschaften der Website eingefügt werden.
- Der Code Ihrer Lottie-Animation
Anstelle des URL-Textes können Sie die JSON-Datei einfügen, die der Animation Ihrer Wahl entspricht.
Animationen finden Sie unter anderem auf der Website:
Das Ergebnis ist ein Code, der in etwa so aussieht: