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 deborda oltre lo schermo. La maggior parte dei temi WordPress non utilizza lo scorrimento orizzontale perché può interrompere il layout del sito e confondere gli utenti.

Può essere frustrante sia per voi che per i vostri visitatori. Fortunatamente, disabilitare l’overflow è semplice e migliora l’aspetto e l’usabilità del sito.

In questo articolo vi mostreremo come disabilitare facilmente l’overflow in WordPress e rimuovere la barra di scorrimento orizzontale. Le nostre semplici istruzioni sono user-friendly e facili da seguire, anche se non siete esperti di codifica.

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

Nell’impostazione del sito web WordPress, importa che sia facile da usare e accessibile a tutti.

WordPress mostra una barra di scorrimento orizzontale se un elemento è più largo del layout del sito web, il cosiddetto “overflow”. Una barra di scorrimento orizzontale può rompere il design e rendere il sito meno facile da usare.

Una pagina web con barre di scorrimento sia orizzontali che verticali può disorientare il visitatore e diventare difficile da navigare. Questo può portare le persone ad abbandonare il vostro sito, causando una riduzione delle conversioni e delle vendite.

La disabilitazione dell’overflow rende il sito più facile da usare, crea un layout a larghezza fissa e migliora la reattività complessiva del sito.

Tenendo presente questo, vediamo come disabilitare facilmente la barra di scorrimento orizzontale overflow in WordPress:

Metodo 1: Aggiunta di uno snippet CSS tramite il Theme Customizer

È possibile disabilitare l’overflow in WordPress semplicemente aggiungendo del codice CSS nell’opzione “CSS aggiuntivo” del personalizzatore del tema.

Tutto ciò che dovete fare è visitare la pagina Aspetto ” Personalizzazione dalla dashboard di WordPress.

Una volta entrati nella pagina di personalizzazione, fare clic sulla scheda “CSS aggiuntivi”.

Quindi, è sufficiente copiare e incollare il seguente codice:

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

In seguito, l’eventuale overflow verrà rimosso e sarà possibile vederlo applicato nel riquadro di anteprima live del sito web.

Non dimenticate di cliccare sul pulsante “Pubblica” in cima alla pagina quando avete finito!

Metodo 2: Aggiungere lo snippet CSS utilizzando WPCode

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

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

Raccomandiamo questo metodo perché il plugin consente di aggiungere facilmente codice personalizzato a WordPress senza dover modificare alcun file del tema.

Innanzitutto, installate e attivate il plugin WPCode sul vostro sito web. Per maggiori dettagli, potete consultare la nostra guida passo-passo su come installare un plugin di WordPress.

Dopo l’attivazione, visitare la pagina Code Snippets ” + Add Snippets dalla dashboard di WordPress.

Qui, cliccare sul pulsante “Usa snippet” sotto l’opzione “Aggiungi codice personalizzato (nuovo snippet)”.

Si accede così alla pagina “Crea snippet personalizzato”, dove si può iniziare inserendo un titolo per il proprio snippet di codice. Questo nome non verrà visualizzato dagli utenti e servirà solo a identificarlo.

Quindi, selezionare “Snippet CSS” come tipo di codice dal menu a discesa sulla destra.

Successivamente, copiare e incollare il seguente frammento di codice CSS nella casella “Anteprima codice”:

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

Una volta fatto ciò, scorrete verso il basso fino alla sezione “Inserimento”, dove troverete due opzioni, “Inserimento automatico” e “Codice breve”.

Da qui, selezionare la modalità “Inserimento automatico” per eseguire automaticamente il codice all’attivazione.

Tuttavia, se si desidera disattivare la barra di scorrimento orizzontale solo su alcune pagine specifiche, è possibile selezionare la modalità ‘Shortcode’.

Così facendo, WPCode vi fornirà uno shortcode al momento dell’attivazione dello snippet, che potrete incollare in un’area o pagina specifica del sito web per rimuovere l’overflow.

Una volta scelta l’opzione, andate in cima alla pagina e spostate l’interruttore da “Inattivo” ad “Attivo” nell’angolo in alto a destra.

Quindi, fare clic sul pulsante “Salva snippet”.

Ecco fatto! Avete appena rimosso le barre di scorrimento orizzontali di overflow dal vostro sito.

Bonus: Aggiungere una barra di scorrimento personalizzata in WordPress

Una volta disattivata la barra di scorrimento orizzontale, è possibile aggiungere una barra di scorrimento personalizzata.

Ad esempio, se il vostro sito utilizza uno schema di colori specifico in base ai colori del vostro marchio, potete utilizzare lo stesso colore per la vostra barra di scorrimento. In questo modo si otterrà un aspetto visivamente accattivante e si incoraggeranno gli utenti a esplorare il sito.

Per creare una barra di scorrimento personalizzata, installare e attivare il plugin Advanced Scrollbar. Per maggiori dettagli, consultate la nostra guida per principianti su come installare un plugin di WordPress.

Dopo l’attivazione, visitare la pagina Impostazioni ” Impostazioni avanzate della barra di scorrimento dalla dashboard di WordPress. Da qui, è possibile modificare il colore della barra di scorrimento secondo le proprie preferenze.

Al termine, fare clic sul pulsante “Salva modifiche” per memorizzare le impostazioni. Per ulteriori informazioni, consultate il nostro tutorial su come aggiungere una barra di scorrimento personalizzata in WordPress.

Speriamo che questo articolo vi abbia aiutato a capire come disabilitare l’overflow sul vostro sito WordPress. Potreste anche leggere le nostre scelte degli esperti sui migliori snippet di codice da utilizzare sul vostro sito WordPress e la nostra guida per principianti su come rimuovere i CSS inutilizzati in WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.