Contenu et éléments de la barre
Les six éléments qu'une barre peut contenir, comment les ordonner et comment les groupes permettent à une même bannière de dire deux choses.
Le panneau Content est la première icône du rail du créateur. Il contient tout ce que dit la barre.
Les éléments se suivent de gauche à droite dans la barre, dans l’ordre où ils figurent dans cette liste.
Ajouter et ordonner
Section intitulée « Ajouter et ordonner »- Add element ouvre un menu des six types. Le nouvel élément se place à la fin de la liste.
- Faites glisser la poignée à gauche d’une ligne pour la déplacer. La barre suit l’ordre défini ici.
- Survolez une ligne pour afficher les boutons de duplication et de suppression.
- Cliquez sur une ligne pour ouvrir ses réglages dans la colonne de droite.
Les six éléments
Section intitulée « Les six éléments »Le message. Définissez les mots, la taille, le gras, l’italique, le souligné et une couleur propre.
Laissez la couleur vide et le texte suit la couleur de texte de la barre : modifier le style de la barre entraîne donc celui du message.
Countdown
Section intitulée « Countdown »Un minuteur en direct dans la barre. Il a trois modes :
| Mode | Ce que voit la personne |
|---|---|
| Count down to a date | Tout le monde voit le même temps restant |
| Fixed minutes per visitor | Chaque personne a son propre compte à rebours dès son arrivée |
| Daily recurring | Fonctionne certains jours de la semaine entre deux heures |
Vous choisissez aussi les unités affichées (jours, heures, minutes, secondes), si les légendes des unités s’affichent sous les chiffres, et ce qu’elles disent. Laissez une légende vide pour utiliser la valeur par défaut en anglais.
When the timer ends détermine ce qui se passe à zéro : masquer la bannière, la laisser à zéro ou la relancer.
Un libellé et une action :
| Au clic | Ce que cela fait |
|---|---|
| Open a link | Envoie la personne vers une URL |
| Scroll to a section | Saute à une partie de la page actuelle, grâce à un sélecteur CSS |
| Apply a discount code | Applique le code au panier de la personne |
Pour un lien, vous pouvez aussi activer Open in a new tab, ce qui laisse votre boutique ouverte en arrière-plan.
Le reste concerne le style : forme (carrée, arrondie, pilule), taille de police, préréglage de taille, gras/italique/souligné, arrière-plan, couleur du libellé et bordure.
Discount code
Section intitulée « Discount code »Le code lui-même, affiché dans un contour en pointillés. Activez Copy on click et la personne le copie en cliquant dessus : sans sélection ni saisie.
Stylisez-le avec un style de bordure, un rayon d’angle et sa propre couleur.
Un logo ou un badge. Collez une URL, ou téléversez un fichier et le champ se remplit tout seul. Définissez la hauteur et le texte alternatif.
Le texte alternatif est ce que les lecteurs d’écran annoncent et ce qui s’affiche si l’image ne se charge pas.
Line break
Section intitulée « Line break »Rien à voir. Tout ce qui suit commence sur une nouvelle ligne : une longue barre peut ainsi s’étendre sur deux lignes au lieu d’une seule, comprimée.
Faites-le glisser entre deux éléments pour couper la barre où vous voulez.
Un élément, deux écrans
Section intitulée « Un élément, deux écrans »Ouvrez n’importe quel élément sauf un saut de ligne : sa section Style commence par Device settings, avec trois icônes : un œil, un ordinateur et un téléphone.
Device settings se trouve en haut de Style, et tout ce qui est en dessous suit l’icône que vous choisissez.
L’œil est le cas courant : ce que vous définissez s’applique aux deux écrans.
Les icônes d’ordinateur et de téléphone limitent les réglages en dessous à cet écran. Choisissez le téléphone, ramenez la taille de police à 12, et seuls les téléphones obtiennent 12 : les ordinateurs gardent ce que l’œil a défini. Tout ce qui se trouve dans Style se dissocie ainsi : tailles de police, tailles des chiffres et des libellés d’un compte à rebours, ses couleurs et les unités qu’il affiche, hauteur d’une image, forme et taille d’un bouton, bordure et couleur d’un code de réduction.
Choisir un écran révèle aussi une option Hide on desktop ou Hide on mobile. C’est ainsi que vous retirez un élément qui ne convient pas à un téléphone, comme une longue phrase ou une image, sans créer une seconde bannière. Il reste affiché sur l’autre écran.
Un saut de ligne n’a pas de section Style ; il conserve donc une simple commande Show on : Both screens, Desktop only ou Mobile only.
Groupes : une bannière, deux messages
Section intitulée « Groupes : une bannière, deux messages »Sous la liste des éléments se trouve Add group.
Un seul groupe est le cas courant. Ajoutez-en un deuxième et la barre alterne entre eux : le premier groupe s’affiche, puis le deuxième, puis retour au premier. Chaque groupe contient ses propres éléments : une même bannière peut donc alterner entre « Free shipping over $50 » et « Sale ends tonight ».
La vitesse de changement, et le choix entre fondu enchaîné et glissement, se règlent dans Animation et groupes.