Come disabilitare l'overflow in WordPress (rimuovere lo scorrimento orizzontale)

Una barra di scorrimento orizzontale appare quando un elemento della pagina è troppo largo per essere visualizzato e fuoriesce dallo schermo. La maggior parte dei temi WordPress non utilizza lo scorrimento orizzontale perché può compromettere il layout del tuo sito e confondere gli utenti.

È frustrante per te come proprietario del sito e, credici, è ancora più frustrante per i tuoi visitatori che cercano di navigare nei tuoi contenuti.

Fortunatamente, dalla nostra esperienza, disabilitare l'overflow e liberarsi di quella barra di scorrimento è di solito semplice e fa una grande differenza nell'aspetto del tuo sito e nella sua facilità d'uso.

In questo articolo, ti mostreremo come disabilitare facilmente l'overflow in WordPress e rimuovere la barra di scorrimento orizzontale. Le nostre istruzioni semplici sono facili da usare e da seguire, anche se non sei un esperto di codifica.

Cosa causa la barra di scorrimento orizzontale o l'overflow in WordPress?

Quando configuri il tuo sito web WordPress, è importante renderlo facile da usare e accessibile a tutti.

WordPress mostrerà una barra di scorrimento orizzontale se un elemento è più largo del tuo layout del sito web. Questo si chiama 'overflow'. Avere una barra di scorrimento orizzontale può compromettere il tuo design e rendere il tuo sito web meno facile da usare.

Una pagina web con barre di scorrimento sia orizzontali che verticali può anche disorientare il visitatore e renderla difficile da navigare. Può portare le persone ad abbandonare il tuo sito, causando minori conversioni e vendite.

Disabilitare l'overflow renderà il tuo sito più facile da usare, creerà un layout a larghezza fissa e migliorerà la reattività generale del tuo sito.

Tenendo presente questo, diamo un'occhiata a come disabilitare facilmente la barra di scorrimento orizzontale dell'overflow in WordPress:

• Metodo 1: Aggiungere lo snippet CSS utilizzando il personalizzatore del tema
• Metodo 2: Aggiungere lo snippet CSS utilizzando WPCode
• Bonus: Aggiungere una barra di scorrimento personalizzata in WordPress

Metodo 1: Aggiungere lo snippet CSS utilizzando il personalizzatore del tema

Puoi disabilitare l'overflow in WordPress semplicemente aggiungendo codice CSS nell'opzione 'CSS aggiuntivo' del personalizzatore del tema.

Tutto quello che devi fare è visitare la pagina Aspetto » Personalizza dalla bacheca di WordPress.

Una volta che sei nella pagina Personalizza, fai clic sulla scheda 'CSS aggiuntivo'.

Quindi, copia e incolla semplicemente il seguente codice:

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

Dopodiché, qualsiasi overflow verrà rimosso e potrai vederlo applicato nel riquadro di anteprima live del tuo sito web.

Non dimenticare di fare clic sul pulsante 'Pubblica' in cima alla pagina quando hai finito!

Metodo 2: Aggiungere lo snippet CSS utilizzando WPCode

Puoi anche aggiungere il codice CSS tramite uno snippet di codice utilizzando il plugin WPCode.

WPCode è il miglior plugin per snippet di codice di WordPress sul mercato, utilizzato da oltre 1 milione di siti web.

Raccomandiamo questo metodo poiché questo plugin semplifica l'aggiunta di codice personalizzato a WordPress senza dover modificare alcun file del tuo tema.

Innanzitutto, installa e attiva il plugin WPCode sul tuo sito web. Per maggiori dettagli, puoi consultare la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, visita la pagina Snippet di codice » + Aggiungi snippet dalla dashboard di WordPress.

Qui, fai clic sul pulsante ‘+ Aggiungi snippet personalizzato’ sotto l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’.

Quindi, devi selezionare ‘Snippet CSS’ come tipo di codice dall'elenco di opzioni che appaiono sullo schermo.

Ora verrai indirizzato alla pagina ‘Crea snippet personalizzato’, dove puoi iniziare inserendo un titolo per il tuo snippet di codice.

Questo nome non verrà visualizzato agli utenti ed è solo per tua identificazione.

Dopo averlo fatto, copia e incolla il seguente snippet di codice CSS nella casella ‘Anteprima codice’:

<style type="text/css">
html, body {
	max-width: 100%;
	overflow-x: hidden;
}
</style>

Una volta fatto ciò, scorri verso il basso fino alla sezione ‘Inserimento’, dove troverai due opzioni, ‘Inserimento automatico’ e ‘Shortcode’.

Da qui, seleziona la modalità ‘Inserimento automatico’ per eseguire automaticamente il tuo codice dopo l'attivazione.

Tuttavia, se desideri disabilitare la barra di scorrimento orizzontale solo su alcune pagine specifiche, puoi selezionare la modalità ‘Shortcode’.

Facendo ciò, WPCode ti fornirà uno shortcode dopo l'attivazione dello snippet che puoi incollare in un'area specifica del sito Web o in una pagina per rimuovere l'overflow.

Una volta scelta l'opzione, vai in cima alla pagina e sposta l'interruttore da ‘Non attivo’ ad ‘Attivo’ nell'angolo in alto a destra.

Quindi, fai semplicemente clic sul pulsante ‘Salva snippet’.

Fatto! Hai appena rimosso eventuali barre di scorrimento orizzontali di overflow dal tuo sito.

Bonus: Aggiungere una barra di scorrimento personalizzata in WordPress

Una volta disabilitata la barra di scorrimento orizzontale, puoi anche aggiungere una barra di scorrimento personalizzata.

Ad esempio, se il tuo sito utilizza una combinazione di colori specifica in base ai colori del tuo marchio, allora potresti usare lo stesso colore per la tua barra di scorrimento. Questo avrà un aspetto visivamente accattivante e incoraggerà gli utenti a esplorare il tuo sito.

Per creare una barra di scorrimento personalizzata, installa e attiva il plugin Advanced Scrollbar. Per i dettagli, consulta la nostra guida per principianti su come installare un plugin WordPress.

Dopo l'attivazione, visita la pagina Impostazioni » Impostazioni barra di scorrimento avanzata dalla dashboard di WordPress. Da qui, puoi ora cambiare il colore della barra di scorrimento a tuo piacimento.

Una volta terminato, fai clic sul pulsante 'Salva modifiche' per memorizzare le tue impostazioni. Per ulteriori informazioni, consulta il nostro tutorial su come aggiungere una barra di scorrimento personalizzata in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come disabilitare l'overflow sul tuo sito WordPress. Potresti anche voler vedere le nostre scelte esperte per i migliori snippet di codice da utilizzare sul tuo sito WordPress e la nostra guida per principianti su come rimuovere CSS inutilizzato in WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.