Tema del sito: testo, colori, sfondo e design

Il pannello Tema del sito web ti permette di apportare modifiche che riguardano l'intero sito. Dal pannello di design personalizzi testo, pulsanti, immagini, sfondo e widget di navigazione del tuo sito. Così applichi rapidamente cambiamenti visivi di ampia portata, riduci i tempi di progettazione e mantieni lo stile del tuo sito coerente su tutte le pagine.

Per aprire il pannello Tema del sito web, nel pannello laterale clicca su Tema. Quando il pannello Tema del sito web è aperto, il canvas si riduce automaticamente alla vista del 50% così da restare interamente visibile mentre regoli le impostazioni del tema. Se vuoi tornare alla vista del canvas al 100%, clicca sul menu a tendina nella barra in alto e seleziona 100%. Puoi anche ingrandire e ridurre nella modalità anteprima.

Nota: le modifiche che fai su widget o pagine specifici hanno la precedenza sui temi impostati nel pannello Tema del sito web. Ti consigliamo di decidere prima un tema del sito e poi di personalizzare le parti che vuoi far risaltare o rendere diverse dal resto.

Testo del tema

Questa sezione ti permette di controllare il testo del tuo sito, sia il testo normale sia i titoli di ogni dimensione (da H1 a H6). Cambia lo stile e l'aspetto del testo dell'intero sito. Puoi cambiare tipo e dimensione del font e scegliere impostazioni diverse per testo normale, link e titoli.

Cambiare dimensione, stile, colore del font e altri dettagli influisce sui paragrafi futuri e sugli altri tipi di testo, oltre che sui widget attuali collegati al Testo del sito che non hai modificato a mano.

Configurare il testo del tema

Per configurare il testo del tema:

1. Nel pannello laterale, clicca su Tema.
2. Clicca sulla freccia accanto a Testo.
3. Clicca sul tipo di testo che vuoi. Le opzioni sono:
   • DFLT. Imposta il tema per tutto il testo dei widget non assegnati a un titolo o allo stile paragrafo, come il widget di navigazione. Qui puoi impostare anche il colore e la sottolineatura del testo dei link. Inoltre puoi personalizzare l'aspetto dei link nei diversi stati, tra cui Stato predefinito del link, Collegamento al passaggio del mouse e Link cliccato.
   • PAR. Imposta il tema per il widget di testo.
   • Titoli e sottotitoli da H1 a H6.
4. Per ogni tipo di testo puoi cambiare:
   • Font
   • Dimensione del font. Si imposta separatamente per desktop/tablet e per mobile.
   • Colore del font
   • Formato del font
   • Direzione del testo
   • Spessore del font
   • Altezza della riga
   • valori di padding tra le lettere
   • Tutte maiuscole
   • Ombreggiatura del testo

Le modifiche nell'area del testo del tema riguardano tutto il testo del sito che non hai sovrascritto con modifiche di stile individuali. Non appena modifichi a mano un elemento, quella modifica ha la precedenza: da quel momento le modifiche al tema non influiscono più sullo stile di quell'elemento. Questo vale solo per la singola impostazione di stile che hai cambiato sull'elemento. Ad esempio, se hai cambiato solo il colore del testo di un widget H1 specifico sul canvas:

• e poi cambi la dimensione del font di H1 nel tema del sito, la dimensione del font cambia comunque in quel widget H1.
• e poi cambi il colore di H1 nel tema del sito, l'H1 che avevi già modificato non si aggiorna con il nuovo colore.

Aggiornare il testo del tema

Puoi aggiornare il testo del tema nelle impostazioni del testo cliccando su Tema e poi selezionando Testo. In alternativa, clicca su un widget di testo per aprire il menu contestuale, clicca sul menu a tendina di selezione del titolo e seleziona Aggiorna tema. Si aprono le impostazioni del testo del tema, dove puoi fare le modifiche.

Libreria dei font

L'editor offre una grande varietà di font. Imposta un font per il testo del tema oppure differenzia il tuo testo usando più font diversi sul tuo sito.

Per vedere i font disponibili e il loro aspetto:

1. Nel pannello laterale, clicca su Tema.
2. Clicca su Testo.
3. Seleziona un font dal menu a tendina Font.

Colori del tema

I colori ti permettono di definire una palette e di collegare i singoli colori a uno, ad alcuni o a tutti i widget che hanno impostazioni di colore. Il colore di qualsiasi elemento collegato ai colori del tema si aggiorna automaticamente quando cambi il colore collegato nelle impostazioni dei colori del tema. Così applichi rapidamente le modifiche di colore, riduci i tempi di progettazione e mantieni lo stile del tuo sito coerente su tutte le pagine.

Configurare i colori del tema

Puoi configurare fino a 30 colori del tema.

Per configurare i colori del tema:

1. Nel pannello laterale, clicca su Tema.
2. Seleziona la freccia accanto a Colori.
3. Clicca sull'icona più accanto a Primario, o all'impostazione che vuoi definire.
4. Scrivi il valore HEX o RGB del colore che vuoi, oppure usa lo strumento contagocce per selezionare un colore.
5. (Facoltativo) Puoi generare i colori a partire dal tuo logo. Clicca per aprire il colore primario, poi apri la scheda Marchio e clicca su + Aggiungi logo (se hai aggiunto un logo alle tue Informazioni attività nella Libreria contenuti, comparirà qui). Dopo aver aggiunto il logo, viene generato un insieme di colori. Se devi rimuovere o sostituire il logo, clicca sull'icona dei tre puntini accanto al logo e seleziona Rimuovi o sostituisci immagine.

Ripeti questi passaggi per ogni colore del tema, se necessario. Poi devi collegare i colori ai widget del tuo sito (vedi più avanti Collegare i colori del tema ai widget).

Configurare automaticamente i colori del tema

Se il sito o il modello non ha ancora colori collegati, puoi farlo anche automaticamente. Il generatore automatico di colori del tema analizza il tuo sito e rileva i colori più usati. Genera un elenco di colori tra cui scegliere e, una volta selezionati, quei colori diventano i tuoi colori del tema e vengono collegati ai widget del tuo sito.

Per configurare automaticamente i colori del tema:

1. Nel pannello laterale, clicca su Tema.
2. Seleziona la freccia accanto a Colori.
3. Clicca su Set Theme Colors.
4. Clicca su Connect it for me oppure su I'll connect it myself.
5. (Facoltativo) Se hai scelto I'll connect it myself, clicca sull'icona più accanto a ogni colore nel pannello di design e seleziona i colori uno a uno.
6. Seleziona quali dei colori generati vuoi usare.
7. Clicca su Save & Connect Colors.

I colori compaiono nella sezione Colori del pannello Tema del sito web.

Collegare i colori del tema ai widget

Per collegare un widget a un colore del tema:

1. Clicca su un widget per aprire il suo menu delle impostazioni.
2. Apri le impostazioni del colore e seleziona uno dei colori del tema elencati in alto.
3. Ripeti se necessario per altri elementi.
4. (Facoltativo) Se devi modificare uno dei colori del tema, clicca sull'icona della matita e si apriranno le impostazioni dei colori del tema, dove puoi modificare il colore che vuoi.

Una volta che un widget è collegato ai colori del tema, si aggiorna automaticamente quando il colore del tema collegato viene aggiornato.

Rinominare i colori del tema

Per rinominare i colori del tema:

1. Nel pannello laterale, clicca su Tema.
2. Clicca su Colori.
3. Passa il cursore sul nome del colore che vuoi e clicca sull'icona della matita.
4. Scrivi un nuovo nome.

Il nuovo nome viene salvato automaticamente e compare quando passi il cursore sul colore nel selettore di colore.

Rimuovere i colori del tema

Puoi scollegare qualsiasi widget collegato a singoli colori del tema.

Per scollegare un widget:

1. Nel pannello laterale, clicca su Tema.
2. Clicca su Colori.
3. Clicca sull'icona dei tre puntini orizzontali accanto al testo Colori e seleziona Remove theme colors.
4. Seleziona quali colori rimuovere, poi clicca su Remove Selected Colors.

Pulsanti del sito

Questa sezione ti permette di definire lo stile dei widget di pulsante primario e secondario del tuo sito. Scegli uno dei layout di pulsante e imposta testo, colore di sfondo, bordo, stato hover, angoli e stili d'ombra.

Per nascondere il pulsante Torna all'inizio su mobile, attiva l'opzione nella sezione Layout del sito.

Immagini del tema

Questa sezione ti permette di controllare lo stile dei widget di immagine del tuo sito. Puoi cambiare il layout dell'immagine e aggiungere o modificare lo stile del bordo, gli angoli arrotondati o gli effetti d'ombra.

Righe e colonne del tema

Questa sezione ti permette di definire il tema del design di righe e colonne per quanto riguarda colore di sfondo e spaziatura predefinita. Le modifiche fatte su singole righe o colonne hanno la precedenza sulle impostazioni di righe e colonne del tema.

Sfondo del tema

Questa sezione ti permette di controllare lo stile dello sfondo del tuo sito. Scegli se usare un colore o un'immagine come sfondo. Scegli un'immagine di sfondo personalizzata dalla galleria fotografica o carica le tue immagini per dare al sito un design unico. Le modifiche riguardano anche desktop e tablet.

Nota: per informazioni sugli sfondi dei singoli elementi del sito, vedi Element Backgrounds.

Personalizzare lo sfondo del sito

Per personalizzare lo sfondo del tuo sito:

1. Nel pannello laterale, clicca su Tema.
2. Clicca sulla freccia accanto a Sfondi.
3. Clicca su Sfondo predefinito.
4. Clicca sulla scheda Colore o immagine, oppure seleziona un colore per lo sfondo del sito o carica un'immagine.
5. (Facoltativo) Clicca sull'opzione Non ottimizzare questa immagine per evitare l'ottimizzazione (questa impostazione compare dopo aver selezionato un'immagine).

Personalizzare lo sfondo per pagina

Per personalizzare lo sfondo per pagina:

1. Nel pannello laterale, clicca su Tema.
2. Clicca sulla freccia accanto a Sfondi.
3. Clicca su Sfondo per pagina.
4. Seleziona una pagina dal menu a tendina e scegli immagine o colore per quella pagina specifica.
5. (Facoltativo) Clicca sull'opzione Non ottimizzare questa immagine per evitare l'ottimizzazione (questa impostazione compare dopo aver selezionato un'immagine).

Larghezza e spaziatura (Editor 2.0)

Nota: queste informazioni riguardano nello specifico Editor 2.0, prima noto come All-Flex Editor.

Dal pannello Tema puoi regolare il layout del tuo sito, il che include l'impostazione della larghezza della pagina e della spaziatura predefinita di sezioni, colonne e colonne interne.

Per accedere alle impostazioni di layout del sito:

1. Nel pannello laterale, clicca su Tema.
2. Clicca su Larghezza e spaziatura.
3. Clicca sulla sezione che vuoi per espanderla.

Larghezza della pagina

Puoi impostare la larghezza di pagina predefinita, su desktop, per le sezioni non impostate a piena larghezza (prima chiamata "full bleed"). Regolare la larghezza di pagina predefinita aiuta a garantire la migliore leggibilità e il miglior design in base a come verrà mostrato il sito. Ad esempio, alcuni siti vengono mostrati sullo schermo di un televisore o su schermi più grandi di un normale computer desktop.

Per impostare la larghezza di pagina predefinita:

1. Nel pannello laterale, clicca su Tema.
2. Clicca su Larghezza e spaziatura.
3. Clicca per espandere la sezione Larghezza pagina.
4. Seleziona 1200 px, 1440 px o Custom. Se selezioni Custom, usa il cursore per scegliere la larghezza in pixel o inserisci un valore nel campo. Il valore personalizzato può essere compreso tra 960px e 1920px, oppure tra 50 vw e 100 vw.

Attiva l'opzione Larghezza piena se vuoi che tutte le nuove sezioni abbiano la piena larghezza per impostazione predefinita.

valori di padding delle sezioni

Puoi impostare il padding predefinito per le sezioni nuove e vuote che aggiungi al tuo sito. Se vuoi, puoi sovrascrivere la spaziatura delle sezioni del tema nel pannello di design della singola sezione.

Considerazioni importanti:

• Le sezioni aggiunte all'header conservano la spaziatura predefinita dell'header, indipendentemente da ciò che è impostato nella spaziatura delle sezioni del tema.
• Nota che le sezioni create prima del rilascio di questa funzione (5 agosto 2025) non ereditano automaticamente il padding di valori di padding della sezione, ma puoi ricollegarle aprendo il pannello di design della sezione e cliccando su Ripristina la spaziatura del tema nel cassetto valori di padding della sezione.

Per impostare la spaziatura delle sezioni:

1. Nel pannello laterale, clicca su Tema.
2. Clicca su Larghezza e spaziatura.
3. Clicca per espandere la sezione valori di padding della sezione.
4. Clicca nei rispettivi riquadri per modificare i valori di padding. I valori di padding orizzontali sono collegati: se ne cambi uno, l'altro si aggiorna automaticamente. Puoi scollegarli cliccando sull'icona del collegamento. Nota che la spaziatura delle sezioni si imposta per breakpoint.

Se necessario, clicca su Ripristina spaziatura per azzerare tutti i valori.

Se modifichi il padding di una singola sezione, questo ha la precedenza sulle impostazioni del tema. Puoi ripristinarlo alle impostazioni di valori di padding della sezione del tema aprendo il pannello di design della sezione e cliccando su Ripristina la spaziatura del tema nel cassetto valori di padding della sezione.

valori di padding delle colonne

Puoi impostare il padding predefinito per le colonne nuove e vuote che aggiungi al tuo sito. Se vuoi, puoi sovrascrivere la spaziatura delle sezioni del tema nel pannello di design della singola colonna.

Per impostare la spaziatura predefinita delle colonne:

1. Nel pannello laterale, clicca su Tema.
2. Clicca su Larghezza e spaziatura.
3. Clicca per espandere la sezione Colonna spaziatura.
4. Clicca nei rispettivi riquadri per modificare i valori di padding. I valori di padding verticali sono collegati: se ne cambi uno, l'altro si aggiorna automaticamente. Puoi scollegarli cliccando sull'icona del collegamento.

valori di padding delle colonne interne

Puoi impostare il padding predefinito per le nuove colonne interne che aggiungi al tuo sito. Se vuoi, puoi sovrascrivere la spaziatura delle sezioni del tema nel pannello di design della singola colonna interna.

Per impostare la spaziatura predefinita delle colonne interne:

1. Nel pannello laterale, clicca su Tema.
2. Clicca su Larghezza e spaziatura.
3. Clicca per espandere la sezione Inner Column Spacing.
4. Clicca nei rispettivi riquadri per modificare i valori di padding. I valori di padding verticali sono collegati: se ne cambi uno, l'altro si aggiorna automaticamente. Puoi scollegarli cliccando sull'icona del collegamento.

Layout del sito

Controlla la navigazione del layout del sito su desktop, tablet e mobile. Per la versione desktop puoi scegliere tra due larghezze: 960px o 1200px.

Cambiare il layout della navigazione spesso influisce sul comportamento del tuo header e a volte sul resto del sito. Se dopo aver cambiato layout il tuo header appare improvvisamente sbagliato, prova un layout diverso.

Layout con barra laterale per desktop

Puoi cambiare il layout desktop del tuo sito in un layout con barra laterale. Il layout con barra laterale mostra l'header su un lato del sito (a sinistra o a destra) ed è un ottimo strumento di design per dare al tuo sito un aspetto unico. L'header della barra laterale funziona anche come header fisso, quindi resta sempre visibile sullo schermo, e puoi aggiungere widget alla barra laterale come in qualsiasi altra riga.

Nota:

• Quando passi da un layout tradizionale a un layout con barra laterale, l'header conserva il logo e tutti i widget che avevi vengono rimossi (come quando cambi il layout dell'header nel layout con header in alto). Il colore di sfondo cambia in base al layout che hai selezionato.
• L'header che si rimpicciolisce non è disponibile per la navigazione con barra laterale. La barra laterale è sempre visibile sul sito, indipendentemente dallo scorrimento.
• Su schermi di larghezza inferiore a 1090 pixel, il contenuto della barra laterale, tranne la prima immagine, viene nascosto e compare un'icona per espandere il menu. Puoi personalizzare il colore del pulsante che lo attiva, che compare nell'editor di design.

Per cambiare il layout del tuo sito in un layout con barra laterale:

1. Nel pannello laterale, clicca su Theme.
2. Clicca sulla freccia accanto a Site Layout.
3. Seleziona il layout con barra laterale. Puoi aggiungere righe, trascinare i widget nell'header della barra laterale e personalizzarlo.

Per modificare il design dell'header della barra laterale, passa il cursore sulla barra laterale e clicca su Sidebar nell'angolo in alto a destra. Puoi scegliere uno dei vari layout di header della barra laterale da applicare al tuo sito, mostrarlo a sinistra o a destra dello schermo, definirne la larghezza e altro ancora.