La versatile famiglia dei modelli Bedford (Anya, Bedford, Bryant, Hayden) è adatta a tutti i tipi 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 funzionalità e le opzioni di design della famiglia Bedford. I tweak di Stili sito sono evidenziati in grassetto e si collegano all'elenco completo dei tweak di Bedford per aiutarti a navigare nel pannello.

Suggerimento: Le pagine di Anteprima live di Anya, Bedford, Bryant e Hayden mostrano i siti reali di alcuni clienti che utilizzano questi modelli.

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 dei prodotti - 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 nella sezione 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. Le cartelle non diventano pulsanti. 
• Se nella finestra del browser non c'è spazio a sufficienza per visualizzare i link di navigazione nell'intestazione, apparirà invece il simbolo ☰. 

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 prodotti

Ricorda:

• Puoi selezionare Trasparente su immagini banner nell'Intestazione 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 regolare 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 dei prodotti aggiungendo immagini in miniatura o URL video nelle Impostazioni pagina.

Aggiungi un testo in sovrapposizione nel campo Descrizione pagina della scheda Generale. È possibile formattare il testo come intestazioni e pulsanti. Il testo di Titolo pagine 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.
• Slideshow banners have a fixed height:
• Desktop - 600 pixel. Se l'intestazione è trasparente su immagini banner, l'altezza dell'immagine fissa si estende fino 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, clicca su un'immagine e aggiungi il testo nel 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:

• Bold text formats as a header.
• 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. 

Banner di post del blog ed eventi

L'Anteprima 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 elemento dei metadati (scegli con il tweak Priorità metadati) vengono visualizzati sopra l'immagine del banner. 

Aggiungere un filtro colorato

Aggiungi un filtro colorato a tutte le immagini e video del banner con Colore di sovrapposizione del banner nella Sezione banner. 

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

Utilizza i tweak del Piè di pagina per definire lo stile del suo contenuto:

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

Navigazione nella barra laterale

Bedford crea barre laterali di navigazione sulle pagine delle cartelle e degli indici e barre laterali di navigazione delle categorie nelle Pagine dei prodotti.

• Utilizza i tweak della Barra laterale per regolare 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 una cartella viene visualizzata come un link all'interno della navigazione nella barra laterale. La barra laterale viene visualizzata su tutte le Pagine di layout nella cartella.
• Le pagine di un Indice visualizzano la navigazione nella barra laterale solo quando si visita l'URL diretto della singola pagina. 
• Nelle Pagine dei prodotti, la navigazione nella barra laterale visualizza dei link alle diverse categorie del prodotto. Cliccando su un link si escludono tutti i prodotti tranne quelli che rientrano in quella categoria.

Sfondo e font

Utilizza i tweak di Contenuto principale per definire lo stile della tua area contenuto principale:

• Imposta il colore di sfondo con Sfondo pagina.
• Regola stile, dimensione e colore del testo con i tweak di Testo pagina e Intestazione. 

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

• Gli estratti possono contenere solo testo. Il testo "Scopri di più" e la freccia ripropongono i tweak di Tipo di carattere testo pagina e Colore link pagina.
• Quando visualizzi un singolo post del blog attraverso l'URL diretto, l'immagine di anteprima del post si presenta sotto forma di banner.
• I singoli post mostrano sempre tag, URL sorgente, commenti, condivisioni e Mi piace. La navigazione per i post precedenti e successivi viene visualizzata sotto i commenti.

Definire lo stile delle Pagine del blog nella sezione Blog:

• Utilizza Priorità metadati per impostare la data, le categorie o il nome dell'autore sopra il contenuto del post.
• Deseleziona Nascondi piè di pagina voci elenco per visualizzare tag, URL sorgente, commenti, condivisioni e Mi piace sotto il post.
• Per centrare i titoli dei post e i metadati, seleziona Centra titolo e metadati post.
• Visualizza o nascondi gli autori del blog con Nascondi autore 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 barre laterali del blog nella sezione Barra laterale, 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 mostra il titolo del post del blog, un elemento dei metadati (scegli con il tweak Priorità metadati) e un link Visualizza post.
• L'immagine in miniatura viene visualizzata dietro il testo. Se il post non ha alcuna immagine in miniatura, 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.

Dispositivo 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 dei prodotti, delle pagine di una cartella 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.
• È possibile 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 di Tipo di carattere navigazione piè di pagina e di Colore navigazione piè di pagina della sezione Piè di pagina. Se questi tweak non sono visibili, aggiungi temporaneamente delle pagine alla tua Navigazione 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.