Come rimpicciolire il Cookie Banner iubenda

Vorresti diminuire le dimensioni del banner dei cookie Iubenda ma non sai come fare? Come rimpicciolire il Cookie Banner iubenda? Leggi qui.

Attenzione!

Modificare il cookie banner standard di Iubenda è una questione di competenze nella programmazione CSS. Se non sai come programmare in CSS o non conosci nessuno che possa aiutarti nel farlo, non effettuare la procedura. Ricordati inoltre che il tuo banner, a fine procedura, dovrà comunque rispettare il GDPR e tutte le normative richieste dalla Cookie Policy e dalla Privacy Policy del tuo sito. Ciò non è scontato! Ricorda che le tue modifiche potrebbero rendere illegale (a livello di normative) il tuo banner. Per il buon completamento della guida è richiesto un account Iubenda Pro (o con upgrade superiore).

Come rimpicciolire il Cookie Banner iubenda

Mostrare solo una parte del testo del Cookie Banner per poi permettere agli utenti di far scorrere con la rotellina del mouse l’informativa completa del Cookie Banner stesso piuttosto che mostrare tutta l’informativa in un colpo solo (magari con un testo anche piuttosto grande) potrebbe essere un desiderio di molti clienti iubenda. Rendere più piccolo “lo spazio di testo” del banner dei cookie senza compromettere il testo standard o diminuire l’altezza dello stesso senza compromettere le funzionalità del blocco preventiva è una operazione importante che non solo potrebbe impattare sulla velocità di apertura della pagina e sui conseguenti Speed test del tuo sito, ma che potrebbe impattare, sia positivamente che negativamente, sulla esperienza utente dei visitatori del tuo spazio web.

Per permettere ai suoi utenti di personalizzare fino all’osso il suo Cookie banner, Iubenda ha messo a disposizione delle guide specifiche e delle procedure dedicate sul suo sito. In questa guida scopriremo come fare a rimpicciolire un qualsiasi Cookie Banner di iubenda senza la necessità di perdersi in troppe guide online. E ora cominciamo:

1) Recati sul sito di Iubenda (clicca qui per accedere immediatamente).

2) Dalla Dashboard, apri il sito di tuo interesse, quindi clicca su “Modifica” sotto alla voce “Cookie Solution”.

3) Per abilitare la modifica del CSS iubenda, vai sulle OPZIONI AVANZATE e disattiva l’opzione “Applica il CSS di default al banner” sotto la voce “COOKIE BANNER”.

Come modificare il Cookie Banner di Iubenda Come non applicare il CSS di default al banner

Questo parametro avviserà iubenda di non utilizzare il CSS impostato di default ma di utilizzare un CSS personalizzato e sarà esattamente come inserire “applyStyles:false” nel codice del banner, cioè “dire al banner” di accettare un CSS non standardizzato.

4) Ora, scorri la colonna fino a trovare la voce “CSS” e clicca su “Custom”.

Come modificare il Cookie Banner di iubenda 1

5) Nella sezione “Custom” ci sono vari modi per modifcare il CSS. Qui, oggi ti propongo una soluzione veloce per modificare “l’altezza dello spazio di testo” all’interno del banner. Per proseguire in questa operazione, cerca (dalle OPZIONI AVANZATE della sezione Modifica di iubenda Cookie Banner > CSS > Custom) la stringa:

#iubenda-cs-banner .iubenda-banner-content
Come modificare il Cookie Banner di Iubenda Personalizzare il CSS

6) A questo punto, non dovrai fare altro che cercare e modificare la porzione di codice:

[ALTRO CODICE] #iubenda-cs-banner .iubenda-banner-content{font-weight:300!important;!important;margin:16px!important;margin-bottom:0!important; 
[ALTRO CODICE]

Trasformandola in:

[ALTRO CODICE] #iubenda-cs-banner .iubenda-banner-content{font-weight:300!important;height: 100px !important;margin:16px!important;margin-bottom:0!important;
[ALTRO CODICE]

Aggiungendo cioè:

height: 100px !important;

Subito dopo la voce:

font-weight:300!important;

7) Salva le modifiche e implementa il nuovo codice per il Cookie Banner iubenda nel plugin iubenda per WordPress. Se non sai come fare, clicca qui. E mi raccomando, assicurati che il nuovo Cookie Banner sia conforme ai regolamenti.

Come rimpicciolire il banner iubenda 1
Il risultato finale del Cookie Banner di iubenda dopo la modifica in CSS proposta.

Questa soluzione, ti porterà probabilmente ad avere dei problemi con la Google Search Console in fase di indicizzazione delle pagine. Probabilmente, infatti, riceverai un messaggio di errore simile a questo: “Usabilità su dispositivi mobili Nuovi problemi nel sito. Search Console ha rilevato che il tuo sito è interessato da 2 problemi Usabilità su dispositivi mobili. Problemi principali. Sul tuo sito sono stati trovati i seguenti problemi: Testo troppo piccolo da leggere, Elementi selezionabili troppo vicini tra loro. Ti consigliamo di risolvere questi problemi appena possibile per consentire un’esperienza e una copertura ottimali nella Ricerca Google”.
È bene che tu sappia di questa eventualità prima di effettuare questa o altre modifiche al Cookie Banner. Ad ogni modo, in alcuni casi questa modifica non è rilevante.

Per modificare il CSS standard di iubenda secondo i tuoi gusti e procedere a incollarlo nella pagina, ti consiglio di analizzare prima di tutto il CSS standard. Puoi trovare diversi parametri disponibili nella pagina dedicata, cliccando qui.

E se vuoi scoprire su quali parametri agire senza necessariamente modificare direttamente il codice da iubenda, ti suggerisco di aprire una pagina del tuo sito in modalità anonima, quindi di cliccare con il tasto destro sopra al tuo cookie banner iubenda e selezionare il comando “Ispeziona” o “Analizza elemento” (o voce simile). In questo modo accederai alla console del tuo browser web. Da qui potrai fare mille prove “in locale” e vedere in tempo reale i cambiamenti senza però intaccare i parametri “lato server”.

Purtroppo Iubenda non offre personalizzazioni del Cookie banner al di fuori di quelle proposte nelle OPZIONI AVANZATE. Se non sai come procedere, quindi, non toccare nulla, mi raccomando! E contatta qualche buon programmatore o qualche abile programmatrice!

Vuoi scoprire come bloccare lo scroll down del Cookie Banner di iubenda sul tuo sito? Clicca qui.

La pagina è finita. Per mantenere questo sito online, clicca qui e fai una donazione!!! Hai qualcosa da dirci? Scrivici! Per condividere questa guida su social:

Torna in alto