Integration / HTML /JS / CSS
WebAcappella Fusion allows the inclusion of code/scripts at several levels.
WebAcappella FUSION is completely independent of the JQuery library, which facilitates the integration of third-party code (no conflicts).
In components
- An HTML component allows you to place code anywhere on your page.
- Within each component, you can enter the name of one or more CSS classes. These classes can be defined in the page properties or even in the site properties.
The 'magic' selector
WebAcappella's 'magic' selector .$ makes it easier to write CSS rules for your elements. This selector will be automatically replaced by the selector corresponding to the current component.
Example in a page published with WebAcappella and an image component: .$ { filter: sepia(1); } The result will be the application of a 'sepia' filter to your image.
In the pages
- In each page, the properties section - custom HTML code allows you to enter CSS/JS code.
On the website
- In the general properties section of the site, the custom HTML code section allows you to enter CSS/JS code. Each code will be automatically integrated into all pages.
Using files within your HTML code
You may need to use files within your HTML code. Let's take the example of integrating a Lottie animation file.
A Lottie animation consists of at least two elements on the page:
- The Lottie Player code To be placed in the HEAD code of your page or even in the HEAD of the site's general properties.
- The code for your Lottie animation
You can insert the JSON file corresponding to the animation of your choice in place of the URL text.
You will find animations on the site, among other things:
This will result in code that looks like this: