Integrazione / HTML /JS / CSS

WebAcappella Fusion permette l’inclusione di codice/script a diversi livelli

WebAcappella FUSION è totalmente indipendente dalla libreria JQuery, il che facilita l’integrazione di codici di terzi (nessun conflitto)

Nei componenti

  • Un componente HTML ti permette di mettere un codice in qualsiasi punto della tua pagina

    ../../_images/comp_html.jpg
    ../../_images/button_edit_html.jpg
  • All’interno di ogni componente, potete inserire il nome di una o più classi css.

La definizione di queste classi può essere fatta nelle proprietà della pagina o anche del sito.

../../_images/edit_html.jpg

Il selettore «magico

Il selettore «magico» .$ di WebAcappella rende facile scrivere regole CSS per i tuoi 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” alla tua immagine.

Nelle pagine

  • In ogni pagina, la sezione proprietà - codice HTML personalizzato permette di inserire il codice CSS/JS

Sul sito web

  • Nella sezione delle proprietà generali del sito - la sezione del codice HTML personalizzato ti permette di inserire il codice CSS/JS

Ogni codice sarà integrato automaticamente su tutte le pagine.

Uso di file all’interno dei vostri codici HTML

Potrebbe essere necessario utilizzare dei file all’interno dei vostri codici HTML.

Prendiamo l’esempio dell’integrazione di un file di animazione “Lottie”.

Un’animazione “Lottie” consiste in almeno 2 elementi nella pagina

  • Il codice di Lottie «Player

    Da mettere nel codice HEAD della vostra 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 della tua 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”, potete inserire il file JSON corrispondente all’animazione di vostra scelta.

../../_images/insert_file.jpg

Tra le altre cose, troverete delle animazioni sul sito:

https://lottiefiles.com/

Questo risulterà in un codice che assomiglia 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>