Integración / HTML /JS / CSS¶
WebAcappella Fusion permite la inclusión de código/scripts a varios niveles.
WebAcappella FUSION es totalmente independiente de la biblioteca JQuery, lo que facilita la integración de código de terceros (sin conflictos).
En los componentes¶
Un componente HTML le permite colocar código en cualquier lugar de su página.
Dentro de cada componente, puede introducir el nombre de una o varias clases CSS. Estas clases pueden definirse en las propiedades de la página o incluso del sitio.
El selector «mágico¶
El selector .$ “magic” de WebAcappella facilita la escritura de reglas CSS para sus elementos. Este selector se sustituirá automáticamente por el selector correspondiente al componente actual.
Truco
Ejemplo en una página publicada con WebAcappella y un componente de imagen:
.$
{
filter: sepia(1);
}
El resultado será la aplicación de un filtro «sepia» a su 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 le permite introducir código CSS/JS. Cada código se integrará automáticamente en todas las páginas.
Uso de archivos dentro de sus códigos HTML¶
Puede que necesite utilizar archivos dentro de su código HTML. Tomemos el ejemplo de integrar un archivo de animación Lottie.
Una animación Lottie consta de al menos 2 elementos en la página:
El código del reproductor Player Lottie Se puede colocar en el código HEAD de su 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 su animación Lottie
<lottie-player src="URL" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
En lugar del texto URL, ahora puede insertar el archivo JSON correspondiente a la animación de su elección.
También puede encontrar eventos en el sitio web:
El resultado será el siguiente:
<lottie-player src="{{WA_FILE 9744-sample-animation.json}}" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>