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ódigos de terceros (sin conflictos)
En los componentes¶
Un componente HTML le 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 puede hacerse 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 sus elementos.
Este selector será sustituido automáticamente por el 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 de 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¶
Es posible que tenga que utilizar archivos dentro de sus códigos HTML.
Tomemos el ejemplo de la integración de un archivo de animación «Lottie».
Una animación «Lottie» consta de al menos 2 elementos en la página
El código Lottie “Player”
Se debe 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”, puede insertar el archivo JSON correspondiente a la animación que elija.
Entre otras cosas, encontrará animaciones en el sitio:
Esto dará como resultado un código parecido al siguiente:
<lottie-player src="{{WA_FILE 9744-sample-animation.json}}" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>