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.

.$
{
   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 Bereich „Benutzerdefinierter HTML-Code“ CSS- und JS-Code eingeben. Jeder Code wird automatisch auf allen Seiten eingebunden.

Verwendung von Dateien in Ihrem HTML-Code

Möglicherweise müssen Sie Dateien in Ihren HTML-Code einbinden. Wir nehmen als Beispiel die Einbindung einer Lottie-Animationsdatei.

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

• Den Code des Lottie-Players. Dieser muss im HEAD-Bereich Ihrer Seite oder auch im HEAD-Bereich der allgemeinen Eigenschaften der Website platziert werden.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

• Den Code Ihrer Lottie-Animation

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

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:

lottiefiles.com/

Das Ergebnis ist ein Code, der in etwa so aussieht:

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