← Tutti gli articoli

Tutorial

Nascondi barre laterali e sezioni commenti una volta per tutte

Un articolo è qualche centinaio di parole di testo circondato da un'arena di distrazioni: colonne di tendenze, barre di condivisione fisse, pannelli di autoplay e sezioni di commenti che raramente ripagano lo scorrimento. JustZix ti permette di eliminare l'arena e tenere l'articolo.

Trova cosa rimuovere

Apri la pagina, fai clic destro sul blocco fastidioso e scegli Ispeziona. Annota il suo tag, id o una class stabile. Stai cercando un selettore abbastanza specifico da colpire solo il rumore. Parole generiche come sidebar, related, recommended e promo compaiono nei nomi di classe sulla maggior parte dei siti.

Il blocco di nascondimento di base

Inizia con un elenco dei soliti sospetti. display: none rimuove l'elemento del tutto, recuperandone lo spazio:

aside,
.sidebar,
#sidebar,
.related-articles,
.recommended,
.trending,
.most-popular,
.promo, .ad-slot {
  display: none !important;
}

Aggiungi o rimuovi selettori per sito. Se sparisce qualcosa che vuoi tenere, elimina la riga che l'ha catturato.

Bandisci la sezione commenti

I widget dei commenti sono pesanti, lenti e spesso un pozzo di malafede. Nasconderli velocizza la pagina e protegge il tuo umore:

#comments,
.comments,
.comment-section,
#disqus_thread,
.fb-comments,
[id*="livefyre"] {
  display: none !important;
}

Elimina il disordine fisso

Header fissi, barre di condivisione flottanti e bolle di chat ti seguono giù per la pagina. Alcuni li vuoi spariti; per altri, impedisci semplicemente che restino fissi:

.share-bar,
.floating-cta,
.chat-widget,
[class*="cookie-banner"] {
  display: none !important;
}
header.sticky,
.site-header {
  position: static !important;
}

Cambiare un header da fixed o sticky a static mantiene la navigazione disponibile ma le impedisce di mangiare spazio mentre leggi.

Riconquista la colonna

Una volta sparita una barra laterale, la colonna principale spesso resta alla sua vecchia larghezza stretta con spazio vuoto accanto. Riallargala:

.main-content,
.content-area,
article {
  width: 100% !important;
  max-width: 72ch !important;
  margin-inline: auto !important;
  float: none !important;
}

Il float: none annulla i vecchi layout a float; la max-width poi mantiene il testo ora centrato a una misura leggibile.

Un'alternativa più sicura a display none

Se nascondere un elemento rompe uno script che se lo aspetta, neutralizzalo visivamente invece:

.related-articles {
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

Salvala come regola

Crea una regola JustZix, imposta il pattern URL sul sito che hai come obiettivo, incolla i blocchi che ti servono nel pannello CSS e salva. Ricarica l'articolo — il rumore è sparito e il testo resta da solo. Costruisci una regola per ogni sito che leggi spesso, poiché i selettori variano.

Una pagina ripulita si abbina perfettamente con uno sfondo caldo e una colonna messa a punto. Vedi come creare la tua modalità lettura per il trattamento completo, prendi preset dai nostri esempi pronti all'uso, e scarica JustZix per iniziare a tagliare il disordine.

Valuta questo articolo

Nessuna valutazione — sii il primo.

Provalo tu stesso

Installa JustZix e incolla qualsiasi snippet di questo articolo. Due minuti da zero a una regola funzionante su tutti i tuoi dispositivi.

Ottieni JustZix

Funzionalità · Come funziona · Esempi · Casi d'uso