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

    ../../_images/comp_html.jpg
    ../../_images/button_edit_html.jpg
  • 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.

../../_images/edit_html.jpg

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.

../../_images/insert_file.jpg

Entre outras coisas, você encontrará animações no site:

https://lottiefiles.com/

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>