Média - Bannière

Dans le panneau Page Builder, développez Media et faites glisser un espace réservé Banner sur la scène.

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

Les boutons Upload Image ​et​ Select from Gallery sont inclus afin que vous puissiez apporter rapidement des modifications au contenu de la bannière directement depuis l’étape. Vous pouvez également modifier le contenu sur la page Edit Banner.

Cliquez sur l’espace réservé de la bannière pour afficher l’ éditeur de texte et saisir le contenu de la bannière.

Vous pouvez également inclure un contenu de bannière plus complexe à l’aide des paramètres Content .

Pointez sur le conteneur de bannières pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( ).

Pour plus d’informations sur la mise à jour des paramètres disponibles, reportez-vous aux sections suivantes :

• Appearance
• Content
• Background
• Advanced

Une fois l’opération terminée, cliquez sur Save dans le coin supérieur droit pour fermer la page Edit Banner.

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

Cliquez sur le texte de l’espace réservé et saisissez le texte que vous souhaitez afficher sur la bannière.

La barre d’outils de l’éditeur s’affiche au-dessus de la zone de texte.

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

Utilisez la barre d’outils de l’éditeur pour saisir et mettre en forme du texte, ainsi que des éléments à insérer, tels que des liens, des images et des widgets.

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

Pointez sur le conteneur de bannières pour afficher la boîte à outils et sélectionnez l’icône Paramètres ( {width="25"} ).

Faites défiler l’écran jusqu’à la section Content ​et utilisez l’éditeur Message Text ​pour saisir et mettre en forme le texte de bannière.

Vous pouvez également insérer des éléments, tels que des liens de texte, des images et des widgets.

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

Si nécessaire, spécifiez un Link pour la bannière.

Le lien est la page de destination qui s’affiche lorsque le client clique sur le bouton ou la zone de la bannière. Vous pouvez utiliser l’un des trois types de liens suivants :

• URL - Liens vers une URL relative ou complète.
• Product - Identifie la page de destination en fonction du nom du produit ou du SKU. Recherchez le produit par nom en fonction d’un nom partiel ou complet. Sélectionnez le produit 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 des catégories. Recherchez la catégorie selon un nom partiel ou complet. Sélectionnez la catégorie dans la section développée de l'arborescence affichée.
• Page - Identifie la page de destination en tant que page de contenu spécifique. Recherchez la page en fonction d’un nom partiel ou complet. Sélectionnez la page dans la liste des résultats de recherche.

note note
NOTE
À compter de la version 2.4.1, Page Builder ne prend plus en charge la liaison de la bannière et des liens dans le texte imbriqué en raison de problèmes d’affichage sur le storefront. Si vous utilisez un lien dans Message Text, vous ne pouvez pas configurer l’option​_Link_. Si vous préférez utiliser un lien unique pour la bannière entière, vous pouvez supprimer tous les liens du texte.
{width="200"}

Au besoin, ajoutez un bouton pour inviter les clients à suivre le lien.

Le paramètre d’aspect de la bannière place un lien ou un bouton unique sous le texte. Renseignez les propriétés du lien ou du bouton à ajouter.

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

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

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Option	Description
  Always	Un bouton apparaît toujours sur la bannière.
  On Hover	Un bouton s’affiche sur la bannière uniquement lorsque vous la survolez.
  Never Show	Un bouton n’apparaît jamais sur la bannière.

• Saisissez le Button Text à afficher sur le bouton.

• 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
  Option	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.

  Le style du bouton du thème actif détermine le format du bouton. En règle générale, un bouton principal a une couleur d’arrière-plan plus visible qu’un bouton secondaire.

Définissez Show Overlay sur l’une des options suivantes :

Vous pouvez utiliser une superposition pour appliquer une couleur d’arrière-plan à la zone de contenu active définie par le paramètre Appearance. L’image d’arrière-plan de la bannière reste visible pendant toute la largeur de la bannière.

Si vous choisissez d’afficher une superposition, définissez le Overlay Color :

• Cliquez sur l’échantillon Aucune couleur et choisissez un échantillon.
• Dans le champ Aucune couleur, saisissez un nom de couleur valide ou une valeur hexadécimale.

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

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

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

Pour contrôler le positionnement horizontal des conteneurs de contenu qui sont ajoutés à la bannière, choisissez un Alignment :

Définissez le style Border appliqué aux quatre côtés du conteneur de bannière :

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

• Border Color - Indiquez 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.

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

• Border Width - Saisissez le nombre de pixels pour la largeur de la ligne de bordure.

• Border Radius - Entrez 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 de la feuille de style actuelle à appliquer au conteneur de bannières.

Séparez plusieurs noms de classe par un espace.

Saisissez des valeurs, en pixels, pour que Margins and Padding indique les marges extérieures et la marge intérieure de la bannière.

Saisissez chaque valeur correspondante dans le diagramme de conteneur de bannières.