Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.
Changing colors

Che tu preferisca un tema in bianco e nero o combinazioni di colori audaci, puoi utilizzare il riquadro Stili sito per regolare i colori per il testo, le linee e le aree di sfondo del tuo sito.

This guide provides an overview of how to adjust colors for the different elements on your site.

Note: Cover Pages have their own style options.

Guarda un video

Prima di iniziare

  • Color changes apply site-wide, so changing the color for one element of a page, such as the Body Text, will change it on all pages.
  • To change the color of a specific section of text, like one individual word in a sentence, use a Markdown Block.
  • Each color tweak must be adjusted individually.
  • Color changes don’t transfer when you switch templates. They reappear if you switch back to the template.
  • All'interno del riquadro Stili sito non esiste un modo per regolare i colori per una pagina singola o un blocco singolo. Se hai esperienza di programmazione, puoi provare a effettuare la modifica con il CSS. Considera solo che non offriamo supporto per modifiche avanzate come questa.

Step 1 - Select a page

Per prima cosa, vai alla pagina in cui desideri visualizzare le modifiche. Nel Menu Home, clicca su Pagine. Quindi clicca sulla pagina con i colori che desideri modificare.

There are two reasons for opening a page first:

  1. Alcuni tweak vengono visualizzati solo quando ti trovi su una pagina che influenzano. Ad esempio, la tua Pagina del blog potrebbe avere tweak specifici per il titolo, che sono visualizzati solo nel riquadro Stili sito quando visualizzi in anteprima un Pagina del blog.
  2. Even if your changes will apply site-wide, you can preview your style edits on the selected page as you make them.

Dopo aver selezionato la pagina corretta nel riquadro Pagine, torna alMenu Home. Da lì, clicca su Designe quindi su Stili sito.

Step 2 - Find a color tweak

I tweak di stile specifici dipendono dal modello. Scorri verso il basso all'interno di Stili sito per vedere tutti i tweak disponibili sulla pagina che stai visualizzando.

Every color tweak has a circle next to its label. This circle shows the current color for that element.

Nota: il cerchio non sarà visualizzato se il colore è trasparente o se è lo stesso grigio dello sfondo del riquadro Stili sito.

 

Per trovare opzioni di stile specifiche per un elemento nella pagina, fare clic sull'elemento per vederlo in anteprima. Gli Stili sito mostreranno solo le opzioni di stile per quell'elemento e nasconderà il resto. Questa funzione è disponibile nella maggior parte dei modelli e delle aree del sito. Fai clic su Mostra tutto per visualizzare nuovamente tutte le opzioni di stile per la pagina.

Una volta trovato il tweak, clicca per aprire il selettore di colori.

Step 3 - Pick a color

Utilizza il selettore di colore che si apre per trovare il colore desiderato. Usa il cursore per scegliere il colore e regolare la tonalità (chiaro/scuro) facendo clic sul quadrato nel mezzo.

color-sliders.png

In alternativa, se conosci il valore del colore desiderato, puoi inserirlo nel campo valore. Il campo valore accetta uno dei seguenti formati:

  • HEX - Example: #FFFFFF
  • RGB or RGBa - Example: rgba(255, 0, 149, 1)
  • HSL/HSLA - Example: hsla(325, 100%, 50%, 1)
  • HTML (must be lower case) - Example: white

For help finding a specific color value, you can visit external sites like color-hex.com or imagecolorpicker.com.

Suggerimento: il campo del valore si riempie automaticamente quando utilizzi il cursore del colore per trovare un colore. Puoi copiare e incollare questo codice per aggiungere lo stesso colore agli altri tweak in Stili sito.

value-field.png

Step 4 - Change the transparency

To adjust a color’s transparency, use the opacity slider by dragging the circle below the color picker. The left side is completely transparent, while the right side is completely solid.

change-the-opacity.png

Note: Some color tweaks don't include an opacity slider.

The opacity slider is particularly useful for overlay colors, which display over images.

overlay-opacity.png

If you have one color or image that overlays another, making the top layer transparent keeps the bottom layer visible.

opacity-overlap.png

Step 5 - Finish and save

Click anywhere outside the color window to close the color picker.
 
To undo any changes before saving, click the undo icon at the top of the panel, or click the dot next to a specific tweak. See Making style changes for more information.  

undo_and_dot_icons.jpg

Al termine delle modifiche, clicca su Salva.

click_save.jpg

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 51 su 144