La section « Cartes personnalisables » dans le constructeur de site 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, les « 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 le bloc ?
Pour ajouter la section « Cartes personnalisables », cliquez sur le « + » en mode édition de votre site :
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 de paramètres de contenu s'ouvrira pour vous :
Comment ajouter une carte ?
Dans le menu d'édition de la section « Cartes personnalisables » du contenu, vous verrez différentes sections de paramètres : le style des cartes, les images, les boutons, etc.
Pour votre commodité, vous pouvez d'abord ajouter des cartes pour voir comment les paramètres de style s'appliquent aux cartes.
Pour ce faire, faites défiler vers le bas dans le menu des paramètres de 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écharger 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, par exemple, sauter le téléchargement 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 seront pas affichés dans la carte.
Il existe différents paramètres pour le texte de la carte, similaires à 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 ce faire, 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 ce faire, cliquez sur le bouton « Ajouter une carte », qui se trouve en dessous de la barre de paramètres de la première carte ajoutée :
Paramètres des cartes
Les cartes sont configurées dans un style unique : tous les paramètres que vous utilisez dans cette section seront appliqués à toutes les cartes de la même section.
Style des cartes
Il existe deux styles pour les cartes dans le constructeur de site Mavibot : simple et sous forme de curseur.
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 « Curseur », les cartes seront sous forme de carrousel, ajoutant ainsi plus de dynamisme au site :
Pour le style curseur, vous pouvez choisir où se trouveront les flèches et les points de la carte :
Les flèches peuvent être situées à l'intérieur du curseur, à l'extérieur ou masquées (par exemple, si vous définissez une minuterie pour faire défiler automatiquement les cartes) :
Les points peuvent également être situés à l'intérieur du curseur, à l'extérieur ou masqués.
Pour faire défiler automatiquement les cartes, définissez l'intervalle de temps pour l'affichage d'une page :
Si la valeur de la minuterie est définie sur 0, les cartes ne seront pas automatiquement défilées.
Attention !
Le temps est défini en millisecondes, où une milliseconde équivaut à 0,001 seconde. Cela signifie que si vous devez définir 7 secondes, entrez la valeur dans le champ 7000.
Vous pouvez également choisir le type de carte :
Paramètres de couleur pour les éléments de la carte
Pour personnaliser les cartes selon votre style, utilisez les paramètres de couleur :
Les paramètres de couleur sont appliqués à toutes les cartes en même temps. Si vous avez besoin que la couleur du texte soit différente dans chaque carte, utilisez les paramètres dans le champ de texte.
Une palette de couleurs étendue 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 espacements
- Nombre de cartes par ligne - un champ de texte qui vous aidera à définir le nombre requis de cartes dans une ligne (page).
- Espacements - des champs pour 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 distincte 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, à gauche ou à droite.
Paramètres d'ombre
Cela aidera à ajouter de la profondeur aux cartes et à les mettre en valeur par rapport au fond de la section/page.
Paramètres d'image
Les paramètres d'image sont également appliqués à toutes les images que vous avez ajoutées à la carte.
Dans les paramètres d'image, vous devez définir :
a) la largeur de l'image :
Le champ prend une valeur numérique en pixels, si non spécifié, il s'affiche automatiquement selon la largeur réelle de l'image en pixels.
b) la hauteur de l'image :
Le champ prend une valeur numérique en pixels, si non spécifié, il s'affiche automatiquement en proportion de la hauteur réelle de l'image.
c) l'arrondi :
Le champ, qui prend une valeur numérique en pixels, permet d'arrondir les coins de l'image :
d) la taille de l'image :
Le paramètre est appliqué s'il est nécessaire de remplir/étendre/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 située sous le texte dans la carte.
Comment configurer les boutons
Le texte, ainsi que le lien vers la page sur laquelle votre visiteur du site doit cliquer, sont configurés 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échargeant une image dans la carte :
Pour définir la couleur du texte et de l'arrière-plan du bouton, utilisez les paramètres ici :
Ensuite, vous pouvez ajuster la taille, la largeur et les espacements du bouton :
- La largeur du bouton - un champ qui prend une valeur numérique en pixels et en pourcentages :
- Alignement du bouton - permet de positionner le bouton dans la carte par rapport au bord droit ou gauche, ainsi qu'au centre.
- Rayon de bordure du bouton - un champ qui prend une valeur numérique en pixels pour arrondir les coins du bouton :
- Largeur de bordure - un champ qui prend une valeur numérique en pixels pour définir la largeur du contour du bouton :
- Marge
Cela vous aide à ajuster les espacements du bouton dans la carte par rapport aux bords supérieur, inférieur, gauche et droit.
- Remplissage
Cela vous aide à ajuster les espacements à l'intérieur du bouton.
- Icône
Si vous avez téléchargé une icône sur un bouton dans la carte, l'icône peut être ajustée pour s'adapter :
Et également définir la position de l'icône par rapport au texte à gauche ou à droite :
- Ombre pour le bouton
L'ombre peut être définie non seulement pour la carte, mais aussi séparément pour le bouton. Pour ce faire, il suffit de trouver un champ déroulant avec le nom « Ombre » dans les paramètres du bouton et de sélectionner le degré d'intensité de l'ombre : légère ou forte :
- Animation du bouton
Cela aide à attirer l'attention des clients (utilisateurs du site) sur l'action ciblée sur le bouton et à ajouter de la dynamique au site :
1) animation de flash du bouton :
2) animation de déchirure du bouton :
Terminé !
Maintenant, vous savez comment créer et personnaliser des cartes sur votre site à partir de zéro.