Intégration / HTML /JS / CSS
WebAcappella Fusion permet l'inclusion de code/scripts à plusieurs niveaux.
WebAcappella FUSION est totalement indépendant de la librairie JQuery, ce qui facilite l'intégration de codes tiers (absence de conflits).
Dans les composants
- Un composant HTML permet de placer un code à n'importe quel endroit de sa page.
- Au sein de chaque composant, vous pouvez renseigner le nom d'une ou plusieurs classes CSS. La définition de ces classes pourra être faite dans les propriétés de la page ou même du site.
Le sélecteur 'magique'
Le sélecteur 'magique' .$ de WebAcappella permet de faciliter l'écriture de règles CSS pour vos éléments. Ce sélecteur sera remplacé automatiquement par le sélecteur correspondant au composant courant.
Exemple dans une page publiée avec WebAcappella et un composant image : .$ { filter: sepia(1); } Le résultat sera l'application d'un filtre 'sépia' sur votre image.
Dans les pages
- Dans chaque page, la section propriétés - code HTML personnalisé permet de renseigner du code CSS/JS.
Dans le site Web
- Dans la section des propriétés générales du site, la section de code HTML personnalisé permet de renseigner du code CSS/JS. Chaque code sera automatiquement intégré sur l'ensemble des pages.
Utilisation de fichiers au sein de vos codes HTML
Vous pouvez avoir besoin d'utiliser des fichiers au sein de vos codes HTML. Nous allons prendre l'exemple de l'intégration d'un fichier d'animation Lottie.
Une animation Lottie se compose au minimum de 2 éléments dans la page :
- Le code du lecteur Player Lottie À placer dans le code HEAD de votre page ou même dans le HEAD des propriétés générales du site.
- Le code de votre animation Lottie
Vous allez pouvoir insérer à la place du texte URL le fichier JSON correspondant à l'animation de votre choix.
Vous trouverez entre autres des animations sur le site :
Ce qui donnera en résultat un code ressemblant à ceci :