Assets

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

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

Infinite marquee

Infinite marquee

Infinite marquee

Infinite marquee

Infinite marquee

Infinite marquee

Infinite marquee

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

Pause on hover

Pause on hover

Pause on hover

Pause on hover

Pause on hover

Pause on hover

Pause on hover

Pause on hover

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

Play on hover

Play on hover

Play on hover

Play on hover

Play on hover

Play on hover

Play 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