Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.
Famiglia di modelli Brine

Con i modelli della famiglia Brine, puoi creare una presenza online professionale per qualsiasi brand o società. Personalizza intestazionipiè 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 riquadro Stili sito. In questa guida, i tweak di stile sono in grassetto e collegano all'elenco di tutti i tweak di Brine facilitare la navigazione del riquadro.

Suggerimento:  la pagina di anteprima di Brine mostra il sito come gli utenti reali utilizzando questo modello.

Pagine supportate

Brine supporta questi tipi di pagina:

Intestazioni

I visitatori utilizzano l'intestazione superiore per navigare nel tuo sito. In Brine, l'intestazione è suddivisa in sezione superiore e sezione inferiore.

brine-topbottom.png

Definire lo stile delle intestazioni

Definisci lo stile dell'intestazione superiore in Intestazione: superiore:

  • Imposta l'altezza con Padding.
  • Imposta il colore con Sfondo.

L'intestazione inferiore visualizza banner di pagina come immagini o video di sfondo. Se non sono presenti banner, il colore di sfondo è lo stesso della pagina (Colore in Principale).

Per modificare l'altezza dell'intestazione inferiore:

Aggiungere e definire lo stile degli elementi dell'intestazione

Puoi aggiungere uno qualsiasi dei seguenti elementi a una delle sezioni dell'intestazione:

Scegli dove visualizzarle o nasconderle in Intestazione: layout. Ad esempio, scegli Posizione logo: in alto al centro per aggiungere il titolo o il logo del sito al centro dell'intestazione superiore.

Definiscine lo stile in ciascuna delle loro sezioni Intestazione. Ad esempio, vai a Intestazione: navigazione principale per scegliere il font e il colore dei link.

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:

Link Navigazione nel piè di pagina:

Banner

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

In Brine, i banner:

Puoi impilare più banner in un Indice.

brine-banner.png

Definire lo stile dei banner

Utilizza queste opzioni per definire lo stile dei banner:

  • Aggiungi un filtro di colore con Colore di sovrapposizione in 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 Abilita Parallax in 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

Maggiori informazioni sui banner

Ricorda:

Aree introduttive

L'area introduttiva nell'intestazione inferiore è un'area 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.

brine-intro-area.png

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:

Definisci lo stile del tipo di carattere e dei colori nelle sezioni Piè di pagina. Per modificare 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. Cartelle e Pagine indice creano delle colonne. I titoli delle Pagine indice e delle cartelle sono visualizzati come intestazioni non link, con i link alle pagine secondarie sotto.

brine-footer-columns.png

Layout: impilato

Le informazioni aziendali e la navigazione sono impilate in verticale, con aree dei blocchi sopra, in mezzo e sotto. I titoli delle cartelle e della Pagina indice non sono visualizzati e i link alle relative pagine secondarie sono visualizzati in orizzontale.

brine-footer-stacked.png

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.

brine-index-sections-scroll.gif

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 miniature delle pagine per inserire immagini o video banner alle sezioni.

  • I banner possono presentare lo scorrimento Parallax.
  • Se non sono presenti banner, il colore di sfondo è lo stesso della pagina (Colore in Principale).

Le sezioni della galleria dell'Indice sono costituite da Pagine galleria. Dopo aver aggiunto sezioni della galleria, puoi aggiungere immagini e video.

In Indice: galleria:

  • Scegli se tutte le sezioni della galleria saranno visualizzate come slideshow o griglie con Layout.
  • 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 nella parte superiore è presente una sezione galleria, utilizza Intestazione sovrapposizione sulla Prima galleria indice per scegliere se sarà visualizzata 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 della galleria non presentano lo scorrimento Parallax. Nel caso fosse attivato, esse sembrano scorrere sulle sezioni di contenuto che si muovono più lentamente.

Navigazione dell'indice

Per aiutare i visitatori a esplorare il tuo Indice:

  • Utilizza 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 Stile in Indice: navigazione. Cliccare su un punto o una linea li condurrà alla sezione corrispondente.

brine-index-nav.png

Aggiungere spazio sotto la prima sezione

Se il tuo sito ha un bordo, puoi aggiungere una linea di spaziatura corrispondente sotto la prima sezione.

  • Seleziona Bordo a specchio sotto la prima pagina in Indice: pagina o Bordo a specchio sotto la prima galleria in 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 (Colore in Principale). Per risultati ottimali, abbinalo al colore del bordo.

brine-mirror-site-border.png

Maggiori informazioni sugli Indici

Ricorda:

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 Abilita caricamento Ajax in Sito: caricamento.
  • Definisci lo stile o nascondi la barra di caricamento che viene visualizzata mentre le pagine si caricano con gli altri tweak in Sito: caricamento.
  • Occasionalmente, Ajax può entrare in conflitto con codice personalizzato, link di ancoraggio e Analytics.
  • Per ulteriore assistenza, 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.

brine-border.png

Tipo di carattere

Definisci lo stile dei font sul tuo sito con queste opzioni di Stili sito:

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 dei prodotti - Pulsanti di condivisione avanzati
  • Pagine Album ed Eventi - Link di condivisione classici

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 in Principale.

Design: larghezza massima

Il contenuto viene visualizzato in base alla larghezza del browser, meno il Padding laterale. I banner vengono visualizzati a schermo intero.

brine-full-width.png

Design: sfondo intero

Il contenuto viene visualizzato in base alla Larghezza, meno il Padding laterale. I banner vengono visualizzati a schermo intero.

brine-full-background.png

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.

brine-constrained-width.png

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.

brine-content-inset.png

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:

brine-background-colors.png

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 visualizzazione su dispositivi mobili con Punto di interruzione su dispositivi mobili in Dispositivi mobili. L'impostazione predefinita è 640 pixel.

Gli elementi dell'intestazione per dispositivi mobili sono visualizzati nelle barre di navigazione superiore o inferiore.

brine-mobilebars.png

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. Ad esempio, definisci lo stile del titolo e del logo del sito in Dispositivi mobili: branding.
  • La navigazione si comprime in un ☰.
  • Imposta il colore di sfondo della navigazione con Colore menu in Dispositivi mobili: generale.
  • Chiudendo i tweak Pulsante in Menu dispositivi mobili: generale viene definito 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 un titolo del sito su un computer e un logo su dispositivi mobili.

Maggiori informazioni sui dispositivi mobili

Ricorda:

Template della famiglia Brine

Tutti i modelli nella Brine family condividono le stesse opzioni di stile e funzionalità. Puoi sfogliare i modelli Brine nel negozio dei modelli.

La Brine family include:

  • Aria
  • Basil
  • Blend
  • Brine
  • Burke
  • Cacao
  • Clay
  • Modello personalizzato (per siti costruiti utilizzando il builder per siti personalizzato)
  • 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

Esempi di siti di clienti

Per visualizzare esempi di siti di clienti reali, clicca sui link seguenti e scorri fino a Clienti che utilizzano questo modello. Poiché tutti i modelli di questa famiglia offrono le stesse funzionalità, puoi utilizzarli come fonte di ispirazione anche se il tuo modello non è presente nell'elenco seguente.

Opzioni di lingua

Brine supporta due opzioni di lingua:

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 98 su 185
Famiglia di modelli Brine