Passer au contenu principal

Personnalisez votre widget

Manon Manso avatar
Écrit par Manon Manso
Mis à jour il y a plus de 2 mois

CrĂ©er le projet : ✅
CrĂ©er les diffĂ©rents Ă©crans et lister les cookies : ✅

Maintenant, il est temps de s'occuper du design du widget ! Poussez la porte de la personnalisation, entrez le spa beautĂ© des cookies et rendez votre widget aussi beau que votre site 💄.

Pour accéder aux paramÚtres de personnalisation graphique du widget, deux solutions :

👉 via le bandeau latĂ©ral, puis sur le menu "Couleurs et style"


👉 via l'onglet "Personnalisez la solution à vos couleurs"

🚧 Toutes les modifications apportĂ©es au widget dans ce menu impactent l'ensemble des versions de votre projet.

1. Position du widget et overlay

La premiĂšre section de l'interface de personnalisation de votre widget est la section Style du bouton.
Sous cette section, vous avez différents paramÚtres vous permettant de gérer :

  • Les diffĂ©rentes options de personnalisations du bouton Axeptio.

  • La personnalisation de votre pop-up

  • L'ombre portĂ©e
    ​​

2. Couleurs, Charte graphique, Police

La seconde section de l'interface de paramétrage de votre widget est la section Couleurs.
Sous cette section, vous pouvez gérer l'ensemble du design couleur de votre widget selon quatre types définis : tache de peinture, couleur de base, boutons et overlay.

Pour rappel, l'overlay c'est l'ombre derriùre le consent wall contextuel 😉

Les différentes autres rubriques vous permettent de changer la couleur de chaque élément en cliquant sur le petit carré qui le précÚde.


Grùce aux nuanciers, vous pouvez choisir avec précision la couleur souhaitée pour chaque élément représenté.

💡 Pensez Ă  valider le nuancier quand vous modifiez la couleur de l'Ă©lĂ©ment choisi !

tache-de-peinture.png

Attention, magie đŸȘ„ vous pouvez visualiser en temps rĂ©el vos modifications grĂące Ă  la reprĂ©sentation de votre widget Axeptio sur la gauche de l'interface de paramĂ©trage.

3. Bordures du widget, Taille des polices, Ombre Portée

La troisiĂšme section de personnalisation de votre widget est la section Style du Widget.

Ses différentes rubriques vous permettent de modifier les bordures du widget, de ses boutons et de définir la taille des polices.

Bonus ! C'est aussi ici que vous pourrez jouer avec l'ombre portĂ©e de votre widget đŸ‘»

Laissez libre cours Ă  vos envies !

ombre_portee.png

Focus sur l'ombre portée :

L'ombre portée, c'est celle qui se trouve derriÚre votre widget de cookie à l'affichage.

Vous pouvez choisir de conserver celle par défaut ou ne pas en mettre du tout :

ombre_par_defaut.png

Ou encore mieux ! Vous pouvez choisir de la personnaliser ! C'est-Ă -dire que vous pouvez vous-mĂȘme dĂ©finir sa taille et sa couleur 🎹

ombre_personnalisee.png

Pour cela, il vous suffit de sélectionner "Ombre personnalisée CSS" et de remplir la box CSS qui apparaßt.

La taille de l'ombre se définit en pixel et la couleur se gÚre entre les parenthÚses rgba.

🌈 Astuce

Si vous souhaitez une ombre portée qui prend tout l'écran, c'est : 0px 0px 0px 2550px

4. Choix de la typographie

La quatriĂšme et derniĂšre section de l'interface de personnalisation de votre widget est la section Typographie.

police_widget.png

Si vous n'avez pas envie de vous embĂȘter avec ces dĂ©tails, laisser nous faire, on s'occupe de tout 💆

Il vous suffit de cocher les cases "Laisser Axeptio charger la police sur le site" et on se charge d'identifier la police dĂ©jĂ  prĂ©sente sur votre site et de la mettre sur votre widget (si c'est une Google font ou qu'elle est dĂ©jĂ  chargĂ©e sur le site 😉).

Et voilà !! 🎉 Maintenant, vous savez tout pour rendre votre widget des plus magnifiques !

Il ne reste plus qu'Ă  le publier đŸ’Ș Mais avant ça, venez faire un petit tour d'horizon, des autres fonctionnalitĂ©s de votre back office 👉 🎁

Avez-vous trouvé la réponse à votre question ?