Stile e funzionalità della famiglia di modelli Pacific.

La famiglia di modelli Pacific (Bryler, Charlotte, Horizon, Naomi, Pacific) utilizza testi in sovrapposizione e una Pagina Indice a scorrimento con smarginatura completa per riunire tutti i tuoi contenuti in una singola voce.

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

Pagine supportate

Pacific supporta questi tipi di pagina:

• Pagine Album
• Pagine del blog - Elenco
• Pagine di copertina
• Pagine eventi
• Pagine galleria - Standard
• Pagine indice - A colonna
• Pagine di layout
• Pagine negozio - Classiche

Intestazione

I visitatori utilizzano l'intestazione superiore per navigare nel sito. In Pacific, l'intestazione include titolo o logo del sito (branding) e link di navigazione.

• Il branding è centrato.
• Le homepage degli indici possono avere la navigazione fissa.

Definisci lo stile dei tipi di carattere e dei colori dell'intestazione con i tweak Intestazione sito:

• Imposta il colore dell'intestazione con Colore sfondo.
• Visualizza i banner dietro l'intestazione con Trasparente su immagini banner.
• Cambia le dimensioni del titolo del sito con il cursore Dimensioni tipo di carattere nel tweak Tipo di carattere titolo sito. Per evitare distorsioni, non superare i 72 pixel.
• Cambia le dimensioni del logo con Larghezza logo.

Definisci lo stile dei link di navigazione con i tweak Navigazione sito. Scegli se mostrare la navigazione sulla pagina o dietro un'icona ☰ con Usa sempre navigazione sovrapposta.

• Quando non sono selezionati, i link di navigazione vengono visualizzati o sotto il branding o suddivisi sui due lati, a seconda del numero di pagine e della larghezza del browser.
• Cambia il Colore link e imposta lo sfondo della sovrapposizione con Colore sfondo.
• Nella sovrapposizione ☰, i link si ridimensionano automaticamente per adattarsi al meglio al menu. Il tweak Tipo di carattere link: dimensioni tipo di carattere non influisce su di essi.

Banner

I banner creano un elemento visivo che può impostare il tono per la tua pagina. Aggiungi immagini in evidenza e video della pagina per creare banner.

• I banner vengono visualizzati nelle Pagine album, nelle Pagine del blog, nelle Pagine eventi, nelle Pagine galleria (solo immagini), nelle Pagine dei prodotti e nelle Pagine di layout.
• Impila verticalmente più banner in un Indice.
• I titoli e descrizioni delle pagine e l'intestazione del sito possono essere visualizzati sopra i banner.
• Aggiungi un filtro colore con il tweak Colore sovrapposizione sotto Banner di pagina. Le sezioni Indice hanno colori di sovrapposizione separati.

Testo banner

Titoli e descrizioni della pagina possono essere visualizzati sopra i banner.

• Definisci lo stile dei tipi di carattere con i tweak Banner di pagina. Nascondi tutti i titoli con Mostra titolo pagina.
• Per rimuovere le descrizioni della pagina, eliminale in Impostazioni pagina. Per rimuoverle senza modificare l'altezza del banner, sostituisci il testo con delle interruzioni di riga.
• Per utilizzare un testo diverso nei risultati di ricerca, aggiungi Titoli e descrizioni SEO.

Altezza del banner

Per cambiare l'altezza, puoi:

• Modificare il Padding sotto Banner di pagina.
• Aumentare l'altezza della descrizione della pagina aggiungendo delle interruzioni di riga.

Maggiori informazioni sui banner

Ricorda:

• I banner video a volte non vengono visualizzati sui dispositivi mobili, a seconda della versione del browser e della velocità di connessione. Imposta un'immagine di fallback su dispositivi mobili da visualizzare quando non è possibile caricare il banner video.
• Se una Pagina galleria non ha un'immagine in evidenza, la prima immagine diventerà automaticamente il banner ogni volta che si apporta una modifica alla Galleria. Se non vuoi nessun banner sulla tua Pagina galleria, apri Impostazioni pagina per rimuovere l'immagine in evidenza.

Sfondo

Imposta il colore di sfondo del sito con il tweak Colore sfondo sotto Contenuto principale.

• L'intestazione, i piè di pagina e il pre-piè di pagina hanno i propri colori di sfondo.
• È possibile impostare dei colori di sfondo alternativi per le sezioni di un Indice.

Piè di pagina

Personalizza il piè di pagina globale del sito di Pacific con i blocchi. Il piè di pagina può includere link di navigazione, informazioni di contatto e una seconda area contenuti definita pre-piè di pagina.

Definisci lo stile del piè di pagina, delle informazioni di contatto e dei link di navigazione nel piè di pagina con i tweak Piè di pagina:

• Visualizza e definisci lo stile delle informazioni di contatto con i tweak di Informazioni sito.
• Modifica le informazioni con i campi Sede fisica, E-mail di contatto e Numero di telefono di contatto in Informazioni aziendali.

Suggerimento: se non vedi il tweak Informazioni sito, visualizza in anteprima un modello diverso sul tuo sito, quindi annulla l'anteprima.

Il pre-piè di pagina viene visualizzato sopra il piè di pagina.

• Definisci i colori dello sfondo e del testo nella sezione Pre-piè di pagina di Stili sito.
• Per visualizzare il pre-piè di pagina, scegli Contenuto: personalizzato. Per nasconderlo, scegli Contenuto: vuoto.

Ricorda:

• Il contenuto della demo di alcuni modelli include un Blocco link social. Elimina il blocco per rimuovere le icone social.
• I collegamenti testuali nel piè di pagina e pre-piè di pagina sono sottolineati.

Pagine del blog

Le Pagine del blog di Pacific vengono visualizzate come un elenco di post impilati verticalmente.

Nella pagina di destinazione:

• Aggiungi una navigazione categorie per visualizzare i filtri delle categorie nella parte superiore della pagina.
• Le immagini in evidenza dei post vengono visualizzate sotto il titolo per i post che hanno estratti.
• I link "Scopri di più" appaiono negli estratti.
• Il contenuto completo dei singoli post viene visualizzato sotto il titolo per i post senza estratti.

Sui singoli post:

• I singoli post hanno la navigazione verso i post precedenti e successivi sotto i commenti.
• I Blocchi di testo a colonna singola possono essere inseriti su entrambi i lati. Questo ti permette di variare il layout, rendendo più interessanti i tuoi post. Non vi sono opzioni per modificare l'ampiezza del rientro.

Definisci lo stile dei metadati con i tweak Blog:

• Data, categorie e nomi degli autori vengono visualizzati sopra il post. Utilizza Priorità metadati per spostare uno di questi elementi sopra il titolo del post.
• Per nascondere i nomi degli autori, scegli Nascondi autore post. Questo tweak non è disponibile quando Priorità metadati: autore è selezionata.
• URL di origine, tag, commenti, Mi Piace e pulsanti Condividi vengono visualizzati sotto il post. Seleziona Nascondi piè di pagina voci elenco per nasconderli.

Definisci lo stile del testo con questi tweak Contenuto principale:

• Definisci lo stile dei metadati con i tweak Metadati.
• I titoli dei post ripropongono i tweak dell'Intestazione 1.
• Il corpo del testo ripropone i tweak di Tipo di carattere testo e Colore testo.

Pagine indice

Le pagine indice di Pacific trasformano il contenuto da pagine multiple a sezioni impilate, permettendoti di mettere in evidenza immagini e informazioni diverse in un'unica posizione.

• Le sezioni di contenuto sono tratte da Pagine di layout e rappresentano una valida opzione per aggiungere testo, pulsanti e altri blocchi.
• Le sezioni Indice galleria sono costituite da Pagine galleria e possono essere visualizzate con layout a griglia o con uno slideshow.
• Le sezioni Album sono costituite da Pagine album.
• Le immagini in evidenza delle pagine vengono visualizzate come sfondo per sezioni di contenuto e album.

Indice delle sezioni galleria

Definisci lo stile delle sezioni Indice della galleria nella relativa sezione di Stili sito. Imposta il layout di tutte le sezioni con il tweak Design.

Per i layout a slideshow:

• Scegli se attivare la Riproduzione automatica delle gallerie e imposta la Transizione slideshow su Dissolvenza o Scorrimento.
• Aggiungi o nascondi gli elementi di navigazione con Comandi galleria.
• Aggiungi un'icona a forma di occhio, utilizzabile dai visitatori per attivare o disattivare le didascalie con Attiva/disattiva sovrapposizione galleria.
• I titoli e le descrizioni delle immagini sono centrati sull'immagine.

Per i layout a griglia:

• Scegli quante immagini vengono visualizzate orizzontalmente con Numero max colonne griglia.
• I titoli delle immagini vengono visualizzati al passaggio del mouse. Le descrizioni delle immagini non vengono visualizzate.

Video aggiunti alla galleria:

• Apri in una lightbox su dispositivo mobile.
• Riproduzione automatica disponibile.

Sfondi di sezione

Per le sezioni di contenuto e gli album:

• Le immagini in evidenza delle pagine vengono visualizzate come sfondo.
• Le sezioni senza immagini in evidenza mostrano il colore di sfondo del sito.
• Utilizza il tweak Separatore di sezione sotto Indice per scegliere come organizzare due sezioni consecutive prive di immagini di sfondo. Puoi optare per dei colori di sfondo alternati o per un bordo che separa le varie sezioni.

Per le sezioni Indice della galleria:

• Layout a slideshow - Le immagini vengono visualizzate con smarginatura completa.
• Layout a griglia - Il tweak Colore sovrapposizione galleria sotto Galleria indice si presenta completamente opaco in tutti gli spazi vuoti della griglia.

Sovrapposizioni colorate

È possibile aggiungere un filtro colorato a immagini e video. In questo modo, i contenuti sovrapposti risalteranno meglio.

• Sezioni contenuto e album - Utilizza il tweak Colore sotto Sovrapposizione indice.
• Sezioni Indice galleria - Utilizza il tweak Colore sovrapposizione galleria sotto Galleria indice. Il colore appare solo sulle immagini con titoli o descrizioni. Per i layout a griglia, il colore viene visualizzato al passaggio del mouse.

Altezza sezione

Per modificare l'altezza delle sezioni contenuto e album, regola il padding con i seguenti tweak:

• Sezioni con immagini banner - Utilizza Padding di pagina sotto Sovrapposizione indice.
• Sezioni senza immagini banner - Utilizza Padding di pagina sotto Indice.
• Nelle sezioni dei contenuti, puoi aumentare l'altezza anche aggiungendo delle interruzioni di riga al contenuto della pagina.

Modifica l'altezza delle sezioni Indice galleria con i tweak Galleria indice:

• Layout a slideshow - Cambia il Rapporto dimensionale dello slideshow.
• Layout a griglia - Cambia il Rapporto dimensionale della griglia e il Numero max colonne griglia.

Link di navigazione

Nelle Pagine indice impostate come homepage:

• La navigazione dell'intestazione può essere bloccata per apparire nella parte superiore della finestra del browser quando scorri verso il basso oltre la prima sezione della pagina Indice (navigazione fissa).
• Puoi aggiungere dei link ai contenuti e alle sezioni di album nella navigazione. Cliccando sul link, la pagina scorre fino a quella sezione.

Per bloccare la navigazione, scegli Indice con navigazione a scorrimento: mostra su scorrimento nella sezione Navigazione sito di Stili sito. Imposta il colore di sfondo della navigazione con Colore di sfondo sotto Intestazione sito.

Ricorda:

• Il branding del sito non verrà visualizzato.
• Per visualizzare la navigazione bloccata, l'Indice deve avere più di una sezione.

Per creare link di navigazione per le sezioni contenuto e album, seleziona il tweak Espandi link indice homepage sotto Navigazione sito.

• Gli Indici delle sezioni galleria non vengono visualizzati nella navigazione. Utilizza invece dei Link di ancoraggio indice per dotarle di link.

Maggiori informazioni sulle Pagine indice

• Le annotazioni di Modifica potrebbero non apparire nelle sezioni vuote. Per modificare una pagina vuota, spostala fuori dall'Indice, aggiungi dei contenuti, quindi reinseriscila.
• Per modificare il colore dei Blocchi pulsante, dei Blocchi modulo e dei Blocchi citazione sulle immagini, utilizza i tweak di Sovrapposizione indice.
• I pulsanti Condividi vengono sempre visualizzati nelle sezioni album.

Navigazione categorie

I visitatori utilizzano i link di navigazione categorie per filtrare le pagine per post o per categorie di prodotto.

Aggiungi e definisci lo stile delle navigazioni per categoria nella parte superiore delle Pagine del blog e delle Pagine negozio, nella sezione Navigazione categorie di Stili sito. Le modifiche di stile si applicano a tutte le navigazioni per categoria del tuo sito.

Carrello

Un pulsante carrello è visibile nell'angolo in alto a destra di tutte le pagine dopo che un cliente ha aggiunto un prodotto al proprio carrello. Per definire lo stile del pulsante:

1. Aggiungi almeno un prodotto al carrello per far apparire il pulsante carrello.
2. Modifica i tweak Colore sfondo pulsante carrello e Colore tipo di carattere pulsante carrello sotto Intestazione sito.

Mobile

Con il responsive design integrato di Squarespace, il tuo sito si adatta per essere perfetto su qualsiasi dispositivo.

• La navigazione si comprime nel simbolo ☰ nell'angolo in alto a sinistra e può rimanere fissa mentre scorri su pagine indice impostate come homepage.
• Il titolo o logo del sito viene visualizzato nella parte superiore centrale, con un'altezza massima di 50 pixel.
• Il pulsante carrello viene visualizzato nell'angolo in basso a destra.
• Puoi disattivare gli stili per dispositivi mobili, ma ti consigliamo di non farlo.
• Le Gallerie a griglia mostrano due immagini per riga. Se hai un numero dispari di immagini, resterà uno spazio vuoto accanto all'ultima immagine.

Sui dispositivi mobili, le intestazioni visualizzabili non dovranno eccedere queste dimensioni:

• Intestazione 1 - 34 pixel
• Intestazione 2 - 26 pixel
• Intestazione 3 - 20 pixel

Sugli smartphone:

• Un link Torna all'inizio appare nella parte inferiore della pagina, sopra il piè di pagina.
• Le Gallerie nelle pagine indice non mostrano le descrizioni delle immagini.

Opzioni di lingua

All'interno di questa famiglia, i modelli Charlotte, Naomi e Pacific supportano due opzioni linguistiche:

• Scegli la lingua per il testo integrato nel tuo sito, ad esempio per i moduli di invio e per il messaggio di conferma ordine.
• Avvia un nuovo sito con un modello in francese, tedesco, italiano, portoghese o spagnolo.

Risoluzione dei problemi di Pacific

Di seguito, alcuni dei problemi più frequenti riscontrabili con questo modello. Alcuni sono dei bug o dei problemi già noti. Anche se supportiamo ancora la versione 7.0 di Squarespace, la correzione di bug o problemi per noi ha una bassa priorità, dato che stiamo concentrando le nostre energie sulla piattaforma più recente, la versione 7.1. Puoi spostare il tuo sito dalla versione 7.0 alla versione 7.1 utilizzando il tool di aggiornamento che mettiamo a disposizione.

Aggiungere link RSVP o a liste di nozze

Per aggiungere questi link:

• Crea un pulsante RSVP su una Pagina di layout utilizzando un Blocco modulo. Questo blocco raccoglie informazioni dai visitatori.
• Crea link a liste di nozze in una Pagina di layout con un Blocco galleria a griglia, utilizzando immagini con URL di click-through a diversi siti di liste di nozze.
• Puoi trovare un esempio di come appaiono in pratica nella pagina di anteprima live di Naomi.

Modificare le intestazioni e il testo nelle Pagine Indice

All'interno di un indice, la modalità di regolazione del colore e delle dimensioni dell'intestazione e del testo dipende dal tipo di pagina e dalla presenza o meno di un'immagine banner. Definisci questi aspetti in Stili sito.

Per le sezioni contenuto e album con immagini di sfondo:

• Modifica tipo di carattere e tipografia utilizzando i tweak della sezione Contenuto principale.
• Regola colore e dimensione utilizzando i tweak della sezione Sovrapposizione Indice.

Per le sezioni contenuto e album senza immagini di sfondo:

• Modifica tipo di carattere, tipografia, colore e dimensioni utilizzando i tweak della sezione Contenuto principale.

Per le Pagine galleria, utilizza la sezione Indice galleria.

Creare un banner non ritagliato con un indice

I banner di pagina appariranno sempre parzialmente ritagliati in qualsiasi modello, specialmente sui dispositivi mobili.

Con la Pagina Indice della famiglia Pacific, puoi creare l'aspetto di un banner di intestazione che non viene ritagliato:

1. Aggiungi una Pagina Indice.
2. Aggiungi una Pagina galleria all'indice.
3. Aggiungi la tua immagine banner preferita alla Pagina galleria. Non aggiungere più di un'immagine, poiché ciò influirà sul ritaglio.
4. Aggiungi testo ai campi Titolo immagine e Descrizione. Questo testo verrà visualizzato sull'immagine.
5. In Stili sito, scorri verso il basso fino a Galleria indice e seleziona Design: slideshow e Rapporto dimensionale slideshow: automatico.
6. Aggiungi il contenuto della pagina che desideri visualizzare sotto il banner come seconda pagina all'interno dell'Indice.

Utilizza questi tweak di Stili sito per modificare ulteriormente la modalità di visualizzazione delle immagini della Pagina galleria:

• Trasparente sulle immagini banner - Visualizza l'intestazione del sito sopra l'immagine.
• Colore sovrapposizione galleria - Regola il filtro colore sull'immagine.
• Titolo galleria e Descrizione galleria - Regola il tipo di carattere e il colore del testo delle immagini della galleria.

Ecco un esempio di come potrebbe apparire la pagina:

Le immagini della galleria sono più scure del normale nell'indice

La Pagina Indice potrebbe mostrare la sezione dell'indice della galleria con un filtro parzialmente opaco.

Per modificare o rimuovere questo colore di sovrapposizione, utilizza il tweak Colore sovrapposizione galleria nella sezione Galleria indice di Stili sito. Utilizza il cursore di opacità per modificare la trasparenza.

I colori di sovrapposizione della galleria non vengono visualizzati

Il colore di sovrapposizione della galleria appare quando c'è una descrizione o un titolo per quell'immagine. Se non ci sono descrizioni o titoli, il colore di sovrapposizione non verrà visualizzato.

Per informazioni su come aggiungere un titolo o una descrizione di un'immagine, visita Utilizzare le Pagine galleria.

Come posso definire lo stile del pre-piè di pagina?

Se il pre-piè di pagina non include alcun contenuto, non sarà visibile quando Stili sito è aperto. Per vederlo:

1. Esci da Stili sito.
2. Aggiungi contenuto al pre-piè di pagina.
3. Riapri Stili sito per continuare ad apportare modifiche.

Non riesco a trovare il pre-footer

Potresti aver impostato il Pre-piè di pagina su Contenuto: vuoto in Stili sito. In tal caso, il pre-piè di pagina è nascosto ai visitatori e non può essere modificato. Per rendere nuovamente visibile il pre-piè di pagina:

1. Apri il pannello Stili sito.
2. Scorri fino a Prefooter.
3. Utilizzando l'elenco a discesa, imposta Contenuto su Contenuto: Personalizzato.
4. Modifica lo stile, se necessario, ad esempio imposta i colori di sfondo, intestazione e testo.
5. Clicca su Save (Salva) in alto nel pannello.

Non visualizzo il bordo di separazione

Se non riesci a visualizzare i bordi di separazione tra le sezioni senza immagini banner:

1. Apri Stili sito mentre ti trovi sulla Pagina Indice.
2. Nella sezione Indice, seleziona Separatore di sezione: bordo.
3. Modifica il tweak Colore bordo. Potrebbe essere necessario regolare la trasparenza.

La Pagina Indice non scorre fino alla parte superiore

Quando la Pagina Indice è impostata come homepage, i link alla Pagina Indice nella navigazione ti portano alla parte superiore di ogni sezione della Pagina Indice. Per fare in modo che il link per la sezione superiore ti porti alla parte superiore del sito:

1. Vai alla Pagina Indice.
2. Apri il pannello Stili sito.
3. Nella sezione Intestazione sito, seleziona Trasparente sulle immagini banner.

In questo modo visualizzerai il titolo del sito e la navigazione sopra i banner del sito, inclusa la sezione superiore dell'Indice. Cliccando sul link per la sezione superiore dell'Indice (ad esempio, il link Home sul sito demo Pacific) adesso verrai indirizzato alla parte superiore del sito.

Se la Pagina Indice continua a non scorrere verso l'alto, assicurati che la prima pagina dell'Indice sia una Pagina di layout e non una Pagina galleria o album. Le Pagine galleria e album non vengono visualizzate nella navigazione della Pagina Indice.

La Pagina Indice ha colori di sfondo alternati

Due o più sezioni senza immagini banner in una Pagina Indice possono essere caratterizzate da colori di sfondo alternati.

Per disabilitare questa funzionalità, scegli il tweak Separatore di sezione: bordo nella sezione Indice di Stili sito. Questo aggiunge un bordo tra due sezioni consecutive senza immagini banner.

Viene visualizzata l'icona di navigazione anziché i link della navigazione principale

Per disattivare questa funzionalità, deseleziona Usa sempre navigazione sovrapposta nella sezione Navigazione sito di Stili sito. La navigazione verrà visualizzata di nuovo come testo.

Su alcuni browser stretti, come i dispositivi mobili, la navigazione si comprime sempre dietro un'icona ☰, anche se l'hai disabilitata. Questa caratteristica fa parte del design del modello.

Mancano i link di navigazione

Innanzitutto, verifica che le pagine desiderate siano nella sezione Navigazione principale del pannello Pagine.

Quindi, aprire il pannello Stili sito. Scorri fino alla sezione Navigazione nel sito e prova questi suggerimenti per la risoluzione dei problemi:

• Se una Pagina Indice è impostata come homepage, verifica che sia selezionata l'opzioneEspandi link indice homepage.
• Se la navigazione viene visualizzata come icona menu nell'angolo in alto a sinistra, deseleziona Usa sempre navigazione sovrapposta.
• Verifica che il colore del link non sia trasparente.

Le sezioni dell'indice galleria non creano dei collegamenti nella navigazione, ma aggiungono invece una sezione di contenuto proprio sopra la sezione dell'indice, oppure dei collegamenti di ancoraggio all'indice.

Il menu di navigazione viene visualizzato dietro il titolo del sito

Questo può accadere quando deselezioni per la prima volta Espandi link indice homepage in Stili sito. Salva le modifiche e aggiorna la pagina. La navigazione apparirà sotto il titolo del sito.

Il titolo del sito si ridimensiona dopo il caricamento

Ciò accade quando il titolo del sito è troppo grande per adattarsi al suo contenitore. Per risolvere questo problema:

• Clicca sul pulsante Tipo di carattere titolo del sito nella sezione Intestazione sito di Stili sito per assicurarti che la dimensione del tipo di carattere sia inferiore o pari a 72 pixel.
• Utilizza il tweak Larghezza contenitore titolo del sito per modificare le dimensioni del contenitore adattandole al titolo del sito.

Per un design ottimale, limita la dimensione del titolo del sito a un massimo di 72 pixel. Dimensioni maggiori causeranno distorsioni nel titolo del sito, indipendentemente dalla larghezza del contenitore.