Souhaitez-vous que votre bannière de cookies s'intègre à votre site plutôt que d'y être greffée ? L'onglet Style sous Conception de la bannière contrôle les couleurs de la bannière, la taille de son texte, ainsi que la forme et la couleur de ses trois boutons. Tout ce dont vous avez besoin est WPConsent installé et activé.
Ce guide passe en revue chaque paramètre de cet onglet et montre comment vérifier votre travail dans l'aperçu en direct avant de sauvegarder.
Table des matières
- Définir les couleurs et la taille du texte de la bannière
- Façonner les boutons
- Colorer les trois boutons
- Prévisualiser la bannière
- Sauvegarder vos styles
- Questions fréquemment posées
Avant de commencer, assurez-vous que WPConsent est installé et activé sur votre site WordPress.
Définir les couleurs et la taille du texte de la bannière
Pour commencer, nous allons ouvrir l'onglet qui contient les couleurs et la taille du texte de la bannière.
Depuis la barre latérale d'administration de WordPress, allez à WPConsent » Conception de la bannière.
Conception de la bannière s'ouvre sur l'onglet Disposition. En haut de la page se trouvent trois onglets dans l'ordre : Disposition, puis Style, puis Contenu. Pour accéder aux paramètres de style, cliquez sur Style.
Les trois onglets divisent la bannière en trois tâches. La Disposition décide de la forme de la bannière et de son emplacement, et notre guide sur les options de disposition de la bannière le couvre. Le Contenu contient tous les mots que la bannière dit, abordé dans notre guide sur le contenu et le texte de la bannière. Le Style, l'onglet sur lequel nous sommes, gère l'apparence de tout cela.
Chaque paramètre de cet onglet alimente un aperçu en direct qui s'ouvre à partir d'un bouton dans l'en-tête de la page. Vous pouvez essayer une couleur ou une forme de bouton et voir le résultat avant de vous y engager.
La première section du panneau est nommée Bannière, et elle contient les trois paramètres qui façonnent la bannière elle-même.
La Couleur d'arrière-plan remplit le panneau de la bannière, et la Couleur du texte s'applique au message de la bannière. La paire colore également le bouton de paramètres flottant, si vous l'avez activé. La Taille de la police définit la taille du texte du message.
WPConsent dessine la bannière à l'intérieur de son propre conteneur isolé, de sorte que les couleurs que vous choisissez ici sont celles que les visiteurs voient, quelle que soit la feuille de style de votre thème.
Pour changer une couleur, cliquez sur le champ Couleur d'arrière-plan.
Le sélecteur vous donne une zone de dégradé pour la teinte, un curseur vertical pour la nuance, et une rangée de préréglages en bas. Vous pouvez également taper une valeur hexadécimale directement dans le champ, ce qui est la voie la plus rapide lorsque vous connaissez déjà votre couleur de marque. La Couleur du texte et les six couleurs des boutons plus bas ouvrent tous le même sélecteur.
Cliquer n'importe où en dehors du sélecteur le ferme, et le petit carré à côté du champ continue d'afficher la couleur sur laquelle vous avez atterri.
Pour le texte du message, ouvrez le menu déroulant Taille de la police.
La liste va de 12px à 30px par pas de 2px. Ce paramètre régit le texte du message de la bannière. Le texte des boutons est dimensionné par la Taille du bouton à la place, ce que la section suivante couvre.
Façonner les boutons
Un groupe de paramètres façonne tous les boutons de la bannière à la fois, de sorte que la taille et la forme sont définies une fois plutôt que bouton par bouton.
Sous un séparateur, la section Boutons contient trois listes déroulantes. Commencez par Taille du bouton.
La taille du bouton définit la hauteur et la taille du texte ensemble. Petit donne un bouton de 30 px avec un texte de 14 px, Normal donne 45 px et 15 px, et Grand donne 60 px et 18 px.
Petit convient à une bannière qui doit rester discrète, et Grand convient à une bannière sur laquelle vous souhaitez que les visiteurs agissent immédiatement.
Le coin du bouton définit l'arrondi des coins. Carré donne des coins nets, et Légèrement arrondi un petit rayon de 4 px. Arrondi donne un rayon de 20 px, ce qui se lit comme une pilule sur les tailles de bouton plus petites.
Celui à choisir est celui qui correspond aux boutons que votre thème utilise déjà. Carré convient à un design éditorial net et Arrondi à un design plus doux, Légèrement arrondi se situant entre les deux.
Le type de bouton est celui qui mérite un aperçu. Pour le voir, ouvrez Type de bouton et choisissez Contour.
Plein donne à chaque bouton un remplissage solide. Contour rend l'intérieur du bouton transparent et dessine une bordure de 2 px de la couleur que Plein utilise comme remplissage.
Les boutons en contour sont plus discrets sur une page chargée, et les boutons pleins semblent plus clairement cliquables.
Ces trois paramètres s'appliquent également aux boutons du panneau des préférences. Les boutons que les visiteurs voient après avoir ouvert leurs paramètres de cookies correspondent à ceux de la bannière. Notre guide sur le panneau des préférences couvre cet écran.
Colorer les trois boutons
Sous un autre séparateur, la section Couleur du bouton associe une couleur d'arrière-plan et une couleur de police pour chacun des trois boutons de la bannière. Commencez par Arrière-plan d'acceptation.
Les trois lignes correspondent aux trois boutons de la bannière. Arrière-plan d'acceptation et sa Couleur de police stylisent le bouton d'acceptation. Arrière-plan d'annulation et sa Couleur de police stylisent le bouton de rejet. Arrière-plan de personnalisation et sa Couleur de police stylisent le bouton des préférences.
Donner au bouton d'acceptation la couleur la plus forte et laisser les deux autres plus discrets est un choix courant. Cela permet de lire la bannière d'un coup d'œil.
Remarque : Lorsque le type de bouton est défini sur Contour, chaque couleur d'arrière-plan devient la couleur de la bordure de ce bouton. Un bouton en contour n'a pas de remplissage derrière son texte, donc chaque couleur de police doit être lisible sur l'arrière-plan de votre bannière plutôt que sur le bouton.
Si vous avez activé le bouton de paramètres flottant, une section Conception du bouton de paramètres flottant suit celle-ci avec un sélecteur d'icônes. Notre guide sur le bouton de consentement flottant couvre ce paramètre.
Prévisualiser la bannière
WPConsent peut afficher votre bannière sur la page d'administration en taille réelle. C'est le moyen le plus rapide de juger d'un choix de couleur avant sa mise en ligne.
En haut à droite de la page, cliquez sur Aperçu.
La superposition utilise les paramètres actuellement affichés plutôt que ceux enregistrés en dernier, de sorte que les modifications non enregistrées y apparaissent. Lorsque le type de bouton est défini sur Plein, chaque bouton porte un arrière-plan solide.
Lorsque le type de bouton est défini sur Contour, les trois mêmes boutons conservent une bordure et perdent leur remplissage.
Cet aperçu montre également pourquoi la couleur de la police est plus importante une fois que le remplissage a disparu. Chaque bouton conserve la couleur de police qui lui a été attribuée pour le style rempli, et avec le remplissage supprimé, cette couleur repose maintenant sur l'arrière-plan de la bannière. Passer à l'option 'Contour' est donc un bon moment pour vérifier les trois champs de couleur de police.
L'aperçu reste ouvert pendant que vous continuez à travailler, et il suit chaque modification que vous apportez dans l'onglet. Le même bouton le ferme à nouveau.
Sauvegarder vos styles
Rien dans cet onglet n'est enregistré tant que vous n'avez pas sauvegardé. La dernière étape consiste donc à valider ce que vous avez configuré.
Lorsque votre bannière a l'apparence souhaitée, faites défiler jusqu'en bas du panneau. Cliquez ensuite sur Enregistrer & Continuer.
Ce bouton enregistre vos styles et vous déplace vers l'onglet Contenu, qui est l'étape suivante de la séquence en trois onglets. Le lien Retour à côté vous ramène à la Mise en page sans enregistrer.
Le bouton Enregistrer en haut à droite de la page enregistre les mêmes paramètres et vous laisse sur l'onglet Style. C'est celui à utiliser lorsque la mise en forme est la seule chose que vous êtes venu changer ici.
Et voilà ! Votre bannière de consentement arbore désormais vos propres couleurs, taille de police et formes de boutons.
Ensuite, consultez notre guide sur le contenu et le texte de la bannière pour définir le message et les libellés des boutons que votre bannière affiche.
Questions fréquemment posées
Mes nouvelles couleurs ne s'affichent pas sur mon site
Videz vos caches et rechargez le site. Les styles de bannière font partie de la page que WPConsent rend. Un plugin de mise en cache ou un cache de page au niveau de l'hôte peut continuer à servir la version d'avant votre modification. Notre guide sur la gestion de la base de données et du cache couvre les caches que WPConsent gère lui-même.
Pourquoi le texte de mon bouton en contour est-il invisible ?
Un bouton en contour a un intérieur transparent, donc son texte repose directement sur l'arrière-plan de la bannière et conserve la couleur de police que vous lui avez donnée. Le texte blanc sur une bannière blanche en est la cause habituelle. Donnez à chaque bouton une couleur de police qui contraste avec votre couleur d'arrière-plan, ou remettez le type de bouton sur Rempli.
La taille de la police change-t-elle aussi le texte du bouton ?
Non. La taille de la police s'applique au message de la bannière. Le texte du bouton est dimensionné par la taille du bouton, qui associe un texte de 14px à Petit, 15px à Normal et 18px à Grand.
Ces styles s'appliquent-ils au panneau de préférences ?
En partie. La couleur d'arrière-plan, la couleur du texte et les trois paires de couleurs de boutons sont reportées dans le panneau de préférences, tout comme la taille du bouton, le coin du bouton et le type de bouton. La taille de la police s'applique au message de la bannière.
Mon thème annulera-t-il les styles de la bannière ?
Non. WPConsent rend la bannière à l'intérieur d'une shadow root, ce qui maintient séparés les CSS de votre thème et les CSS de la bannière. C'est aussi pourquoi un style de bannière doit être modifié ici plutôt que dans la feuille de style de votre thème.
Puis-je styliser quelque chose que l'onglet Style ne couvre pas ?
Oui. WPConsent expose les couleurs et les tailles de la bannière sous forme de variables CSS que vous pouvez définir vous-même, et il accepte vos propres CSS pour tout ce qui est plus fin. Nos guides sur la personnalisation de la bannière avec des variables CSS et la personnalisation de la bannière avec CSS couvrent les deux voies.
L'aperçu enregistre-t-il quelque chose ?
Non. L'aperçu lit les paramètres actuellement affichés à l'écran, il montre donc les modifications non enregistrées ainsi que celles qui le sont. Quitter la page sans enregistrer abandonne tout ce que vous essayiez de faire.
Puis-je utiliser différents styles sur différentes pages ?
L'onglet Style définit une apparence pour l'ensemble du site, de sorte que chaque page affiche la même bannière. Pour un contrôle plus fin que celui offert par l'onglet, notre guide sur la personnalisation de la bannière avec CSS couvre la méthode manuelle.