Stili e funzionalità della famiglia di modelli Brine.
Con i modelli della famiglia Brine, puoi creare una presenza online professionale per qualsiasi brand o società. Personalizza intestazioni, piè di pagina, inset contenuti e stili per dispositivi mobili per fare in modo che il tuo sito sia sempre in evidenza. Aggiungi banner a schermo intero a qualsiasi pagina o impilali nell'Indice. Lo scorrimento Parallax opzionale sposta i banner più lentamente del contenuto della pagina, creando un'illusione di profondità e immersione.
Questa guida descrive le funzionalità e le opzioni di design per la Brine family. Consulta un elenco dei modelli di Brine.
Definisci lo stile del tuo sito nel pannello Stili sito. In questa guida, i tweak di stile e la sezione in cui appaiono nel pannello Stili sito sono evidenziati in grassetto.
Pagine supportate
Brine supporta questi tipi di pagina:
- Pagine Album
- Pagine del blog - Griglia/elenco standard
- Pagine di copertina
- Pagine eventi
- Pagine galleria - Standard
- Pagine indice - A colonna
- Pagine di layout
- Pagine del negozio - Avanzate
Intestazioni
I visitatori utilizzano l'intestazione superiore per navigare nel tuo sito. In Brine, l'intestazione è suddivisa in sezione superiore e sezione inferiore.
- Aggiungi elementi come il titolo o il logo del sito e i link di navigazione alle intestazioni superiore e inferiore nella sezione Intestazione: layout di Stili sito.
- L'intestazione inferiore supporta un'immagine di sfondo e un'area introduttiva in cui puoi aggiungere i tuoi contenuti.
Definire lo stile delle intestazioni
Definisci lo stile dell'intestazione superiore con questi tweak Intestazione: superiore:
- Imposta l'altezza con Padding.
- Imposta il colore con Sfondo.
L'intestazione inferiore visualizza i banner di pagina come immagini o video di sfondo. Se non sono presenti banner, il colore di sfondo è lo stesso della pagina (impostato utilizzando il tweak Colore sotto Principale).
Per modificare l'altezza dell'intestazione inferiore:
- Tutte le pagine - Modifica il Padding sotto Intestazione: inferiore e il tweak Padding introduzione sotto Principale.
- Singole pagine: aumenta l'altezza aggiungendo interruzioni di riga supplementari all'area introduttiva.
- Pagine Indice - Modifica l'altezza della sezione Indice superiore.
Aggiungere e definire lo stile degli elementi dell'intestazione
- Titolo del sito o logo ("branding")
- Tagline
- Link di navigazione
- Icone social integrate
- Barra di ricerca
- Carrello
- Link Accedi / Il mio account
Scegli dove visualizzarli o nasconderli nella sezione Intestazione: layout di Stili sito. Ad esempio, scegli Posizione branding: in alto al centro per aggiungere il titolo o il logo del sito al centro dell'intestazione superiore.
Definiscine lo stile utilizzando i tweak in ciascuna delle loro sezioni Intestazione. Ad esempio, vai a Intestazione: navigazione principale per scegliere il tipo di carattere e il colore dei link.
- Per gli elementi nell'intestazione inferiore, imposta i colori (di Sovrapposizione) in modo che siano visibili sui banner.
- Decidi se gli elementi nella stessa area (ad esempio, in basso al centro) saranno impilati con i tweak del layout in Intestazione: superiore e Intestazione: inferiore.
- Impostane gli stili per dispositivi mobili separati per assicurarti che abbiano un aspetto adatto ai dispositivi mobili.
Maggiori informazioni sulle intestazioni
Tieni a mente questi suggerimenti:
- Per ottenere risultati ottimali, posiziona ciascun elemento in un'area diversa dell'intestazione. Gli elementi potrebbero sovrapporsi se non c'è abbastanza spazio.
- Alcuni tweak non saranno visualizzati finché gli elementi che influenzano non vengono aggiunti al sito.
- Se nell'intestazione superiore non sono presenti elementi, questa non sarà visualizzata.
- Per maggiori suggerimenti, visita Creare l'intestazione di un sito.
Link di navigazione
Brine ha tre aree di navigazione.
Link Navigazione principale e Navigazione secondaria:
- Possono essere visualizzati nell'intestazione superiore o inferiore.
- Il loro stile può essere definito utilizzando i tweak Intestazione: navigazione principale e Intestazione: navigazione secondaria. Ad esempio, scegli Stile: pulsante per impostare lo stile dei link di navigazione principale o secondaria come pulsanti.
Link Navigazione nel piè di pagina:
- Viene visualizzato nel piè di pagina del sito.
- Il loro stile può essere definito con i tweak Piè di pagina: navigazione.
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.
In Brine, i banner:
- Vengono visualizzati per Pagine di layout e pagine di raccolta.
- Diventano sfondi per l'intestazione inferiore.
- Vengono visualizzati a schermo intero, eccetto che con il layout Design: vincolato.
- Possono scorrere più lentamente rispetto al resto della pagina con lo scorrimento Parallax.
- Non vengono visualizzati per elementi delle raccolte (quali post del blog, articoli ed eventi singoli).
Puoi impilare più banner in un Indice.
Definire lo stile dei banner
Utilizza queste opzioni per definire lo stile dei banner:
- Aggiungi un filtro colore con il tweak Colore di sovrapposizione sotto Principale: sovrapposizione.
- Aggiungi Blocchi di testo e di altro tipo, ad esempio dei Blocchi pulsante, nell'area introduttiva.
- Per modificare l'altezza, modifica l'area introduttiva e aggiungi interruzioni di riga.
- Scegli se i banner scorreranno più lentamente rispetto al resto della pagina con il tweak Abilita parallax sotto Sito: caricamento.
- In Stili sito, i tweak (Sovrapposizione) influiscono sugli elementi che vengono visualizzati sopra le immagini banner, quali testo e link di navigazione.
Ritagliare e centrare
- Se l'effetto Parallax scrolling è abilitato, utilizza il tweak Ritaglio intelligente Parallax sotto Sito: caricamento per assicurarti che i banner vengano ritagliati al minimo.
- Se le immagini vengono ritagliate in un modo che non ti aspetti, consulta i nostri suggerimenti sulla risoluzione dei problemi relativi al ritaglio.
- Scegli come centrare le immagini banner modificandone i punti focali. Per garantire che l'immagine rimanga visibile durante lo scorrimento, imposta il punto focale vicino al centro dell'immagine.
Maggiori informazioni sui banner
Ricorda:
- La prima immagine in una Pagina galleria diventa automaticamente l'immagine banner, se un banner è presente. Puoi sostituirla o eliminarla in Impostazioni pagina.
- Crea l'effetto di un banner slideshow della pagina mediante un Indice con una galleria a slideshow.
- Per informazioni generali, visita Aggiungere immagini banner.
Aree introduttive
L'area introduttiva nell'intestazione inferiore è una sezione dell'intestazione specifica della pagina che puoi modificare con testo, immagini e altri contenuti. È un ottimo modo per personalizzare la parte superiore delle singole pagine.
Le aree introduttive sono visualizzate sopra i banner delle pagine e seguono l'inset contenuti. Sono disponibili su tutte le pagine ad eccezione delle Pagine di layout senza un banner e delle Pagine indice.
Per modificare l'introduzione:
- Passa il mouse sull'area sopra il contenuto della pagina e clicca su Modifica.
- Aggiungi testo e altri contenuti con i blocchi.
L'area introduttiva può visualizzare padding extra mentre si modifica il sito. Per vedere come appare la spaziatura introduttiva sul tuo sito live, salva le modifiche e visualizza la pagina in modalità anteprima.
Piè di pagina
Personalizza il piè di pagina in tutto il sito per aiutare i visitatori a ottenere le risposte di cui hanno bisogno. Il piè di pagina di Brine dispone di:
- Tre aree dei blocchi che puoi personalizzare con i tuoi contenuti.
- Un'area che visualizza le tue informazioni aziendali.
- Link Navigazione nel piè di pagina.
- Due opzioni di layout (usa il tweak Layout sotto Piè di pagina).
Definisci lo stile del tipo di carattere e dei colori con i tweak Piè di pagina. Per nascondere il piè di pagina, deseleziona Mostra piè di pagina.
Layout: a colonne
Un'area dei blocchi, le informazioni aziendali e la navigazione sono visualizzate in orizzontale, con un'area dei blocchi sopra e sotto. Nel piè di pagina, i menu a discesa e le pagine indice non creano menu a discesa, ma piuttosto colonne. I titoli delle Pagine indice e dei menu a discesa sono visualizzati come intestazioni non link, con i link alle pagine secondarie sotto.
Layout: impilato
Le informazioni aziendali e la navigazione sono impilate in verticale, con aree dei blocchi sopra, in mezzo e sotto. Il titolo del menu a discesa e quello della pagina indice non vengono visualizzati e i link alle relative pagine secondarie vengono visualizzati in orizzontale.
Pagine del blog
La famiglia di modelli Brine utilizza una pagina di blog a griglia/elenco standard. Per saperne di più sulle caratteristiche uniche e le opzioni di stile di questo tipo di blog, visita le pagine del blog Griglia/elenco standard nella versione 7.0.
Pagine indice
Le Pagine indice di Brine trasformano il contenuto da pagine multiple a sezioni impilate, in modo da mettere in evidenza immagini e informazioni diverse in un'unica posizione.
- Le sezioni di contenuto sono ideali per visualizzare testo, pulsanti e altri blocchi.
- Le sezioni Indice galleria mostrano le immagini in un formato a griglia o slideshow.
Sezioni di contenuto
Le sezioni di contenuto sono tratte da Pagine di layout. Dopo aver aggiunto sezioni di contenuto, personalizzale con i blocchi.
- Inset contenuti (facoltativo) crea spazi bianchi aggiuntivi attorno ad alcuni blocchi.
- Se la sezione superiore è una sezione di contenuto, viene visualizzata nell'intestazione superiore.
Per impostare l'altezza minima per alcune o tutte le sezioni, utilizza Applica altezza minima in Indice: pagina:
- Impostala solo per la prima sezione, pagine con banner, tutte le pagine o nessuna pagina.
- Utilizza Padding e Padding (Pagine sovrapposte) per modificare l'altezza di tutte le sezioni.
- Se il contenuto della pagina è più lungo rispetto all'altezza minima, la sezione si estende per adattare il contenuto, incluso il padding.
- Per modificare l'altezza di una sola sezione, aggiungi interruzioni di riga al contenuto della pagina per allungarla.
Aggiungi immagini in evidenza delle pagine per inserire immagini o video banner nelle sezioni.
- I banner possono presentare lo scorrimento Parallax.
- Se non sono presenti banner, il colore di sfondo è lo stesso della pagina (impostato utilizzando il tweak Colore sotto Principale).
Indice delle sezioni galleria
Le sezioni dell'indice di una galleria sono costituite dalle Pagina galleria. Dopo aver aggiunto sezioni della galleria, puoi aggiungere immagini e video.
Nella sezione Indice: galleria di Stili sito:
- Su Layout, scegli se tutte le sezioni dell'indice saranno visualizzate nel formato slideshow o a griglia.
- Per modificare la spaziatura o creare effetti a schermo intero, deseleziona Aggiungi uno spazio sui lati e utilizza i tweak Spaziatura.
- Imposta la forma delle immagini con Rapporto dimensionale.
- Se la sezione nella parte superiore è una galleria, usa Sovrapposizione Intestazione su Prima Galleria Indice per scegliere se visualizzarla dietro l'intestazione inferiore.
- Aggiungi un filtro di colore alle immagini con Sovrapposizione immagine.
- Stile al passaggio del mouse imposta cosa accade al passaggio del mouse su un'immagine.
Le sezioni relative all'indice della galleria non presentano il Parallax scrolling. Nel caso fosse attivato, esse sembrano scorrere sulle sezioni di contenuto che si muovono più lentamente.
I video nella sezione indice di una galleria mostrano un'immagine in evidenza. Se il tuo video non ha un'immagine in evidenza, l'indice mostra un riquadro nero con una linea in mezzo. Per risolvere questo problema, aggiungi un'immagine in evidenza al tuo video.
Navigazione dell'indice
Per aiutare i visitatori a esplorare il tuo Indice:
- Usa il tweak Indice: indicatore di scorrimento per aggiungere una freccia, una linea o un testo alla prima sezione per incoraggiarli a scorrere verso il basso (solo sezioni di contenuto).
- Aggiungi punti o linee di navigazione con il tweak Stile sotto Indice: navigazione. Cliccare su un punto o una linea condurrà alla sezione corrispondente.
Aggiungere spazio sotto la prima sezione
Se il tuo sito dispone di un bordo, puoi aggiungere una linea di spaziatura corrispondente sotto la prima sezione.
- Seleziona il tweak Bordo a specchio sotto la prima pagina sotto Indice: pagina o il tweak Bordo a specchio sotto la prima galleria sotto Indice: galleria, a seconda del tipo di sezione superiore.
- La seconda sezione deve essere una sezione di contenuto senza banner.
- Il colore della spaziatura è lo stesso della pagina. Per risultati ottimali, abbinalo al colore del bordo.
Maggiori informazioni sugli Indici
Ricorda:
- Le pagine indice non presentano aree introduttive e le aree introduttive per le pagine secondarie non vengono visualizzate.
- Nelle navigazioni nell'intestazione, le Pagine indice creano un link singolo.
- Nei Piè di pagina, le Pagine indice visualizzano tutti i link alle loro pagine secondarie.
- Puoi utilizzare un Indice per creare un banner slideshow o immagini di sfondo a schermo intero.
- Consulta i nostri suggerimenti su come aggiungere altri tipi di contenuto.
- Visita Utilizzare le Pagine indice per maggiori informazioni.
Struttura e stile
Utilizza queste opzioni per modificare l'aspetto e lo stile del tuo sito.
Caricamento Ajax in corso
Ajax è uno speciale metodo per il caricamento dei siti che rende le pagine con contenuti pesanti, quali le Pagine del blog, molto più leggere e consultabili rapidamente. Per creare un'esperienza di navigazione il più possibile semplice, consigliamo di mantenere il caricamento Ajax abilitato.
- Abilita o disabilita il caricamento Ajax con il tweak Abilita caricamento Ajax sotto Sito: caricamento.
- Definisci lo stile o nascondi la barra di caricamento che viene visualizzata mentre le pagine si caricano con gli altri tweak Sito: caricamento.
- Occasionalmente, Ajax può entrare in conflitto con codice personalizzato, link di ancoraggio e Analytics.
- Per ulteriori informazioni, consulta caricamento Ajax.
Bordo
Aggiungi e definisci lo stile di una cornice del sito attorno all'intestazione, all'area di contenuto principale e al piè di pagina con i tweak Sito: bordo. Le Pagine di copertina non mostrano il bordo.
Tipo di carattere
Definisci lo stile dei font sul tuo sito con queste opzioni di Stili sito:
- Tipi di carattere del sito - Contenuto: tipi di carattere e Contenuti: colori
- Testo sui banner - Tutti i tweak (Sovrapposizione)
- Sezioni Indice galleria - Indice: galleria
- Elementi dell'intestazione - Nelle relative sezioni Intestazione (ad esempio, Intestazione: branding)
- Pagine dei prodotti - Prodotti
- Pagine del blog - Blog: tipografia e colori
I link di testo sono sottolineati.
Scorrimento Parallax
Parallax è un effetto speciale di scorrimento in cui le immagini o i video di sfondo si spostano più lentamente rispetto al contenuto della pagina. Brine presenta lo scorrimento parallax per i propri banner.
Pulsanti Condividi
È possibile aggiungere pulsanti Condividi sulla maggior parte delle pagine. I visitatori utilizzano questi pulsanti per condividere i tuoi contenuti sui loro profili social:
- Pagine del blog e negozio - Pulsanti Condividi avanzati
- Pagine Album ed Eventi - Link di condivisione classici
Barra laterale
Le barre laterali non sono supportate in Brine. Al contrario, è possibile aggiungete contenuti extra al piè di pagina, all'area introduttiva e alle pagine di layout.
Larghezza del sito
Imposta la larghezza con i tweak in Sito:
- Imposta la larghezza dell'area del contenuto con Larghezza.
- Il layout scelto con Design imposta la visualizzazione dell'area del contenuto.
- Il bordo del sito influisce anche sul layout.
Negli esempi che seguono, la Larghezza è impostata a 880 pixel. Il colore di sfondo dell'area del contenuto è impostato nella sezione Principale di Stili sito.
Design: larghezza massima
Il contenuto viene visualizzato in base alla larghezza del browser, meno il Padding laterale. I banner vengono visualizzati a schermo intero.
Design: sfondo intero
Il contenuto viene visualizzato in base alla Larghezza, meno il Padding laterale. I banner vengono visualizzati a schermo intero.
Design: larghezza vincolata
Il colore di sfondo nella sezione del Sito viene visualizzato fuori dall'area del contenuto. I banner vengono visualizzati nell'area del contenuto.
Contenuto inserito
Utilizza l'inset contenuti per creare layout accattivanti. Se organizzati in una singola colonna, alcuni blocchi, ad es. i Blocchi di testo e citazione, sono più stretti di altri contenuti della pagina, ad es. i Blocchi immagine.
- Ciò influisce su tutte le aree in cui puoi aggiungere blocchi, tra cui aree introduttive e il piè di pagina.
- Imposta la larghezza con Inset contenuti sotto Principale.
- Per rimuovere l'inset, imposta Inset contenuti su 0.
- Per ulteriori informazioni, visita Inset contenuti.
Colori di sfondo
Utilizza i seguenti tweak per impostare i colori di sfondo per il tuo sito:
- Area del contenuto principale - Colore in Principale
- Margini laterali - Sfondo in Sito
- Bordo - Colore in Sito: bordo
- Intestazione superiore - Sfondo in Intestazione: superiore
- Intestazione inferiore - Si abbina all'area del contenuto principale o visualizza un banner
- Piè di pagina - Colore di sfondo in Piè di pagina
- Sezioni dell'indice - Si abbina all'area del contenuto principale o visualizza un banner
- Dietro immagini banner trasparenti - Colore di sovrapposizione in Principale: sovrapposizione, anche se questo colore è impostato come trasparente
Suggerimento: puoi utilizzare un Indice per creare l'effetto dell'immagine di sfondo di una pagina.
Questo esempio mostra molte delle aree di sfondo:
Dispositivo mobile
Con il responsive design integrato di Squarespace, il tuo sito si adatta per essere perfetto su qualsiasi dispositivo. In Brine, puoi personalizzare la visualizzazione nei dispositivi mobili e nei browser stretti.
Scegli la larghezza del browser alla quale il tuo sito passa alla vista dispositivi mobili con il tweak Punto di interruzione su dispositivi mobili sotto Dispositivi mobili. L'impostazione predefinita è 640 pixel.
Barre di navigazione
Gli elementi dell'intestazione per dispositivi mobili sono visualizzati nelle barre di navigazione superiore o inferiore.
- Per aggiungere una barra superiore o inferiore, sposta un elemento dell'intestazione al suo interno. Ad esempio, vai alla sezione Dispositivi mobili: branding di Stili sito e scegli Posizione: in alto a sinistra per aggiungere una barra superiore.
- Scegli se la barra superiore sarà fissata in alto o scorrerà verso l'alto con la pagina con il tweak Parte superiore fissa su mobile sotto Dispositivi mobili: superiore.
- La barra inferiore è sempre fissa.
- Imposta i colori di sfondo con i tweak Dispositivi mobili: superiore e Dispositivi mobili: inferiore.
Elementi dell'intestazione
Gli elementi dell'intestazione del sito sono visualizzati nelle barre di navigazione e presentano stili per dispositivi mobili separati.
- Definisci lo stile in ciascuna delle sezioni Dispositivi mobili di Stili sito. Ad esempio, definisci lo stile del titolo o del logo del sito con i tweak Dispositivi mobili: branding.
- La navigazione si comprime in un'icona ☰. Quando si tocca l'icona ☰ vengono visualizzate sia la navigazione primaria che quella secondaria.
- Imposta il colore di sfondo della navigazione con il tweak Colore menu sotto Menu dispositivi mobili: generale.
- I tweak Pulsante Chiudi in Menu dispositivi mobili: generale definiscono lo stile della X che chiude il menu di navigazione.
- Le icone social e le tagline non vengono visualizzate sui dispositivi mobili.
- Quando viene toccata, l'icona di ricerca apre una sovrapposizione con una barra di ricerca. Lo sfondo della sovrapposizione segue il colore di sfondo del sito.
Sebbene abbiano stili separati, lo stesso elemento viene visualizzato sia sul computer che sui dispositivi mobili. Ad esempio:
- Puoi - Dare al titolo del sito su dispositivi mobili un colore e un tipo di carattere diversi.
- Puoi - Visualizzare la barra di ricerca su dispositivi mobili ma nasconderla su un computer.
- Non puoi - Visualizzare il titolo di un sito su un computer e un logo su dispositivi mobili.
Maggiori informazioni sui dispositivi mobili
Ricorda:
- Le Pagine del negozio presentano opzioni di stile per dispositivi mobili.
- La Navigazione dell'indice scompare su dispositivi mobili.
- Lo scorrimento Parallax funziona su dispositivi mobili.
- I video banner a volte non vengono visualizzati su dispositivi mobili, a seconda della versione del browser e della velocità di connessione a disposizione degli utenti. Imposta un'immagine di fallback su dispositivi mobili da visualizzare quando non è possibile caricare il banner video.
- Le intestazioni lunghe sono unite con un trattino e si interrompono alla riga successiva.
- A differenza di alcuni modelli, puoi disabilitare gli stili per dispositivi mobili.
- Consulta i nostri suggerimenti sulla risoluzione dei problemi relativi ai banner e al ritaglio delle immagini di sfondo su dispositivi mobili.
- Consulta i nostri suggerimenti generali sul comportamento dei siti su dispositivi mobili.
Modelli della famiglia Brine
Tutti i modelli nella Brine family condividono le stesse opzioni di stile e funzionalità. Puoi sfogliare i modelli Brine negozio di modelli della versione 7.0.
La Brine family include:
- Aria
- Basil
- Blend
- Brine
- Burke
- Cacao
- Clay
- Modello personalizzato (sospeso)
- Ethan
- Fairfield
- Feed
- Foster
- Greenwich
- Hatch
- Heights
- Hunter
- Hyde
- Impact
- Jaunt
- Juke
- Keene
- Kin
- Lincoln (sospeso)
- Maple
- Margot
- Marta
- Mentor
- Mercer
- Miller
- Mojave
- Moksha
- Motto
- Nueva
- Pedro
- Polaris
- Pursuit
- Rally
- Rover
- Royce
- Sofia
- Sonny
- Sonora
- Stella
- Thorne
- Vow
- Wav
- West
Opzioni di lingua
Brine supporta due opzioni di lingua:
- Scegli la lingua per il testo integrato del tuo sito, ad esempio per i moduli di invio e il messaggio di conferma ordine.
- Avvia un nuovo sito con un modello in francese, tedesco, italiano, portoghese o spagnolo.