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 nei pannelli Stili sito e 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 è per la versione 7.1. Per un video della versione 7.0, vai alla 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. Nelle sezioni di seguito, fai clic sulla scheda relativa alla versione in uso per consultare la procedura riguardante il tuo sito.

Versione 7.1

Nella nostra versione più recente di Squarespace, Stili sito viene utilizzato per apportare la maggior parte delle modifiche di stile, incluse le modifiche al tipo di carattere, colore e spaziatura. Le modifiche apportate in Stili sito si applicano generalmente all'intero sito, ma puoi apportare modifiche più precise definendo lo stile di specifiche sezioni o aree di testo. Per modifiche di stile più avanzate, come la progettazione della schermata di blocco o della pagina di checkout, utilizza il pannello Design.

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 nostra versione precedente di Squarespace, 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 aprire il pannello Stili sito, clicca sull'icona del pennello nell'angolo superiore destro durante la modifica di qualsiasi pagina.

paintbrush_icon.png

Da qui, 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 ciascun pannello. Puoi anche aprire Stili sito dal Menu Home cliccando su Design e poi su Stili sito.

Per chiudere Stili sito, clicca due volte sull'anteprima della pagina, clicca sull'icona del pennello o su Chiudi nella parte superiore del pannello. Le modifiche di stile rimarranno intatte fino a quando non vengono salvate o annullate.

Con il pannello Stili sito chiuso, puoi apportare modifiche più precise modificando una sezione specifica. Per definire lo stile di una sezione, 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 della 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, fai clic 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 del negozio, la stessa modifica verrà applicata a tutte le pagine del negozio presenti nel sito. Per un elenco completo dei tweak relativi al tuo modello, consulta la 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

Tipi di carattere e colori

Usa le sezioni riportate di seguito per informazioni su come modificare i tipi di carattere e i colori del sito.

Tipo di carattere

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

Per modificare un tipo di carattere, apri Stili sito, quindi clicca su Tipi di carattere.

Nel pannello Tipo 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.

Colors (Colori)

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

Per modificare i colori del sito, apri Stili sito, quindi clicca 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 ulteriori 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.

Layout

Usa le sezioni seguenti per informazioni su come modificare il layout di pagina e la spaziatura del sito.

Intestazione

I visitatori utilizzano l'intestazione 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.

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.

Spaziatura e padding

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

Per modificare la spaziatura del sito, apri Stili sito, quindi clicca su Spaziatura.

Questi tweak modificano la spaziatura su tutte le pagine del tuo sito:

  • 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. Nelle sezioni galleria, anche la spaziatura superiore e inferiore varieranno in relazione alla larghezza del margine.

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.

Barre laterali (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.

Immagini e animazioni

Usa le sezioni che seguono per scoprire come modellare Blocchi immagine e banner, modificare le proporzioni delle immagini e applicare animazioni.

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 in Stili sito.

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

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.

La maggior parte dei modelli supporta i banner delle pagine, che puoi aggiungere nelle impostazioni della tua pagina.

  • Per esaminare tutte le opzioni di banner in base alla famiglia di modelli, visita Aggiungere immagini banner.
  • Per ulteriori informazioni sulle impostazioni specifiche dei banner del tuo sito, vedi la guida del modello.

Aspect Ratio

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.

Animazioni

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.

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.

È possibile impostare il colore di sfondo dell'area di contenuto principale in Stili sito. Alcuni modelli dispongono anche di opzioni per aggiungere un colore di sfondo all'intestazione, al piè di pagina e ad altro spazio intorno ai contenuti. Per ulteriori informazioni, visita Modificare i colori.

Alcuni modelli permettono di aggiungere un'immagine di sfondo al sito o alla pagina tramite Stili sito. Per aggiungerne una, fai clic 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 a tutto il sito.

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 i passaggi dettagliati per tutti gli scenari, visita Pulsanti di stile.

Prodotti

Lo definizione dello stile dei prodotti dipende dalla versione del sito.

Per dare uno stile alla pagina principale del tuo negozio, apri gli stili della sezione del negozio. È possibile rivedere le opzioni per modificare il formato, lo sfondo e i colori della sezione.

Per dare uno stile agli articoli dei prodotti, apri gli stili del sito, quindi fai clic su Articoli prodotto Queste impostazioni interessano le pagine dei dettagli dei singoli prodotti. Tieni presente che alcune di queste opzioni si applicano solo ai prodotti con più immagini, quindi alcune modifiche potrebbero non essere visualizzate se il tuo prodotto ne ha solo una.

Per maggiori informazioni, visita Definire lo stile delle Pagine del negozio.

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

Per un elenco dettagliato delle opzioni di stile dei prodotti, visita Definire lo stile delle pagine del negozio. Puoi consultare tutti tweak per i prodotti nella guida ai tweak di stile del tuo modello.

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 di diverse aree del sito.

Salvare le modifiche

Dopo aver apportato tutte le modifiche di stile e contenuto, passa il mouse su Fine in alto a sinistra dell'editor di pagine e fai clic su Salva. Questa modifica non è reversibile. Sebbene sia possibile ripristinare gli stili predefiniti, non è possibile ripristinare le modifiche di stile precedenti dopo il salvataggio.

Annullare le modifiche

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

  • Clicca sulla freccia 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 sulla freccia Ripristina per ripetere una modifica.
Suggerimento: se stai modificando gli stili del sito nella versione 7.1, puoi chiudere il pannello Stili sito per modificare il contenuto della pagina e annullare o ripetere l'ultima modifica di stile.
  • In alcuni pannelli, clicca sul punto accanto al tweak modificato. Questo riporta il tweak all'ultima modifica salvata. I punti rimangono visibili fino a quando non salverai le modifiche.

style_dot.png

Suggerimento: se apporti una modifica di stile e poi la annulli, l'opzione Salva non si visualizza. L'opzione Salva si visualizza solo se modifichi un tweak e lo mantieni.

Ripristinare gli stili predefiniti

Puoi ripristinare alcune opzioni 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:

  • Per leggere le risposte alle domande più comuni, visita FAQ sulle modifiche di stile.
  • Partecipa al webinar di un'ora Introduzione a Squarespace per scoprire gli step fondamentali per configurare il tuo sito, ad esempio come costruire le pagine e modificare gli stili del sito.
  • Affidati a un progettista indipendente tramite Squarespace Marketplace per personalizzare la progettazione 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: 106 su 327