Utiliser les cartes et les conteneurs de cartes

Les cartes sont un élément moderne de présentation du contenu sur Internet. Elles permettent de présenter l'information par bloc, par exemple différents produits, différentes rubriques d'un site...

Le conteneur de cartes permet l'affichage adaptatif (web responsive) de vos cartes, de sorte que les visiteurs de votre site qui utilisent un appareil mobile puissent profiter pleinement de votre contenu sans perte d'information ni d'élégance.

Le conteneur de cartes

Le conteneur de cartes permet d'aligner des cartes sur l'axe horizontal ou vertical, tout en gérant la taille de l'écran.

Pour insérer un conteneur de cartes, procédez comme suit :

  1. Affichez la collection d'éléments (appuyez sur Alt+P)
  2. Dans la section Cartes, sélectionnez Conteneur de cartes et faites le glisser à l'endroit désiré sur la page
  3. Sélectionnez votre conteneur de cartes et affichez le panneau Styles et mise en forme (appuyez sur Alt + S)
  4. Sélectionnez l'orientation des cartes
    • En colonnes : les cartes vont se suivre sur l'axe horizontal et retourneront à la ligne si tout l'espace est occupé
    • En lignes : les cartes vont s'empiler sur l'axe vertical
  5. Sélectionnez le nombre de colonnes à afficher (cela correspond au nombre de cartes à afficher sur l'axe horizontal)

Note : Vous pouvez connecter un conteneur de cartes à une API pour récupérer des données à la volée lorsque un visiteur consulte votre page. Pour cela, utilisez les connecteurs.

Les cartes

Vous pouvez disposer autant de cartes que vous le souhaitez dans un conteneur de cartes. Les cartes s'organiseront automatiquement selon le choix de disposition fait sur le conteneur.

Vous trouverez quelques idées de cartes dans la collection d'éléments :

  1. Affichez la collection d'éléments (appuyez sur Alt+P)
  2. Dans la section Cartes, sélectionnez une des différentes cartes disponibles et faites le glisser à l'intérieur d'un conteneur de cartes
  3. Modifiez le contenu de la carte selon vos besoins


S'il s'agit de la première carte que vous déposez dans un conteneur de cartes, vous pouvez ensuite utiliser la fonctionnalité Magic Fill pour la dupliquer rapidement.

Utiliser Magic Fill

Magic Fill est une fonctionnalité qui vous permet de créer vos pages encore plus vite.

Lorsque vous disposez une première carte dans un conteneur de cartes, elle peut vous servir de modèle pour remplir le conteneur.

  1. Déposez un conteneur de cartes
  2. Déposez une première carte dans le conteneur
  3. Agencez votre carte comme vous le souhaitez, en ajoutant du texte, une image...
  4. Sélectionnez la carte et attrapez la poignée de Magic Fill
  5. Faites glisser en largeur et/ou en hauteur pour dupliquer rapidement votre carte modèle

Notez : Lorsque le conteneur de cartes est défini en orientation verticale, vous ne pouvez étendre les cartes que sur l'axe vertical, peu importe le nombre de colonnes défini.

Améliorez vos compétences sur PageFabric
Explorez la documentation