Personalizzare il pulsante “torna su” in DIVI – GUIDA

In questa piccola guida ti spiegherò come personalizzare il pulsante “torna su” nel tema Divi, aggiungendo poche righe di codice CSS.

Quando ho iniziato a costruire le pagine del mio blog ho iniziato a guardare le pagine di altri blog per cercare spunti e originalità grafiche per realizzarlo.

Tra le tante cose interessanti che ho trovato in quelle pagine, una mi ha colpito da subito particolarmente, la personalizzazione del pulsante torna su.

Mi sono messo subito al lavoro e ho cercato di modificare il pulsante “torna su” del tema Divi ma non riuscivo a trovare una soluzione pratica e veloce per poterlo fare.

Piano piano smanettando e testando la soluzione l’ho trovata ed ora la voglio condividere con te.

Perché utilizzare un pulsante torna su.

Questo è un piccolo pulsante che consente all’utente di scorrere indietro, fino all’inizio della pagina facendo clic su un pulsante stesso senza scrollare con il dito fino a su.

Questo pulsante è particolarmente utile su siti Web a pagina singola o se si dispone di una pagina lunga con molti contenuti oppure in un articolo di un blog molto lungo. 

Appena viene caricata la pagina o del sito o di un articolo del blog, il pulsante non lo vedi, appena l’utente scorre verso il basso, il pulsante torna su diventa visibile e aiuta l’usabilità del tuo sito web o del tuo articolo. 

Come abilitare il pulsante torna su in Divi

Per impostazione predefinita, il pulsante torna su in Divi non è abilitato. Quindi, devi abilitare la funzione usando le opzioni del tema. 

Vai nel pannello di controllo, nella sezione DIVI -> Opzioni tema e abilita il pulsante torna su come mostrato di seguito.

Per abilitarlo ti basterà andare nel menu di Divi dal pannello di controllo di WordPress come vedi nella foto), cliccare su Divi > Opzione tema. Una volta attivato mi raccomando non dimenticarti di salvare il tutto.

A questo punto il pulsante “torna su” è stato abilitato ma nella sua versione standard come puoi vedere nella foto che segue.

CSS per modificare il colore del pulsante torna su.

A questo punto personalizziamo il pulsante con poche righe di codice CSS.

Per personalizzarlo hai due opzioni, aggiungere il codice CSS al tuo style.css nel tuo Divi Tema Child oppure direttamente nell’apposito spazio che Divi ci mette a disposizione per aggiungere il codice CSS personalizzato, io ho preferito il secondo, più semplice e rapido.

Per aggiungere il codice CSS, vai al tuo style.css nel tuo child theme e incolla il seguente CSS.
In alternativa, come ho fatto io, puoi andare su DIVI -> Opzioni tema e incollare il codice CSS nella casella CSS personalizzato.

Ecco il codice fa incollare:

/ * CSS per
applicare lo stile al pulsante Torna all’inizio * / .et_pb_scroll_top.et-pb-icon.et-visible, .et_pb_scroll_top.et-hidden {
/ * Cambia colore di sfondo * /
background: # E8C704;
/ * Cambia il colore della freccia * /
color: # 222222;
/ * Cambia larghezza, stile e colore del
bordo * / border: 2px solid # 222222;
}

come hai già notato scrollando l’articolo, io ho usato un colore giallo (#E8C704) per lo sfondo e un colore nero (#222222) per la freccia e per il bordo del pulsante, ma puoi tranquillamente modificarlo per adattarlo ai colori del tuo sito web o quelli che ti piacciono sostituendo il codice colore. 

Ecco come appare il pulsante torna su dopo aver applicato il codice CSS. 

Se hai trovato utile questo SUGGERIMENTO per personalizzare il tema DIVI, lasciami un commento o se hai suggerimenti che possono aiutare me e chiunque fosse interessato. Per ulteriori suggerimenti su WordPress e DIVI, controlla il mio blog.

Perché Semplicemente io? Non ho la presunzione di insegnare nulla ma semplicemente di condividere quello che ho imparato lungo la strada.. perché spesso ha aiutato me e penso che possa aiutare anche agli altri.