# Cartes personnalisables La section « Cartes personnalisables » dans le créateur de site web est conçue pour ceux qui souhaitent présenter facilement et rapidement des informations clés sur leurs produits, services ou avis clients. Ces blocs vous permettent d’ajouter des cartes visuellement attrayantes à la page du site, qui peuvent être personnalisées pour répondre aux besoins de votre entreprise.
Que vous souhaitiez fournir une description détaillée du cours, des retours de clients satisfaits ou des recommandations pour l’utilisation de vos services, « Cartes personnalisables » et « Cartes de cours » vous aideront à mettre en valeur les informations et à les rendre plus accessibles et pratiques pour les visiteurs du site. ## Comment ajouter un bloc ? Pour ajouter la section « Cartes personnalisables », cliquez sur le « + » en mode édition de votre site web :
Ensuite, trouvez la section « Cartes personnalisables » dans le menu qui s’ouvre et cliquez dessus pour ajouter la section au site. La section sera ajoutée au site, et le menu des paramètres du contenu s’ouvrira pour vous :
## Comment ajouter une carte ? Dans le menu d’édition du contenu de la section « Cartes personnalisables », vous verrez différentes sections de paramètres : le style des cartes, les images, les boutons, etc. Pour votre confort, vous pouvez d’abord ajouter des cartes afin de voir comment les paramètres de style s’appliquent aux cartes. Pour cela, faites défiler vers le bas dans le menu des paramètres du contenu et trouvez le bouton « Ajouter une carte » :
En cliquant sur le bouton « Ajouter une carte », vous voyez les paramètres d’une carte avec un champ de texte vide, une barre pour téléverser une image pour la carte et pour l’icône du bouton, ainsi que pour le texte du bouton lui-même :
Les champs de paramètres de la carte sont facultatifs : cela signifie que vous pouvez ignorer, par exemple, le téléversement d’une image pour la carte elle-même ou pour l’icône du bouton, sans insérer de texte — tout est à votre discrétion. Si, par exemple, vous n’avez pas besoin d’un bouton avec un lien dans la carte, laissez les champs « Nom du bouton » et « Lien » vides : alors les boutons ne s’afficheront pas dans la carte.
Il existe divers paramètres pour le texte de la carte, similaires à ceux de tout éditeur de texte, où vous pouvez ajuster la taille de la police, le contour de la police, la couleur, la mise en évidence, ainsi qu’ajouter un lien et plus encore. Pour cela, sélectionnez le texte (une partie du texte) et appliquez les paramètres nécessaires au texte :
Après avoir entièrement configuré la première carte, ajoutez la suivante : pour cela, cliquez sur le bouton « Ajouter une carte », situé sous la barre des paramètres de la première carte ajoutée :
## Paramètres des cartes {% hint style="info" %} Les cartes sont configurées selon un style unique : tous les paramètres que vous utilisez dans cette section seront appliqués à toutes les cartes de la même section. {% endhint %} ### Style des cartes Il existe deux styles de cartes dans le créateur de site web Mavibot : simple et sous forme de diaporama. En utilisant un style simple, toutes les cartes seront immédiatement affichées sur une seule page de la section du site :
En utilisant le style « Diaporama », les cartes seront présentées sous forme de carrousel, ajoutant ainsi plus de dynamisme au site : Pour le style diaporama, vous pouvez choisir où seront placées les flèches et les points de la carte :
Les flèches peuvent être placées à l’intérieur du diaporama, à l’extérieur ou masquées (par exemple, si vous réglez un minuteur pour faire défiler automatiquement les cartes) :
Les points peuvent également être placés à l’intérieur du diaporama, à l’extérieur ou masqués. Pour faire défiler les cartes automatiquement, définissez l’intervalle de temps pour l’affichage d’une page :
Si la valeur du minuteur est définie sur 0, les cartes ne défileront pas automatiquement. {% hint style="warning" %} Attention ! Le temps est défini en millisecondes, où une milliseconde est égale à 0,001 seconde. Cela signifie que si vous devez régler 7 secondes, entrez alors la valeur 7000 dans le champ. {% endhint %} Vous pouvez également choisir le type de carte :
#### Paramètres de couleur des éléments de la carte Pour personnaliser les cartes selon votre style, utilisez les paramètres de couleur :
Les paramètres de couleur s’appliquent à toutes les cartes en même temps. Si vous avez besoin que la couleur du texte soit différente dans chaque carte, utilisez alors les paramètres du champ de texte. Une large palette de couleurs est disponible pour la personnalisation des couleurs :
Et vous pouvez appliquer les paramètres de couleur à n’importe quel élément de la carte. #### Réglage des bordures et des marges intérieures
1. **Nombre de cartes par ligne** - un champ de texte qui vous aidera à définir le nombre requis de cartes sur une ligne (page). 2. **Marges intérieures -** sont des champs permettant de saisir des valeurs numériques qui aideront à augmenter ou à diminuer les marges horizontales/verticales entre les cartes, ainsi que les marges à l’intérieur des cartes,
Vous pouvez définir une valeur numérique commune pour l’indentation à l’intérieur des cartes, ou, en cliquant sur l’engrenage dans le coin droit de la ligne, définir une valeur séparée pour les bordures supérieure, inférieure, gauche et droite :
#### Orientation de la carte
L’orientation de la carte peut être horizontale ou verticale. #### Alignement Il peut être au centre, sur le bord gauche ou droit.
#### Paramètres de l’ombre Cela aidera à donner de la profondeur aux cartes et à les mettre en valeur par rapport à l’arrière-plan de la section/page.
## Paramètres de l’image Les paramètres de l’image s’appliquent également à toutes les images que vous avez ajoutées à la carte.
Dans les paramètres de l’image, vous devez définir : a) largeur de l’image :
Le champ prend une valeur numérique en pixels ; si elle n’est pas spécifiée, l’affichage se fait automatiquement selon la largeur réelle de l’image en pixels. b) hauteur de l’image :
Le champ prend une valeur numérique en pixels ; si elle n’est pas spécifiée, l’affichage se fait automatiquement proportionnellement à la hauteur réelle de l’image. c) arrondi :
Le champ, qui prend une valeur numérique en pixels, aide à arrondir les coins de l’image :
d) taille de l’image :
Le paramètre est appliqué s’il est nécessaire de remplir/étirer/positionner l’image par rapport à la largeur et à la hauteur spécifiées pour l’image. e) la case à cocher « Image après le texte » Si vous cochez la case, l’image sera placée sous le texte dans la carte. ## Comment configurer les boutons
Le **texte,** ainsi que le **lien** vers la page sur laquelle votre visiteur doit cliquer, se configure dans la carte elle-même :
De plus, en plus du texte et du lien, vous pouvez définir une icône pour le bouton en téléversant une image dans la carte :
Pour définir la couleur du texte et l’arrière-plan du bouton, utilisez les paramètres ici :
Ensuite, vous pouvez ajuster la taille, la largeur et les marges intérieures du bouton :
1. **La largeur du bouton** - est un champ qui prend une valeur numérique en pixels comme en pourcentage :
2. **Alignement du bouton** - aide à positionner le bouton dans la carte par rapport au bord droit ou gauche, ainsi qu’au centre.
3. **Rayon de bordure du bouton -** est un champ qui prend une valeur numérique en pixels pour arrondir les coins du bouton :
4. **Largeur de bordure -** est un champ qui prend une valeur numérique en pixels pour définir la largeur du contour du bouton :
5. **Marge** Cela vous aide à ajuster les marges intérieures du bouton dans la carte par rapport aux bords supérieur, inférieur, gauche et droit.
6. **Rembourrage** Cela vous aide à ajuster les marges intérieures à l’intérieur du bouton.
7. **Icône** Si vous avez téléversé une icône sur un bouton dans la carte, l’icône peut être ajustée pour s’adapter :
Et définissez également la position de l’icône par rapport au texte, à gauche ou à droite :
8. **Ombre du bouton** L’ombre peut être définie non seulement pour la carte, mais aussi séparément pour le bouton. Pour cela, il suffit de trouver un champ déroulant nommé « Ombre » dans les paramètres du bouton et de sélectionner le degré d’intensité de l’ombre : légère ou forte :
9. **Animation du bouton**
Cela aide à attirer l’attention des clients (utilisateurs du site) sur l’action ciblée du bouton et à ajouter du dynamisme au site : 1\) animation de bouton clignotant :
2\) animation de bouton à effet ripper :
{% hint style="success" %} Terminé ! \ Vous savez maintenant comment créer et personnaliser des cartes sur votre site web à partir de zéro. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.mavibot.ai/doc/fr/websites/sites/blocks/cards.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.