Per saperne di più sul tema del sito, visita Duda University
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 aggiungere font personalizzati al sito, vedere Font personalizzati.
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 .
Puoi aggiungere font personalizzati dalla libreria dei font di Google o caricando file di font personalizzati (TTF, OTF, EOT, WOFF2 o WOFF). Per ottenere prestazioni ottimali, si consiglia di utilizzare file WOFF o WOFF2 quando si aggiungono caratteri personalizzati.
Nota
-
Se hai solo un .otf oppure .ttf , si consiglia di utilizzare un tool esterno come FontSquirrel per convertirlo nel formato richiesto.
-
Per mantenere la conformità con il GDPR, i font personalizzati vengono caricati dal nostro CDN senza dover chiamare l'API di Google Fonts.
-
Se si salva un sito come modello, verranno inclusi tutti i tipi di carattere personalizzati aggiunti.
-
Se si reimposta un sito, i font personalizzati vengono rimossi.
Per aggiungere un carattere personalizzato:
-
Puoi aggiungere caratteri personalizzati da una delle seguenti posizioni:
-
Nel pannello laterale, fai clic su Tema, quindi su Testo. Espandi la sezione di testo desiderata. Accanto all'elenco dei caratteri, fai clic sull'icona Aggiungi e gestisci caratteri (
).
-
Dall'editor di progettazione di un widget, per qualsiasi elemento di testo, fai clic sull'icona Aggiungi e gestisci caratteri (
-
-
Seleziona una delle seguenti opzioni:
-
Caratteri di Google. Seleziona un carattere dall'elenco Caratteri di Google. Il font viene visualizzato nell'elenco Added Google Fonts di seguito. Per rimuovere un font, fai clic sulla X accanto al font nell'elenco. Si prega di notare che l'elenco potrebbe già visualizzare i caratteri aggiunti al modello. Si consiglia di non rimuovere i caratteri del modello.
-
Caratteri personalizzati. Fai clic su Carica font per caricare un file di font personalizzato. È possibile selezionare più caratteri contemporaneamente. Per rimuovere un font, fai clic sulla X accanto al font nell'elenco.
-
-
Fare clic su Fine.
Il font viene aggiunto all'elenco di tipi di carattere del sito.
Nota
I caratteri Adobe non appaiono nell'elenco dei caratteri. Devi aggiungere la famiglia di caratteri al codice.
Se rimuovi un font attualmente utilizzato sul sito, il testo tornerà a utilizzare il font predefinito. Non è possibile rimuovere nessuno dei caratteri predefiniti.
Per rimuovere caratteri personalizzati da un sito:
-
Nel pannello laterale, fai clic su Tema, quindi su Testo. Espandi la sezione di testo che utilizza il carattere personalizzato. Accanto all'elenco dei caratteri, fai clic sull'icona Aggiungi e gestisci caratteri (
-
Fai clic sulla X accanto al carattere nell'elenco per rimuoverlo dal sito.
Se rimuovi un font di Google, devi ripubblicare il sito affinché la modifica abbia effetto. Tuttavia, se rimuovi un font caricato, non è necessario ripubblicarlo per rendere effettiva la modifica.
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.
-
Sugli schermi inferiori a 1090 pixel di larghezza, il contenuto della barra laterale, fatta eccezione per la prima immagine, verrà nascosto e al suo posto verrà visualizzata l'icona Espandi. Puoi personalizzare il colore del pulsante di attivazione che verrà visualizzato nell'Editor di progettazione.
Per modificare il layout del sito passando a un layout della barra laterale:
-
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.