Integração / HTML /JS / 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 (ausência de conflitos).

Nos componentes

• Um componente HTML permite colocar um código em qualquer lugar da sua página.

• Em cada componente, você pode informar 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” .$ do WebAcappella facilita a escrita de regras CSS para seus elementos. Esse seletor será substituído automaticamente pelo seletor correspondente ao componente atual.

.$
{
   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 inserir código CSS/JS.

No site

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

Uso de arquivos em seus códigos HTML

Talvez você precise usar arquivos dentro de seus códigos HTML. Vamos usar como exemplo a integração de um arquivo de animação Lottie.

Uma animação Lottie é composta, no mínimo, por dois elementos na página:

• O código do Player Lottie, que deve 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 da sua animação Lottie

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

Você poderá inserir, no lugar do texto “URL”, o arquivo JSON correspondente à animação de sua escolha.

Você encontrará, entre outras, animações no site:

lottiefiles.com/

O resultado será um código 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>