CSS¶

WebAcappella Fusion ermöglicht das Einbinden von Code/Skripten auf mehreren Ebenen.

WebAcappella FUSION ist völlig unabhängig von der JQuery-Bibliothek, was die Integration von Drittanbietercodes erleichtert (keine Konflikte).

In den Komponenten¶

Eine HTML-Komponente ermöglicht es, einen Code an einer beliebigen Stelle auf ihrer Seite zu platzieren.
Innerhalb jeder Komponente können Sie den Namen einer oder mehrerer CSS-Klassen angeben. Die Definition dieser Klassen kann in den Eigenschaften der Seite oder sogar der Website vorgenommen 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.

Tipp

Beispiel in einer Seite, die mit WebAcappella und einer Bildkomponente veröffentlicht wurde :

.$
{
   filter: sepia(1);
}

Das Ergebnis ist die Anwendung eines ‚Sepia‘-Filters auf Ihr Bild.

In den Seiten¶

Auf jeder Seite können Sie im Abschnitt Eigenschaften - benutzerdefinierter HTML-Code CSS/JS-Code eintragen.

Auf der Website¶

In den allgemeinen Eigenschaften der Website können Sie im Abschnitt für benutzerdefinierten HTML-Code CSS/JS-Code eintragen. Jeder Code wird automatisch auf allen Seiten eingebunden.

Verwendung von Dateien innerhalb Ihres HTML-Codes¶

Es kann sein, dass Sie Dateien innerhalb Ihres HTML-Codes verwenden müssen. Wir nehmen als Beispiel die Einbettung einer Lottie-Animationsdatei.

Eine Lottie-Animation besteht aus mindestens 2 Elementen auf der Seite :

Playercode Player Lottie Zum Einfügen in den HEAD-Code Ihrer Seite oder sogar in den HEAD-Code der allgemeinen Eigenschaften der Website.
```
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
```

Der Code für Ihre Lottie-Animation

<lottie-player src="URL" background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

Sie werden in der Lage sein, anstelle des Textes URL die JSON-Datei einzufügen, die der Animation Ihrer Wahl entspricht.

Animationen finden Sie unter anderem auf :

https://lottiefiles.com/

Dies wird als Ergebnis einen Code ergeben, der wie folgt aussieht:

<lottie-player src="{{WA_FILE 9744-sample-animation.json}}" background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>