CSS¶

WebAcappella Fusion consente l’inserimento di codice/script a diversi livelli.

WebAcappella FUSION è totalmente indipendente dalla libreria JQuery, il che rende facile l’integrazione di codice di terze parti (nessun conflitto).

Nei componenti¶

Un componente HTML consente di inserire codice in qualsiasi punto della pagina.
All’interno di ogni componente, è possibile inserire il nome di una o più classi CSS. Queste classi possono essere definite nelle proprietà della pagina o del sito.

Il selettore «magico¶

Il selettore «magico» .$ di WebAcappella semplifica la scrittura delle regole CSS per gli elementi. Questo selettore sarà automaticamente sostituito dal selettore corrispondente al componente corrente.

Suggerimento

Esempio in una pagina pubblicata con WebAcappella e un componente immagine:

.$
{
   filter: sepia(1);
}

Il risultato sarà l’applicazione di un filtro «seppia» all’immagine.

Nelle pagine¶

In ogni pagina, la sezione Proprietà - Codice HTML personalizzato consente di inserire il codice CSS/JS.

Sul sito web¶

Nella sezione proprietà generali del sito, la sezione codice HTML personalizzato consente di inserire il codice CSS/JS. Ogni codice sarà integrato automaticamente in tutte le pagine.

Utilizzo di file nel codice HTML¶

Potrebbe essere necessario utilizzare i file all’interno del codice HTML. Prendiamo l’esempio dell’integrazione di un file di animazione Lottie.

Un’animazione Lottie è composta da almeno 2 elementi sulla pagina:

Il codice del giocatore Player Lottie Da inserire nel codice HEAD della pagina o anche nell’HEAD delle proprietà generali del sito.
```
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
```

Il codice per l’animazione Lottie

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

Al posto del testo URL, è ora possibile inserire il file JSON corrispondente all’animazione scelta.

È possibile trovare gli eventi anche sul sito web:

https://lottiefiles.com/

Il risultato sarà simile a questo:

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