Blog

Come aggiungere un pulsante torna su in WordPress

Data Ultimo Aggiornamento: 
Come aggiungere un pulsante torna su in WordPress

Non sai come aggiungere un pulsante “torna su” in WordPress? Purtroppo, la maggior parte dei temi WordPress non include nativamente questo pulsante. Esistono però alcuni metodi che puoi usare per inserirlo nel tuo sito web.

Ne vale anche la pena. Se il tuo sito web contiene pagine lunghe in cui gli utenti scorrono fino ad allontanarsi dal menu di navigazione o dalla call to action, questo pulsante può aiutarli a tornare al punto focale della pagina con il minimo sforzo. 

I modi più comuni per aggiungere un pulsante “torna su” in WordPress includono l’uso di un plug-in, l’aggiunta di codice personalizzato o l’inserimento di un widget no-code. I plug-in e i widget incorporati non richiedono alcuna competenza di programmazione, quindi sono i metodi preferibili se non hai familiarità con HTML, CSS o JavaScript. Il codice personalizzato ti dà il pieno controllo sul tuo pulsante, ma non è una soluzione ideale per i principianti.

In questa guida esploriamo come aggiungere un pulsante “torna su” in WordPress utilizzando questi metodi, insieme ai vantaggi e agli svantaggi di ciascuno. 

Aggiungere un pulsante “torna su” con un plug-in di WordPress

WordPress offre una varietà di plug-in per potenziare le funzionalità del tuo sito web. All’interno della sua directory troverai plug-in “torna su” per WordPress di diversi sviluppatori: è il modo più comune per aggiungere il pulsante. 

Opzioni disponibili in un plug-in “torna su” di WordPress

Molti di questi plug-in offrono opzioni di personalizzazione che ti permettono di scegliere la posizione del pulsante e il suo design. Quando cerchi il plug-in “torna su” giusto per il tuo sito web, decidi quali impostazioni contano di più per te. Alcune da considerare includono

  • Posizione del pulsante: Determina dove appare il pulsante nella tua pagina. I plug-in possono offrirti opzioni per posizionare il pulsante a destra, a sinistra o al centro. Alcuni offrono un controllo più dettagliato.
  • Icona o etichetta: I plug-in possono offrire una singola icona o darti un menu di opzioni tra cui scegliere. Alcuni ti permettono anche di personalizzare il colore dell’icona.
  • Visibilità su mobile o desktop: I pulsanti possono essere visualizzati in modo diverso su PC e dispositivi mobili. Controlla le opzioni di visibilità del plug-in per capire come appariranno.
  • Scorrimento fluido: Alcuni pulsanti offrono opzioni di scorrimento invece di saltare immediatamente all’inizio della pagina. Questo è utile se vuoi che gli utenti abbiano un maggiore controllo sulla navigazione della pagina.
  • Scroll offset o soglia: Questa impostazione determina quanto spazio viene lasciato tra gli elementi in cima alla pagina e la posizione di scorrimento. Idealmente, cliccando sul pulsante “torna su” non si nasconderanno i contenuti di menu o intestazioni.

Alcuni plug-in offrono più possibilità di personalizzazione di altri. Anche se potresti non aver bisogno di un pulsante “torna su” con molte opzioni di stile, quello che scegli non dovrebbe sembrare fuori posto sul tuo sito web. Vuoi che si integri perfettamente con gli altri elementi della pagina.

Come aggiungere un pulsante “torna su” in WordPress

Una volta selezionato un plug-in adatto alle tue esigenze, installalo seguendo questi passaggi:

  1. Accedi alla dashboard di amministrazione del tuo sito web.
  2. Clicca su Plugin.
  3. Individua il plug-in nella Directory dei Plugin di WordPress. Puoi usare la casella di ricerca per digitarne il nome.
  4. Clicca sul plug-in.
  5. Clicca su Installa e attiva. (Se stai installando un plug-in a pagamento, clicca su Acquista e attiva.)

Dopo aver installato il programma, visita il suo menu Impostazioni per configurare l’aspetto del pulsante “torna su” e il comportamento di scorrimento.

Plug-in “torna su” popolari per WordPress

Esistono centinaia di plug-in che aggiungono un pulsante “scorri verso l’alto” in WordPress. Alcune opzioni includono

  • WPFront Scroll Top: Questo plug-in offre decine di pulsanti “scorri verso l’alto” già stilizzati tra cui scegliere. Ti permette inoltre di impostare la dimensione, la posizione e il comportamento di scorrimento del pulsante.
Pagina del plug-in WPFront Scroll Top su WordPress
  • Smooth Scroll Page Up/Down Buttons: Se le pagine del tuo sito contengono documenti lunghi, questo plug-in può esserti utile. Offre una funzione di scorrimento fluido verso l’alto per WordPress, consentendo agli utenti di scorrere tra i singoli documenti di testo o fino all’inizio della pagina.
Pagina del plug-in Smooth Page Scroll Up/Down Buttons su WordPress
  • Nicescrollr: Questo plug-in ti permette di aggiungere un pulsante “torna su” e di gestire diverse impostazioni, tra cui la dimensione del pulsante e la velocità di scorrimento.
Pagina del plug-in Nicescroll su WordPress

Sebbene i plug-in siano facili da installare, aggiungono una nuova dipendenza che dovrai mantenere. È importante restare al passo con tutti gli aggiornamenti del plug-in, poiché potrebbero introdurre patch di sicurezza.  

Aggiungere un pulsante “torna su” in WordPress con codice personalizzato

Un pulsante “torna su” personalizzato in WordPress ti dà il pieno controllo del suo aspetto e comportamento. Non sei vincolato alle opzioni di impostazione fornite da un plug-in e puoi modificare il pulsante per adattarlo perfettamente alle tue esigenze. È un’ottima alternativa per chi desidera un design su misura o preferisce evitare l’appesantimento della pagina che i plug-in possono causare.

Tuttavia, creare il proprio pulsante richiede competenze. Dovrai avere dimestichezza con la modifica dei temi WordPress e avere esperienza con HTML, CSS o JavaScript personalizzati. 

Per sviluppare il tuo pulsante, aggiungi il codice a un blocco HTML personalizzato, all’area di personalizzazione del tema o a un flusso di lavoro con snippet di codice. Una volta implementato nel tuo sito, testa attentamente il nuovo pulsante per assicurarti che non introduca bug.

Vantaggi e svantaggi di un pulsante personalizzato

Un pulsante “torna su” personalizzato offre molta flessibilità. Puoi adattare l’icona e il colore in modo che si integrino naturalmente con il tuo sito web e puoi regolarne la visibilità. Ad esempio, puoi progettare il pulsante in modo che appaia solo quando un utente raggiunge un determinato punto della pagina. Oppure puoi aggiungere un pulsante “torna su” flottante in WordPress che rimane sospeso mentre l’utente scorre.

I principali svantaggi della creazione di un pulsante personalizzato sono la configurazione tecnica e i test. Ci vuole tempo per scrivere un codice che sia in linea con il tuo sito web e che non interferisca con il suo tema WordPress. 

Anche i test sono fondamentali per lo sviluppo di un pulsante personalizzato. Prevedi di testare le prestazioni del pulsante su più dispositivi, tra cui PC, tablet e smartphone. È una buona idea provare il pulsante anche su più piattaforme, come iOS, Windows e Android.

Metodo no-code più semplice: usa il Widget Back to Top di Jotform

Esiste un’alternativa ai plug-in e ai pulsanti personalizzati: il Widget Back to Top di Jotform. È una soluzione no-code che puoi aggiungere al tuo sito web in pochi minuti.

Pagina del Widget Back to Top di Jotform con l'anteprima di un pulsante blu personalizzabile “Torna su”

A differenza dei plug-in, il nostro Widget Back to Top non appesantisce la pagina e non richiede aggiornamenti regolari. Non è assolutamente necessaria alcuna programmazione e non influirà sulle funzionalità del tuo tema WordPress. 

Il Widget Back to Top di Jotform è anche completamente personalizzabile. Puoi regolare lo stile dell’icona, i colori, la dimensione e il raggio degli angoli. Ci sono opzioni per modificare la posizione del pulsante e la sua visibilità durante lo scorrimento. E funziona su tutti i dispositivi, inclusi gli schermi mobili.

Come installare il Widget Back to Top di Jotform

Integrare il widget nel tuo sito web è facile. Inizia andando alla nostra pagina del Widget Back to Top, quindi segui questi passaggi:

  1. Assegna un nome al tuo widget modificando il campo “Senza titolo” nella barra degli strumenti.
  2. Inserisci le tue impostazioni preferite di posizione e scorrimento, quindi clicca su Continua.
  • Posizione del pulsante: Scegli Sinistra o Destra.
  • Mostra etichetta: Attiva o disattiva. Inserisci il testo che desideri visualizzare sul pulsante.
  • Mostra dopo lo scorrimento: Usa il cursore per indicare di quanti pixel l’utente deve scorrere prima che il pulsante appaia.
  • Animazione di scorrimento: Seleziona Fluida o Istantanea.
Editor del Widget Back to Top di Jotform, con le impostazioni di posizione del pulsante, etichetta, animazione e scorrimento
  1. Inserisci le tue preferenze di stile per il pulsante e clicca su Continua.
  • Dimensione del pulsante: Usa il cursore per impostare la larghezza e l’altezza del pulsante.
  • Dimensione dell’icona: Usa il cursore per impostare la dimensione dell’icona a freccia.
  • Icona: Scegli uno stile di icona a freccia per il pulsante (Freccia su, Chevron su o Freccia su in grassetto).
  • Raggio degli angoli: Seleziona Angoli squadrati, Angoli arrotondati o Angoli circolari.
  • Colori del pulsante: Inserisci il codice colore esadecimale che preferisci per lo sfondo e il colore del testo.
  • Ombra: Attiva o disattiva un’ombra tenue sotto il pulsante.
Editor di stile del Widget Back to Top di Jotform, con le opzioni per dimensione del pulsante, stile dell'icona, raggio degli angoli, colore e ombra
  1. Imposta le regole di visualizzazione e clicca su Provalo gratis sul tuo sito web.
  • Distanza dal basso: Usa il cursore per definire quanto il pulsante è distante dal bordo inferiore.
  • Distanza dal lato: Usa il cursore per controllare quanto il pulsante è distante dal bordo laterale.
  • Mostra su desktop: Attiva o disattiva.
  • Mostra su mobile: Attiva o disattiva.
Schermata delle regole di visualizzazione del Widget Back to Top di Jotform, con le impostazioni di distanza e visibilità su desktop e mobile
  1. Copia il codice di incorporamento e incollalo nell’editor HTML di WordPress.
Pop-up di incorporamento del Widget Back to Top di Jotform, con il codice di incorporamento e il pulsante Copia codice

Durante la personalizzazione del pulsante, puoi cliccare sull’icona del PC o dello smartphone nell’angolo in basso a destra per vedere come apparirà.

Vantaggi dell’utilizzo degli strumenti Jotform nel tuo sito web WordPress

Che tu sia un web designer esperto o che tu stia semplicemente imparando come usare WordPress, Jotform offre numerosi strumenti utili a supporto del tuo sito web.

Offriamo diversi Widget per siti web gratuiti che puoi personalizzare per mostrare le recensioni della tua organizzazione provenienti da siti di terze parti, tra cui Google, Facebook e Tripadvisor — perfetti per i proprietari di siti web che vogliono mettere in mostra le testimonianze ma sono restii a impegnarsi con gli strumenti plug-in a pagamento disponibili tramite WordPress.

Puoi anche approfittare del plug-in personalizzato di Jotform per incorporare moduli in WordPress. Ti permette di raccogliere gli invii dei moduli dagli utenti che visitano il tuo sito. Offriamo oltre 20.000 modelli di moduli WordPress personalizzati gratuiti che coprono casi d’uso comuni, tra cui informazioni di contatto, informazioni di pagamento e invii di candidature. Puoi incorporare il tuo modulo in WordPress in pochi passaggi.

E la cosa migliore è che Jotform offre un piano gratuito che supporta widget WordPress illimitati e fino a cinque moduli. Passando a un piano a pagamento aumenta il numero di moduli che puoi utilizzare, rimuove il marchio Jotform e fornisce spazio di archiviazione aggiuntivo.

Aggiungi un pulsante “torna su” senza rallentare il tuo flusso di lavoro in WordPress

Un pulsante “torna su” migliora l’esperienza utente quando si scorrono contenuti lunghi. Supporta inoltre il coinvolgimento e le conversioni sulle pagine di e-commerce e sulle landing page. Ma, sebbene sia possibile aggiungere un pulsante utilizzando plug-in o codice personalizzato, la soluzione no-code più semplice è il widget di Jotform.

Per vedere come il Widget Back to Top di Jotform aggiunge un elegante pulsante di scorrimento verso l’alto al tuo sito WordPress, provalo oggi stesso.

Domande frequenti sui pulsanti "torna su" in WordPress

Puoi creare un pulsante “torna su” senza usare plug-in in WordPress. Per farlo, dovrai scrivere codice personalizzato utilizzando HTML, CSS o JavaScript. Questo metodo richiede competenze tecniche e una conoscenza dei temi WordPress. Testa attentamente i risultati prima di rendere attivo il pulsante per verificare che funzioni e non interferisca con le prestazioni del tuo sito web. In alternativa, il Widget Back to Top di Jotform ti permette di aggiungere un pulsante completamente personalizzabile senza scrivere una singola riga di codice. 

Ci sono diversi plug-in nella Directory di WordPress che supportano i pulsanti “torna su”. Questi strumenti offrono opzioni di personalizzazione e non richiedono programmazione. Tuttavia, se vuoi ridurre al minimo l’appesantimento della pagina e avere un maggior controllo sulle funzionalità del pulsante, programmare il tuo pulsante “indietro” potrebbe essere un’opzione migliore. E per un’alternativa più semplice, puoi usare il Widget Back to Top di Jotform, che non richiede esperienza di programmazione né manutenzione continua.

Per creare un pulsante “torna su” in WordPress Elementor, apri la tua pagina nell’editor Elementor. Aggiungi un ID CSS all’inizio della pagina, quindi inserisci un widget Pulsante. Collega all’ID CSS dalla scheda Contenuto del pulsante. Puoi regolare l’aspetto del pulsante nella scheda Stile.

Questo articolo è rivolto a proprietari di siti web WordPress, content manager, team di piccole imprese, web designer e a chiunque desideri aggiungere un pulsante “torna su” personalizzabile alle pagine WordPress lunghe senza compromettere le prestazioni o il flusso di lavoro del sito.

Invia un Commento:

Jotform Avatar
Questo sito è protetto da reCAPTCHA e si applicano le Norme sulla Privacy e i Termini di Servizio di Google.

Podo Comment Commenta per primo.