Integración / HTML /JS / CSS

WebAcappella Fusion permite la inclusión de código/scripts en varios niveles.

WebAcappella FUSION es totalmente independiente de la biblioteca JQuery, lo que facilita la integración de códigos de terceros (sin conflictos).

En los componentes

• Un componente HTML permite colocar un código en cualquier lugar de su página.

• Dentro de cada componente, puede introducir el nombre de una o varias clases CSS. La definición de estas clases se puede realizar en las propiedades de la página o incluso del sitio.

El selector «mágico»

El selector «mágico» .$ de WebAcappella facilita la escritura de reglas CSS para tus elementos. Este selector se sustituirá automáticamente por el selector correspondiente al componente actual.

.$
{
   filter: sepia(1);
}

El resultado será la aplicación de un filtro «sepia» a tu imagen.

En las páginas

• En cada página, la sección «Propiedades» —«Código HTML personalizado»— permite introducir código CSS/JS.

En el sitio web

• En la sección de propiedades generales del sitio, la sección de código HTML personalizado te permite introducir código CSS/JS. Cada código se integrará automáticamente en todas las páginas.

Uso de archivos en tu código HTML

Es posible que necesites utilizar archivos dentro de tu código HTML. Tomaremos como ejemplo la integración de un archivo de animación Lottie.

Una animación Lottie consta, como mínimo, de dos elementos en la página:

• El código del reproductor Lottie, que debe colocarse en el código HEAD de tu página o incluso en el HEAD de las propiedades generales del sitio.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

• El código de tu animación Lottie

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

Podrás insertar, en lugar del texto URL, el archivo JSON correspondiente a la animación que elijas.

Encontrarás animaciones, entre otras cosas, en la página web:

lottiefiles.com/

El resultado será un código similar 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>