Cards
Pour commencer
Utiliser le composant Cards pour afficher sous forme de grille plusieurs panneaux de contenu et créer des points d’entrée attractifs vers d’autres pages de votre site. Le composant Cards est un composant multiple composé de sous éléments.
Ajouter un composant Cards
- Editez votre page
- Cliquez sur l’icône
à l’endroit où vous souhaitez ajouter le composant - Dans le sélecteur de composant cliquez sur Cards
- Editez le composant en cliquant dessus
- Cliquez sur Ajouter un élément puis sur l’icône
pour l’éditer - Ajoutez un titre et un contenu
- Prévisualisez le résultat
Réorganiser les éléments du composant Cards
Vous pouvez réorganiser l’ordre des éléments au sein du composant par glisser/déposer :
- Cliquez, maintenez et déplacez l’élément que vous souhaitez déplacer
- Relâchez-le lorsque celui ci se trouve à la position désirée
Supprimer un élément du composant Cards
Pour supprimer un élément survolez-le et cliquez sur l’icône 
à droite.
Options de l’élément Cards
Chaque sous-élément dispose de ses propres options.
| OPTION | DESCRIPTION |
|---|---|
| Titre | Le titre du panneau |
| Meta | Le texte meta du panneau (facultatif) |
| Contenu | Le contenu du panneau |
| Image | L’image affichée pour l’élément Cards (facultatif) |
| Balise Alt | La balise Alt de l’image. Pour en savoir plus sur la balise Alt, veuillez consulter Image |
| Icône | Une icône a afficher si aucune image n’est sélectionnée (facultatif) |
| Lien | Un lien à appliquer à l’élément (facultatif) |
| Texte du lien | Le label du lien de l’élément (facultatif). Si vide, utilise le label renseigné dans les Paramètres du composant |
Paramètres du composant Cards
Ces options s’appliquent au composant et à l’ensemble des sous-éléments. Par défaut seules les options de base sont affichées. Vous pouvez activer les options avancées en cliquant sur le bouton du même nom en haut à droite de l’onglet Paramètres.
GRILLE
| OPTION | DESCRIPTION |
|---|---|
| Activer l’effet Masonry | Supprimer l’espaces vertical entre les articles malgré des images de hauteurs différentes |
| Effet de défilement | Appliquer un effet dynamique lorsque les éléments entre dans l’écran lors du défilement de la page |
| Écart | Régler l’écartement entre les images de la galerie |
| Afficher les séparateurs | Séparer les images par des filets verticaux. Dès que les images s’empilent, les lignes de séparation deviennent horizontales. |
COLONNES
Pour chaque taille d’appareil vous pouvez déterminer le nombre de colonne à afficher pour votre galerie. Par exemple vous voudrez peut-être une seule colonne d’images sur les smartphones 3 sur les tablettes et 4 sur les ordinateurs. La valeur inherit signifie même valeur que celle renseignée immédiatement au dessus.
PANNEAU
| OPTION | DESCRIPTION |
|---|---|
| Style | Sélectionnez le style à appliquer au panneau |
| Marges internes | Les marges internes du panneau |
| Alignement | L’alignement horizontal du content |
| Image sans espace | Supprimer les marges externe de l’image pour afficher l’image aux bords du panneau |
TITRE
| OPTION | DESCRIPTION |
|---|---|
| Élément | Définissez l’élément HTML à utiliser pour le titre |
| Style | Appliquer un Style au titre |
| Décoration | Appliquez une décoration au titre |
| Couleur | Appliquez une couleur prédéfinie au titre |
| Marge au dessus | Fixer la marge au dessus du titre |
META
| OPTION | DESCRIPTION |
|---|---|
| Style | Sélectionnez le style du texte meta |
| Couleur | Appliquez une couleur prédéfinie |
| Marge au dessus | Fixer la marge au dessus du texte meta |
| Position | La position du texte meta par rapport au titre |
CONTENU
| OPTION | DESCRIPTION |
|---|---|
| Taille | La taille utilisée pour le texte du contenu |
| Marge au dessus | Fixer la marge au dessus du contenu |
IMAGE
Vous pouvez renseigner les dimensions de votre image en remplissant le champ Largeur ou le champ Hauteur ou les 2. Le réglage d’une seule valeur préserve les proportions de l’image. Si vous renseignez les 2, l’image sera, si possible, redimensionnée et recadrée automatiquement.
La plateforme affiche la meilleur taille d’image, en fonction de la largeur de la fenêtre du navigateur du visiteur, parmi les tailles suivantes : 768px, 1024px, 1366px, 1600px, 1920px.
Nous vous recommandons de télécharger une image un peu plus grande que la taille maximale utilisée dans la page et de toujours renseigner une Largeur correspondant à la largeur maximal d’utilisation de l’image.
| OPTION | DESCRIPTION |
|---|---|
| Style | Appliquer un Style à l’élément parmi Default (Normal), Rounded (Arrondi), Circle (Circulaire) |
| Position | La position de l’image dans le panneau |
| Marge au dessus | Fixer la marge au dessus de l’image |
| Largeur | La largeur de la colonne de l’image |
| Écart | L’écart entre la colonne de l’image et celle du contenu |
| Point d’arrêt | Sélectionnez la taille à partir de laquelle l’image est repositionnée verticalement pour s’adapter à l’appareil sur lequel le site est consulté. |
ICÔNE
| OPTION | DESCRIPTION |
|---|---|
| Ratio | Entrez une taille pour l’icône. Vous pouvez utiliser des décimales en utilisant le point (.) comme séparateur. Exemple 0.8 ou 1.7. |
| Couleur | Appliquez une couleur prédéfinie à l’élément |
Vous pouvez modifier les styles de ces différentes options depuis
LIEN
| OPTION | DESCRIPTION |
|---|---|
| Texte du lien | Le texte du bouton. Peut-être personnalisé par élément au niveau des paramètres de l’élément lui-même. |
| Style | Le style du bouton |
| Taille | Sélectionnez la taille du bouton |
| Marge au dessus | Fixez la marge au dessus du lien |
GÉNÉRAL
Veuillez consulter Options générales des composants
Vous pouvez modifier les styles de ces différentes options depuis Design > Styles. Pour en savoir plus sur la personnalisation des styles, consultez Styles
Avancé
Veuillez consulter Options avancées des composants