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

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.

brine-topbottom.png

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

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

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 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 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 il modo in cui le immagine banner saranno centrate modificandone i punti focali.

Maggiori informazioni sui banner

Ricorda:

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.

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 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. 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 del blog

La famiglia di modelli Brine utilizza una Pagina del blog con layout a griglia/elenco standard. Per maggiori informazioni sulle caratteristiche uniche e le opzioni di stile di questo tipo di blog, visita Pagine del blog con layout a griglia/elenco standard.

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 (impostato utilizzando il tweak Colore sotto Principale).

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

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.

brine-index-nav.png

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.

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

brine-border.png

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

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.

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.

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

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

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.

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

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

Opzioni di lingua

Brine supporta due opzioni di lingua:

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