Stile e funzionalità della famiglia di modelli Bedford.

La versatile famiglia dei modelli Bedford (Anya, Bedford, Bryant, Hayden) è adatta a tutti le tipologie di sito, dalle attività no-profit alle inserzioni immobiliari. Gli speciali banner e pulsanti personalizzabili, la barra laterale di navigazione e la Pagina indice a scorrimento permettono di focalizzare l'attenzione sui dettagli dei tuoi prodotti, della tua missione o dei tuoi eventi.

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

Tipi di pagine supportati

Bedford supporta questi tipi di pagine:

• 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. Nella famiglia di modelli Bedford, l'intestazione include il titolo o logo del sito e la navigazione principale. Le tagline non vengono visualizzate. L'intestazione è fissa nelle pagine indice.

Definisci lo stile del titolo o del logo del sito con questi tweak Intestazione sito:

• Utilizza Trasparente su immagini banner per scegliere se visualizzare il branding e la navigazione in sovrapposizione sui banner di pagina o sul colore di sfondo dell'intestazione.
• Ridimensiona il logo con Larghezza contenitore logo. L'altezza massima è fissata a circa 100 pixel e il logo non potrà essere ulteriormente ingrandito.

Utilizza i tweak di Navigazione sito per cambiare le impostazioni di visualizzazione della navigazione principale.

• Se Attiva pulsante navigazione è selezionato, l'ultima pagina nella Navigazione principale viene visualizzata come un pulsante. Cambia il suo aspetto con i tweak di Pulsante navigazione. I menu a discesa non diventano pulsanti.
• Se nella finestra del browser non c'è spazio a sufficienza per visualizzare i link di navigazione nell'intestazione, apparirà invece l'icona ☰ (nota anche come icona menu o icona hamburger).

Banner

Aggiungi immagini e video per banner con smarginatura completa nella parte superiore delle tue pagine, quindi sovrapponi a essi intestazioni, testo e pulsanti personalizzabili. Puoi aggiungere immagini e video per banner a:

• Pagine di layout
• Pagine Album
• Pagine del blog e post
• Pagine Eventi ed eventi individuali
• Pagine negozio

Ricorda:

• Puoi selezionare Trasparente su immagini banner nella sezione Intestazione sito di Stili sito per visualizzare il contenuto dell'intestazione sopra il banner.
• È possibile aggiungere dei banner slideshow alle Pagine di layout e alle Pagine del blog.
• È possibile impilare più banner nelle Pagine indice.
• Per tutti i banner, utilizza i tweak della Sezione banner per modificare i tipi di carattere, i colori e gli stili dei pulsanti e del testo in sovrapposizione.

Banner di pagina

Crea un'immagine o un video per banner nella parte superiore delle Pagine di layout, delle Pagine album, delle Pagine del blog, delle Pagine eventi o delle Pagine del negozio aggiungendo immagini in evidenza o URL video nelle Impostazioni pagina.

Aggiungi un testo in sovrapposizione nel campo Descrizione pagina della scheda Generale. Tieni presente che solo gli utenti con autorizzazioni di Proprietario o Amministratore di un sito possono aggiungere una Descrizione pagina. Puoi formattare il testo come intestazioni e pulsanti. Il testo del Titolo pagina non viene visualizzato.

Banner slideshow

Crea un banner slideshow nella parte superiore di una Pagina di layout aggiungendo un Blocco galleria slideshow come primo blocco della pagina.

• Il Blocco galleria non verrà visualizzato nella pagina.
• I banner slideshow sostituiscono i banner di pagina.
• I video aggiunti al Blocco galleria appaiono nel banner, ma non vengono riprodotti automaticamente. I video includono l'audio e mostrano il testo del banner.
• Per risultati ottimali, seleziona Ritaglia automaticamente immagini nella scheda Design dell'editor di blocchi.
• Se il tuo banner ha un testo in sovrapposizione, seleziona Mostra titolo e descrizione nella scheda Design. Il titolo non sarà visualizzato.
• I banner slideshow hanno un'altezza fissa:
• Desktop - 600 pixel. Se selezioni Trasparente su immagini banner nella sezione Intestazione sito di Stili sito, l'altezza dell'immagine fissa si estende a 700 pixel.
• Dispositivi mobili - 300 pixel. I dispositivi più alti di 640 pixel mostrano l'altezza del banner per computer desktop.
• Le Pagine del blog creano anche dei banner slideshow dai post in primo piano.

Per aggiungere un testo in sovrapposizione, passa il mouse su un'immagine e clicca su , quindi aggiungi il testo al campo Descrizione. Se hai inserito un link a una galleria esistente, aggiorna le descrizioni nella Pagina galleria.

• È possibile formattare il testo come intestazioni e pulsanti.
• Se il testo di un banner slideshow è troppo lungo per rientrare nell'altezza fissa, il testo di descrizione non in grassetto non verrà visualizzato. Il testo di descrizione in grassetto sarà invece ritagliato.

Testo e pulsanti dei banner

Per i banner di pagina e i banner slideshow:

• Il testo in grassetto viene formattato come intestazione.
• Il testo normale si formatta come corpo del testo.
• I link nell'ultima riga si formattano come pulsanti. Il link non può includere né del testo in grassetto, né altre righe sottostanti.
• Estendi l'altezza del banner di pagina aggiungendo spazi vuoti.

Suggerimento: dopo aver creato un link pulsante, puoi modificare il testo del pulsante direttamente dall'editor di pagine. Tieni presente che, se elimini tutto il testo, anche il link scomparirà e dovrai aggiungerlo nuovamente nelle impostazioni di pagina.

Banner di post del blog ed eventi

L'immagine in evidenza degli elementi della raccolta viene visualizzata nella parte superiore dei post del blog e dei singoli eventi. Questi banner hanno un'altezza fissa.

• Eventi - Nessun testo viene visualizzato nel banner.
• Post del blog - Il titolo del post e un tipo di metadati (scegli con il tweak Priorità metadati) vengono visualizzati sopra l'immagine banner.

Aggiungere un filtro colorato

Aggiungi un filtro colore a tutte le immagini o i video banner con Colore di sovrapposizione del banner sotto Sezione banner di Stili sito.

• Il colore viene visualizzato nell'area banner durante il caricamento dell'immagine banner, anche se il tweak ètrasparente.
• Il colore appare sui dispositivi mobili quando non è possibile caricare il banner video e non è stata impostata alcuna immagine di fallback su dispositivi mobili.

Maggiori informazioni sui banner

• Non utilizzare le descrizioni delle pagine per i contenuti SEO, poiché tali contenuti saranno visibili sulla pagina. Visita Aumentare la visibilità del tuo sito nei motori di ricerca per maggiori informazioni sull'ottimizzazione del tuo sito.
• Per assistenza nel ritaglio delle immagini, visita Risoluzione dei problemi di ritaglio.
• Per informazioni generali, visita Aggiungere immagini banner.

Piè di pagina

Bedford include aree contenuti piè di pagina e pre-piè di pagina, personalizzabili con i blocchi.

• Il piè di pagina e il pre-piè di pagina potrebbero includere automaticamente del contenuto, come un Blocco link social o un Blocco di testo. Elimina o modifica questi blocchi per sostituirli con i tuoi contenuti.
• I collegamenti testuali nel piè di pagina e pre-piè di pagina sono sottolineati.
• Le modifiche apportate al piè di pagina vengono visualizzate in tutto il sito.

Definisci lo stile del contenuto del piè di pagina con questi tweak Piè di pagina:

• Definisci lo stile della Navigazione piè di pagina con i tweak di Navigazione piè di pagina.
• Utilizza il tweak Navigazione centrale/Informazioni per allineare la Navigazione piè di pagina e le informazioni di contatto.
• Utilizza i tweak di Informazioni sito per definire lo stile di numero di telefono, e-mail e sede fisica nelle tue Impostazioni delle informazioni aziendali.
• Seleziona Nascondi informazioni sito per rimuovere tutte le informazioni di contatto.

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

Navigazione nella barra laterale

Bedford crea barre laterali di navigazione nelle Pagine negozio e nelle pagine di menu a discesa, siti per i membri e Indici.

• Utilizza i tweak della Barra laterale per modificare i tipi di carattere e i colori, nascondere i titoli della barra laterale o nascondere completamente la navigazione nella barra laterale.
• La navigazione nella barra laterale non supporta i blocchi.
• Ogni pagina aggiunta a un menu a discesa o un sito per i membri viene visualizzata come collegamento nella barra laterale. La barra laterale viene visualizzata su tutte le pagine di layout nel menu a discesa o nel sito per i membri.
• Le pagine di un Indice visualizzano la navigazione nella barra laterale solo quando si visita l'URL diretto della singola pagina.
• Nelle Pagine del negozio, la navigazione nella barra laterale mostra dei link alle diverse categorie del prodotto. Cliccando su un link si escludono tutti i prodotti tranne quelli che rientrano in quella categoria.

Sfondo

Utilizza questi tweak per impostare i colori di sfondo del tuo sito:

• Area del contenuto principale - Sfondo pagina sotto Contenuto principale
• Intestazione - Colore di sfondo dell'intestazione sotto Intestazione sito
• Pre-piè di pagina - Sfondo del pre-piè di pagina sotto Pre-piè di pagina
• Piè di pagina - Sfondo del piè di pagina sotto Piè di pagina

Tipo di carattere

Regola lo stile, le dimensioni e il colore del testo con i tweak Testo della pagina e Intestazione in Contenuto principale.

L'intestazione, le navigazioni nella barra laterale e i banner di pagina del sito hanno opzioni proprie per i tipi di carattere e il colore.

Pagine indice

Le pagine indice di Bedford trasformano il contenuto proveniente da più pagine in sezioni impilate, permettendoti di mettere in evidenza immagini e informazioni diverse in un'unica posizione. Le sezioni di contenuto sono tratte dalle pagine di layout e rappresentano una valida opzione per aggiungere testo, pulsanti e altri blocchi.

• Aggiungi delle immagini in evidenza delle pagine per creare immagini o video del banner o per creare un banner slideshow.
• Impila più banner creando sezioni con immagini banner ma prive di contenuto di pagina. Per le nuove pagine, elimina il Blocco di testo predefinito. Durante l'accesso al sito, vedrai comunque uno spazio bianco segnaposto.
• Definisci lo stile dei tipi di carattere e dei colori della Pagina indice con gli stessi tweak utilizzati nelle altre pagine. Non esistono tweak specifici per le Pagine indice.
• Il titolo del sito e la Navigazione principale restano in una posizione fissa dopo che hai fatto scorrere la prima pagina. Utilizza il tweak Colore sfondo intestazione per regolare il colore di sfondo dell'intestazione fissa.
• Le Pagine indice supportano i Link di ancoraggio all'indice. Quando i visitatori cliccano su questi link, vengono trasferiti a una specifica sezione della tua Pagina indice. Per vedere l'effetto nella pratica, clicca sul pulsante "Visualizza il nostro lavoro" nel contenuto della demo di Hayden.
• Quando visiti l'URL diretto di una pagina inserita in un indice, tutte le pagine di quell'indice saranno visibili in una Navigazione nella barra laterale.

Pagine del blog

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

Nella pagina di destinazione:

• Sotto i post con estratti viene visualizzato un link "Scopri di più". Il testo e la freccia di questo link ripropongono i tweak di stile tipo di carattere Testo pagina e Colore link pagina.
• Il contenuto completo dei singoli post viene visualizzato sotto il titolo per i post senza estratti.

Sui singoli post:

• L'immagine in evidenza viene visualizzata come banner quando visualizzi un singolo post del blog dal suo URL diretto.
• I tag, l'URL di origine, i commenti, le condivisioni e i "Mi piace" vengono sempre visualizzati sotto il post.
• Le categorie vengono sempre visualizzate sopra il post.
• La navigazione per i post precedenti e successivi viene visualizzata sotto i commenti.

Definisci lo stile delle Pagine del blog nella sezione Blog di Stili sito:

• Usa Priorità metadati per selezionare i metadati (dati, categorie o nome dell'autore) visualizzati sopra il contenuto del post nella pagina di destinazione.
• Deseleziona Nascondi piè di pagina voci elenco per visualizzare tag, l'URL di origine, commenti, condivisioni e i "Mi piace" sotto il post.
• Per centrare i titoli e i metadati dei post nella pagina di destinazione, seleziona Centra titolo e metadati post.
• Visualizza o nascondi gli autori del blog con Nascondi autore post disponibile sia nella pagina di destinazione che nei singoli post. Questo tweak non sarà visibile se Priorità metadati: autore è selezionata.

Barra laterale

Ogni Pagina del blog ha una barra laterale personalizzabile. Anche tutti i post di quel blog mostrano la barra laterale.

Attiva le barre laterali deselezionando Nascondi barra laterale del blog nella sezione Barra laterale di Stili sito, quindi aggiungi contenuti con i blocchi.

Banner slideshow

I cinque post in primo piano più recenti creano un banner slideshow sulla pagina di destinazione.

• Ogni slide visualizza il titolo del post del blog, un tipo di metadati (scegli con il tweak Priorità metadati) e un link Visualizza post.
• L'immagine in evidenza viene visualizzata dietro il testo. Se il post non ha un'immagine in evidenza, il testo viene visualizzato sopra il colore di sovrapposizione del banner.
• Utilizza il tweak Comandi banner slideshow per controllare gli elementi della navigazione sul banner slideshow del tuo blog.
• Se nessuno dei tuoi post è contrassegnato come In primo piano, il banner di pagina viene invece visualizzato sulla Pagina del blog.

Mobile

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

• Il contenuto della barra laterale del blog viene visualizzato sotto il contenuto principale nelle pagine del blog e nei post del blog.
• Le barre laterali di navigazione sono nascoste per impostazione predefinita. Tocca + nell'angolo in alto a destra per visualizzare le barre laterali di navigazione delle Pagine negozio, delle pagine di un menu a discesa e delle sezioni della pagina indice sulle quali i visitatori arrivano tramite un link diretto.
• I banner slideshow hanno un'altezza predefinita di 300 pixel. Se il testo presente su un banner slideshow è troppo lungo, il testo della descrizione viene nascosto.
• Puoi disattivare gli stili per dispositivi mobili, ma ti consigliamo di non farlo.

Un link Torna all'inizio è visibile sul fondo della pagina.

• Il link ripropone i tweak Tipo di carattere navigazione piè di pagina e Colore link navigazione piè di pagina nella sezione Piè di pagina di Stili sito. Se questi tweak non sono visibili, aggiungi temporaneamente delle pagine alla tua Navigazione nel piè di pagina.
• Il link non viene visualizzato nella Vista dispositivo.

Sugli smartphone:

• La navigazione si comprime nel simbolo ☰ in alto a destra. Il simbolo ☰ viene sempre visualizzato sui dispositivi mobili, anche se la navigazione principale è vuota.
• Il colore di sfondo del menu in sovrapposizione è lo stesso dell'intestazione.
• I piè di pagina che mostrano informazioni aziendali visualizzano un link e-mail, invece di un indirizzo e-mail completo.

Opzioni di lingua

Bedford supporta 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 Bedford

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.

Una Pagina di layout nel mio Indice si sovrappone ad altri contenuti

Se una Pagina di layout all'interno di un Indice presenta lo slug URL /header, il sito considererà l'intera pagina come l'intestazione dell'indice. Questo può causare la sovrapposizione di più pagine e creare problemi in fase di modifica del contenuto della pagina.

Per risolvere il problema, rinomina lo slug URL della pagina in modo da sostituire /header, tenendo presente i nostri suggerimenti per la formattazione e per gli slug URL riservati.

Un link in un banner non si trasforma in un pulsante

Solo i link nell'ultima riga della descrizione vengono formattati come pulsanti. Se il link non viene visualizzato sotto forma di pulsante, controlla il testo in sovrapposizione nella descrizione della pagina o nella descrizione dell'immagine. Assicurati che il link non sia in grassetto e che non sia seguito da interruzioni di riga.

Se il link non è in grassetto e non ci sono righe sottostanti, prova questo metodo di risoluzione dei problemi:

1. Apri la descrizione della pagina o la descrizione dell'immagine per quel banner.
2. Copia tutto il testo nel campo della descrizione e premi Ctrl + X (Command + X su un Mac).
3. Premi Ctrl + Maiusc + V (Comando + Maiusc + V su Mac) per incollare senza formattazione.
4. Aggiungi nuovamente il link nell'ultima riga. Assicurati che non ci siano interruzioni di testo o riga al di sotto di esso.
5. Salva e aggiorna la pagina.

Il testo di descrizione del banner non viene visualizzato sullo smartphone

Nella vista per dispositivi mobili, i banner slideshow hanno un'altezza impostata di 300 pixel. Se il testo presente sul banner slideshow è troppo lungo, il testo della descrizione viene nascosto.

L'immagine del banner non viene visualizzata

Per i banner di pagina:

1. Apri il pannello Pagine.
2. Passa il mouse sulla tua pagina e clicca su .
3. Assicurati che nella scheda Media sia caricato un URL di immagini o video in evidenza.
4. Se hai aggiunto un URL video, scorri verso il basso nella scheda Media per assicurarti che sia impostata un'immagine di fallback. Questa immagine appare quando il video del banner non può essere caricato.
5. Clicca su Salva e aggiorna la pagina.

Per i banner slideshow:

1. Passa il mouse sull'anteprima della pagina e clicca su Modifica per aprire l'editor di pagine.
2. Assicurati che il Blocco galleria slideshow sia il primo blocco della pagina.
3. Passa il mouse sopra il Blocco galleria a slideshow e clicca su Modifica per aprire il relativo editor.
4. Assicurati che le immagini o i video siano caricati al suo interno.
5. Clicca su Salva e aggiorna la pagina.

Per i banner slideshow del blog, verifica che per ogni post in primo piano sia prevista un'immagine in evidenza nelle impostazioni.

Le Pagine galleria non supportano le immagini banner.

I banner appaiono più corti su un altro computer

Il responsive design di Squarespace considera sia le dimensioni della finestra del browser sia la risoluzione dello schermo. Sui dispositivi a bassa risoluzione (1366 x 768 e inferiori), i banner appaiono più corti per adattarsi meglio alla risoluzione dello schermo.

Non riesco ad accedere a una pagina di un Indice

Nel pannello Pagine, cliccando sulla pagina di un indice arriverai alla posizione di quella pagina nella Pagina indice e ti verrà mostrato l'aspetto della pagina nel contesto. In questo modo, potrai organizzare l'Indice in modo efficiente.

Per vedere come appare la pagina al di fuori dell'Indice, vai all'URL diretto della pagina mentre sei disconnesso oppure mentre navighi in modalità incognito.

Non riesco a visualizzare il Blocco newsletter

Quando aggiungi un Blocco newsletter a una Pagina di layout, lo sfondo predefinito del blocco è impostato su trasparente con testo bianco. Se anche la pagina è bianca, il testo risulterà invisibile.

Nella sezione Blocco newsletter di Stili sito puoi risolvere il problema impostando Stile newsletter su Chiaro o regolando la trasparenza con il tweak Colore di sfondo.

Quando scorro verso il basso su un dispositivo mobile appare un colore

Quando scorri verso la parte inferiore di un sito web su iPhone o iPad, l'effetto "elastico" di Apple mostra un'area vuota alla fine del sito.

Per la famiglia Bedford, il colore di quell'area è determinato dal colore del piè di pagina. Per modificarlo:

1. Apri il pannello Stili sito.
2. Scorri fino alla sezione Piè di pagina e modifica il tweak Sfondo piè di pagina.

Per garantire la coerenza fra i colori, ti consigliamo di sceglierne uno non trasparente, in quanto quest'area apparirà sempre del tutto opaca. Ad esempio, se il piè di pagina è impostato su un rosso perlopiù trasparente, apparirà rosa chiaro, mentre l'area "elastico" sottostante mostrerà un color rosso vivo.

Come posso ricreare il pulsante "Visualizza il nostro lavoro"?

Il pulsante "Visualizza il nostro lavoro" nel contenuto dimostrativo del modello Hayden è un link di ancoraggio alla Pagina indice.

Il link di navigazione non viene visualizzato sotto forma di pulsante

Prima di risolvere i problemi, considera quanto segue:

• Solo l'ultima pagina nella Navigazione principale può essere visualizzata sotto forma di pulsante.
• I menu a discesa non si formattano come pulsanti.

Se il pulsante di navigazione non viene visualizzato:

1. Apri il pannello Stili sito.
2. Scorri verso il basso fino alla sezione Navigazione del sito.
3. Assicurati che il tweak Attiva pulsante navigazione sia selezionato.
4. Salva e aggiorna la pagina.

L'icona del menu di navigazione viene visualizzata su un computer

Il simbolo ☰ compare quando nella finestra del browser non c'è abbastanza spazio per visualizzare tutti i link di navigazione. Clicca sull'icona del menu per visualizzare una sovrapposizione della navigazione.

L'icona del menu e la sovrapposizione della navigazione ti aiutano a ottimizzare il sito per i dispositivi mobili, a renderlo reattivo e più facile da navigare. Non è possibile rimuovere questa funzionalità. Tuttavia, esistono alcune accortezze che puoi adottare per ridurre la larghezza e visualizzare tutti i link:

• Riduci il numero di elementi nella navigazione. Un metodo consiste nell'utilizzare i menu a discesa per creare menu a discesa.
• Riduci le dimensioni del tipo di carattere e la spaziatura della navigazione utilizzando il tweak Tipo di carattere link di nav. nella sezione Navigazione del sito di Stili sito.
• Riduci la larghezza del titolo del sito o del contenitore logo nella sezione Intestazione sito di Stili sito.

Il mio menu dispositivi mobili non si apre

Il menu per dispositivi mobili non si apre se hai aggiunto un banner video alla homepage utilizzando un URL non valido o un codice di incorporamento. Per modificare l'URL del video:

1. Apri il pannello Pagine.
2. Passa il mouse sul titolo della homepage nel pannello sinistro e clicca su .
3. Clicca sulla scheda Media e poi sulla scheda Video.
4. Verifica che il campo URL video contenga un URL valido.

Il banner di pagina è troppo corto o ritaglia l'immagine

Aumenta l'altezza di un banner di pagina premendo il tasto Invio sopra o sotto la descrizione della tua pagina e aggiungendo spazi vuoti. In questo modo, potrai risolvere i problemi di ritaglio ed espandere le dimensioni complessive del banner sulla pagina per ottimizzarne l'effetto.

Per aggiungere spazi vuoti sotto un pulsante, premi Maiusc + Invio per ogni riga che desideri aggiungere.

Banner a colonna in un Indice

Per impilare le immagini banner senza spazi bianchi a separarle, crea delle pagine di layout dotate di immagini in evidenza ma prive di contenuti di pagina. Così facendo, per ciascuna pagina verranno visualizzate solo le immagini banner e il testo in sovrapposizione. In tutte le pagine di layout, assicurati di eliminare il blocco di testo predefinito per non visualizzare uno spazio vuoto fra un banner e l'altro.