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

Apportare modifiche di stile

Utilizza le opzioni del pannello Design per apportare modifiche di stile al tuo sito. Puoi modificare gli stili globali per apportare modifiche che si applicano all'intero sito, in modo da ottenere un aspetto coerente, oppure definire lo stile di singole sezioni.

Questa guida illustra come utilizzare le opzioni di stile, o "tweak", per modificare l'aspetto del tuo sito. Ti consigliamo di sperimentare le diverse opzioni di design durante la creazione del sito. Testando diversi tipi di carattere, colori e impostazioni di pagina, potrai farti un'idea delle varie possibilità offerte e ottenere il design che desideri.

Guarda un video

Questo video si riferisce alla versione 7.1. Per un video sulla versione 7.0, vedi la sezione Ulteriore assistenza.

Opzioni di stile nella versione 7.1 rispetto alla versione 7.0

Le modifiche di stile funzionano in modo diverso a seconda della versione del sito. Quando utilizzi questa guida, clicca sulla scheda relativa alla versione in uso per visualizzare gli step per il tuo sito.

Versione 7.1

Nella versione più recente di Squarespace, i tweak di stile vengono ordinati per tipo nel pannello Design. In generale, le modifiche apportate nel pannello Design sono globali, ma puoi anche apportare modifiche più precise definendo lo stile di sezioni o aree di testo specifiche.

Tutti i siti della versione 7.1 condividono lo stesso modello. Ciò significa che offrono tutti le stesse funzionalità e opzioni di stile. Inoltre, tutti utilizzano le sezioni per aggiungere contenuti alle pagine.

Non è necessario cambiare modello, quindi tale opzione non è disponibile nella versione 7.1. Utilizza invece gli step descritti in questa guida per provare look diversi per il tuo sito.

Versione 7.0

Nella versione precedente di Squarespace, utilizzi il pannello Stili sito per apportare tutte le modifiche di stile. Il pannello Stili sito di ogni modello presenta tweak diversi, che sono raggruppati in sezioni come Intestazione sito e Contenuto principale.

Nella versione 7.0, ogni modello ha le proprie opzioni di stile e impostazioni predefinite. Per maggiori informazioni, consulta la guida del tuo modello.

Ricercare un'opzione di stile

Il modo in cui trovi un tweak di stile dipende dalla versione del sito.

Per apportare modifiche a livello di sito, utilizza le opzioni del pannello Design. Dal Menu Home, clicca su Design, quindi clicca sull'elemento del sito che desideri modificare, ad esempio Tipi di carattere o Colori. Utilizza questa guida per scoprire gli step più dettagliati su ogni pannello. 

Puoi apportare modifiche più precise modificando una sezione specifica. Per definire lo stile di una sezione, modifica la pagina, passa il mouse sulla sezione, quindi clicca sull'icona della matita. Gli stili di sezione sovrascrivono gli stili a livello di sito.

edit_a_section.png

Qui, è anche possibile scegliere diversi layout per le sezioni di raccolta e galleria.

Se apporti modifiche di stile a una sezione di raccolta, ciò influisce su tutti i layout di quel tipo. Ad esempio, se hai due sezioni blog ed entrambe utilizzano un layout a bacheca, le modifiche di stile apportate a una sezione influiscono su entrambe le sezioni. 

Per aprire il pannello Stili sito:

  1. Nel Menu Home, clicca su Pagine
  2. Apri la pagina che desideri modificare. Per le funzionalità a livello di sito, come i piè di pagina, apri qualsiasi pagina. Per gli elementi della raccolta, apri qualsiasi elemento della raccolta di quel tipo (ad esempio, un post del blog o un articolo). 
  3. Torna al Menu Home, clicca su Design, quindi su Stili sito
  4. Nel pannello Stili sito, clicca su qualsiasi tweak per apportare modifiche. 

Le modifiche del sito sono disabilitate quando Stili sito è aperto. Per aggiungere o rimuovere contenuto, chiudi Stili sito e apri il pannello Pagine.

Stili sito mostra le opzioni disponibili per la pagina in cui ti trovi. Eventuali modifiche a questi tweak verranno applicate a tutte le pagine di quel tipo presenti nel sito. Ad esempio, se apporti modifiche di stile a una Pagina dei prodotti, la stessa modifica verrà applicata a tutte le Pagine dei prodotti del sito. Per un elenco completo dei tweak del tuo modello, consulta la relativa guida ai tweak di stile.

Suggerimento: lo stile di ogni Pagina di copertina viene definito separatamente.

Nel pannello di anteprima, clicca su un'area di una pagina per visualizzare i tweak di stile disponibili per quell'area e nascondere il resto. La casella di evidenziazione dello stile viene visualizzata attorno all'elemento su cui stai cliccando. Torna a tutte le opzioni cliccando su Mostra tutto. Questa funzione è disponibile nella maggior parte dei modelli e per la maggior parte delle aree del sito. 

Ecco come potrebbe apparire nel modello Brine: 

Clicking_an_element_on_the_page_displays_the_style_tweaks_available_for_that_area.png

Per alcuni tweak, puoi cliccare e trascinare la selezione all'interno dell'anteprima per regolare le impostazioni:

drag-spacers.gif

Puoi apportare modifiche di stile nell'app Squarespace in entrambe le versioni di Squarespace. 

Suggerimento: nella versione 7.1, il pannello di stile dell'app Squarespace è indicato come Stili sito e Editor di stile, ma le opzioni corrispondono a quelle visualizzate nel pannello Design su computer. 

Per definire lo stile di una pagina:

  1. Tocca Pagine, quindi tocca la pagina in cui vuoi applicare le modifiche. Così facendo, indichi all'app di mostrare le opzioni rilevanti per la pagina visualizzata e di creare un'anteprima delle modifiche. Se stai modificando una funzionalità relativa all'intero sito, ad esempio i menu di navigazione o un piè di pagina, apri una pagina qualsiasi.
  2. Tocca la barra di anteprima per comprimere l'anteprima della pagina.
  3. Tocca Impostazioni, quindi tocca Stili sito
  4. Il pannello Editor di stile si aprirà dal basso con un elenco di sotto-pannelli e tweak di stile. Tocca qualsiasi tweak per apportare modifiche.

Modificare i tipi di carattere

La modalità di modifica dei tipi di carattere dipende dalla versione del sito. 

Per modificare un tipo di carattere, clicca su Design, quindi su Tipi di carattere.

Nel pannello Tipi di carattere, puoi scegliere un pacchetto di tipi di carattere da applicare a tutto il testo del sito o modificare il tipo di carattere di specifiche tipologie di testo. Per maggiori informazioni, visita Modificare i tipi di carattere

In qualsiasi area di testo, puoi inoltre modificare il formato del testo in Intestazione, testo di paragrafo, testo a spaziatura fissa o aggiungere un link

  • I link sono sempre sottolineati.
  • Quando i visitatori cliccano su un link, intorno ad esso appare una linea tratteggiata, che aiuta a rendere il sito più accessibile a tutti i visitatori.

Per modificare i tipi di carattere e le dimensioni, utilizza i tweak Tipografia o Tipo di carattere in Stili sito. Per maggiori informazioni, visita Modificare i tipi di carattere.

Modificare i colori

La modalità di modifica dei colori del sito dipende dalla sua versione.

Per modificare i colori del sito, nel Menu Home, clicca su Design, quindi su Colori.

Grazie alle dettagliatissime tavolozze di colori, puoi apportare contemporaneamente modifiche a tutti i colori del sito oppure personalizzare i colori dei singoli elementi. Per maggiori informazioni sulla modifica dei colori del sito e delle sezioni, visita Modificare i colori.

Per modificare i colori, seleziona un qualsiasi tweak di Stili sito con un cerchio colorato accanto all'etichetta. Per maggiori informazioni, visita Modificare i colori.

Aggiungere animazioni (versione 7.1)

Le animazioni a livello di sito sono disponibili solo nella versione 7.1. Se il tuo sito è nella versione 7.0, puoi aggiungere animazioni a Blocchi immagine e Blocchi citazione.

Per migliorare l'interesse visivo, puoi utilizzare il pannello Animazioni per animare in modo discreto i contenuti mentre i visitatori si spostano nel sito. Per maggiori informazioni, visita Animazioni del sito.

Applicare uno stile ai pulsanti

La definizione dello stile dei pulsanti dipende dalla versione del sito e dal fatto che il pulsante venga visualizzato in tutto il sito o solo in una specifica pagina o sezione.  

Per visualizzare gli step dettagliati per tutti gli scenari, visita Definire lo stile dei pulsanti.

Modificare spaziatura e padding

La modalità di modifica della spaziatura del sito dipende dalla sua versione

Per modificare la spaziatura del sito, nel Menu Home, clicca su Design, quindi su Spaziatura.

Utilizza questi tweak:

  • Larghezza pagina (max) - Modifica la larghezza massima consentita per le pagine del tuo sito. La larghezza effettiva dipende dal browser e dal dispositivo in uso. Questo tweak non influisce sulla spaziatura dell'intestazione del tuo sito.
  • Margine del sito - Modifica la larghezza del margine su entrambi i lati del tuo sito. A seconda delle impostazioni della Larghezza pagina, questo tweak potrebbe non avere effetti visibili sui contenuti della tua pagina. Questo tweak influisce sull'intero sito, intestazione inclusa.

Puoi modificare la spaziatura delle singole sezioni nell'editor di sezione.

Molti tweak di stile relativi alle dimensioni, come padding, spaziatura, larghezza e bordi, si trovano sotto l'intestazione Dimensioni e valori. A seconda del modello, possono essere presenti anche in altre sezioni. 

Per modificare una dimensione, passa il mouse su un tweak di dimensione, quindi utilizza il cursore o inserisci un numero nel campo.

Modificare il rapporto dimensionale di un'immagine

Il rapporto dimensionale di un'immagine corrisponde al rapporto tra larghezza e altezza, espresso con un numero, ad esempio 3:4. Quando scegli un tweak per il rapporto dimensionale, l'immagine viene ritagliata in base a una determinata forma (ad esempio, 1:1 Quadrata), solitamente attorno al focal point.

  • Nella versione 7.1, puoi modificare i rapporti dimensionali delle immagini negli editor di sezioni e blocchi. 
  • Nella versione 7.0, puoi modificare i rapporti dimensionali delle immagini in Stili sito e negli editor di blocchi.
  • In entrambe le versioni, puoi utilizzare l'Editor di immagini integrato per modificare il rapporto dimensionale di un'immagine dopo averla caricata sul sito.

Se l'opzione Rapporto dimensionale è impostata su Auto, le immagini vengono ridisposte per garantire la migliore visualizzazione sulla pagina. Questo significa che possono essere visualizzate in un ordine diverso da quello in cui sono state caricate. Per ulteriori informazioni, visita Comprendere il rapporto dimensionale.

Definire lo stile degli articoli

La definizione dello stile degli articoli dipende dalla versione del sito. 

Per applicare uno stile agli articoli, apri le opzioni di stile nel pannello Design:

  1. Nel Menu Home, clicca su Design.
  2. Clicca su Articoli di prodotto.

Queste impostazioni influiscono sulle singole pagine dei dettagli del prodotto. Nota che alcune di queste opzioni si applicano solo ai prodotti con più immagini, pertanto potresti non vedere le modifiche se il tuo prodotto ne ha solo una. Per maggiori informazioni, visita Definire lo stile delle Pagine dei prodotti.

Le opzioni di stile per i tuoi prodotti dipendono dal modello del sito e dal fatto che il modello utilizzi una Pagina dei prodotti classica, avanzata o esclusiva.

Per un elenco dettagliato delle opzioni di stile dei prodotti, visita Definire lo stile delle Pagine dei prodotti. Puoi vedere tutti tweak Prodotti nella guida ai tweak di stile del tuo modello

Definire lo stile dei Blocchi immagine

La definizione dello stile dei Blocchi immagine dipende dalla versione del sito. Alcuni layout dei blocchi hanno le proprie impostazioni di stile per tipi di carattere, colori e pulsanti nel pannello Design.

Per maggiori informazioni sugli stili dei Blocchi immagine in entrambe le versioni, visita Blocchi immagine

Modificare lo sfondo

La modalità di modifica dello sfondo del sito dipende dalla sua versione

Per cambiare lo sfondo:

  • Utilizza il pannello Colori per modificare lo sfondo del sito.
  • Utilizza l'editor di sezione per modificare il colore di sfondo di singole sezioni o aggiungere immagini di sfondo o video. Ciò vale anche per le sezioni piè di pagina.
  • Quando una sezione ha un'immagine di sfondo impostata su Inset , puoi impostare il colore del bordo inset.
  • Nel caso in cui l'intestazione sia trasparente, questa prende lo stesso colore di sfondo della sezione superiore. Disattiva la trasparenza nell'editor di intestazione per impostare un tema di colore diverso per l'intestazione.

Alcuni modelli permettono di aggiungere un'immagine di sfondo del sito o di pagina aggiunta tramite Stili sito. Per aggiungerne una, clicca sul tweak Immagine di sfondo o sull'icona dell'immagine corrispondente all'interno del pannello Stili sito. Puoi caricare la tua immagine o cercare e aggiungere un'immagine di archivio.

Per maggiori informazioni, visita Aggiungere immagini di sfondo su tutte le pagine del sito.

Definire lo stile dei banner

Il modo in cui modifichi i banner dipende dalla versione del sito.

Puoi creare un'immagine banner in qualsiasi pagina aggiungendo una sezione blocco con un'immagine di sfondo nella parte superiore della pagina.

  • Se vuoi solo un'immagine nel tuo banner, inizia con una sezione vuota.
  • Tutti i blocchi aggiunti alla sezione appariranno in sovrapposizione al banner.
  • Per modificare l'altezza, fai clic sull'icona matita e imposta l'altezza della sezione.
  • Quando scegli un'immagine di sfondo, segui i nostri suggerimenti per la formattazione delle immagini.

Per maggiori informazioni, visita Aggiungere immagini banner.

Alcuni modelli permettono di impostare un banner del sito all'interno del pannello Stili sito. Clicca sul tweak Immagine banner, su Immagine intestazione o sull'icona dell'immagine corrispondente all'interno di Stili sito.

Per banner specifici per ogni pagina, apri le impostazioni della pagina, clicca sulla scheda Media e carica un'immagine.

Per maggiori informazioni, visita Aggiungere immagini banner.

Definire lo stile dell'intestazione

I visitatori utilizzano l'intestazione nella parte superiore per navigare nel sito. La modalità di modifica dell'intestazione dipende dalla versione del sito. 

Per modificare l'intestazione del sito, clicca su Modifica nell'angolo in alto a sinistra dell'anteprima del sito, quindi passa il mouse sull'intestazione e clicca su Modifica intestazione sito. Utilizza le opzioni disponibili nell'editor per personalizzare il titolo del sito o il logo e i link di navigazione. Puoi anche aggiungere un'icona del carrello, icone social e pulsanti Call-to-Action. 

Per gli step dettagliati, visita Creare l'intestazione di un sito.

Lo stile dell'intestazione del sito dipende dal modello. Per maggiori informazioni sulle impostazioni dell'intestazione specifiche del tuo modello, consulta la relativa guida

Alcuni modelli presentano caratteristiche speciali nell'intestazione. Per visualizzare un elenco delle funzionalità disponibili, visita Creare l'intestazione di un sito

Definire lo stile del piè di pagina

La definizione dello stile del piè di pagina dipende dalla versione del sito.

Per definire lo stile del piè di pagina:

  1. Nell'angolo in alto a sinistra, fai clic su Modifica.
  2. Passa il mouse sopra il piè di pagina e fai clic su Modifica piè di pagina.
  3. Clicca sull'icona della matita per apportare modifiche di stile.

Per ulteriori informazioni, visita Modifica piè di pagina.

Lo stile del piè di pagina del sito dipende dal modello. Per maggiori informazioni sulle impostazioni del piè di pagina specifiche del tuo modello, consulta la relativa guida.

Per maggiori informazioni sulle diverse opzioni di piè di pagina in base al modello, visita Modificare i piè di pagina.

Modificare una barra laterale (versione 7.0)

I siti dellaversione 7.1 non includono barre laterali.

Se il tuo modello include una barra laterale, puoi modificarne l'aspetto in Stili sito. Ad esempio, in alcuni modelli puoi spostare la barra laterale a sinistra o destra. Per trovare i tweak di stile della barra laterale, clicca sulla barra laterale nell'anteprima della pagina o cerca l'intestazione Barra laterale in Stili sito.

Nascondere o mostrare elementi

Il modo in cui nascondi o mostri diversi elementi e funzionalità del sito dipende dalla sua versione.

Puoi nascondere determinati elementi di design, ad esempio icone social, banner e piè di pagina, eliminando il blocco o la sezione. Apri l'editor di sezione per esplorare le diverse opzioni disponibili per quella sezione della pagina. 

In alcuni modelli, puoi nascondere elementi di design come titoli di pagina, icone social, bordi, banner e piè di pagina. Questi tweak si trovano in genere nella sezione Opzioni di Stili sito. Per visualizzare un elenco di queste opzioni, visita la guida ai tweak di stile del tuo modello

Salvare o annullare le modifiche

Puoi salvare le modifiche di stile, annullare la modifica precedente o ripristinare gli stili predefiniti dell'intero sito.

Salvare le modifiche

Una volta effettuate tutte le modifiche con risultato soddisfacente, clicca su Salva nell'angolo superiore sinistro. Le modifiche saranno visualizzate sul sito live.

Questa modifica non è reversibile. Anche se è possibile ripristinare gli stili predefiniti del sito, non potrai ripristinare le precedenti modifiche di stile dopo il salvataggio.

Annullare le modifiche

Puoi annullare la maggior parte delle modifiche di stile in due modi diversi:

  • Clicca sull'icona Annulla nella parte superiore del riquadro. In questo modo, annullerai l'ultima modifica apportata allo stile. Clicca più volte per annullare modifiche precedenti, in sequenza. Puoi anche cliccare sull'icona Ripristina per ripetere una modifica.

theme_-_undo_and_redo.png

  • In alcuni pannelli, clicca sul punto accanto al tweak modificato. In questo modo, annullerai una modifica di stile specifica, in qualsiasi ordine. I punti saranno visibili fino a quando non salvi le modifiche.

style_dot.png

Nota: se apporti una modifica di stile e poi la annulli, non visualizzerai l'opzione Salva nella parte superiore del pannello. Questa apparirà solo se apporti e mantieni una modifica.

Ripristinare gli stili predefiniti

Per alcune opzioni di stile nel pannello Design, puoi ripristinare le impostazioni di stile predefinite del sito. Questa procedura riporta l'area alle impostazioni originali presenti all'avvio del sito. Dopo il salvataggio, questa modifica non è reversibile.

Per gli step dettagliati, visita Ricominciare da capo

Aggiungere codice CSS personalizzato

Tutti i siti Squarespace controllano automaticamente il codice CSS del tuo sito senza utilizzare codice personalizzato. Tuttavia, se conosci il linguaggio CSS e non riesci a trovare una modifica necessaria in Stili sito, puoi aggiungere codice CSS nell'Editor CSS.

Il codice CSS può interferire con la funzionalità del tuo sito. Inoltre, ricorda che il codice personalizzato non rientra nell'ambito del supporto Squarespace.

Ulteriore assistenza

Oltre alle nostre guide, offriamo altre risorse per aiutarti a modificare lo stile del tuo sito:

Maggiori informazioni sulla versione 7.0

Per maggiori informazioni sulle modifiche di stile nella versione 7.0, guarda questo video.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 66 su 194
Apportare modifiche di stile