Concevoir une bannière
Arrière-plan, couleurs, espacement, bouton de fermeture, et comment rendre toute la barre cliquable.
Le panneau Design est l’icône en forme de pinceau du rail du créateur. Il couvre tout ce qui concerne l’aspect de la barre, hors les éléments eux-mêmes.
Les réglages Design s’appliquent à toute la barre, et non à un seul élément.
Apparence et arrière-plan
Section intitulée « Apparence et arrière-plan »Trois styles d’arrière-plan :
| Style | Ce que vous définissez |
|---|---|
| Solid | Une couleur |
| Gradient | Une couleur de départ, une couleur d’arrivée et un angle |
| Image | Une image qui couvre la barre |
Couleurs
Section intitulée « Couleurs »| Réglage | Ce qu’il couvre |
|---|---|
| Font | La police. Laissez la police du thème, sauf si la barre a besoin de la sienne. |
| Text | La couleur du texte de la barre |
| Accent | Les boutons, les codes de réduction et le compte à rebours, sauf si l’un d’eux a sa propre couleur |
L’accent est le réglage à bien comprendre. Définissez-le une fois et le bouton, le contour du code et le minuteur le suivent. Donnez à un élément sa propre couleur et cet élément cesse de le suivre.
Bouton de fermeture et lien
Section intitulée « Bouton de fermeture et lien »Deux choses distinctes, qui concernent toutes deux ce qui se passe quand une personne interagit avec la barre.
Bouton de fermeture
Section intitulée « Bouton de fermeture »Activez-le et un × apparaît à l’extrémité de la barre. Définissez sa couleur et sa couleur au survol.
Une fois la bannière fermée, elle reste fermée pour la personne : l’application s’en souvient dans son navigateur, et la bannière ne réapparaît donc pas à la page suivante.
Toute la barre cliquable
Section intitulée « Toute la barre cliquable »Activez cette option et un clic n’importe où sur la barre ouvre le lien que vous définissez en dessous. Open in a new tab laisse votre boutique ouverte en arrière-plan.
Les clics sur un bouton ou un code de réduction dans la barre font toujours leur propre action : le lien de la barre ne les absorbe pas.
La façon dont les éléments s’alignent dans la barre.
| Réglage | Ce qu’il fait |
|---|---|
| Alignment | À gauche, centré, à droite ou réparti |
| Gap between elements | L’espace entre chaque élément |
| Wrap on small screens | Activé, la ligne passe sur une autre ligne lorsqu’elle manque de place. Désactivé, elle se comprime, ce qui peut tronquer les longs messages. |
Espacement
Section intitulée « Espacement »Vertical padding est la hauteur de la barre. Horizontal padding est la marge à chaque extrémité.
Une barre fine se lit comme un avis ; une barre haute se lit comme une section de la page. La plupart des barres d’annonce préfèrent l’option fine.
CSS personnalisé
Section intitulée « CSS personnalisé »En bas du panneau, Custom CSS (Developer Zone) accepte des règles qui s’appliquent uniquement à l’intérieur de cette bannière. Elles ne peuvent pas atteindre le reste de votre thème.
Utilisez-le pour ce que les panneaux ne couvrent pas : une ombre de texte, un espacement des lettres, une bordure différente sur un élément.