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

Famiglia modelli York

La famiglia dei modelli York (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor e York) è stata creata per esibire il lavoro di illustratori, fotografi, agenzie creative e di altri produttori di contenuti visivi. Con una Pagina indice a griglia e delle Pagine dei progetti univoche, questi modelli ti forniscono gli strumenti per mostrare e condividere le tue creazioni.

Questa guida descrive le caratteristiche e le opzioni di design della famiglia York. I tweak di Stili sito e la sezione in cui appaiono nel pannello Stili sito sono evidenziati in grassetto.

Tipi di pagine supportati

York supporta questi tipi di pagine:

Intestazione

I visitatori utilizzano l'intestazione superiore generale per navigare nel sito. In York, l'intestazione è suddivisa in tre aree: sinistra, centrale e destra. Puoi aggiungere uno qualsiasi dei seguenti elementi all'intestazione:

Definisci lo stile del layout dell'intestazione con i tweak Sito: layout intestazione:

  • Scegli Layout sinistro, Layout centrale o Layout destro per modificare il layout da Orizzontale ad A colonna. Queste opzioni appaiono dopo che hai aggiunto due o più elementi all'area dell'intestazione.
  • Scegli come visualizzare l'intestazione con il tweak Intestazione a larghezza intera.

Definire lo stile dell'intestazione

Definisci lo stile del contenuto dell'intestazione con questi tweak Sito: intestazione:

  • Imposta il tipo di carattere e il colore del titolo del sito con Titolo sito.
  • Imposta il tipo di carattere e il colore della tagline con Tagline sito.
  • Cambia la dimensione del logo con Altezza (max) logo.
  • Imposta tipo di carattere, colore e stile del carrello con Carrello.

Definisci lo stile della navigazione con i tweak Sito: navigazione:

  • Modifica la Navigazione principale e la Navigazione secondaria con Primaria e Secondaria.
  • Nascondi o mostra un'icona a freccia accanto ai menu a discesa con Mostra indicatore cartella.

folder_indicator_caret.png

Maggiori informazioni sulle intestazioni

Suggerimenti:

  • Imposta lo spessore delle linee dell'icona di ricerca e di quella del carrello con i tweak Icone.
  • Il colore di sfondo dell'intestazione segue il tweak Sfondo sito sotto Sito.
  • Molti di questi elementi hanno stili per dispositivi mobili separati.

Intestazioni di pagina e footer

Intestazioni e piè di pagina rappresentano un ottimo modo per personalizzare le singole pagine. Per aggiungere blocchi, passa il mouse sopra la parte superiore o inferiore della pagina, quindi clicca su Modifica sull'annotazione Contenuto intestazione raccolta o su Contenuto piè di pagina raccolta.

York ha intestazioni e piè di pagina in:

  • Pagine Album
  • Pagine del blog
  • Pagine eventi
  • Pagine galleria
  • Pagine indice
  • Pagine negozio
  • Pagine progetto

Per abilitarli in tutto il sito, seleziona Mostra intestazione pagina e/o Mostra piè di pagina nella sezione Pagina di Stili sito. I Blocchi di testo nell'intestazione e nel piè di pagina seguono i tweak sotto Sito: tipografia.

Ricorda:

  • I singoli elementi di una raccolta, ad esempio i post del blog, non supportano intestazioni e piè di pagina.
  • Il contenuto nascosto di intestazioni e piè di pagina potrebbe comunque essere visibile quando condividi una pagina sui social media. Per evitare che questo accada, elimina il contenuto prima di nascondere l'intestazione o il piè di pagina.
  • Le pagine inserite in un indice mostrano la navigazione sotto il piè di pagina.

Piè di pagina generale del sito

Per abilitare un piè di pagina generale del sito, seleziona il tweak Mostra piè di pagina globale del sito sotto Sito: piè di pagina. Per aggiungere blocchi, passa il mouse sul piè di pagina e clicca su Modifica. Per gli step completi, visita Modificare i piè di pagina.

Banner di pagina

Aggiungi un video o un'immagine banner nella parte superiore di questi tipi di pagine:

  • Pagine Album
  • Pagine del blog
  • Pagine eventi
  • Pagine galleria (solo immagini)
  • Pagine indice
  • Pagine di layout
  • Pagine negozio
  • Pagine progetto

Per aggiungere un video o un'immagine banner, aggiungi una immagine in miniatura o un URL video alla scheda Media nelle Impostazioni pagina.

Ricorda:

  • Questi banner creano una navigazione con miniature nelle Pagine Indice.
  • Se la pagina non ha alcuna immagine in miniatura, il banner mostra un colore di sfondo. Potrebbe essere necessario regolare la trasparenza.
  • Le impostazioni dei banner sono universali per ogni tipo di pagina. Nascondi o visualizza un banner per un tipo di pagina con i tweak Banner nella sezione Pagina di Stili sito.
  • Il titolo e la descrizione della pagina possono essere sovrapposti al banner.
  • I banner supportano il caricamento di pagine animate.

Banner esclusivo per la homepage

Puoi visualizzare un banner sulla tua homepage, ma nasconderlo su tutte le altre pagine di quel tipo. Ad esempio, se la tua homepage è una Pagina di layout, seguirai questi step:

  1. Vai alla homepage.
  2. Apri il riquadro Stili sito.
  3. Scorri verso il basso fino a Pagina.
  4. Deseleziona Mostra banner pagina. Così facendo, nasconderai il banner su tutte le Pagine di layout.
  5. Seleziona Mostra banner homepage. Così facendo, visualizzerai il banner sulla Pagina di layout della homepage.

Il titolo e la descrizione delle pagine restano elementi comuni. Ad esempio, selezionando Mostra titolo pagina, il titolo della pagina risulterà visibile sia sulla homepage che su tutte le altre Pagine di layout.

Definire lo stile dei banner

Definisci lo stile dei banner nella sezione Banner di Stili sito. Questi tweak influiscono su tutti i banner presenti nelle pagine del tuo sito.

  • Nelle pagine con immagini in miniatura, imposta l'altezza del banner con Altezza.
  • Posiziona l'immagine all'interno del banner con Allineamento immagine.
  • Quando Allineamento immagine è impostato su destra o sinistra, riempi la metà destra o sinistra dell'immagine utilizzando Ritaglia immagine. Per riempire l'intero banner, imposta Allineamento immagine al centro e seleziona Ritaglia immagine.
  • Seleziona Sfondo colorato automatico per far sì che il banner estragga automaticamente un colore di sfondo dalla stessa immagine in miniatura. Questa opzione si rivela utile per le illustrazioni e le immagini con un singolo colore di sfondo dominante, poiché l'immagine sembra estendersi fino ai bordi del banner.
  • Per estendere il banner fino ai bordi del browser, seleziona Banner con smarginatura completa.
  • I banner di navigazione dell'Indice hanno le proprie impostazioni di stile sotto Indice in Stili sito.

Il Colore di sfondo viene visualizzato:

  • Sui banner privi di immagini in miniatura
  • Durante il caricamento di un video o di un'immagine banner
  • Dietro le immagini in miniatura che non riempiono l'intero banner, se Sfondo colorato automatico non è stato selezionato

banner_sample_1.png

Banner_sample_2.png

Banner_sample_3.jpg

banner_sample_4.png

Titoli e descrizioni delle pagine

Mostra il titolo e la descrizione delle pagine come da Impostazioni pagina nella parte superiore di qualunque pagina. Le Pagine dei progetti e le Pagine galleria possono anche visualizzare categorie di singole immagini.

  • Queste impostazioni sono universali per ogni tipo di pagina.
  • Nascondi o visualizza il testo con i tweak Titolo, Descrizione e Categoria nella sezione Pagina.
  • Il testo può essere sovrapposto al banner della pagina o visualizzato autonomamente.
  • Nascondi la descrizione di una singola pagina eliminandola in Impostazioni pagina.

Testo sui banner vs. nessun banner

Puoi assegnare delle opzioni di stile differenti, a seconda che il testo venga visualizzato su un banner o sulla pagina. La sezione Stili sito da te utilizzata dipende dalla presenza o meno di un banner sulla pagina:

  • Testo banner - Qualsiasi pagina con un banner
  • Indice: testo introduttivo - Le Pagine indice senza banner di pagina
  • Pagina: testo introduttivo - Qualsiasi altra pagina priva di un banner di pagina

Definisci lo stile del testo con Titolo, Descrizione e Categoria.

Le pagine senza banner offrono le seguenti opzioni aggiuntive:

  • Impostazione dei margini laterali per il testo con Larghezza testo.
  • Impostazione delle spaziature sopra e sotto il testo con Altezza testo.

Il testo visualizzato su un banner offre queste opzioni aggiuntive:

  • Posizionamento del testo all'interno del banner con Allineamento.
  • Impostazione dei margini laterali per il testo con Larghezza.
  • Aggiunta di un colore dietro al testo con i tweak di Evidenziazione. Imposta la larghezza del colore di sfondo con Rientro evidenziazione testo.

text_on_a_banner.png

Pagine del blog

La famiglia di modelli York utilizza una Pagina del blog con layout a griglia/elenco standard. Per maggiori informazioni sulle caratteristiche uniche e le opzioni di stile di questo tipo di blog, visita Pagine del blog con layout a griglia/elenco standard.

Pagine progetto

La Pagina del progetto dispone immagini, titoli e didascalie secondo eleganti layout. Si tratta di un'alternativa ottimale a una Pagina galleria, soprattutto nel caso tu stia utilizzando un misto di testo e immagini.

Per maggiori informazioni, visita Pagine del progetto.

york-project.png

Pagine indice

Le Pagine indice di York creano immagini in miniatura per la navigazione disposte in un banner o in una griglia, utilizzabili dai visitatori per visitare le varie pagine.

  • La griglia di navigazione visualizza immagini in miniatura delle pagine. Anche se una pagina ha un banner video, la sua immagine in miniatura verrà visualizzata nella griglia.
  • Puoi aggiungere un banner di pagina, un titolo di navigazione, un testo di descrizione, oltre ad aree di intestazione e piè di pagina personalizzabili.
  • Sui dispositivi mobili, le Pagine indice visualizzano una miniatura per riga.
  • Le Pagine indice non sono vincolate alla Larghezza massima del sito.

index-example__1___1_.png

Pagine supportate

È possibile aggiungere le seguenti pagine a un indice:

  • Pagine Album
  • Pagine del blog
  • Pagine galleria
  • Pagine eventi
  • Pagine negozio
  • Pagine progetto
  • Pagine di layout

Immagini in miniatura

Aggiungi un'immagine in miniatura o un URL video alle impostazioni di una pagina per visualizzarli tra le miniature di navigazione dell'Indice. Definisci lo stile delle miniature con i tweak Indice: immagine elemento:

  • Allinea l'immagine nella miniatura con Allineamento immagine.
  • Riempi la metà destra, la metà sinistra o l'intera miniatura con Ritaglia immagine. Questa opzione appare quando Allineamento immagine è impostato su destra, sinistra o centro.
  • Scegli la quantità di colore di sfondo visibile attraverso l'immagine con Opacità immagine.
  • Scegli il grado di dissolvenza dell'immagine quando i visitatori vi passano sopra il mouse con Opacità al passaggio del mouse.
  • Per riempire l'intera miniatura, scegli Allineamento immagine: centro e seleziona Ritaglia immagine.
  • Per impostare le miniature in modo da estrarre automaticamente un colore di sfondo dal video o dall'immagine in miniatura, seleziona Sfondo colorato automatico.
  • Scegli un Colore sfondo elemento da visualizzare in quelle miniature che non hanno né video, né immagini. Questo tweak appare quando Sfondo colorato automatico non è selezionato.

Il colore di sfondo della miniatura viene visualizzato:

  • Quando le miniature di navigazione non includono né video, né immagini
  • Dietro le immagini che non riempiono tutta la miniatura
  • Attraverso quelle immagini in miniatura di cui hai modificato l'opacità

Layout delle immagini in miniatura

Le miniature di navigazione dell'Indice possono essere visualizzate sotto forma di banner o di griglia. Imposta lo stile nella sezione Indice: layout di Stili sito.

  • Visualizza le miniature sotto forma di banner utilizzando Larghezza elemento. Scegli Completa o Metà per visualizzare uno o due banner per riga.
  • Imposta l'altezza dei banner con Altezza elemento.
  • Per visualizzare le immagini in miniatura sotto forma di griglia, seleziona Larghezza elemento: griglia. Definisci lo stile della griglia con i tweak Colonne e il Rapporto dimensionale delle miniature.
  • Imposta lo spazio fra i banner o i riquadri delle miniature con Spaziatura elementi.
  • Per estendere le miniature fino al bordo del browser, seleziona Indice con smarginatura completa. Se l'opzione non è selezionata, le miniature ripropongono il padding del sito. Questa opzione si applica anche al banner di intestazione pagina.
  • Per alternare righe con uno e due banner, seleziona Larghezze alternative. Questa opzione viene visualizzata quando i banner sono impostati su Allineamento immagine: centro, con Larghezza indice impostata su Completa o Metà.
  • Per alternare il lato su cui l'immagine viene visualizzata, seleziona Lati alternativi. Questa opzione è visibile quando i banner sono impostati su Allineamento immagine: destra o sinistra e Larghezza indice è impostata su completa.

Le immagini in miniatura dell'Indice possono mostrare il titolo di navigazione per tutte le pagine e categorie che hai aggiunto alle immagini in Pagine galleria e Pagine del progetto. Il titolo di navigazione viene visualizzato sulle miniature dell'Indice, mentre il titolo della pagina appare all'estremità superiore delle singole pagine. Questo significa che puoi impostare un testo diverso da visualizzare in queste due aree.

Modifica il tipo di carattere, il colore e le dimensioni del testo con la sezione Indice: testo elemento di Stili sito.

  • Scegli la modalità di visualizzazione dei titoli con Visualizzazione titoli.
  • Per nascondere il testo della categoria, seleziona Mostra categorie.
  • Per aggiungere colori di sfondo personalizzabili dietro il testo, seleziona Utilizza sfondo titolo e Utilizza sfondo categoria.
  • Imposta dove il testo viene visualizzato con Allineamento testo.

index_thumbnails_with_titles.png

Navigazione

Per definire lo stile di navigazione dell'Indice, vai a una pagina inserita nell'Indice, quindi apri Stili sito.

La navigazione viene visualizzata nella parte inferiore di tutte le pagine inserite in un Indice. Per nasconderla, deseleziona Mostra navigazione Indice. Per definirne lo stile, utilizza la sezione Indice: navigazione di Stili sito:

  • Imposta Stile link su Elenco per visualizzare tutte le pagine inserite nell'Indice come dei link di navigazione.
  • Imposta Stile link su Successiva per visualizzare un'etichetta Successiva. Deseleziona Mostra solo etichetta per mostrare il nome della pagina dopo l'etichetta Successiva.

link-style-list.png

link-style-next.png

Nel caso di entrambi gli stili, puoi scegliere di visualizzare il testo come In linea o A colonna e puoi modificarne colore, tipo di carattere e ridimensionamento. Imposta lo stile dei link, inclusi spaziatura, tipo di carattere e separatori, con gli altri tweak di Indice: navigazione.

Caricamento delle pagine

I modelli York supportano Ajax, un metodo di caricamento pagine che rende il tuo sito più veloce caricando soltanto il contenuto visibile sulla pagina. Per creare un'esperienza di navigazione quanto più fluida possibile, consigliamo di abilitare sempre il caricamento di Ajax. Per ulteriori informazioni, consulta caricamento Ajax.

I modelli York supportano anche speciali animazioni di pagina:

  • Immagini e didascalie delle Pagine del progetto scorrono verso l'alto dal basso, via via che scorri la pagina verso il basso. Deseleziona il tweak Immagini e didascalie a cascata per eliminare questo effetto.
  • Il contenuto delle pagine inserite in un Indice scorre verso l'alto al momento del caricamento iniziale. Deseleziona il tweak Animazione di transizione delle pagine per rimuovere questo effetto.
  • I banner di pagina si caricano con un effetto di dissolvenza in entrata.

Se sei connesso, non tutte le animazioni saranno visibili. Per visualizzare in anteprima gli effetti, visita il tuo sito in modalità privata o navigando in incognito.

image-sliding-up.gif

page_banner_fading_in.gif

Struttura e stile

Pulsanti Condividi

I pulsanti Condividi personalizzabili sono visibili nei post del blog e nelle pagine dei dettagli dei prodotti:

  • Impostane dimensioni, spaziatura, colore e stile nella sezione pulsanti Condividi di Stili sito. In base allo stile prescelto, appariranno più tweak per una più completa personalizzazione dei pulsanti.
  • Scegli la visualizzazione dei pulsanti per la condivisione degli articoli nella sezione Prodotti: dettagli. Nascondi le icone negli articoli dei prodotti deselezionando Mostra pulsanti Condividi.
  • Utilizza il tweak Icone di condivisione sotto Blog: elemento per scegliere se mostrare i pulsanti di condivisione sopra o sotto il contenuto dei singoli post del blog.
  • Il pulsante Condividi di Pinterest viene visualizzato solo su pagine dotate di immagini in miniatura.
  • Le Pagine album e le Pagine eventi includono un link Condividi con pulsanti Condividi pop-up. Questi pulsanti non ripropongono gli stili personalizzati.

Layout e sfondo

Imposta il padding del tuo sito nella sezione Sito di Stili sito:

  • Imposta lo spazio fra il contenuto del sito e l'estremità superiore del browser con Spaziatura sito.
  • Imposta lo spazio fra il contenuto del sito e i lati del browser con Padding esterno sito.
  • Quando Intestazione a larghezza intera non è selezionata, l'intestazione ripropone Allineamento sito e Larghezza massima sito.
  • Imposta il colore di sfondo generale del sito con Sfondo sito.

Tipo di carattere

Definisci lo stile dei font sul tuo sito con queste opzioni di Stili sito:

  • Link di navigazione - Sito: navigazione
  • Contenuto principale - Sito: tipografia
  • Titoli e descrizioni della pagina - Testo banner, Pagina: testo introduttivo e Indice: testo introduttivo

Puoi impostare alcuni testi per ridimensionarli a seconda della larghezza del browser. Ecco come fare per il testo di Intestazione 1:

  1. Nella sezione Sito: tipografia, seleziona Ridimensiona intestazione 1.
  2. Imposta la dimensione massima del tipo di carattere con Intestazione 1.
  3. Imposta la dimensione minima del tipo di carattere con Intestazione 1 min.

Ti consigliamo di impostare la dimensione minima di tutti i tipi di carattere dell'intestazione su un valore superiore rispetto al tipo di carattere del corpo del testo. Per maggiori informazioni, consulta Ridimensionare i tipi di carattere.

Barra laterale

I modelli York non supportano la barra laterale su nessuna pagina. Per un elenco dei modelli che offrono questa opzione, visita Modificare le barre laterali.

Icone social

I modelli York non supportano le icone social integrate. In alternativa, aggiungi un Blocco link social al piè di pagina o al contenuto della tua pagina.

Mobile

Con il responsive design integrato di Squarespace, il tuo sito si adatta perfettamente a qualsiasi dispositivo. Sui dispositivi mobili e i browser stretti, i contenuti si impilano verticalmente.

Definisci l'aspetto del tuo sito su dispositivo mobile nelle sezioni Dispositivi mobili di Stili sito:

  • Scegli se la barra sui dispositivi mobili debba scorrere verso l'alto insieme alla pagina o rimanere fissa all'estremità superiore o inferiore con Posizione barra su dispositivo mobile. La barra su dispositivo mobile contiene il titolo o logo del tuo sito, l'icona di navigazione, la tagline e il carrello.
  • Imposta la posizione in cui vengono visualizzati il branding del sito e l'icona del menu con Posizione branding.
  • Il titolo del sito, la tagline, i link di navigazione e il carrello possono tutti avere stili separati per i dispositivi mobili. Per mantenere la coerenza del branding su tutti i dispositivi, utilizza gli stessi stili della sezione Sito.
  • Imposta una immagine di fallback su dispositivi mobili da visualizzare quando non è possibile caricare il banner video sui dispositivi mobili.
  • L'icona ☰ è sempre visibile sui dispositivi mobili, anche quando la Navigazione principale e quella secondaria sono vuote.

Ricorda:

smartphong-and-tablet-view.png

Opzioni di lingua

York supporta due opzioni linguistiche:

Risoluzione dei problemi di York

Il colore di evidenziazione relativo allo sfondo del testo del banner presenta degli spazi vuoti

Ciò può accadere quando il titolo o la descrizione sono molto brevi e hai impostato un valore di rientro del testo evidenziato troppo elevato.

Per risolvere il problema, aggiungi altro testo al titolo o alla descrizione o utilizza la sezione Testo banner degli Stili sito per:

  • Ridurre il tweak Rientro personalizzato del testo evidenziato.
  • Utilizzare il tweak Rientro del testo evidenziato per scegliere tra le opzioni preimpostate Piccolo, Medio o Grande.

York.png

Visualizzazione del testo "Descrizione della pagina"

Questo testo dimostrativo viene visualizzato nelle Pagine di layout, del progetto e del negozio durante l'accesso al sito. I visitatori del tuo sito non vedranno questo testo.

Per risolvere il problema, sostituisci il testo nelle impostazioni della pagina o nascondi tutte le descrizioni delle pagine in Stili sito.

La Pagina del progetto è scomparsa dopo aver cambiato modello

Se passi a un modello che non appartiene alla famiglia York, le Pagine del progetto saranno convertite in Pagine galleria.

Dopo aver effettuato nuovamente il passaggio al modello York, puoi ricreare il formato originale spostando le immagini da una Pagina galleria a una nuova Pagina del progetto:

  1. Nel Menu Home, clicca su Pagine, quindi aggiungi una nuova Pagina del progetto.
  2. Nel pannello Pagine, clicca sulla Pagina galleria in cui sono presenti le immagini che desideri spostare.
  3. Clicca sugli elementi che desideri spostare.
  4. Clicca su Sposta nella barra delle azioni visualizzata di seguito.
  5. Nella finestra Seleziona raccolta di destinazione, scegli la Pagina dei progetti e clicca su Sposta elementi.

La condivisione sui social media produce la visualizzazione di un testo casuale

Squarespace non può controllare con esattezza ciò che appare sui social media quando condividi contenuti. Tuttavia, può succedere che venga visualizzato il testo di un'intestazione di pagina o di un piè di pagina, anche se sono nascosti nel tuo sito. Per risolvere questo problema, elimina il contenuto da intestazioni e piè di pagina quando sono nascosti.

Per eliminare il contenuto dell'intestazione o del piè di pagina:

  1. Nel pannello Pagine, apri la pagina con il contenuto dell'intestazione o del piè di pagina nascosto.
  2. Apri Stili sito, quindi visualizza l'intestazione della pagina o il piè di pagina nella sezione Pagina di Stili sito.
  3. Clicca su Salva.
  4. Torna all'intestazione o al piè di pagina e clicca su Modifica.
  5. Elimina il contenuto.
  6. Torna a Stili sito e deseleziona Mostra intestazione della pagina o Mostra piè di pagina.

Il testo supera i bordi del banner

Se il tuo testo non viene visualizzato correttamente sui dispositivi mobili, abilita il ridimensionamento dei tipi di carattere e prova a rimpicciolirli il più possibile.

Le parole lunghe non vanno a capo quando raggiungono il bordo di un contenitore. Per ottenere risultati migliori, utilizza parole più brevi nei titoli e nelle intestazioni.

Problemi relativi all'aggiunta di contenuto all'intestazione di una pagina

Se non vedi l'annotazione Contenuto intestazione della raccolta nell'intestazione della pagina:

  1. Apri Stili sito.
  2. Nella sezione Pagina, seleziona Mostra intestazione della pagina.
  3. Clicca su Salva ed esci da Stili sito.
  4. Aggiorna la pagina.

Ora l'annotazione dovrebbe apparire sulla pagina.

I video non vengono visualizzati nelle Pagine del progetto

Ogni video di una Pagina del progetto deve avere un'immagine in miniatura. I video senza immagini in miniatura vengono visualizzati nel pannello Pagine con una linea diagonale. Per aggiungere un'immagine in miniatura:

  1. Nel Menu principale, clicca su Pages (Pagine).
  2. Clicca sulla Pagina del progetto.
  3. Posiziona il puntatore del mouse sul video e clicca su “the.
  4. Per aggiungere manualmente un'immagine in miniatura, clicca su Aggiungi miniatura video. In alternativa, scegli una miniatura automatica dal provider di hosting del tuo video con Ripristina miniatura del provider video.
  5. Clicca su Salva.
Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 46 su 102
Famiglia modelli York