Assets

Cette page contient l’ensemble des assets mis à disposition du maker.
Ci-dessous, la liste des catégories d’assets

Backlink Flowtribe

Ce composant est à ajouter dans le footer du site, plus généralement dans le coin inférieur droit du footer, en face des mentions légales.
⚠️ Si le client ne souhaite pas faire apparaitre le macaron, ajouter la mention suivante dans la page des "Mentions légales" :

⚠️ La version du logo NCF est à ajouter uniquement aux projets comprenant à la fois un site web + une webapp

Version noir

Website by

Version blanche

Website by

Version noir

Website by

Version blanche

Website by

Infinite marquee

L'élément infinite marquee est totalement géré via les custom properties CSS. Il suffit d'ajouter la class "infinite-marquee" aux éléments enfants (à faire looper) pour lancer l'animation.

Infinite marquee

Ajouter l'attribut "data-hover-pause" pour lancer l'animation on hover

Pause on hover

Ajouter l'attribut "data-hover-play" pour lancer l'animation on hover

Play on hover

Swiper.js

Dans le code de page, récupérer le script permettant d'activer le swiper.js. Bien reprendre la structure comme l'exemple ci-dessous, avec la bonne nomenclature de class.
Pour plus d'infos : Swiper.js

Hébergements atypiques

Châteaux

À la ferme

Domaines viticoles

Grandes maisons de familles

Code à copy/paste

<!-- SWIPER.JS START -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
const swiper1 = new Swiper(".swiper", {
  // Optional parameters
  direction: "horizontal",
  loop: true,
  slidesPerView: 1,
  slidesPerGroup: 1,
  spaceBetween: 20,
  loop: false,
  centeredSlides: false,
  mousewheel: {
    forceToAxis: true
  },
  speed: 300,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 480px
    480: {
      slidesPerView: 1
    },
    // when window width is >= 768px
    768: {
      slidesPerView: 2
    },
    // when window width is >= 992px
    992: {
      slidesPerView: 3
    }
  },

  // Navigation arrows
  navigation: {
    nextEl: ".button-next",
    prevEl: ".button-prev"
  },

});
</script>
<!-- SWIPER.JS STOP -->

Date EN to FR

Dans le code du projet est inséré un script permettant de translate la date de l'EN natif Webflow à la langue du navigateur ! Il y a une manipulation à faire :

- Ajouter l'attribut "data-date" et mapper le champ date de la collection en value

Sections to copy+paste

Ici, tu peux récupérer des sections ou des éléments déjà fabriqués pour gagner du temps dans ton intégration.

Section

⚠️ à partir de container-{}, il faut faire une combo class pour ajouter le padding-section{}, et bien penser à décomposer le composant une fois intégré à la page!

Hero

Un Hero structuré en text-image

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text