Cosa fa questa pagina

Il Style Manager consente di personalizzare il look e la sensazione del tuo sito web senza scrivere alcun codice. Clicca su qualsiasi elemento che vedi sul tuo sito e modifica i suoi colori, font, spaziatura, ombre e altro ancora. È possibile creare stili diversi per la modalità della luce e la modalità oscura, testare come le cose guardano sui dispositivi mobili, e applicare modifiche a pagine specifiche o l'intero sito.

Pensate a esso come un editor visivo che si siede in cima al vostro sito, permettendo di puntare e fare clic per fare modifiche di progettazione istantaneamente.

[Screenshot: page-overview]

Come arrivare qui

Navigare per Pannello di amministrazione > Modelli > Gestione dello stile

Comprendere la pagina

Quando apri il Style Manager, vedrai due aree principali fianco a fianco:

Pannello sinistro: Style Editor

Questo è il tuo pannello di controllo con sette schede per diverse opzioni di styling:

• Colori - Colori e sfondi di testo (compresi i gradienti)
• Tipografia - Fonti, dimensioni e formattazione del testo
• Spaziatura - Imbottitura e margini
• Borse - Stili, larghezze, colori e ombre
• Telaio - Impostazioni di visualizzazione, posizionamento e flexbox
• Effetti - Opacità, trasformazioni e filtri
• Dimensione - Larghezza, altezza e proporzioni

Quando si seleziona un elemento sul sito, questo pannello mostra gli stili attuali e consente di cambiarli.

Pannello destro: Anteprima live

Questo mostra il tuo sito reale in una finestra di anteprima. Potete:

• Navigare in diverse pagine
• Fare clic sugli elementi per selezionarli e modellarli
• Toggle tra desktop, tablet e visualizzazioni mobili
• Interruttore tra modalità luce e buio
• Vedi i tuoi cambiamenti istantaneamente come li fai

I migliori controlli

La barra di intestazione comprende:

• Modalità luminosa / Modalità oscura pulsanti - Scegli la modalità che stai modificando
• Salvare tutti - Salva tutti i cambiamenti di stile
• Ripristinare tutti - Rimuovere tutti gli stili personalizzati e iniziare fresco

Compiti comuni

Come Disegnare un Elemento

Questo è il flusso di lavoro base che userai per tutte le attività di styling.

1. Fare clic su Modifica della modalità pulsante (icona del cursore) nella barra degli strumenti di anteprima.
2. Un indicatore verde "Edit Mode Active" appare nella parte superiore dello schermo.
3. Spostare il mouse su elementi in anteprima - evidenziano con un profilo blu.
4. Fare clic su un elemento per selezionarlo.
5. Vedrete informazioni sull'elemento selezionato nella parte superiore del pannello sinistro.
6. Utilizzare le schede (Colori, Tipografia, ecc.) per cambiare come sembra.
7. Guarda i tuoi cambiamenti appaiono istantaneamente nell'anteprima.
8. Quando sei soddisfatto delle modifiche, fare clic Salvare le modifiche in fondo al pannello sinistro.

[Screenshot: selezione-e-editing-element]

Come Cambiare i Colori

Dopo aver selezionato un elemento:

1. Fare clic su Colori scheda nel pannello sinistro.
2. Espandere il Colore del testo sezione per cambiare il colore del testo.
3. Fare clic sul colore swatch ( quadrato colorato) per aprire un raccoglitore di colore.
4. Scegli un colore o digita un codice esagonale nel campo del testo.
5. L'elemento si aggiorna immediatamente nell'anteprima.

Per cambiare lo sfondo:

1. Nel Colori scheda, espandere il Contesto sezione.
2. Scegli Solido per un singolo colore o Gradiente per una miscela di colore.
3. Per sfondi solidi, fare clic sul colore swatch e scegliere il colore.
4. Check Trasparente se non vuoi nessun background.

[Screenshot: color-picker-interface]

Come Creare uno sfondo Gradient

I gradienti mescolano più colori insieme senza intoppi.

1. Seleziona il tuo elemento e vai al Colori scheda.
2. Espansione Contesto e cliccare su Gradiente Pulsante.
3. Scegliere una direzione facendo clic su uno dei pulsanti 8 direzione (o inserire un angolo personalizzato).
4. Vedrai almeno 2 fermate di colore. Fare clic su ogni colore swatch per scegliere i colori.
5. Regolare i cursori di posizione (0-100%) per controllare dove ogni colore appare.
6. Fare clic + Aggiungi Stop per aggiungere più colori al vostro gradiente.
7. Fare clic sul pulsante X accanto a una fermata di colore per rimuoverlo (è necessario tenere almeno 2).
8. Guarda l'aggiornamento della barra di anteprima gradiente come si fanno cambiamenti.

[Screenshot: gradient-builder]

Come Cambiare font e testo

Dopo aver selezionato il testo o qualsiasi elemento con il testo:

1. Fare clic su Tipografia scheda.
2. Espansione Font Family & Size.
3. Scegli un carattere dal Font Family a discesa (Roboto, Inter, Montserrat, ecc.).
4. Impostare il Dimensione del carattere utilizzando il numero di input e scegliere l'unità (px, rem, em, o %).
5. Seleziona una Font Peso per rendere il testo più sottile o più audace (400 è normale, 700 è audace).

Per la formattazione del testo:

1. Espandere il Formattazione del testo sezione.
2. Fare clic sui pulsanti di allineamento per allineare sinistra, centro, destra o giustificare.
3. Scegli Trasformazione del testo per fare testo UPPERCASE, minuscolo, o Capitalizzato.
4. Scegli Decorazione del testo per aggiungere sottolineature, strikethrough o overline.

[Screenshot: tipografia-opzioni]

Come Aggiungere lo Spacing

La spaziatura controlla lo spazio vuoto intorno e gli elementi interni.

1. Seleziona il tuo elemento e fai clic su Spaziatura scheda.
2. Espansione Imbottitura e inserire un numero per aggiungere spazio all'interno dell'elemento.
3. Espansione Margine e inserire un numero per aggiungere spazio al di fuori dell'elemento.

Come Aggiungere Borders e Ombre

Dopo aver selezionato un elemento:

1. Fare clic su Borse scheda.
2. Espansione Border per personalizzare il confine.
3. Scegli una Stile di confine (Solid, Dashed, Dotted, ecc.).
4. Impostare il Larghezza di confine in pixel.
5. Fare clic su Colore di confine swatch per scegliere un colore.
6. Set Radiatore di confine arrotondare gli angoli.

Per aggiungere un'ombra:

1. Espandere il Box Ombra sezione.
2. Fare clic su un pulsante preimpostato ombra (None, SM, MD, LG, XL) per gli stili di ombre comuni.
3. O digitare un valore ombra personalizzato nel Ombra personalizzata campo.

[Screenshot: controlli di frontiera e ombra]

Come Stile Hover Effetti

Gli effetti hover si attivano quando qualcuno sposta il mouse su un elemento (come i pulsanti).

1. Selezionare l'elemento a cui si desidera aggiungere effetti hover.
2. Cercare Selezionatore di stato barra sotto le informazioni dell'elemento.
3. Fare clic su : Pulsante.
4. Gli aggiornamenti del display del selettore per mostrare che stai modificando stili hover.
5. Fai i tuoi cambiamenti - prova a cambiare il colore di sfondo o ad aggiungere una trasformazione.
6. Spostare il mouse sull'elemento in anteprima per vedere l'effetto hover.
7. Fare clic Salvare le modifiche quando è finita.

[Screenshot: State-selector-hover]

Come Stile per Luce e Modalità Oscura Separatamente

Il tuo sito può apparire diverso in modalità luce rispetto alla modalità oscura.

1. Fare clic Modalità di luce nell'intestazione per modificare gli stili di modalità light.
2. Selezionare gli elementi e personalizzarli come desiderato.
3. Fare clic Salvare le modifiche per ogni elemento.
4. Fare clic Modalità oscura nell'intestazione per passare alla modifica della modalità oscura.
5. L'anteprima passa automaticamente alla modalità oscura in modo da poter vedere cosa stai modificando.
6. Selezionare gli stessi elementi e personalizzarli in modalità dark.
7. Salvare i cambiamenti di modalità oscura.

Come applicare stili a pagine specifiche

Per impostazione predefinita, gli stili si applicano all'intero sito. Ma è possibile fare stili che appaiono solo su determinate pagine.

Lo Style Manager rileva automaticamente quale pagina si sta visualizzando:

Per applicare stili specifici della pagina:

1. Utilizzare la navigazione di anteprima per andare alla pagina che si desidera personalizzare.
2. Fare clic Modifica della modalità e selezionare elementi su quella pagina.
3. Cambia il tuo stile.
4. Fare clic Salvare le modifiche.
5. Questi stili si applicheranno solo a quella pagina specifica.

Come Reimpostare gli stili

Reimpostare un singolo elemento:

1. Selezionare l'elemento che si desidera ripristinare.
2. Fare clic Elemento di ripristino in fondo al pannello sinistro.
3. Confermare cliccando Ok. nel popup.
4. Tutti gli stili personalizzati per quell'elemento vengono rimossi.
5. L'elemento ritorna al suo aspetto originale.

Reset Everything:

1. Fare clic Ripristinare tutti in testa.
2. Leggi l'avvertimento con attenzione - questo cancella tutti i tuoi stili personalizzati.
3. Fare clic Ok. per confermare.
4. Tutti gli stili personalizzati in tutto il tuo sito vengono rimossi.
5. Il tuo sito ritorna all'aspetto predefinito.

Controlli di anteprima

Barra degli strumenti di navigazione

La barra degli strumenti in cima all'anteprima consente di navigare e controllare l'anteprima:

Anteprima del dispositivo

Prova come i tuoi stili guardano su diverse dimensioni dello schermo facendo clic su questi pulsanti nell'intestazione di anteprima:

L'anteprima si riduce alla dimensione selezionata con un bordo ombra in modo da poter vedere esattamente come gli utenti mobili vedranno il tuo sito.

[Screenshot: responsive-preview-modes]

La modalità oscura

L'icona della luna nell'intestazione di anteprima attiva l'anteprima tra la luce e la modalità oscura. Questo è separato dai pulsanti di modalità nell'intestazione principale:

• Pulsanti modalità intestazione - Controlla quali stili stai SAVING (luce o scuro)
• Anteprima pulsante luna - Controlla la modalità VIEWING

Capire le schede di stile

Ogni scheda del pannello sinistro si concentra su diverse proprietà visive.

Scheda di colori

• Colore del testo - Il colore del testo all'interno dell'elemento
• Contesto - Colore solido, gradiente o sfondo trasparente
• Costruttore Gradiente - Crea miscele di colore lisce con più interruzioni di colore

Scheda di tipografia

• Font Family - Scegli tra font web professionali
• Dimensione del carattere - Dimensione del testo con unità flessibili (px, rem, em, %)
• Font Peso - Quanto sottile o audace appare il testo
• Altezza della linea - Spazio tra righe di testo
• Letter Spacing - Spazio tra lettere singole
• Formattazione del testo - Allineamento, capitalizzazione, sottolineature, ecc.

Scheda di ricambio

• Imbottitura - Spazio all'interno dell'elemento (tra contenuto e confine)
• Margine - Spazio fuori dall'elemento (tra elemento e vicini)

Scheda dei bordi

• Stile di confine - Linee solide, tratteggiate, o decorative
• Larghezza di confine - Quanto è denso il confine
• Colore di confine - Colore della linea di confine
• Radiatore di confine - Come sono arrotondati gli angoli
• Box Ombra - Goccia ombre per creare profondità

Scheda di layout

• Visualizza - Come si comporta l'elemento (blocco, inline, flex, griglia, ecc.)
• Posizione - Come si posiziona l'elemento (statico, relativo, assoluto, ecc.)
• Flexbox - Controlli per l'organizzazione di elementi per bambini in righe o colonne

Scheda degli effetti

• Possibilità - Come trasparente l'elemento è (0% = invisibile, 100% = solido)
• Trasformazione - Scalare, ruotare o spostare l'elemento
• Filtri - Blur, luminosità, contrasto e grigio effetti

Scheda di dimensione

• Larghezza - Quanto è largo l'elemento
• Altezza - Quanto è alto l'elemento
• Min/Max Larghezza e Altezza - Limiti di dimensione
• Dosaggio di oggetti - Come si adattano immagini e video all'interno dei loro contenitori
• Aspect Ratio - Mantenere le proporzioni (quadra, 16:9, ecc.)

Consigli per i nuovi utenti

Risoluzione dei problemi

L'anteprima non carica o mostra una pagina vuota

Cosa vedi: Il pannello destro è vuoto, bianco o mostra un errore.

Come risolvere il problema:

1. Fare clic su Rifiuti pulsante nella barra degli strumenti di anteprima.
2. Controlla se il tuo sito funziona aprendolo in una nuova scheda del browser.
3. Se il sito funziona ma l'anteprima non funziona, contattare l'amministratore del sito - questo potrebbe essere un problema di configurazione.

Non riesco a selezionare gli elementi quando li faccio clic

Cosa vedi: Fare clic sugli elementi in anteprima non fa nulla.

Come risolvere il problema:

1. Assicurarsi che Modifica della modalità pulsante (icona del cursore) è evidenziato in verde.
2. Prova a rinfrescare l'anteprima utilizzando il pulsante di aggiornamento.
3. Alcuni elementi molto piccoli (più piccoli di 5x5 pixel) non possono essere selezionati - prova a fare clic sugli elementi vicini.

I miei cambiamenti non appaiono sul sito live

Cosa vedi: Le modifiche mostrano nell'anteprima ma non sul sito reale.

Come risolvere il problema:

1. Assicurarsi di aver cliccato Salvare le modifiche in fondo al pannello sinistro (non solo Salva tutto).
2. Cancellare la cache del browser e aggiornare il sito live.
3. Se si sta visualizzando il sito in una modalità diversa (luce vs scuro), le modalità di commutazione per vedere se le modifiche si applicano lì.

Effetti Hover non funzionano

Cosa vedi: Hai definito lo stato :hover ma non succede nulla quando salti.

Come risolvere il problema:

1. Assicurarsi di aver cliccato : prima di apportare modifiche.
2. Gli effetti Hover funzionano solo con un mouse - gli utenti mobili non li vedranno.
3. Controllare se i vostri stili del sito originale hanno effetti hover contrastanti che superano il vostro.

I colori sembrano sbagliati o non corrispondono a quello che ho scelto

Cosa vedi: Il raccoglitore di colore mostra un colore ma l'elemento mostra un altro.

Come risolvere il problema:

1. Fare clic sull'elemento di nuovo per riselezionare e aggiornare i valori di colore attuali.
2. Assicurarsi di modificare la proprietà giusta - Colore testo è separato da sfondo.
3. Salvare e aggiornare l'anteprima per vedere il risultato finale.

Non riesco a salvare i miei cambiamenti (Salva pulsante è grigio fuori)

Cosa vedi: Tutti i pulsanti sono disabilitati e grigiati.

Come risolvere il problema:
Una bandiera arancione nella parte superiore della pagina indica la modalità demo è abilitata. La modalità demo impedisce di salvare le modifiche. Se è necessario salvare le modifiche, contattare l'amministratore del sito per disabilitare la modalità demo.

Il mio gradiente non si presenta

Cosa vedi: Hai creato un gradiente ma l'elemento mostra ancora un colore solido.

Come risolvere il problema:

1. Assicurarsi di aver cliccato Gradiente pulsante (non solido) nella sezione Background.
2. Controlla che hai almeno 2 fermate di colore con colori diversi.
3. Salva le modifiche e aggiorna l'anteprima.

Pagine correlate

Questa guida è per i proprietari e gli operatori del sito ComusThumbz. Si concentra sull'utilizzo dell'interfaccia Style Manager per personalizzare l'aspetto del tuo sito senza codificare.