Éléments - Boutons

Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé Buttons vers une ligne, une colonne ou un ensemble d’onglets sur la scène.

{width="500" modal="regular"}

Pointez sur le bouton pour afficher la boîte à outils et choisissez l’icône Paramètres ( ).

Saisissez le Button Text à afficher sur le bouton.

{width="600" modal="regular"}

Définissez Button Type sur l’une des options suivantes :

{width="500" modal="regular"}

Définissez le Button Link à l’aide de l’un des types suivants :

• URL - Saisissez l’URL de destination du lien.

  L’URL peut être soit un lien relatif vers un produit ou une page de votre boutique, soit une URL complète.

  Exemple d’URL relative - ../luma-analog-watch.html

  Exemple d’URL complète - http://mystore.com/luma-analog-watch.html

  Si le lien mène à un autre site web, vous pouvez conserver la page active ouverte dans votre boutique en ouvrant le lien dans un nouvel onglet du navigateur.

  Pour empêcher le visiteur de quitter votre boutique, cochez la case Open in new tab .

• Product - Saisissez un nom de produit (partiel ou complet) ou un SKU, puis choisissez le nom du produit dans la liste.

  note note
  NOTE
  Les produits sont affichés dans la liste en fonction des paramètres Afficher les produits en rupture de stock. Pour les commerçants Multi Source utilisant Inventory management, la liste de produits est limitée par la source affectée au site web par défaut uniquement.

  {width="600" modal="regular"}

• Category - Saisissez un nom de catégorie (partiel ou complet) ou cliquez dans le champ vide pour afficher l’arborescence des catégories. Choisissez ensuite le nom de la catégorie dans l’arborescence.

  {width="600" modal="regular"}

• Page - Saisissez le nom d’une page CMS (partielle ou complète) ou cliquez dans le champ vide pour afficher la liste complète. Choisissez ensuite le nom de la page dans la liste des résultats de la recherche.

  {width="600" modal="regular"}

Renseignez les paramètres avancés selon vos besoins.

Une fois l’opération terminée, cliquez sur Save dans le coin supérieur droit pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Pointez sur le conteneur de boutons pour afficher la palette et choisissez l’icône Ajouter ( {width="20"} ).

{width="500" modal="regular"}

Saisissez le texte qui doit apparaître sur le deuxième bouton.

Cliquez sur le nouveau bouton pour afficher sa boîte à outils et choisissez l’icône Paramètres ( {width="20"} ).

{width="500" modal="regular"}

Définissez Button Type sur Secondary.

Configurez le Button Link selon vos besoins.

Dans l’exemple suivant, le lien est une URL relative qui mène à la page Nous contacter.

{width="600" modal="regular"}

Renseignez les paramètres avancés selon vos besoins.

Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Cliquez à nouveau sur le deuxième bouton de l’étape et sélectionnez l’icône Dupliquer ( {width="20"} ).

{width="500" modal="regular"}

Saisissez le texte qui doit apparaître sur le troisième bouton.

Cliquez sur le troisième bouton pour afficher la palette et choisissez l'icône Paramètres ( {width="20"} ).

{width="500" modal="regular"}

Mettez à jour le Button Link selon les besoins.

Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Pointez sur le conteneur de boutons pour afficher la boîte à outils et choisissez l’icône Paramètres ( {width="20"} ).

{width="500" modal="regular"}

Sous Appearance, choisissez Stacked.

Définissez All Buttons are same size sur Yes.

{width="300"}

Mettez à jour les paramètres restants si nécessaire, à l’aide des descriptions de Modifier les paramètres d’un conteneur de boutons.

Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

L’ensemble complet de boutons empilés apparaît sur l’étape, avec un bouton principal et deux boutons secondaires.

{width="500" modal="regular"}

Cliquez sur le bouton à déplacer.

Sélectionnez l’icône Déplacer ( {width="20"} ) qui s’affiche juste avant le texte du bouton et faites-la glisser vers une nouvelle position pour le bouton dans le conteneur du bouton.

{width="500" modal="regular"}

Cliquez sur le bouton de l’étape pour afficher la palette et choisissez l’icône Paramètres ( {width="20"} ).

{width="500" modal="regular"}

Mettez à jour les paramètres standard si nécessaire.

• Button Text - Saisissez le texte à afficher sur le bouton (qui peut également être mis à jour directement depuis l'étape).

• Button Type - Détermine le format du bouton.

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Type	Description
  Primary	Applique le style du bouton principal à partir de la feuille de style actuelle.
  Secondary	Applique le style du bouton secondaire de la feuille de style en cours, le cas échéant.
  Link	Crée un lien hypertexte plutôt qu’un bouton.

• Button Link - Détermine la page de destination diffusée lorsque l’utilisateur clique sur le bouton.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Option	Description
  URL	Utilise une URL relative ou complète pour identifier la page de destination.
  Product	Identifie la page de destination en fonction du nom du produit ou du SKU. Le nom du produit peut être recherché en fonction d’un nom partiel ou complet. Le produit est ensuite sélectionné dans la liste des résultats de la recherche.
  Category	Identifie la page de destination en tant que catégorie ou sous-catégorie spécifique dans l’arborescence des catégories.
  Page	Identifie la page de destination en tant que page CMS spécifique.

Renseignez les paramètres avancés selon vos besoins.

Pour enregistrer les paramètres et revenir à l’espace de travail Page Builder, cliquez sur Save dans le coin supérieur droit.

Pointez sur le conteneur de boutons pour afficher la boîte à outils et choisissez l’icône Paramètres ( {width="20"} ).

Mettez à jour les paramètres Appearance selon vos besoins.

• Utilisez les options de disposition pour afficher les boutons horizontalement ou verticalement dans le conteneur :

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Option	Description
  Inline	Dispose les boutons horizontalement.
  Stacked	Dispose les boutons verticalement.

• Définissez l’option All buttons are same size en fonction de vos préférences.

  Lorsque ce paramètre est défini sur Yes, tous les boutons du conteneur ont une taille cohérente en fonction de la longueur du texte du bouton le plus long.

Renseignez les Paramètres avancés selon vos besoins.

Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.

Pour contrôler le positionnement dans le conteneur parent, choisissez l’Alignment :

Définissez le style de Border appliqué aux quatre côtés du ou des conteneurs de boutons :

Si vous définissez un style de bordure autre que None, renseignez les options d’affichage des bordures :

(Facultatif) Spécifiez les noms des CSS classes de la feuille de style actuelle à appliquer au ou aux conteneurs de boutons.

Séparez plusieurs noms de classe par un espace.

Saisissez les valeurs, en pixels, du Margins and Padding pour déterminer les marges extérieures et la marge intérieure du ou des conteneurs de boutons.

Saisissez les valeurs correspondantes dans le diagramme.