Styliser les boutons de paiement

Après avoir ajouté le bloc Boutons de paiement à votre site, vous pouvez modifier la couleur du bouton, sa mise en page et plus encore. Découvrez comment styliser vos boutons de paiement dans ce guide.

Modifiez l’arrière-plan et la couleur du texte du bouton de paiement en procédant comme suit :

1. Cliquez sur un bouton spécifique dans le bloc Paiements.
2. Dans la colonne latérale des réglages du bloc, localisez la section « Couleur d’arrière-plan et de texte ».
3. Cliquez sur la section Couleur du texte pour modifier la couleur du texte du bouton.
4. Cliquez sur la section Arrière-plan pour modifier la couleur du bouton.

En savoir plus sur l’application de couleurs à vos boutons.

Modifiez l’arrondi des bords de votre bouton en modifiant son rayon. Procédez comme suit :

1. Cliquez sur un bouton spécifique dans le bloc Paiements.
2. Dans la colonne latérale des réglages du bloc, localisez la section « Bordure ».
3. Utilisez le curseur ou entrez un nombre pour modifier le rayon du bouton.
4. Cliquez sur « Enregistrer » ou « Publier » dans le coin supérieur droit pour enregistrer vos modifications.

Plus le nombre est faible, plus le bouton sera carré ; plus le nombre est élevé, plus les coins du bouton seront arrondis.

Configurez la largeur du bouton en procédant comme suit :

1. Cliquez sur un bouton spécifique dans le bloc Paiements.
2. Dans la colonne latérale des réglages du bloc, localisez la section « Largeur ».
3. Sélectionnez l’un des préréglages (25 %, 50 %, 75 % ou 100 %) ou définissez une largeur personnalisée.
4. Cliquez sur « Enregistrer » ou « Publier » dans le coin supérieur droit pour enregistrer vos modifications.

Par exemple, définissez la largeur d’un bouton sur 100 % pour créer un bouton en pleine largeur. Vous pouvez également définir chaque bouton sur 50 % pour obtenir deux boutons occupant toute la largeur de la zone de contenu, comme dans cet exemple :

Suivez ces étapes pour modifier l’alignement des boutons de paiement :

1. Sélectionnez Vue en liste dans le coin supérieur gauche de l’éditeur.
2. Cliquez sur l’élément bloc Boutons de paiement dans la vue en liste.
3. Dans la barre d’outils du bloc qui s’affiche, cliquez sur le bouton « Modifier la justification des éléments » .
4. Choisissez l’une des options suivantes :
   • Justifier les éléments à gauche : aligne tous les boutons à gauche.
   • Justifier les éléments au centre : aligne tous les boutons au centre.
   • Justifier les éléments à droite : aligne tous les boutons à droite.
   • Espace entre les éléments : espace les boutons de manière égale dans le bloc Boutons de paiement.
5. Cliquez sur « Enregistrer » ou « Publier » dans le coin supérieur droit pour enregistrer vos modifications.

Sélectionnez un style prédéfini pour votre bouton en procédant comme suit :

1. Cliquez sur un bouton spécifique dans le bloc Paiements.
2. Dans la colonne latérale des réglages du bloc, cliquez sur l’onglet Styles.
3. Choisissez entre Plein et Contour pour le style de bouton.
4. Cliquez sur « Enregistrer » ou « Publier » dans le coin supérieur droit pour enregistrer vos modifications.

Modifiez la taille de police, le type et la casse du texte de votre bouton en procédant comme suit :

1. Cliquez sur un bouton spécifique dans le bloc Boutons de paiement.
2. Dans la colonne latérale des réglages du bloc, cliquez sur l’onglet Styles.
3. Défilez jusqu’à la section Typographie.
4. Modifiez la taille du texte du bouton ou cliquez sur les trois points (⋮) pour activer les options Police et Casse.
5. Cliquez sur « Enregistrer » ou « Publier » dans le coin supérieur droit pour enregistrer vos modifications.

En savoir plus sur les réglages de typographie.

Vous pouvez ajouter une mise en forme en gras et en italique au texte du bouton de paiement. Pour appliquer la mise en forme, procédez comme suit :

1. Cliquez sur un bouton spécifique dans le bloc Paiements.
2. Mettez en surbrillance une partie ou l’intégralité du texte du bouton.
3. Appliquez l’un des styles suivants à l’aide de la barre d’outils du bloc qui apparaît :
   • Gras
   • Italique
   • L’icône Plus comprend :
     • Mettre en évidence : modifiez le texte et la couleur d’arrière-plan du texte uniquement. Utilisez les styles pour modifier la couleur du bouton.
     • Code en ligne
     • Image en ligne
     • Saisie au clavier
     • Langue
     • Barrer
     • Indice
     • Exposant
4. Cliquez sur « Enregistrer » ou « Publier » dans le coin supérieur droit pour enregistrer vos modifications.