CSS¶

O WebAcappella Fusion permite a inclusão de códigos/scripts em vários níveis.

O WebAcappella FUSION é totalmente independente da biblioteca JQuery, o que facilita a integração de códigos de terceiros (sem conflitos).

Nos componentes¶

Um componente HTML permite que você coloque código em qualquer lugar de sua página.
Em cada componente, você pode inserir o nome de uma ou mais classes CSS. Essas classes podem ser definidas nas propriedades da página ou até mesmo do site.

O seletor “mágico¶

O seletor .$ ‘mágico’ do WebAcappella facilita a criação de regras CSS para seus elementos. Esse seletor será automaticamente substituído pelo seletor correspondente ao componente atual.

Dica

Exemplo em uma página publicada com o WebAcappella e um componente de imagem:

.$
{
   filter: sepia(1);
}

O resultado será a aplicação de um filtro “sépia” à sua imagem.

Nas páginas¶

Em cada página, a seção propriedades - código HTML personalizado permite que você insira o código CSS/JS.

No site¶

Na seção de propriedades gerais do site, a seção de código HTML personalizado permite que você insira o código CSS/JS. Cada código será integrado automaticamente em todas as páginas.

Uso de arquivos em seu código HTML¶

Talvez seja necessário usar arquivos em seu código HTML. Vejamos o exemplo da integração de um arquivo de animação Lottie.

Uma animação Lottie consiste em pelo menos dois elementos na página:

O código do jogador Player Lottie Pode ser colocado no código HEAD de sua página ou mesmo no HEAD das propriedades gerais do site.
```
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
```

O código para sua animação Lottie

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

Em vez do texto URL, agora você pode inserir o arquivo JSON correspondente à animação de sua escolha.

Você também pode encontrar eventos no site:

https://lottiefiles.com/

O resultado será semelhante a este:

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