---
title: "Temi e aspetto"
description: "I temi Éclair e le 12 direzioni artistiche cambiano l’aspetto del tuo sito, con anteprima in tempo reale, senza toccare l’HTML né il posizionamento."
url: "https://eclaircms.org/it/documentazione/temi"
lang: "it"
author: "Thierry Gustin"
published: "2026-10-30"
updated: "2026-11-01"
---

# Temi e aspetto

> **In breve** — Éclair offre 12 direzioni artistiche, che cambiano l’intero universo del sito (palette, carattere dei titoli, banner, punti di forza, icone), e 6 temi classici. Li provi in Impostazioni › Aspetto con un’anteprima in tempo reale del tuo sito vero, e non si pubblica nulla finché non salvi. L’IA può immaginare tre direzioni a partire dalla tua attività. I contrasti sono garantiti, il carattere viene servito dal tuo sito e l’HTML non cambia: velocità e posizionamento restano intatti.

I temi Éclair cambiano l’aspetto del tuo sito con un clic: colore, font, intestazione e presentazione degli elenchi. Dalla 1.8, le 12 direzioni artistiche vanno oltre e ne cambiano l’intero universo. Li provi sul tuo sito vero grazie all’anteprima in tempo reale, su computer o su smartphone, e non si pubblica nulla finché non salvi. I tuoi contenuti, la velocità e il posizionamento, invece, restano com’erano.

![Lo stesso sito di una ceramista mostrato con i 6 temi di Éclair: Éclair, Editoriale, Atelier, Studio, Negozio e Contrasto](https://eclaircms.org/media/2026/11/it-themes.webp)
*Un solo sito, sei stili: cambia solo il tema, il contenuto e l’HTML restano gli stessi.*

## Che cos’è una direzione artistica?

Da Éclair 1.8, una **direzione artistica** va oltre i temi Éclair classici: cambia l’intero universo del sito a partire da un’idea concreta (la città di notte, il laboratorio di ceramica, il quotidiano del mattino). Palette, carattere dei titoli, dimensione dei titoli, angoli, spaziatura, composizione del banner, impaginazione dei punti di forza, fasce di colore e icone cambiano insieme.

![Lo stesso sito di ceramica in sei direzioni artistiche: Notturno, Galleria, Argilla, Riviera, Ricreazione e Stampa](https://eclaircms.org/media/2026/11/it-art-directions.webp)
*Lo stesso sito in sei delle dodici direzioni artistiche.*

| Direzione | Universo | Carattere dei titoli |
| --- | --- | --- |
| **Notturno** | La città di notte: blu profondo, luce ambrata | Big Shoulders Display, in maiuscolo |
| **Galleria** | Pareti bianche, didascalie nere, un rosso da segnaletica | Familjen Grotesk |
| **Argilla** | Il laboratorio di ceramica: sabbia, terracotta, forme morbide | Young Serif |
| **Botanica** | L’erbario e la serra: verde profondo, carta salvia | DM Serif Display |
| **Manifesto** | Il manifesto svizzero: nero su bianco sporco, arancione acceso | Archivo Black, in maiuscolo |
| **Riviera** | La riva del mare: blu navy, cielo pallido, corallo | Gloock |
| **Carta intestata** | Lo studio professionale: inchiostro blu navy, bordeaux, filetti sottili | Libre Caslon Display |
| **Neon** | Lo schermo creativo di notte: quasi nero, verde lime | Unbounded |
| **Dolcezza** | Lo studio di benessere: rosa cipria, prugna, tanta aria | Cormorant Garamond |
| **Cantiere** | Cemento, giallo di sicurezza, segnaletica condensata | Barlow Condensed, in maiuscolo |
| **Ricreazione** | Il cortile della scuola: azzurro cielo, rosso pomodoro, lettere tonde | Fredoka |
| **Stampa** | Il quotidiano del mattino: carta di giornale, rosso da prima pagina | Newsreader |

## Come scegliere e regolare una direzione artistica?

1. In **Impostazioni › Aspetto**, scegli **Direzione artistica** invece di **Tema classico**.
2. Clicca su una delle 12 schede e guarda l’**anteprima in tempo reale**: il tuo sito vero, su computer o su smartphone.
3. Apri **Regola la direzione**, imposta ciò che vuoi, poi salva: prima non si pubblica nulla.

- **5 colori**: sfondo, fasce e schede, testo, testo secondario, accento dei pulsanti e dei link.
- **Font dei titoli**: 18 caratteri scelti per la loro personalità, oppure un font di sistema. **Font del testo**: un font di sistema, senza download.
- **Maiuscole nei titoli**, **dimensione dei titoli**, **angoli** (squadrati, smussati, arrotondati) e **spaziatura** (compatta, normale, ariosa).
- **Schede** con filetto sottile, campitura di colore o ombra portata, e **banner di apertura** con testo e immagine affiancati, manifesto, a tutta pagina, editoriale o centrato.
- **Punti di forza** in schede, righe o colonne, **sezioni** a sfondo uniforme o a fasce di colore, e **icone** disegnate al posto delle emoji.

Intestazione, elenchi di articoli, logo, icona, piè di pagina e CSS personalizzato si regolano come con i temi Éclair classici. Per tornare al tema classico, scegli **Tema classico** e salva: le sue impostazioni ti aspettano intatte.

> **Sempre leggibile, sempre veloce** — Qualunque siano i colori, Éclair regola il testo a un contrasto di **7:1** sullo sfondo, e il testo secondario, i link e i pulsanti a 4,5:1, anche sugli sfondi tinti. Il carattere dei titoli (da 12 a 27 KB) viene scaricato una sola volta dal tuo server da Fontsource (licenza SIL Open Font License), poi servito dal tuo sito e precaricato: nessun servizio di terzi per i tuoi visitatori. Se il tuo hosting blocca le connessioni in uscita, un messaggio ti avvisa e un font di riserva della stessa famiglia prende il suo posto.

## Come fa l’IA a immaginare la tua direzione?

![Impostazioni › Aspetto: scelta tra direzione artistica e tema classico, poi le schede delle 12 direzioni](https://eclaircms.org/media/2026/11/it-direction-settings.webp)
*Impostazioni › Aspetto: direzione artistica o tema classico, poi le 12 schede.*

Quando l’[assistente IA](https://eclaircms.org/it/documentazione/assistente-ia) è attivo, sotto le schede compare **Immagina la mia direzione con l’IA**. Descrivi la tua attività, il tuo pubblico e l’atmosfera che cerchi («panetteria bio di quartiere a Bologna, clientela familiare, calda ma moderna»), poi clicca su **Proponi 3 direzioni**.

L’IA legge anche la presentazione del tuo sito e il tuo profilo editoriale. Parte dal mondo concreto della tua attività, dà a ogni proposta un riferimento preciso e propone tre direzioni davvero diverse, evitando la scelta predefinita del tuo settore. Le proposte si aggiungono in testa alle schede, contrassegnate da ✦: provale nell’anteprima, regolale, poi salva quella che ti piace. L’IA sceglie solo tra le impostazioni di Éclair e non scrive mai CSS. Costo indicativo: circa 0,03 $ con Claude Sonnet 5.5, detratto dal budget dell’assistente. Il metodo è adattato da [Impeccable](https://github.com/pbakaus/impeccable), di Paul Bakaus.

## Quali sono i 6 temi Éclair classici?

I temi Éclair sono inclusi nel CMS dalla versione 1.3.0. Ognuno ha il suo carattere e il suo pubblico:

| Tema | Stile | Per chi |
| --- | --- | --- |
| **Éclair** | Chiaro, moderno e versatile: il tema originale | Tutti i siti |
| **Editoriale** | Stile rivista: caratteri con grazie, filetti sottili, capolettera, articolo in evidenza | Blog, media, autori |
| **Atelier** | Caldo e artigianale: toni crema e terracotta, forme morbide | Artigiani, ristoranti, benessere |
| **Studio** | Portfolio minimalista: bianco e nero, titoli grandi, immagini al vivo | Fotografi, designer, agenzie |
| **Negozio** | Pensato per vendere: foto quadrate, intestazione fissa, pulsanti decisi | Negozi, creativi |
| **Contrasto** | Massima leggibilità: testo grande, contrasti forti, link sottolineati | Servizi pubblici, associazioni, anziani |

Tutti i temi mostrano gli stessi blocchi, il blog e il [negozio leggero](https://eclaircms.org/it/documentazione/negozio): scegli quello che somiglia al tuo mestiere, non quello che «contiene» una funzione.

## Come cambiare tema?

Bastano cinque passaggi, anteprima compresa:

1. Apri **Impostazioni › Aspetto**.
2. In **Tema**, clicca sulla card che ti piace. Il suo colore, i suoi font, la sua intestazione e la presentazione degli elenchi si applicano subito ai campi qui sotto.
3. Sotto **Anteprima in tempo reale**, scegli la pagina mostrata (Home, Blog, Un articolo, Il negozio o Un prodotto), poi passa da **Computer** a **Smartphone**. Puoi cliccare nell’anteprima: i link restano al suo interno.
4. Regola quello che vuoi (colore principale, font, intestazione, elenchi, modalità scura): l’anteprima segue ogni modifica.
5. Clicca su **Salva**. La cache delle pagine viene svuotata automaticamente: il tuo sito cambia subito.

![Impostazioni › Aspetto di Éclair: le sei card dei temi, il tema Negozio selezionato e l’anteprima in tempo reale della home su computer](https://eclaircms.org/media/2026/11/it-appearance-preview.webp)
*L’anteprima in tempo reale mostra il tuo sito vero con il tema scelto; non si pubblica nulla finché non salvi.*

> **Annota le tue impostazioni prima di provare** — Scegliere un tema sostituisce il colore, i font, l’intestazione e gli elenchi del modulo con quelli consigliati dal tema. Se li avevi personalizzati, annotali prima di provare altri temi. Finché non hai cliccato su Salva, non viene modificato nulla: esci semplicemente dalla pagina per mantenere le impostazioni attuali.

## Cosa imposta ogni tema quando lo scegli?

Ecco le impostazioni consigliate che ogni tema applica, tutte modificabili in seguito:

| Tema | Colore principale | Font (titoli / testo) | Intestazione | Elenchi |
| --- | --- | --- | --- | --- |
| Éclair | Viola `#5b4cf0` | Sistema (moderno) | Logo a sinistra | Griglia di card |
| Editoriale | Rosso `#b42318` | Serif elegante / Serif moderno | Centrato | Griglia di card |
| Atelier | Terracotta `#c2410c` | Umanista | Logo a sinistra | Griglia di card |
| Studio | Nero `#111111` | Neo-grottesco | Logo a sinistra | Griglia di card |
| Negozio | Verde petrolio `#0f766e` | Geometrico / Sistema (moderno) | Centrato | Griglia di card |
| Contrasto | Blu `#1d4ed8` | Sistema (moderno) | Logo a sinistra | Elenco: immagine a sinistra |

## Quali altre impostazioni dell’aspetto puoi modificare?

Sempre in **Impostazioni › Aspetto**, sotto l’anteprima:

| Impostazione | Cosa scegli |
| --- | --- |
| **Intestazione** | «Logo a sinistra, menu a destra» oppure «Centrato: logo sopra il menu» |
| **Elenchi di articoli e prodotti** | «Griglia di card» oppure «Elenco: immagine a sinistra» |
| **Logo** | Un PNG o un WebP su sfondo trasparente, largo circa 400 px |
| **Icona del sito (favicon)** | Un’immagine quadrata di almeno 512 px; senza icona, viene generato un fulmine del tuo colore |
| **Colore principale** | Qualsiasi colore: il contrasto dei testi viene regolato automaticamente |
| **Font dei titoli** e **Font del testo** | Font di sistema: zero download, visualizzazione istantanea |
| **Modalità scura** | «Automatico (in base al dispositivo del visitatore)» oppure «Sempre chiaro» |
| **Testo del piè di pagina** | Il tuo testo, e l’opzione **Mostra «Realizzato con ⚡ Éclair»** |
| **CSS personalizzato** | Le tue regole di stile, 64 KB al massimo |

Per il colore principale, Éclair punta a un contrasto di almeno 4,5:1 tra i link e lo sfondo, la soglia del [criterio WCAG 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) per il testo normale. Se il tuo colore non basta, i link usano una versione più scura (più chiara in modalità scura), e il testo dei pulsanti diventa bianco o nero, a seconda di ciò che si legge meglio.

## Perché un tema non rallenta il tuo sito?

Perché ogni tema è solo un **foglio di stile da 1,5 a 3 KB**, aggiunto a quello di base. Il tema Éclair, invece, non aggiunge nulla: è lo stile di base.

- **L’HTML non cambia** da un tema all’altro: velocità, accessibilità, dati strutturati e [posizionamento](https://eclaircms.org/it/documentazione/seo) restano identici.
- **Solo il tema attivo** viene inserito nella pagina, insieme al resto del CSS: nessun file in più da scaricare.
- **La modalità scura automatica** funziona con ognuno dei 6 temi.
- **Gli stili del negozio** vengono inseriti solo quando è aperto: un sito vetrina non li carica mai.
- **Con una direzione artistica**, vengono inserite solo le regole utili alla tua direzione, e il suo carattere dei titoli viene precaricato con `font-display: optional`: nessuno spostamento del layout, e Lighthouse resta a 100.

## Come aggiungere il tuo CSS?

Per andare oltre il tema (il colore di un pulsante, le spaziature, lo stile di un blocco), incolla le tue regole in **Impostazioni › Aspetto › CSS personalizzato**, poi salva.

- **Hanno la precedenza sul tema**: vengono aggiunte dopo di esso in ogni pagina.
- **Sopravvivono agli aggiornamenti** da Éclair 1.5.0: sono salvate insieme ai tuoi dati, in `data/`, che l’[aggiornamento](https://eclaircms.org/it/documentazione/aggiornamenti) non tocca.
- **I delimitatori della modalità scura** funzionano: le regole comprese tra `/*dark*/` e `/*/dark*/` scompaiono quando la modalità scura è impostata su «Sempre chiaro».
- **Per sicurezza**, il carattere `<`, le regole `@import` e i caratteri di controllo vengono rimossi, e il campo accetta al massimo 64 KB.

Per esempio, per pulsanti con gli angoli leggermente arrotondati e un piè di pagina più scuro in modalità scura:

```css
.btn { border-radius: 6px; }

/*dark*/@media (prefers-color-scheme: dark) { .site-footer { background: #0d0d12; } }/*/dark*/
```

## Cosa non fanno i temi?

- **Non cambiano la struttura delle pagine.** Per spostare un elemento o aggiungere un’area, bisogna modificare i template PHP di `app/theme/`, come spiega la pagina [Per sviluppatori](https://eclaircms.org/it/documentazione/sviluppatori). Un aggiornamento li sostituisce: tieni una copia dei tuoi file.
- **Non c’è un catalogo di temi da scaricare e non ci sono estensioni**: i 6 temi sono inclusi in Éclair. L’assenza di estensioni è una scelta, per la velocità e per la sicurezza.
- **Niente web font con i temi classici**: solo font di sistema, già presenti sul dispositivo del visitatore. Una direzione artistica aggiunge un solo font per i titoli, servito dal tuo sito.
- **Il CSS personalizzato non importa nulla**: senza `@import`, non può caricare un altro foglio di stile.

## Cosa fare se l’aspetto non cambia?

| Sintomo | Soluzione |
| --- | --- |
| Il sito non è cambiato | L’anteprima non salva nulla: clicca su **Salva**. Il CSS è integrato in ogni pagina, non c’è nessun vecchio file da aggiornare. |
| «Il negozio» e «Un prodotto» mancano nell’anteprima | Compaiono solo dopo l’apertura del negozio, e «Un prodotto» solo se c’è un prodotto pubblicato. |
| Una regola del tuo CSS personalizzato viene ignorata | Verifica che non contenga né `<` né `@import`, che vengono rimossi al salvataggio. Se resta senza effetto, rendila più specifica: una regola più specifica del tema ha la precedenza. |
| «CSS personalizzato troppo lungo: massimo 64 KB.» | Raggruppa o alleggerisci le tue regole. |
| Alcune regole spariscono | Sono comprese tra `/*dark*/` e `/*/dark*/`, e la modalità scura è impostata su «Sempre chiaro»: è voluto. |
| Le tue modifiche a `theme.css` sono sparite | L’aggiornamento ha sostituito `app/`. Sposta le tue regole nel CSS personalizzato. |

Le istruzioni originali sono anche nella [guida ufficiale di Éclair](https://github.com/Jacckisback/eclair-cms/blob/main/docs/GUIDE.it.md#temi), e il dettaglio delle versioni dalla 1.3.0 alla 1.5.0 nel [registro delle versioni](https://eclaircms.org/it/changelog).

## Domande sui temi

### Cambiare tema fa perdere i miei contenuti o il mio posizionamento?

No. I temi Éclair non toccano né i tuoi contenuti né l’HTML delle tue pagine: titoli, dati strutturati, velocità e accessibilità restano identici. Cambia solo l’aspetto.

### Posso tornare al tema originale?

Sì, in qualsiasi momento: scegli la card Éclair in Impostazioni › Aspetto, poi salva. Le sue impostazioni consigliate si applicano di nuovo, e il tuo CSS personalizzato resta al suo posto.

### La modalità scura funziona con tutti i temi?

Sì: si applica automaticamente in base al dispositivo del visitatore, con ognuno dei 6 temi. Per evitarla, imposta la **Modalità scura** su «Sempre chiaro».

### Quale tema scegliere per vendere online?

Il tema Negozio è pensato per vendere: foto quadrate, intestazione fissa, pulsanti decisi. Anche gli altri temi mostrano il negozio; le istruzioni sono in [Il negozio leggero](https://eclaircms.org/it/documentazione/negozio).

### Il mio CSS personalizzato sopravvive agli aggiornamenti?

Sì, da Éclair 1.5.0: è salvato in `data/`, che l’aggiornamento non tocca. Vengono sostituite solo le modifiche fatte direttamente in `app/theme/`.

### Una direzione artistica rallenta il mio sito?

No. Nella pagina vengono inserite solo le regole utili alla tua direzione, e il suo carattere dei titoli, da 12 a 27 KB, è servito dal tuo sito e precaricato. Lighthouse resta a 100 in tutte e quattro le categorie.

### Posso tornare al tema classico dopo aver scelto una direzione?

Sì: scegli Tema classico in Impostazioni › Aspetto e salva. Le sue impostazioni ti aspettano intatte, e anche quelle della tua direzione, se ci torni.