← Tutti gli articoli

Tutorial

Ritocchi per Notion in JustZix — pagine più larghe, font e modalità focus

18 maggio 2026 · di JustZix Team

Notion è flessibile sui contenuti ma rigido sull'aspetto. Una colonna di testo stretta, un solo font, nessuna modalità focus, tabelle di database che si confondono in un'unica massa grigia. Non puoi cambiare tutto questo nelle impostazioni — ma puoi cambiarlo con un'unica regola CSS di JustZix. Questa guida ti accompagna in sei ritocchi che cambiano davvero il lavoro quotidiano in Notion, ciascuno come snippet pronto da incollare.

Perché il CSS, non le impostazioni di Notion

Notion tiene deliberatamente l'aspetto sotto controllo — vuole che ogni pagina appaia uguale su ogni dispositivo. È ragionevole per un team, ma frustrante quando hai un monitor da 27 pollici e il testo usa un terzo dello schermo. JustZix sovrappone il tuo CSS a notion.so nel browser: Notion non sa nulla del cambiamento e tu ottieni il tuo layout. La regola è limitata al dominio, quindi funziona ovunque — nel tuo workspace privato e in quello aziendale — senza toccare l'account.

Pagine più larghe e tutta larghezza

Notion ha un interruttore "tutta larghezza" per singola pagina, ma devi attivarlo a mano su ogni pagina. Una regola CSS lo fa globalmente e ti lascia scegliere la tua larghezza massima:

/* Colonna di contenuto più larga su ogni pagina di Notion */
.notion-page-content {
  max-width: 1100px !important;
  width: 100% !important;
}

/* L'intestazione (copertina, titolo) si allinea al contenuto */
.notion-page-content > .notion-cover,
.notion-page-content > [class*="layout"] {
  max-width: 1100px !important;
}

Imposta max-width su ciò che si adatta al tuo monitor — 900 px è una lettura comoda, 1300 px è una variante in stile foglio di calcolo. Il selettore .notion-page-content copre sia le pagine ordinarie sia le pagine di database aperte come record.

Modalità focus — nascondi la barra laterale e quella superiore

Quando scrivi un documento più lungo, il pannello sinistro e la barra superiore distraggono soltanto. La modalità focus nasconde entrambi e dà al contenuto tutto lo schermo:

/* Modalità focus: nasconde la navigazione laterale e la barra superiore */
.notion-sidebar-container {
  display: none !important;
}
.notion-topbar {
  opacity: 0;
  transition: opacity .2s ease;
}
.notion-topbar:hover {
  opacity: 1;
}

/* Il contenuto recupera lo spazio lasciato dalla barra laterale nascosta */
.notion-frame {
  margin-left: 0 !important;
}

La barra superiore non sparisce del tutto — diventa trasparente e ritorna quando ci passi sopra il mouse, così raggiungi ancora il menu "Share" e la cronologia della pagina. Tieni questo ritocco come regola separata e attivalo dalla barra delle azioni quando vuoi riavere la navigazione completa.

Font personalizzato e interlinea

Notion offre tre font. Se preferisci un carattere di sistema specifico, o vuoi semplicemente più interlinea per le letture lunghe, sovrascrivilo direttamente:

/* Font personalizzato e interlinea più ampia nel corpo */
.notion-page-content,
.notion-page-content [placeholder] {
  font-family: "Charter", "Iowan Old Style", Georgia, serif !important;
  line-height: 1.7 !important;
  font-size: 17px !important;
}

/* I titoli restano senza grazie per contrasto */
.notion-page-content h1,
.notion-page-content h2,
.notion-page-content h3 {
  font-family: "Inter", system-ui, sans-serif !important;
}

Blocchi callout e citazioni con stile

I callout e le citazioni predefiniti di Notion sono discreti fino al punto di essere invisibili. Rafforzali in modo che catturino davvero l'occhio:

/* Blocchi callout più in evidenza */
.notion-callout-block {
  border-left: 4px solid #2f6fed !important;
  border-radius: 6px;
  background: rgba(47,111,237,.07) !important;
}

/* Citazioni con un accento più grande e morbido */
.notion-quote-block {
  border-left: 4px solid #888 !important;
  font-style: italic;
  padding-left: 16px !important;
}

/* Blocchi toggle con un'etichetta più chiara */
.notion-toggle-block > div:first-child {
  font-weight: 600;
}

Database — righe zebrate e intestazioni fisse

Le tabelle di database lunghe sono difficili da seguire con gli occhi. Strisce alternate sulle righe e un'intestazione che resta fissa mentre scorri risolvono entrambi i problemi:

/* Strisce zebrate nella vista tabella */
.notion-collection-item:nth-child(even) {
  background: rgba(0,0,0,.035) !important;
}

/* Intestazione di tabella fissa durante lo scorrimento */
.notion-table-view-header-row,
.notion-collection-view-header {
  position: sticky !important;
  top: 0;
  z-index: 5;
  background: var(--bg, #fff) !important;
}

/* Una linea più chiara sotto l'intestazione */
.notion-table-view-header-row {
  border-bottom: 2px solid #ccc !important;
}

Nascondere i commenti e ritocchi ai blocchi di codice

I thread di commenti possono essere utili, ma in una pagina di riferimento ingombrano soltanto il margine. I blocchi di codice, a loro volta, traggono vantaggio da un carattere monospace più grande:

/* Nascondi i thread di commenti nel margine */
.notion-discussion,
[class*="comment-thread"] {
  display: none !important;
}

/* Blocchi di codice più leggibili */
.notion-code-block {
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  font-size: 14px !important;
  border-radius: 8px;
  background: #1e1e2e !important;
}
.notion-code-block code {
  line-height: 1.55 !important;
}

Se preferisci limitarti a comprimere i commenti anziché nasconderli, sostituisci con una regola JS che clicca i pulsanti di compressione su document_idle — ma per la maggior parte delle pagine un display: none statico è sufficiente.

Combinare i ritocchi in un set

Ogni ritocco qui sopra funziona da solo, ma la vera comodità è tenerli come regole separate e nominate: "Notion — pagine larghe", "Notion — modalità focus", "Notion — database zebrati". Poi dalla barra delle azioni attivi esattamente ciò che ti serve su una data pagina, e disattivi la modalità focus con un clic quando vuoi riavere la navigazione.

Le regole pronte per Notion sono nel nostro catalogo — vedi gli esempi per notion.so, copia ciò che ti serve e regolalo per il tuo monitor. Installa JustZix e rimodella Notion su misura per te in pochi minuti.