Le pagine di copertina presentano le informazioni in un'unica pagina iniziale in grassetto. Le pagine di copertina sono ideali per mostrare una pagina "In costruzione", per annunciare il lancio di un prodotto o per raccogliere gli indirizzi e-mail dei visitatori.

Le Pagine di copertina sono disponibili in tutti i piani di fatturazione Website e Commerce nella versione 7.0. Se al momento utilizzi il piano Pagina di copertina autonomo, la tua pagina rimarrà attiva fintanto che la fatturazione sarà attiva. Non è più possibile tornare al piano Pagina di copertina dopo essere passati a un sito completo.

Le pagine di copertina non sono disponibili nella versione 7.1. Per creare un aspetto simile, alcune pagine offrono la possibilità di nascondere l'intestazione e il piè di pagina. Non è possibile aggiungere o modificare le pagine di copertina nell'app Squarespace.

Guarda un video

Aggiungere una Pagina di copertina

Per aggiungere una Pagina di copertina e personalizzarne il contenuto, segui questi step:

1. Apri il pannello Pagine, clicca su +, quindi seleziona Pagina di copertina. Per maggiori informazioni, visita Aggiungere pagine alla navigazione.
2. Scegli un layout.
3. Aggiungi logo, testo e immagini.
4. Aggiungi azioni, come pulsanti, link o moduli.
5. Definisci lo stile della pagina.

Ricorda:

• Per rendere la Pagina di copertina la prima pagina visibile ai visitatori del tuo sito, impostala come homepage.
• Per rimuovere la Pagina di copertina dai menu di navigazione, spostala nella sezione Non collegato nel pannello Pagine. L'ideale se desideri che i visitatori la visualizzino una sola volta prima di accedere al tuo sito o se vuoi utilizzarla come pagina di destinazione.
• Se stai utilizzando un piano solo Pagina di copertina, non disponi di un pannello Pagine e non puoi aggiungere altre pagine. Il tuo Menu Home visualizza i pannelli per modificare la tua Pagina di copertina a sé stante.

Layout pagina di copertina

Ogni layout Pagina di copertina funziona come un modello a una pagina, con specifiche funzionalità e opzioni di stile. Le Pagine di copertina non prevedono l'utilizzo di blocchi, mentre altri elementi di design, come testo e pulsanti, vengono visualizzati in una posizione fissa. In questo modo, la tua Pagina di copertina avrà un aspetto piacevole e potrà essere visualizzata sui vari dispositivi.

Nota: le Pagine di copertina non supportano la formattazione HTML e Markdown.

Per cambiare layout:

1. Clicca su Modifica layout nel menu Pagina di copertina.
2. Utilizza il menu a discesa per ordinare i layout per categoria oppure scegli Tutti i layout per visualizzarli tutti.
3. Passa il mouse su un layout e clicca su Seleziona per impostarlo come nuovo layout.
4. Clicca su Salva nella parte superiore della pagina per applicare la modifica.

Anche se puoi adattare i layout Pagina di copertina a qualsiasi scopo, li abbiamo progettati pensando a temi generali. Troverai maggiori informazioni su ogni categoria di layout qui sotto.

Aggiungere branding e testo

Usa il pannello Branding e testo per aggiungere:

• Un logo o un testo di branding
• Un'intestazione di pagina
• Il corpo del testo

Queste impostazioni sono associate allo stile del layout per permetterti di presentare una quantità minima di informazioni con il massimo impatto.

Ricorda:

• La visualizzazione del branding e del testo varia in base al layout
• Non è possibile visualizzare contemporaneamente un logo e un testo di branding.
• Assicurati che il tuo logo rispetti le nostre procedure consigliate oppure crea un nuovo logo con Squarespace Logo.
• A differenza di altre pagine, i titoli dei siti e i loghi sulle Pagine di copertina non sono collegati alla homepage del sito.
• Il tuo testo di branding può essere diverso dal titolo SEO, che è utilizzato come nome della pagina nelle schede del browser e nei risultati dei motori di ricerca.

Aggiungere file multimediali

Usa il pannello Media per:

• Caricare immagini di sfondo
• Aggiungi immagini di archivio
• Riutilizzare immagini precedentemente caricate
• Aggiungere un video di sfondo in loop
• Impostare un colore di sfondo

Ricorda:

• Formatta correttamente le immagini prima del caricamento.
• Puoi utilizzare l'Editor di immagini integrato per modificare le immagini originali.
• Puoi caricare più immagini per creare uno slideshow o uno sfondo a griglia.
• Il caricamento di molte immagini ad alta risoluzione può influire sul tempo di caricamento della tua Pagina di copertina.
• La maggior parte dei layout supporta video di sfondo, riprodotti in loop senza audio, tramite il link a un URL di YouTube o di Vimeo.
• Non è possibile aggiungere i comandi di navigazione o impostare la velocità di transizione nello slideshow di una Pagina di copertina.
• A causa del responsive design, le immagini e i video appariranno sempre parzialmente ritagliati, soprattutto sui dispositivi mobili. La quantità del ritaglio dipende dall'altezza dell'immagine, dalla larghezza del browser e dal layout prescelto.

Impostare un colore di sfondo

Per visualizzare un semplice sfondo colorato invece di un'immagine o di un video, scegli Nessuno. L'immagine scomparirà dall'anteprima. Modifica il colore dello sfondo nel pannello Stile.

Aggiungere azioni

Utilizza il pannello Azione per aggiungere pulsanti, link di navigazione, un modulo o un'opzione per l'iscrizione a una newsletter. Se non desideri nessuna azione sulla tua Pagina di copertina, lascia vuoti i relativi campi.

Ricorda:

• Puoi aggiungere pulsanti o link di navigazione, ma non entrambi.
• Puoi aggiungere fino a due pulsanti o cinque link di navigazione.
• Puoi aggiungere un modulo o l'iscrizione a una newsletter.

Per aggiungere un'azione:

1. Clicca su Azione nel menu della Pagina di copertina.
2. In Seleziona tipo di azione, scegli un'azione.

Aggiungere pulsanti o link di navigazione

Pulsanti e link di navigazione dirigono i visitatori a una pagina differente del tuo sito Squarespace, a un altro sito web o a un file scaricabile. Per aggiungere pulsanti o link di navigazione:

1. Scegli Pulsanti o Navigazione dal menu Seleziona tipo di azione.
2. Aggiungi un'etichetta nel primo campo. È consigliabile che il testo dell'etichetta del link sia breve per garantire una migliore formattazione e leggibilità.
3. Clicca sul campo dell'URL per inserire un indirizzo Web o clicca su per aprire l'editor di link. Puoi creare link a siti esterni, file scaricabili, indirizzi e-mail, numeri di telefono o a contenuti del tuo stesso sito. Per maggiori informazioni, visita Aggiungere link al tuo sito.
4. Clicca su Salva all'estremità superiore del pannello per pubblicare tutte le modifiche.

Aggiungere un modulo o l'iscrizione a una newsletter

I visitatori possono cliccare su un pulsante e compilare il modulo o l'iscrizione alla newsletter che si apre in sovrapposizione. Per aggiungere un modulo o l'iscrizione a una newsletter:

1. Scegli Modulo o Newsletter dal menu Seleziona tipo di azione.
2. Aggiungi un'etichetta al pulsante nel campo Etichetta pulsante .
3. Clicca su Modifica modulo o su Modifica iscrizione newsletterper creare il contenuto.
4. Nel caso dei moduli, puoi assegnare un nome al modulo nel campo Nome modulo. Il nome apparirà ai visitatori quando il modulo si aprirà in una lightbox. Non è possibile assegnare un nome alle iscrizioni alla newsletter o eliminare il titolo predefinito del "Modulo newsletter" che appare nella lightbox.
5. Nel caso dei moduli, puoi eliminare i campi dimostrativi cliccando sulle icone del cestino, o cliccare sul segno + nella parte inferiore per aggiungere nuovi campi. Se desideri richiedere ai visitatori di compilare un campo per inviare il modulo, seleziona Obbligatorio. Le iscrizioni alle newsletter prevedono solo il campo dell'indirizzo e-mail.
6. Clicca sulla scheda Spazio di archiviazione per indicarci dove inviare i dati. Se utilizzi una mailing list di Campagne e-mail come spazio di archiviazione, gli iscritti riceveranno un'e-mail di conferma al momento della registrazione. Non è possibile disattivare questa impostazione.
7. Nella scheda Avanzate, personalizza l'etichetta del pulsante di invio, impostare un reindirizzamento post-invio o modificare il messaggio che viene visualizzato dai visitatori dopo aver inviato il modulo. Usa testo normale o HTML.
8. Clicca su Salva nell'editor, quindi su Salva all'estremità superiore del pannello per pubblicare tutte le modifiche.

Suggerimento: dopo aver collegato il modulo o l'iscrizione alla newsletter a un'opzione di archiviazione, è consigliabile visitare la versione online della pagina e inviare un modulo di prova per verificarne il funzionamento.

Aggiungere un colore di sfondo al modulo

Nella maggior parte dei layout, è possibile utilizzare il tweak Colore sovrapposizione personalizzato nel pannello Stile per aggiungere un colore allo sfondo del modulo o dell'iscrizione alla newsletter. Per nascondere questa sovrapposizione dal resto della pagina, usa il cursore di opacità per renderla trasparente. I visitatori visualizzeranno la sovrapposizione dopo aver cliccato sul modulo o sul pulsante di iscrizione alla newsletter.

Ricorda:

• Il layout Harbor non include le impostazioni Colore di sovrapposizione personalizzato né Colore dietro il testo. Gli sfondi Harbor per moduli o iscrizioni alla newsletter sono sempre di colore grigio chiaro.
• In alcuni layout, l'opzione Colore sovrapposizione personalizzato viene visualizzata solo dopo aver aggiunto immagini al pannello Media.

Su questi layout, lo sfondo del modulo o dell'iscrizione alla newsletter corrisponde all'impostazione Colore dietro il testo:

• Backstory
• Carta
• Flagship
• Flash
• Focus
• Monocle
• Sessione
• In evidenza
• Vignette

Nascondere il modulo

Per nascondere il modulo o l'iscrizione alla newsletter, elimina tutto il testo dell'Etichetta pulsante e lascia il campo vuoto. I campi modulo rimangono intatti se li riattivi in un secondo momento.

Aggiungere icone social

Per visualizzare le icone social, clicca su Link social nel menu della Pagina di copertina e seleziona Visualizza icone social. Le icone social riflettono gli account che hai aggiunto nel pannello Link social. La posizione delle icone varia in base al layout, ma in generale è collocata nella parte inferiore.

Definire lo stile della Pagina di copertina

Utilizza il pannello Stile nel menu della Pagina di copertina per personalizzare il design. Ogni Pagina di copertina ha opzioni di stile uniche, indipendenti dal modello del sito e dalle altre Pagine di copertina.

Ricorda:

• Se cambi layout, vengono ripristinate tutte le impostazioni predefinite del layout relative al tipo di carattere, al colore e alle dimensioni. Se torni a un layout usato in precedenza, vengono reimpostati anche i tweak di stile.
• Dal momento che le Pagine di copertina sono create con un responsive design, avranno un aspetto leggermente diverso su un dispositivo mobile. Puoi visualizzare in anteprima come apparirà la tua pagina su un dispositivo mobile utilizzando Vista dispositivo.

Modificare i tweak di stile

Clicca su Stile nel menu Pagina di copertina. Utilizza i tweak di stile per personalizzare la tua Pagina di copertina. Mentre apporti le modifiche, l'anteprima della pagina si aggiorna. Ti consigliamo di provare diverse opzioni finché non trovi il design che preferisci.

Ecco un elenco di tweak comuni per la Pagina di copertina:

• Posizionamento - Posiziona il contenuto sulla pagina. A seconda del layout, le opzioni sono Sinistra, Centro, Destrao In alto, Al centro, In basso.
• Branding - Imposta il tipo di carattere e il colore.
• Titolo - Imposta il tipo di carattere e il colore.
• Corpo - Imposta il tipo di carattere e il colore.
• Sfondo - Imposta il colore di sfondo (visibile se non utilizzi un'immagine o un video) e le opzioni del bordo pagina.
• Immagini (non disponibili nei layout Posizione) - Imposta lo stile come Intero o Griglia e personalizza l'aspetto della griglia con tweak di stile come Densità galleria a griglia e Rapporto galleria a griglia. Seleziona Colore sovrapposizione automatico e Colore caricamento automatico oppure deseleziona e imposta i colori per ciascuno. Per ulteriori informazioni sul colore di caricamento, vedi di seguito.
• Pulsanti - Imposta il tipo di carattere, lo stile e il colore dei pulsanti.
• Icone social - Imposta lo stile e il colore delle icone social.
• Controlli audio (solo layout Audio) - Imposta lo stile del lettore, il tipo di carattere e il colore delle tracce.
• Controlli video (solo layout Video) - Imposta lo stile e il colore del lettore.
• Mappa (solo layout Posizione) - Imposta lo stile della mappa.

Immagini di sfondo

La maggior parte dei layout include le opzioni Full (Intera) e Grid (Griglia) per le immagini:

• Seleziona Intera per riempire l'intero sfondo della Pagina di copertina con un'unica immagine. Se carichi più immagini, queste verranno visualizzate una alla volta come slideshow.
• SelezionaGriglia per creare una griglia di sfondo con immagini ripetute. Se hai una sola immagine, la griglia ripeterà tale immagine per riempire lo spazio.
  
  • L'opzione Grid (Griglia) non è disponibile nei layout Focus, Flagship, Harbor o Monocle.
  • Nel layout Montage, la barra dei contenuti potrebbe coprire alcune immagini.
• Utilizza i tweak riportati di seguito per impostare il rapporto dimensionale, l'orientamento dell'immagine e altro ancora.

Colore di caricamento

La maggior parte dei layout Pagina di copertina offre un'opzione colore di caricamento per visualizzare un colore di sfondo diverso durante il caricamento del normale colore di sfondo o dell'immagine. Questo colore può essere visualizzato anche durante il passaggio da un'immagine all'altra in uno slideshow.

Nota: i layout Flagship, Focus, Harbor e Monocle non offrono un colore di caricamento.

Per impostazione predefinita, il layout utilizza il Caricamento automatico del colore. Ciò significa che il colore si basa sul colore di sfondo dell'immagine o del video. Se hai più immagini di sfondo, il colore verrà caricato in base alla prima immagine nel pannello Media.

Per scegliere un colore personalizzato, deseleziona Colore caricamento automatico e impostane uno nuovo cliccando su Colore caricamento personalizzato.

Per disabilitare il colore di caricamento, clicca su Colore caricamento personalizzato e seleziona l'opzione Trasparente.

Colore di sovrapposizione

Tutti i layout tranne Harbor offrono un'opzione di sovrapposizione del colore, che aggiunge una tonalità all'immagine o al colore di sfondo. Per impostazione predefinita, il layout utilizza il Colore sovrapposizione automatico. Il colore automatico è solitamente una tonalità di grigio abbinata all'immagine demo.

Per utilizzare un colore di sovrapposizione personalizzato, deseleziona Colore sovrapposizione automatico, clicca su Colore sovrapposizione personalizzato e scegli un nuovo colore.

Per utilizzare il colore di sovrapposizione personalizzato come colore di sfondo di un modulo, ma nasconderlo dal resto della pagina, utilizza il cursore di opacità per rendere il colore trasparente.

Domande frequenti

Perché non posso aumentare le dimensioni del testo oltre un determinato punto?

Il testo, i logo e i pulsanti di una Pagina di copertina possono essere ingranditi fino alla larghezza massima supportata da ciascun layout. Questi limiti impediscono al contenuto di sovrapporsi e garantiscono un design reattivo.

Più specificamente, il corpo del testo viene visualizzato nella dimensione impostata per il tipo di carattere quando la larghezza del browser è superiore a 1800 pixel. Per i browser di larghezza pari o inferiore a 1800 pixel, il tipo di carattere del corpo raggiunge una dimensione massima a seconda della larghezza:

• Larghezza 1800 pixel: 27px
• Larghezza 1600 pixel: 22px
• Larghezza 1020 pixel: 18px
• Larghezza 760 pixel: 17px
• Larghezza 600 pixel: 16px

Ad esempio, impostando le dimensioni del carattere relative al corpo del testo su 30px, solo i visitatori che dispongono di una finestra del browser larga almeno 1801 pixel lo visualizzeranno a 30 pixel. In caso contrario, le dimensioni si modificheranno come da elenco precedente. Analogamente, impostando le dimensioni del corpo del testo a 13px, questo apparirà sempre a 13 pixel poiché le sue dimensioni sono inferiori a qualsiasi limite.

Il branding e il testo del titolo si comportano in modo diverso. La dimensione del tipo di carattere funziona più come un bersaglio e il testo si adegua all'altezza e alla larghezza del browser. Questa scalabilità varia a seconda del layout.

Posso aggiungere un codice personalizzato a una Pagina di copertina?

Le Pagine di copertina hanno dei design studiati nel dettaglio e non si prestano all'aggiunta di CSS personalizzati. Per regolare lo stile della Pagina di copertina (ad esempio tipi di carattere e colori), usa il pannello Stile.

Se hai comunque bisogno di aggiungere HTML o script, utilizza le impostazioni della Pagina di copertina per aggiungere una Iniezione di codice per pagina. Per maggiori informazioni, visita Aggiungere codice personalizzato al sito.

Il pulsante di riproduzione cambia posizione nel layout Projector.

La posizione del pulsante di riproduzione nel layout Projector dipende dalla lunghezza del testo nel campo Corpo:

• Con una quantità limitata di testo, il pulsante di riproduzione rimane centrato.
• Quando il testo supera una certa larghezza, il pulsante di riproduzione si sposta nell'angolo in alto a sinistra.
• La posizione varia in base alle dimensioni del browser.