Layout intelligenti

Presenta il tuo team o i vari progetti con set di immagini, testi e pulsanti in un layout personalizzabile.

Ultimo aggiornamento 24 dicembre 2024

Usa i layout automatici per presentare set di contenuti in colonne e righe, caroselli o slideshow. Quando si aggiungono nuovi contenuti a un layout automatico, questo viene riorganizzato automaticamente in base alle impostazioni scelte. Ciò rende i layout automatici ideali per i contenuti che si aggiornano regolarmente, come immagini di prodotti in vetrina, progetti recenti, membri del team attuali, testimonianze o clienti passati.

Questa guida si concentra sui layout intelligenti che combinano testo e immagini. Per un layout simile, che mostri principalmente le immagini, usa invece una sezione galleria. Per creare layout simili manualmente, utilizza una sezione a blocchi.

Accesso a questa funzionalità

Questa guida si riferisce alla versione 7.1. Per ottenere un effetto simile nella versione 7.0, crea colonne e righe con i blocchi.

Guarda un video

Aggiunta di una sezione di layout automatico

Per aggiungere una sezione di layout automatico che include testo e immagini:

  1. Fai clic su Modifica nella pagina, quindi fai clic su Aggiungi sezione.
  2. Clicca su Persone, Servizi o Testimonianze.
  3. Cerca i layout con l'icona i nell'angolo in alto a destra e clicca su quello desiderato.

Ricorda:

  • Per aggiungere un layout automatico che mostra le immagini, segui i nostri passaggi per aggiungere sezioni della galleria.
  • Se clicchi su una sezione senza l'icona i in alto a destra, aggiungerai una sezione di blocco e il resto dei passaggi di questa guida non sarà applicato. Le sezioni a blocchi possono avere layout simili, ma devono essere posizionate manualmente.
  • I layout intelligenti vengono visualizzati in altre categorie, ma Persone, Servizi e Testimonianze hanno il maggior numero di opzioni. Anche se l'argomento non corrisponde a quello che desideri per il tuo sito, sostituirai tutto il contenuto dimostrativo con il tuo.

Imposta gli elementi visualizzati

Per scegliere come vengono visualizzati la sezione e gli elementi:

  1. Passa il mouse sopra la sezione e fai clic su Modifica contenuto.
  2. Nella scheda Elementi, attiva o disattiva i comandi per ciascuna opzione.

Per la sezione nel suo complesso, usa questi comandi:

  • Titolo: visualizza un titolo di testo nella parte superiore della sezione
  • Pulsante: visualizza un collegamento a pulsante nella parte inferiore della sezione

Per modificare la visualizzazione degli elementi, utilizza questi comandi:

  • Mostra immagine: visualizza un'immagine con ogni elemento
  • Mostra titolo: visualizza il testo del titolo con ogni elemento
  • Mostra corpo: visualizza il corpo del testo con ogni elemento
  • Mostra pulsante: visualizza un collegamento a pulsante con ogni elemento

Ricorda:

  • Queste opzioni si applicano a tutti gli elementi di quella sezione. Non è possibile avere impostazioni diverse per i singoli elementi in una sezione.
  • La disattivazione di un interruttore nasconde l'opzione corrispondente nella scheda del contenuto. Ad esempio, se si disattiva l'interruttore Mostra titolo, il campo Titolo non si visualizza nell'editor degli elementi.

Aggiungere o modificare elementi

Ogni layout automatico include elementi demo. Puoi sostituire il contenuto di questi elementi con il tuo o eliminarli e aggiungere nuovi elementi per iniziare da zero.

Per aggiungere o modificare elementi:

  1. Passa il mouse sopra la sezione e fai clic su Modifica contenuto, quindi fai clic su Contenuto.
  2. Nell'elenco Elementi, fai clic su un elemento per modificarne il contenuto oppure su Aggiungi per aggiungerne uno nuovo.
  3. Per riorganizzare un elemento, fai clic e trascina l'icona a destra del titolo dell'elemento.
  4. Per eliminare un elemento, fai clic sull'icona del cestino a destra dell'elemento.

Ogni elemento può avere un'immagine, un titolo, una descrizione e un pulsante. Se una di queste opzioni non appare quando fai clic sull'elemento, verifica che esso sia attivato nella scheda Elementi.

Se non dai un titolo a un articolo, nell'editor ne viene visualizzato uno predefinito in base al suo ordine nel Layout intelligente, come "Articolo 1" o "Articolo 2". I titoli predefiniti non sono visibili ai tuoi visitatori. Per dare un titolo all'articolo, clicca su di esso e inserisci un titolo nel campo Titolo.

Suggerimento

 aggiungerai manualmente tutti gli elementi e i relativi componenti a un layout automatico. Se desideri visualizzare gli elementi di una raccolta esistente sul tuo sito, utilizza i Blocchi riepilogo.

Modificare il titolo e il pulsante della sezione

Nella scheda Contenuto, puoi anche modificare il titolo e il pulsante per la sezione nel suo complesso. Il titolo viene visualizzato nella parte superiore della sezione e il pulsante nella parte inferiore. Per aggiungere e modificare questi elementi: 

  1. Nella scheda elemento, assicurati che i pulsanti di attivazione Titolo e Pulsante siano attivati.
  2. Nella scheda Contenuto, clicca su Titolo per aggiungere testo e modificare l'allineamento.
  3. Fai clic su Pulsante per modificare il testo del pulsante, impostare un collegamento e modificare le dimensioni e l'allineamento del pulsante.

Per nascondere uno di questi elementi, disattivalo nella scheda Elementi.

Modificare il design del layout automatico

Per modificare il layout della sezione:

  1. Passa il mouse sopra la sezione e fai clic su Modifica contenuto, quindi fai clic su Design.
  2. Fai clic sul menu a discesa in alto per modificare il layout.

È possibile scegliere tra tre layout:

  • Elenco semplice: visualizza gli elementi e i relativi componenti in fila da sinistra a destra. A seconda delle impostazioni e del numero di elementi, il layout potrebbe creare più righe al di sotto della prima.
  • Slideshow banner: visualizza un elemento alla volta con componenti che si sovrappongono all'immagine, che fungono da sfondo per la sezione. I visitatori cliccano sui comandi per scorrere tra gli elementi.
  • Carosello: visualizza gli elementi e i relativi componenti in fila da sinistra a destra in una giostra rotante. I visitatori cliccano sui comandi per scorrere tra altri elementi.

Ogni layout ha impostazioni proprie per una maggiore personalizzazione. Ad esempio, con i layout composti da elenchi semplici e caroselli, puoi ritagliare le immagini a forma di cerchio. Clicca su Stile per ulteriori impostazioni, come la modifica delle dimensioni del testo o l'aggiunta di uno sfondo per ciascun elemento. Clicca su Spaziatura e dimensioni per le impostazioni di padding e spaziatura, ad esempio l'impostazione della larghezza del contenuto, la modifica dello spazio tra gli elementi o la regolazione del posizionamento delle immagini. Le opzioni disponibili nelle schede Stile e Spaziatura e dimensioni dipendono dal layout.

Se si modificano i layout, la sezione salverà le impostazioni sul layout selezionato in precedenza, in modo da poter sempre tornare indietro se lo desideri.

Nota

non è possibile passare da queste opzioni a un layout di galleria. Puoi invece creare una sezione galleria.

Dimensioni testo

Dopo aver selezionato il layout della sezione elenco, scorri verso il basso nella scheda Design e clicca su Stile per scegliere la dimensione del tipo di carattere. Puoi scegliere tra dimensioni predefinite che modificano contemporaneamente titolo e descrizione oppure cliccare su ... per impostare separatamente dimensioni personalizzate per i titoli e le descrizioni degli articoli. A seconda del layout e delle impostazioni correnti, potresti visualizzare altre opzioni.

Altezza sezione

L'altezza di una sezione di layout intelligente è data dall'elemento che contiene più testo, per cui potresti vedere una spaziatura extra sopra o sotto gli elementi con meno testo nei layout di tipo banner slideshow e carosello. Nel semplice layout elenco, sarà lo stesso per l'altezza delle righe.

Si consiglia di mantenere una quantità di testo simile in tutti gli elementi per garantire il massimo controllo sull'altezza e sul padding della sezione.

Divisore di sezione

Per aggiungere un indicatore visivo tra la parte inferiore del layout intelligente e la sezione successiva, attivare un divisore di sezione:

  1. Passa il mouse sul layout intelligente e clicca su Modifica sezione.
  2. In Formato, attiva l'opzione Divisore .
  3. Imposta la forma, il tratto, il colore, lo spessore dei divisori e altri parametri.

Per saperne di più sui divisori di sezione, visita Sezioni di pagina.

Progettazione automatica del layout su dispositivi mobili

Alcune opzioni di progettazione possono variare in base al computer e al cellulare. I layout Slideshow banner e Carosello, ad esempio, possono mostrare delle frecce di navigazione in modo che i visitatori possano cliccare tra gli elementi. Se disattivi le frecce di navigazione, i visitatori su un computer cliccheranno e trascineranno per scorrere gli elementi, ma le frecce verranno visualizzate sempre sui dispositivi mobili per garantire che i visitatori possano vedere tutti gli elementi.

Modificare i colori del layout intelligente

Per modificare i colori all'interno della sezione layout intelligente, apri Stili sito, quindi clicca su Colori. Seleziona il tema cromatico della sezione, quindi utilizza i tweak disponibili per il tipo di sezione dell'elenco in questione: Semplice, Carosello o Banner.

Definisci lo stile del tipo di carattere e dei pulsanti dei layout intelligenti

I layout intelligenti seguono le impostazioni globali dello stile dei tipi di carattere e dei pulsanti negli stili sito.

Tipo di carattere

Il testo con layout intelligente segue le impostazioni globali dei tipi di carattere del tuo sito nel pannello Tipi di carattere degli stili sito. I titoli degli articoli seguono Intestazioni e il corpo del testo dell'articolo segue Paragrafi. Se utilizzi un titolo di sezione per il layout intelligente, puoi creare uno stile indipendente dalle altre impostazioni di carattere cliccando su Assegna stili, quindi su Titolo in Sezione elenco.

La dimensione del testo viene definita nelle impostazioni del layout intelligente.

Pulsanti

Definisci lo stile del tipo di carattere, il colore e la forma dei pulsanti nel pannello Pulsanti degli stili sito. Sia i pulsanti degli articoli che i pulsanti di sezione seguono le impostazioni dello stile Principale. Considera che, per garantire un aspetto coerente, queste impostazioni si applicano alla maggior parte dei pulsanti del sito.

Per impostare le dimensioni dei pulsanti del layout intelligente:

  1. Passa il mouse sopra la sezione e clicca su Modifica contenuto
  2. Alla voce Design scegli Stile.
  3. In Dimensione testo clicca su ....
  4. Usa il cursore del pulsante dell'articolo per modificare le dimensioni.

Layout intelligenti e sezioni galleria

I layout intelligenti e le sezioni galleria organizzano automaticamente i contenuti in layout personalizzabili, ma presentano funzionalità diverse. Non è possibile trasformare un layout intelligente in una sezione galleria o viceversa. Ecco le differenze fondamentali:

  • I layout intelligenti possono mostrare combinazioni diverse di immagini, maggiori quantità di testo e link pulsanti. Sono ideali per mostrare membri del team, clienti passati o progetti recenti.
  • Le sezioni galleria evidenziano solo le immagini e sono pertanto più adatte per portfolio di artisti o siti fotografici. Puoi aggiungere testo alle immagini della sezione galleria, ma solo brevi didascalie.

Per saperne di più sulle differenze tra le due sezioni e individuare quella che risponde meglio alle tue esigenze, consulta la tabella seguente.

Funzionalità Layout intelligenti Sezioni della galleria
Ritaglio automatico delle immagini
  • Layout Elenco semplice
  • Layout Carosello
  • No
Slideshow con riproduzione automatica
  • No
  • Layout Slideshow: semplice
  • Layout Slideshow: completo
Pulsanti
  • No
Visualizza solo testo
  • No
Collegamenti URL immagine
  • No
Layout
  • Elenco semplice
  • Slideshow banner
  • Carosello
  • Griglia: semplice, a strisce, bacheca
  • Slideshow: semplice, completo, pellicola
Lightbox
  • No
  • Layout a griglia
Sovrapposizione testo sull'immagine
  • Layout Slideshow banner
  • No
Titolo sezione
  • No
Video
  • No
  • No
Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.