Integração / HTML /JS / CSS¶
WebAcappella Fusion permite a inclusão de código/scripts em vários níveis
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 um código em qualquer lugar em sua página
Dentro de cada componente, você pode inserir o nome de uma ou mais classes css.
A definição dessas classes pode ser feita nas propriedades da página ou mesmo do site.
O seletor “mágico¶
O seletor ‘mágico’ WebAcappella .$* facilita a escrita de regras de CSS para seus elementos.
Este seletor será automaticamente substituído pelo seletor correspondente ao componente atual.
Dica
Exemplo em uma página publicada com 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 de 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á automaticamente integrado em todas as páginas.
Uso de arquivos dentro de seus códigos HTML¶
Você pode precisar usar arquivos dentro de seus códigos HTML.
Tomemos o exemplo da integração de um arquivo de animação ‘Lottie’.
Uma animação ‘Lottie’ consiste de pelo menos 2 elementos na página
O código ‘Player’ da Lottie
Para ser colocado no código HEAD da 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 de sua animação “Lottie
<lottie-player src="URL" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
Ao invés do texto ‘URL’, você pode inserir o arquivo JSON correspondente à animação de sua escolha.
Entre outras coisas, você encontrará animações no site:
Isto resultará em um código que se parece com este:
<lottie-player src="{{WA_FILE 9744-sample-animation.json}}" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>