Integrazione / HTML /JS / CSS

WebAcappella Fusion consente l'inclusione di codici/script a più livelli.

WebAcappella FUSION è completamente indipendente dalla libreria JQuery, il che facilita l'integrazione di codici di terze parti (assenza di conflitti).

Nei componenti

• Un componente HTML consente di inserire un codice in qualsiasi punto della pagina.

• All'interno di ogni componente è possibile inserire il nome di una o più classi CSS. La definizione di queste classi può essere effettuata nelle proprietà della pagina o anche del sito.

Il selettore "magico"

Il selettore "magico" .$ di WebAcappella facilita la scrittura delle regole CSS per i tuoi elementi. Questo selettore verrà sostituito automaticamente dal selettore corrispondente al componente corrente.

.$
{
   filter: sepia(1);
}

Il risultato sarà l'applicazione di un filtro "seppia" alla vostra immagine.

Nelle pagine

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

Nel sito web

• Nella sezione delle proprietà generali del sito, la sezione dedicata al codice HTML personalizzato consente di inserire codice CSS/JS. Ogni codice verrà automaticamente integrato in tutte le pagine.

Utilizzo di file all'interno del codice HTML

Potrebbe essere necessario utilizzare dei file all’interno del codice HTML. Prenderemo come esempio l’integrazione di un file di animazione Lottie.

Un'animazione Lottie è composta da almeno 2 elementi nella pagina:

• Il codice del lettore Lottie, da inserire nel codice HEAD della pagina o anche nel HEAD delle proprietà generali del sito.

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

• Il codice della vostra animazione Lottie

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

Potrete inserire al posto del testo URL il file JSON corrispondente all’animazione di vostra scelta.

Troverete, tra le altre cose, delle animazioni sul sito:

lottiefiles.com/

Il risultato sarà un codice 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>