Documentation WPConsent

Documentation, matériel de référence et tutoriels pour WPConsent

Options de mise en page de la bannière

Souhaitez-vous que votre bannière de cookies soit le long du bas de la page, nichée dans un coin, ou juste devant les visiteurs jusqu'à ce qu'ils aient fait leur choix ? WPConsent vous offre trois mises en page de bannière. Chacune d'elles comporte son propre ensemble d'options de positionnement.

Ce guide présente les trois, montre à quoi ressemble chacune d'elles et couvre le bouton d'aperçu qui les compare avant que vous n'enregistriez.

image d'espace réservé youtube

Table des matières

Avant de commencer, assurez-vous que WPConsent est installé et activé sur votre site WordPress.

Prérequis : La mise en page Bannière modale nécessite une licence de niveau Basique ou supérieure.

Choisir la mise en page de votre bannière

Pour commencer, nous allons ouvrir l'onglet qui définit la forme et la position de la bannière.

Depuis la barre latérale d'administration de WordPress, allez à WPConsent » Conception de la bannière.

Ouverture de la conception de la bannière depuis le menu WPConsent dans la barre latérale d'administration de WordPress

La page s'ouvre sur l'onglet Mise en page, qui est le premier des trois onglets en haut. Style et Contenu le suivent. Les chevrons entre eux indiquent l'ordre dans lequel le concepteur vous guide.

Nos guides sur le style de la bannière et le contenu et le texte de la bannière couvrent ces deux autres onglets. Ce guide reste sur la mise en page.

Le panneau Paramètres de mise en page ci-dessous contient une seule ligne nommée Mise en page. Cette ligne offre trois choix. Chaque carte est un petit schéma de l'emplacement de la bannière sur une page.

The Layout Settings panel with the Long Banner card selected, beside the Floating Banner and Modal Banner cards

Une coche verte marque la carte sélectionnée. Une nouvelle installation commence par la Bannière longue.

La Bannière longue est une barre sur toute la largeur de l'écran. La Bannière flottante est une carte compacte dans un coin. La Bannière modale est une carte au milieu de l'écran avec la page assombrie derrière elle.

Si vous n'êtes pas sûr de votre choix, la Bannière longue est le point de départ le plus sûr. Une barre le long d'un bord couvre le moins de votre page.

Avant de les parcourir, il est utile de connaître le bouton qui montre votre travail. En haut à droite de la page, cliquez sur Aperçu.

The Preview button at the top right of the Banner Design page

WPConsent dessine votre bannière sur la page d'administration en taille réelle. Cela permet de juger d'une mise en page sans charger le front-end.

L'aperçu suit les choix actuellement affichés à l'écran, y compris ceux que vous n'avez pas encore enregistrés. C'est donc un moyen rapide de comparer deux mises en page côte à côte.

Il dessine la bannière sur votre écran d'administration plutôt que sur votre thème. Cela signifie qu'il indique où se trouve la bannière et quelle place elle prend, pas à quoi elle ressemble par rapport à votre propre design.

Cliquer une deuxième fois sur Aperçu le ferme à nouveau, tout comme la petite icône de fermeture en haut à droite de l'écran.

Utiliser la mise en page de la bannière longue

La Bannière longue est une barre qui s'étend sur toute la largeur de l'écran. Parce qu'elle épouse un bord, elle laisse le milieu de la page dégagé.

Pour l'utiliser, cliquez sur la carte Bannière longue.

The Long Banner card selected in the Layout row, marked with a green check

Une ligne Position apparaît en dessous avec deux choix, Haut et Bas. Pour faire courir la barre le long du bas de l'écran, cliquez sur Bas.

The Position row for the Long Banner layout, showing the Top and Bottom choices with Bottom selected

Le bas est la partie la plus discrète des deux, car elle laisse votre en-tête et toute image principale intacts. Le haut place la même barre au-dessus de votre en-tête à la place, ce qui en fait la première chose qu'un visiteur voit.

Dans l'aperçu, la barre s'étend d'un bord à l'autre du pied de l'écran. Le message est à gauche et les boutons à droite.

The Preview overlay showing the long banner as a full-width bar along the bottom of the screen

Courir sur toute la largeur donne à la barre de l'espace pour placer le message et les boutons sur une seule ligne. Sur un écran étroit, comme un téléphone, ils s'empilent à la place, avec le message au-dessus des boutons.

Utiliser la mise en page de la bannière flottante

La bannière flottante est une carte compacte qui se place dans un coin et laisse le reste de la page visible. Elle prend le moins de place des trois.

Pour l'utiliser, cliquez sur la carte Bannière flottante.

The Floating Banner card selected in the Layout row, marked with a green check

La ligne Position offre maintenant quatre coins au lieu de deux bords. Ce sont Coin supérieur gauche, Coin supérieur droit, Coin inférieur gauche et Coin inférieur droit. Pour placer la carte en bas à droite, cliquez sur Coin inférieur droit.

The Position row for the Floating Banner layout, showing the four corner choices with Right Bottom selected

Dans l'aperçu, la carte se place juste à l'intérieur du coin inférieur droit et le reste de la page reste visible. Le petit espace qu'elle maintient par rapport aux deux bords est ce qui la fait paraître flottante plutôt que épinglée.

The Preview overlay showing the floating banner as a compact card in the bottom right corner of the screen

Le choix du coin mérite une réflexion. Quel que soit le coin que vous choisissez, c'est le coin que votre bannière partage avec tout autre élément flottant, comme un widget de chat.

Sur un écran étroit, la carte s'élargit sur toute la largeur et se place à ras de son coin. Cela maintient les boutons d'une taille confortable sur un téléphone.

Utiliser la mise en page de la bannière modale

La bannière modale place la carte au milieu de l'écran et assombrit la page derrière elle. Cela met le choix directement devant un visiteur, sans rien d'autre sur la page qui ne détourne l'attention.

Pour l'utiliser, cliquez sur la carte Bannière modale.

The Modal Banner card selected in the Layout row, marked with a green check

Aucune ligne de position n'apparaît pour cette mise en page, car la carte se centre elle-même sur l'écran.

Dans l'aperçu, la carte se place au milieu de l'écran et la page derrière elle est grisée.

The Preview overlay showing the modal banner centered on screen with the page dimmed behind it

La carte porte le même message et les mêmes boutons que les deux autres mises en page. Passer à celle-ci change l'endroit où les visiteurs lisent votre texte, pas ce qu'il dit.

Enregistrer votre mise en page

Votre mise en page et sa position sont stockées ensemble lorsque vous enregistrez. En bas à droite du panneau, cliquez sur Enregistrer et continuer.

The Save and Continue button at the bottom right of the Banner Design page

Cela enregistre les deux paramètres. Il vous fait ensuite passer à l'onglet Style, qui est la prochaine étape du concepteur. Ce mouvement est la façon dont vous savez que l'enregistrement a réussi.

Le bouton Enregistrer en haut à droite de la page enregistre la même paire de paramètres et vous laisse sur l'onglet Mise en page. C'est celui à utiliser lorsque la mise en page est la seule chose que vous êtes venu changer ici.

Et voilà ! Votre bannière de consentement utilise maintenant la mise en page et la position que vous avez choisies.

Ensuite, consultez notre guide sur la mise en forme de la bannière pour aligner les couleurs, les polices et les formes des boutons de la bannière avec votre thème.

Questions fréquemment posées

Ci-dessous, nous avons répondu à certaines des questions les plus courantes sur les mises en page des bannières.

Quelle mise en page est sélectionnée avant que je ne change quoi que ce soit ?

Bannière longue. C'est là que la ligne Mise en page commence jusqu'à ce que vous en choisissiez une autre.

Pourquoi ne puis-je pas sélectionner la carte Bannière modale ?

The Modal Banner layout comes with a paid version of WPConsent. In the free version, its card is dimmed and carries a Pro badge in the corner. Clicking it opens an upgrade note instead of selecting the layout.

Le Bannière flottante est-il identique au Bouton de réglages ?

No. The Floating Banner is the consent banner itself, drawn in a corner rather than across the page. The Settings Button is a separate control that stays on your site after the banner is dismissed. Visitors use it to reopen their choices. It has its own toggle under WPConsent » Settings. Our guide on the floating consent button covers it.

Changer la mise en page affecte-t-il mes couleurs ou mon texte ?

No. The Layout tab saves your layout and its position and nothing else. Colors, fonts, and button shapes live on the Style tab. Every piece of text lives on the Content tab. Both survive a layout change.

Pourquoi ne vois-je pas de ligne Position pour la Bannière modale ?

The Modal Banner centers itself, so WPConsent hides the Position row while that layout is selected. If you save with Modal Banner and later switch back to Long or Floating, pick the position you want again before saving.

How will my banner look on a phone?

All three layouts fit themselves to the screen. The long bar stacks its message above its buttons. The floating card widens to the full screen width and sits flush in its corner. The Modal Banner card fills most of the screen while staying centered.

Can I use a different layout on different pages?

No. One layout applies across your whole site. If you need the banner to stay away from particular pages or from logged-in users, Hide Banner Rules do that instead. Our guide on advanced settings covers them.

Pourquoi ne puis-je pas changer la mise en page ?

Turning on IAB TCF holds the layout at Modal Banner, because that is the shape TCF asks for. A notice above the row says so and links back to the TCF settings. Our guide on IAB TCF support covers that setting.

Cet article vous a-t-il été utile ?

Articles associés