Éléments - Boutons
Utilisez le type de contenu Boutons pour ajouter un bouton individuel ou un ensemble de boutons dans la Page Builder scène. Vous pouvez disposer les boutons horizontalement ou verticalement, puis les ajouter directement aux rangées, colonnes, onglets et bannières sur la scène.
{width="600" modal="regular"}
Toolbox
Lorsque vous utilisez le type de contenu Boutons , vous ajoutez et modifiez des boutons individuels et le conteneur de boutons qui contient un ou plusieurs boutons. Chacun dispose de sa propre boîte à outils que vous utilisez pour concevoir des boutons sur la scène Page Builder.
Barre d’outils à boutons individuelle
{width="500" modal="regular"}
Boîte à outils du conteneur de boutons
{width="500" modal="regular"}
Ajouter un bouton individuel
-
Dans le panneau Page Builder, développez Elements et faites glisser un espace réservé Buttons sur 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 sélectionnez 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 :
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Type Description Primary
Applique le style de bouton principal à partir de la feuille de style active. Secondary
Applique le style de bouton secondaire à partir de la feuille de style active, le cas échéant. Link
Crée un lien hypertexte plutôt qu’un bouton. {width="500" modal="regular"}
-
Définissez le Button Link à l’aide de l’un des types suivants :
-
URL - Entrez l’URL de destination du lien.
L’URL peut être soit un lien relatif vers un produit ou une page de votre magasin, 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 accède à un autre site web, vous pouvez conserver la page active ouverte sur 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 - Entrez un nom de produit (partiel ou complet) ou un SKU, puis sélectionnez le nom de produit dans la liste.
note note NOTE Les produits sont affichés dans la liste selon les paramètres Afficher les produits en rupture de stock . Pour les marchands 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 - Entrez un nom de catégorie (partiel ou complet) ou cliquez dans le champ vierge pour afficher l’arborescence des catégories. Sélectionnez ensuite le nom de la catégorie dans l'arborescence.
{width="600" modal="regular"}
-
Page - Entrez le nom d’une page CMS (partielle ou complète) ou cliquez dans le champ vierge pour afficher la liste complète. Sélectionnez ensuite le nom de la page dans la liste des résultats de recherche.
{width="600" modal="regular"}
-
-
Renseignez les paramètres avancés si nécessaire.
-
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.
Ajouter un ensemble de boutons
Les sections suivantes décrivent une série d’étapes permettant de commencer par un bouton individuel et de créer un ensemble de trois boutons au sein d’un conteneur de boutons. Si vous ne disposez pas déjà d’un bouton individuel, suivez les instructions précédentes pour ajouter un bouton individuel à la scène.
Etape 1 : créer le second bouton
-
Pointez sur le conteneur de boutons pour afficher la boîte à outils et sélectionnez l’icône Ajouter ( {width="20"} ).
{width="500" modal="regular"}
-
Saisissez le texte à afficher sur le deuxième bouton.
-
Cliquez sur le nouveau bouton pour afficher sa boîte à outils et sélectionnez 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 accède à la page Nous contacter.
{width="600" modal="regular"}
-
Renseignez les paramètres avancés si nécessaire.
-
Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.
Etape 2 : créer le troisième bouton
-
Cliquez à nouveau sur le second bouton sur l’étape et sélectionnez l’icône Dupliquer ( {width="20"} ).
{width="500" modal="regular"}
-
Saisissez le texte à afficher sur le troisième bouton.
-
Cliquez sur le troisième bouton pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).
{width="500" modal="regular"}
-
Mettez à jour Button Link si nécessaire.
-
Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.
Etape 3 : mettre à jour le conteneur de boutons
-
Pointez sur le conteneur de boutons pour afficher la boîte à outils et sélectionnez 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 de boutons empilés complet apparaît sur la scène, avec un bouton principal et deux boutons secondaires.
{width="500" modal="regular"}
Déplacer un bouton
-
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 un nouvel emplacement pour le bouton dans le conteneur de boutons.
{width="500" modal="regular"}
Modification des paramètres d’un bouton
-
Cliquez sur le bouton sur l’étape pour afficher la boîte à outils et choisissez l’icône Paramètres ( {width="20"} ).
{width="500" modal="regular"}
-
Mettez à jour les paramètres standard si nécessaire.
-
Button Text - Entrez le texte à afficher sur le bouton (peut également être mis à jour directement à partir de la scène).
-
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 de bouton principal à partir de la feuille de style active. Secondary
Applique le style de bouton secondaire à partir de la feuille de style active, 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. Vous pouvez rechercher le nom du produit en fonction d’un nom partiel ou complet. Le produit est ensuite sélectionné dans la liste des résultats de recherche. Category
Identifie la page de destination en tant que catégorie ou sous-catégorie spécifique dans l’arborescence de catégories. Page
Identifie la page de destination en tant que page CMS spécifique.
-
-
Renseignez les paramètres avancés si nécessaire.
-
Pour enregistrer les paramètres et revenir à l’espace de travail Page Builder, cliquez sur Save dans le coin supérieur droit.
Modification des paramètres d’un conteneur de boutons
-
Pointez sur le conteneur de boutons pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="20"} ).
-
Mettez à jour les paramètres Appearance si nécessaire.
-
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.
Lorsqu’il 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 si nécessaire.
-
Une fois l’opération terminée, cliquez sur Save pour appliquer les paramètres et revenir à l’espace de travail Page Builder.
Modification des paramètres avancés
Vous pouvez modifier les paramètres Advanced de boutons individuels et du conteneur de boutons.
-
Pour contrôler le positionnement dans le conteneur parent, choisissez le Alignment :
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Option Description Default
Applique le paramètre d’alignement par défaut spécifié dans la feuille de style du thème actif. Left
Aligne le contenu le long de la bordure gauche du conteneur parent, en tenant compte de toute marge intérieure spécifiée. Center
Aligne le contenu au centre du conteneur parent, en tenant compte de toute marge intérieure spécifiée. Right
Aligne le contenu le long de la bordure droite du conteneur parent, en tenant compte de toute marge intérieure spécifiée. -
Définissez le style Border appliqué aux quatre côtés du conteneur de boutons ou de boutons :
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Option Description Default
Applique le style de bordure par défaut spécifié par la feuille de style associée. None
Ne fournit aucune indication visible des bordures du conteneur. Dotted
La bordure du conteneur s’affiche sous la forme d’une ligne pointillée. Dashed
La bordure du conteneur s’affiche sous la forme d’une ligne en pointillés. Solid
La bordure du conteneur s’affiche sous la forme d’une ligne pleine. Double
La bordure du conteneur s’affiche sous la forme d’une ligne double. Groove
La bordure du conteneur s’affiche sous forme de ligne droite. Ridge
La bordure du conteneur s’affiche sous la forme d’une ligne à droite. Inset
La bordure du conteneur s’affiche sous la forme d’une ligne d’insertion. Outset
La bordure du conteneur apparaît comme une ligne de départ. -
Si vous définissez un style de bordure autre que
None
, renseignez les options d’affichage de la bordure :table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Description Border Color Définissez la couleur en choisissant un échantillon, en cliquant sur le sélecteur de couleurs ou en saisissant un nom de couleur valide ou une valeur hexadécimale équivalente. Border Width Saisissez le nombre de pixels pour la largeur de la ligne de bordure. Border Radius Saisissez le nombre de pixels pour définir la taille du rayon utilisé pour arrondir chaque coin de la bordure. -
(Facultatif) Indiquez les noms de CSS classes dans la feuille de style actuelle à appliquer au conteneur de boutons ou de boutons.
Séparez plusieurs noms de classe par un espace.
-
Saisissez des valeurs, en pixels, pour le Margins and Padding afin de déterminer les marges extérieures et la marge intérieure du conteneur de boutons ou de boutons.
Saisissez les valeurs correspondantes dans le diagramme.
table 0-row-2 1-row-2 2-row-2 layout-auto Zone de conteneur Description Margins Espace vide appliqué au bord extérieur de tous les côtés du conteneur. Options : Top
/Right
/Bottom
/Left
Padding Espace blanc appliqué au bord intérieur de tous les côtés du conteneur. Options : Top
/Right
/Bottom
/Left