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 funzionalità e le opzioni di design per la famiglia York. I tweak di Stili sito sono evidenziati in grassetto e si collegano all'elenco completo dei tweak di York per aiutarti a navigare nel pannello.

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 nella sezione 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 in 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 in 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: 

Intestazioni di pagina e footer

Intestazioni e piè di pagina rappresentano un ottimo modo per personalizzare le singole pagine. Per aggiungere dei 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 prodotti
  • Pagine progetto

Per abilitarli in tutto il sito, seleziona Mostra intestazioni pagina e/o Mostra piè di pagina nella sezione Pagina. I Blocchi di testo nell'intestazione e nel piè di pagina ripropongono i tweak di 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 Mostra piè di pagina globale in Sito: piè di pagina. Per aggiungere dei blocchi, passa il mouse sul piè di pagina e clicca su Modifica. Per gli step completi, visita Modificare 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 prodotti
  • 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 banner sono universali per ogni tipo di pagina. Visualizza o nascondi un banner per un tipo di pagina con i tweak Banner nella sezione Pagina.
  • 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. 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.

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.png

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 Intestazione, 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:

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-with-page-banner-and-navigation-banners.png

Pagine supportate

È possibile aggiungere le seguenti pagine a un Indice: 

  • Pagine album
  • Pagine del blog 
  • Pagine galleria
  • Pagine eventi
  • Pagine prodotti
  • 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 in Indice: immagine articolo:

  • 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. Impostane lo stile nella sezione Indice: layout.

  • 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 miniature in una griglia, seleziona Larghezza elemento: griglia. Definisci lo stile della griglia con i tweak Colonne e il Rapporto dimensionale 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 viene visualizzata 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.

  • 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: 

  • 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 una 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 Impilato e puoi modificarne colore, tipo di carattere e scalabilità. 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. In base allo stile prescelto, appariranno ulteriori tweak per una più completa personalizzazione dei pulsanti.
  • Scegli la visualizzazione dei pulsanti Condividi degli articoli nella sezione Prodotti: dettagli. Nascondi le icone negli articoli deselezionando Mostra pulsanti Condividi.
  • Utilizza le Icone di condivisione su 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:

  • 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:

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 dedicate ai Dispositivi mobili: 

  • 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 il logo del 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: 

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 43 su 97
Famiglia modelli York