Il pannello Tema del sito consente di apportare modifiche che interessano l'intero sito. Puoi personalizzare il testo, i pulsanti, le immagini, lo sfondo e i widget di navigazione del tuo sito dal pannello di progettazione. Ciò ti consente di apportare modifiche visive radicali in modo rapido ed efficiente, riducendo i tempi di progettazione e mantenendo lo stile del tuo sito coerente tra le pagine.
Per aprire il pannello Tema del sito, nel pannello laterale, fai clic su Tema. Quando il pannello Tema del sito è aperto, l'area di lavoro viene automaticamente ridotta al 50% della visualizzazione in modo che l'intera area di disegno sia visibile durante la regolazione delle impostazioni del tema del sito. Se vuoi tornare alla visualizzazione 100% canvas, fai clic sul menu a discesa nella barra in alto e seleziona 100%. La possibilità di ingrandire o rimpicciolire è disponibile anche in modalità anteprima.
Nota
-
Le modifiche apportate a widget o pagine specifiche sostituiranno i temi impostati nel pannello Tema del sito. Ti consigliamo di decidere prima un tema del sito e quindi di apportare personalizzazioni alle parti del sito che desideri far risaltare o avere un aspetto diverso dal resto.
-
Prima di marzo 2023, Tema del sito veniva chiamato Design globale.
In questa sezione puoi controllare il testo del sito, per quanto riguarda il testo e le intestazioni di tutte le dimensioni (da H1 a H6). Modifica lo stile e l'aspetto del testo nell'intero sito. Puoi modificare il tipo e la dimensione del font e scegliere tra testo normale, link e titoli.
La modifica della dimensione del carattere, dello stile, del colore e di altre modifiche influirà sui paragrafi futuri e su altri tipi di testo, nonché sui widget correnti collegati al testo del sito che non sono stati modificati manualmente.
Per configurare il testo del tema:
-
Nel pannello di sinistra, fai clic su Tema.
-
Fai clic sulla freccia accanto a Testo.
-
Fai clic sul tipo di testo desiderato. Le opzioni sono:
-
DFLT. In questo modo verrà impostato il tema per tutto il testo in widget che non sono assegnati a un'intestazione o allo stile di paragrafo, ad esempio il widgetdi navigazione. Qui è possibile impostare anche il colore del testo del collegamento e la sottolineatura. Inoltre, è possibile personalizzare l'aspetto dei collegamenti per diversi stati, tra cui Stato collegamento predefinito, Collegamento attivatohovere Collegamento selezionato.
-
PAR. Questo imposterà il tema per il widget di testo.
-
Voci e sottovoci H1-H6.
-
-
È possibile modificare il carattere, il peso, la dimensione (per desktop/tablet e dispositivi mobili, separatamente), il colore, il formato del carattere, la direzione, l'altezza della riga, l'interlinea tra le lettere e impostare su Tutte le maiuscole.
Apportare modifiche nell'area di testo del tema modifica tutto il testo nel sito che non viene sovrascritto da singole modifiche di stile personalizzate. Quando si apportano modifiche manuali a singoli elementi, il tema del sito viene sovrascritto e le modifiche apportate al tema del sito non influiscono più sullo stile di questi elementi. Questo avviene nelle impostazioni di stile individuali di un determinato elemento del sito, ad esempio, se hai cambiato solo il colore del testo in un particolare widget H1 sulla tela:
-
E poi ha cambiato la dimensione del carattere di H1 nel tema del sito, la dimensione del carattere di H1 cambierà ancora nel widget H1.
-
E poi cambiato il colore di H1 nel tema del sito, l'H1 che era stato modificato non si aggiornerà con il cambio di colore.
È possibile aggiornare il testo del tema nelle impostazioni del testo facendo clic su Tema, quindi selezionando Testo. In alternativa, puoi fare clic su un widget di testo per aprire il menu contestuale, fare clic sul menu a discesa di selezione dell'intestazione e selezionare Aggiorna tema. Si aprono le impostazioni del testo del tema in cui è possibile apportare aggiornamenti.
L'editor offre una varietà di caratteri per il tuo utilizzo. Imposta un carattere di testo del tema o scegli di differenziare il testo utilizzando più caratteri diversi sul tuo sito.
Per visualizzare i font disponibili e vedere come appaiono:
-
Nel pannello laterale, fai clic su Tema, quindi fai clic su Testo.
-
Seleziona un carattere dal menu a discesa Carattere .
I colori consentono di definire una tavolozza di colori e collegare i singoli colori a uno o tutti i widget con le impostazioni del colore. Il colore di qualsiasi elemento collegato ai colori del tema verrà aggiornato automaticamente quando il colore collegato viene modificato nelle impostazioni dei colori del tema. Ciò ti consente di apportare rapidamente modifiche al colore, il che aiuta a ridurre i tempi di progettazione e garantisce che lo stile del tuo sito sia coerente tra le pagine.
I proprietari dell'account dispongono automaticamente dei permessi di progettazione del tema e possono modificare, visualizzare e utilizzare i colori del tema. I membri del team e i clienti che non dispongono delle autorizzazioni sul tema del sito possono visualizzare e utilizzare colori del tema, ma non possono modificarli.
Per configurare i colori del tema:
-
Nel pannello laterale, fai clic su Tema, quindi seleziona la freccia accanto a Colori.
-
Fai clic sull'icona Più accanto a Principale o su qualsiasi impostazione tu debba definire.
-
Digita il valore HEX o RGB del colore desiderato oppure utilizza lo strumento contagocce per selezionare un colore.
Ripetere questi passaggi se necessario per ogni colore del tema. Successivamente, devi collegare i colori ai widget sul tuo sito.
Se il sito o il modello non ha colori già collegati, può essere fatto automaticamente. Il generatore automatico di colori del tema esegue la scansione del tuo sito e rileva i colori utilizzati più di frequente. Genera un elenco di colori tra cui scegliere e, una volta selezionati, quei colori diventano i colori del tuo tema e sono collegati ai widget del tuo sito.
Per configurare automaticamente i colori del tema:
-
Nel pannello laterale, fai clic su Tema, quindi seleziona la freccia accanto a Colori.
-
Fare clic su Imposta colori tema.
-
Fai clic su Connettilo per me o lo collegherò da solo.
-
(Facoltativo) Se hai selezionato Lo collegherò da solo, fai clic sull'icona Più accanto a ciascun colore nel pannello di progettazione e seleziona i colori singolarmente.
-
Seleziona quale dei colori generati desideri utilizzare.
-
Fai clic su Salva e connetti colori.
I colori verranno inseriti nella sezione Colori del pannello Tema del sito.
Per collegare un widget a un colore del tema:
-
Fai clic su un widget per aprire il menu delle impostazioni.
-
Apri le impostazioni dei colori e seleziona uno dei colori del tema elencati in alto.
-
Se necessario, ripeti l'operazione per gli altri elementi.
-
(Facoltativo) Se è necessario modificare uno dei colori del tema, fare clic sull'icona a forma di matita (
) e si apriranno le impostazioni dei colori del tema in cui è possibile modificare il colore desiderato.
Una volta che un widget è collegato ai colori del tema, si aggiornerà automaticamente quando il colore del tema collegato viene aggiornato.
Per rinominare i colori del tema:
-
Nel pannello laterale, fai clic su Tema, quindi su Colori.
-
hover sul nome del colore desiderato e fai clic sull'icona a forma di matita. (
-
Digita un nuovo nome.
Il nuovo nome viene salvato automaticamente e verrà visualizzato passando il mouse sul colore nel selettore.
È possibile disconnettere tutti i widget collegati ai singoli colori del tema.
Per disconnettere un widget:
-
Nel pannello laterale, fai clic su Tema.
-
Fare clic su Colori.
-
Fai clic sull'icona con i tre punti orizzontali (
) accanto al testo Colori e seleziona Rimuovi colori tema.
-
Seleziona i colori da rimuovere, quindi fai clic su Rimuovi colori selezionati.
Questa sezione ti consente di definire lo stile dei widget dei pulsanti principali e secondari sul tuo sito. Seleziona uno dei nostri layout di pulsanti e imposta il testo, il colore di sfondo, il bordo, lo stato hover , gli angoli e gli stili di ombra.
Per nascondere il pulsante Torna all'inizio sui dispositivi mobili, abilita l'interruttore nella sezione Layout del sito.
Nota
Queste informazioni sono specifiche dell'editor classico e non sono rilevanti per l'editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
Questa sezione consente di definire il tema per la progettazione di righe e colonne in termini di colore di sfondo e spaziatura predefinita. Le modifiche che verranno apportate a singole righe o colonne sovrascriveranno le impostazioni delle righe e delle colonne del tema.
In questa sezione puoi controllare lo stile dello sfondo del tuo sito. Scegli se utilizzare un colore o un'immagine come sfondo. Scegli un'immagine di sfondo personalizzata dalla galleria fotografica oppure carica immagini tue per conferire al sito un design unico. Le modifiche riguardano le versioni sia desktop sia tablet.
Nota
Per informazioni sugli sfondi degli elementi del sito, vedere Sfondi degli elementi.
Per personalizzare lo sfondo del sito:
-
Nel pannello a sinistra, fai clic su Tema, quindi fai clic sulla freccia accanto a Sfondi.
-
Fare clic su Sfondo predefinito.
-
Fai clic sulla scheda Colore o Immagine oppure seleziona un colore per lo sfondo del sito o carica un'immagine.
-
(Facoltativo) Fare clic sull'interruttore Non ottimizzare questa immagine per impedire l'ottimizzazione (questa impostazione apparirà dopo che un'immagine è stata selezionata).
Per personalizzare lo sfondo per ciascuna pagina:
-
Nel pannello a sinistra, fai clic su Tema, quindi fai clic sulla freccia accanto a Sfondi.
-
Fai clic su Sfondo per pagina.
-
Seleziona una pagina dal menu a discesa, quindi seleziona un'immagine o un colore per quella specifica pagina.
-
(Facoltativo) Fare clic sull'interruttore Non ottimizzare questa immagine per impedire l'ottimizzazione (questa impostazione apparirà dopo che un'immagine è stata selezionata).
Nota
Queste informazioni sono specifiche dell'editor classico e non sono rilevanti per l'editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
Verifica la navigabilità del layout del sito su desktop, tablet e dispositivi mobili. Per la versione desktop, puoi scegliere tra due larghezze: 960 px o 1200 px.
La modifica del layout della navigazione spesso influisce sul comportamento dell'intestazione e a volte del resto del sito. Se d'un tratto l'intestazione non viene più visualizzata correttamente in seguito alla modifica del layout, prova con un layout diverso.
Nota
Queste informazioni sono specifiche dell'editor classico e non sono rilevanti per l'editor 2.0 (precedentemente noto come All-Flex Editor). Per identificare la versione corrente dell'editor, vedere Come identificare la versione dell'editor utilizzata dal sito.
Puoi modificare il layout del tuo sito desktop in un layout della barra laterale. Il layout della barra laterale mostra l'intestazione sul lato del sito (a sinistra o a destra) ed è un ottimo tool di design per dare un aspetto unico al tuo sito. L'intestazione della barra laterale funge anche da intestazione adesiva in modo che venga sempre visualizzata sullo schermo e puoi anche aggiungere widget nella barra laterale come qualsiasi altra riga.
Nota
-
Quando si passa da un layout del sito tradizionale a un layout della barra laterale, l'intestazione mantiene il logo e tutti i widget che avevi verranno rimossi (in modo simile al passaggio del layout dell'intestazione sul layout dell'intestazione superiore). Il colore di sfondo verrà modificato in base al layout selezionato.
-
La riduzione dell'intestazione non è disponibile per la navigazione con barra laterale. La barra laterale è sempre visualizzata sul sito anche in caso di scorrimento del sito.
-
On screens smaller than 1090 pixels width, the content of the sidebar except the first image will be hidden and an expand menu icon will display. You can customize the color of the trigger button that appears in the design editor.
To change your site layout to a sidebar layout:
-
Nel pannello a sinistra, fai clic su Tema, quindi fai clic sulla freccia accanto a Layout del sito.
-
Seleziona il layout della barra laterale, puoi aggiungere righe, trascinare e rilasciare i widget nell'intestazione della barra laterale e personalizzarlo.
Per modificare il design dell'intestazione della barra laterale, fai hover sulla barra laterale e fai clic su Barra laterale nell'angolo in alto a destra. Puoi scegliere uno dei molteplici layout di intestazione della barra laterale da applicare al tuo sito, visualizzarlo sul lato sinistro o destro dello schermo, definirne la larghezza e altro ancora.