Boutons et icônes

L'utilisation de Bouton et liens, vous pouvez ajouter n'importe quel type de Lien (1) à la section. Vous pouvez ajouter un bouton, un lien texte, un lien image, une icône ou un séparateur.

Vous pouvez Dupliquer (2), Modifier (3), ou Supprimer (4) le bouton/lien existant.

Dans cet article :

  1. Ajouter des boutons/liens
  2. Boutons/liens de style

Ajouter des boutons/liens

  • Pour ajouter tout type de lien à la section, cliquez sur le + Bouton Ajouter option.

Le + Bouton Ajouter L'option propose quatre façons d'ajouter un lien. Vous pouvez également ajouter Séparateurs Pour ajouter de l'espace entre les boutons et les liens. Voici les options :


Bouton

Ajouter un bouton à l'élément de la liste.

Vous pourrez mettre à jour :

  1. Étiquette de bouton – Précisez le texte visible sur votre bouton. C'est ce que les utilisateurs verront et sur quoi ils cliqueront.
  2. Lien de bouton – Précisez le URL ou action le bouton devrait se déclencher lorsqu'il est cliqué.
  3. Fenêtre cible – Choisissez si le lien s’ouvre dans le même onglet nouvel onglet.
  4. Style de bouton – Choisissez le style de bouton par défaut (défini dans le Boutons et liens de la section Conception), Solide, Contour ou Lien texte.
    • Valeur par défaut: Suit les paramètres de thème de votre site.
    • Solide: Un bouton gras et rempli.
    • Aperçu: Fond transparent avec une bordure.
    • Lien texte : Style simple et épuré, composé uniquement de texte (pas de zone de boutons).
  1. Forme du bouton – Définissez un forme personnalisée pour chaque bouton individuel dans la section. Cela vous permet de remplacer la forme globale du bouton définie sous Paramètres de conception, vous permettant de mieux contrôler l'apparence de chaque bouton. Les formes disponibles sont : Carré, Arrondi et Pilule.
  2. Couleur du bouton – Personnaliser le jeu de couleurs du bouton :
    • Valeur par défaut: Hérite des paramètres du thème.
    • Inverser: Inverse les couleurs du texte/arrière-plan du bouton.
    • Personnalisé: Vous permet de choisir des couleurs de texte et d'arrière-plan spécifiques.
  1. Bouton texte – Si vous utilisez Couleur de bouton personnalisée, vous pouvez définir le couleur du texte (étiquette) d'ici.
  2. Arrière-plan du bouton – Également disponible sous « Personnalisé », cette option définit la couleur d'arrière-plan du bouton. Associez-la à la couleur du texte pour une lisibilité et un style optimaux.
  3. Icône de bouton – Ajoutez une icône à côté du libellé de votre bouton. Vous pouvez choisir parmi plusieurs options d'icônes.
  4. Mise En Page – Contrôlez le positionnement de l'icône par rapport à l'étiquette. Les options de disposition disponibles sont :
    • Étiquette + Icône : Le texte apparaît en premier, suivi de l'icône.
    • Icône + Étiquette : L'icône apparaît en premier, puis le texte.
    • Étiquette + Icône (large) : Texte et icône disposés avec plus de remplissage, adaptés aux boutons plus larges.
    • Icône + Étiquette (large) : Icône d'abord, disposition de remplissage plus large.
  1. Couleur de l'icône – Choisissez la couleur de l'icône du bouton. Vous pouvez la définir sur Bouton texte couleur ou la Marque couleur.


Paramètres de style de bouton

Vous trouverez ces paramètres sous le Onglet Style des sections. Ces paramètres vous permettent d'affiner l'apparence, l'espacement et la disposition des boutons de votre site Pixpa pour un meilleur contrôle de la conception et une meilleure réactivité :

  1. Taille du bouton – Choisissez la taille du bouton (par exemple, Petit, Moyen, Grand). Cela ajuste le remplissage et la taille de police en fonction de votre design.
  2. Espace entre les boutons – Contrôle l'espacement horizontal entre plusieurs boutons. Vous pouvez utiliser les unités vw (largeur de la fenêtre d'affichage) pour un espacement réactif.
  3. Espace au-dessus des boutons – Ajoute un espacement vertical au-dessus du ou des boutons. Cela permet de les séparer du contenu situé au-dessus, mesuré en %.
  4. Lien texte – Ajuste la taille de la police pour les liens texte des boutons (particulièrement utile lorsque vous utilisez un style « Lien texte » au lieu d’un bouton traditionnel).
  5. Image comme bouton (taille) – Si vous utilisez une image au lieu d'un bouton traditionnel, ce paramètre définit la taille d'affichage de l'image (en pixels).
  6. Largeur du bouton – Choisissez la largeur à laquelle le bouton doit apparaître :
    • Valeur par défaut: Largeur standard basée sur le contenu du bouton
    • Grand / Très grand : Des boutons plus larges pour plus d'emphase
    • Pleine largeur: Le bouton s'étend sur toute la largeur du conteneur


Ajouter un lien texte à l'élément de liste.

Vous pourrez mettre à jour :

  1. Mettez le étiquette de texte.
  2. Spécifie le lien texte.
  3. Fenêtre cible – Choisissez d'ouvrir la page dans la même fenêtre ou dans une nouvelle fenêtre.


Image(s)

Ajoutez une image et liez-la à n'importe quelle page.

  • Une fois que vous avez téléchargé l'image, elle s'affiche de cette façon. Cliquez sur le lien pour le modifier.

  • De là, vous pouvez:
    1. Télécharger une présentation /Changer l'image.
    2. Lien de bouton – Spécifiez le lien.
    3. Fenêtre cible – Choisissez d'ouvrir la page dans la même fenêtre ou dans une nouvelle fenêtre.

Note

Le titre du site sera utilisé comme texte alternatif pour l'image du bouton afin d'améliorer la recherche.


Icône sociale

  • Ajoutez une icône sociale à l'élément de liste.

Vous pouvez gérer :

  1. L'icône sociale à lier.
  2. Spécifiez votre chemin de profil social pertinent.
  3. Fenêtre cible – Choisissez d'ouvrir la page dans la même fenêtre ou dans une nouvelle fenêtre.


Séparateur

Le Séparateur L'option vous permet d'insérer un espacement entre les boutons ou les liens.

Ceci est utile pour créer une séparation visuelle entre des boutons placés à proximité. Vous pouvez ajouter un séparateur à partir du Bouton et liens panneau comme vous ajoutez d'autres boutons.

  • L'espace entre les boutons est contrôlé par le Rembourrage – Haut Réglage dans le séparateur. Le réglage de cette valeur augmente ou diminue l'espacement vertical entre les boutons rapprochés.

 

Note

  • Un séparateur ne relie rien, il crée simplement un espace vertical.
  • Vous pouvez le déplacer vers le haut ou vers le bas pour ajuster l'espacement entre les éléments selon vos besoins.


Options de style pour les boutons et les liens

Le options de style sera présent sous le Style onglet lors de la gestion de la section.

Vous aurez plusieurs options de style pour le bouton et les liens comme suit :

  1. Spécifie le Espace entre les boutons/liens qui ont été ajoutés.
  2. Spécifie le Espace au-dessus du bouton/des liens.
  3. Choisissez le Effet de survol pour le bouton/les liens.

  1. Choisissez le taille du bouton normal que vous avez ajouté dans le Bouton/Liens. 
  2. Spécifie le hauteur du bouton Image si vous avez ajouté un lien d'image dans le Bouton/Liens. 
  3. Spécifie le taille du bouton icône si vous avez ajouté une icône sociale dans le Bouton/Liens. 

Si vous avez ajouté une icône sociale dans le Bouton/Liens ci-dessus, alors :

  1. Choisissez le Type d'icône sociale/Forme.
  2. Choisissez le Style de couleur d'icône sociale. Si vous avez choisi le Couleur de la marque, alors la couleur de la marque de l'icône sera héritée.
    Si vous avez choisi le Couleur sélectionnée option ci-dessus alors :
    1. Spécifie le Couleur de l'icône sociale.
    2. Spécifie le Couleur d'arrière-plan de l'icône sociale.


Exemple

Supposons que vous ayez ajouté un lien social Amazon dans le Bouton/Lienset précisé le couleur de l'icône en rouge et de la couleur d'arrière-plan de l'icône en vert, alors l'icône apparaîtra comme ci-dessous:

Vous ne trouvez pas ce que vous cherchez?

Contactez un Expert Pixpa.