Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.
Panoramica dei Blocchi immagine

I Blocchi immagine aggiungono immagini individuali a pagine e post. Puoi caricare le tue immagini o acquistare una licenza per fotografie di archivio dalle nostre integrazioni Unsplash e Getty Images.

Sono disponibili sei layout di Blocchi Immagine e il loro design e funzionalità sono uguali in tutti i template.

Nota: Gli stili di didascalia per il layout Inline (Allineato) sono determinati dal template.
Nota: Altri metodi per aggiungere immagini al tuo sito sono banner, immagini di sfondo, Blocchi Galleria e Pagine Galleria.

Guarda un video

Blocchi Immagine a confronto

Ecco una panoramica delle differenze tra sei layout di Blocco Immagine e come definirne lo stile.

Poster

Il Blocco Immagine Poster mostra il testo sull'immagine.

poster.jpg

Card

Il Blocco Immagine Card (Cartolina) allinea il testo a sinistra o destra di un'immagine.

card.jpg

Overlap

Il Blocco Immagine Overlap (Sovrapposto) mostra un'immagine su un lato con il testo sull'altro, parzialmente sovrapposto all'immagine. Aggiungi un colore di sfondo per evidenziare il titolo. 

overlap.jpg

Collage

Il Blocco Immagine Collage mostra un'immagine su un lato e il testo su una scheda di sfondo, in parte sovrapposto all'immagine.

collage.jpg

Stack (Impilato)

Il Blocco Immagine Stack (a Colonna) mostra un'immagine con il testo sotto, e un colore di sfondo opzionale.

stack.jpg

Inline

Il Blocco Immagine Inline (in linea) mostra un'immagine semplice con una didascalia opzionale (il nostro classico Blocco Immagine).

inline.jpg

Mix and match

È possibile combinare diversi stili di Blocchi Immagine su una pagina o un post.

  • Ogni layout prevede delle proprie opzioni di stile.
  • Le opzioni di stile del layout sono universali per il sito. Ad esempio, ogni Blocco Immagine Poster sul tuo sito avrà lo stesso stile.

mixed-layout.jpg

Differenze tra didascalie, titoli e sottotitoli

  • Il layout In linea supporta una didascalia di base. Questa è ideale per visualizzare il nome di un artista, citare un mezzo di comunicazione o mostrare il titolo dell'immagine. Scopri le opzioni di stile delle didascalie, che sono impostate automaticamente.
Nota: le didascalie delle immagini non vengono visualizzate se il Blocco immagine è vuoto. 
  • Tutti gli altri layout offrono campi per titoli e sottotitoli. I titoli e i sottotitoli offrono più opzioni di stile e aggiungono enfasi al testo, creando maggiore interazione tra l'immagine e le parole. Per maggiori informazioni, visita le guide per i layout PosterCard (Cartolina), Overlap (Sovrapposto), CollageStack (a Colonna).

Gli stili di layout offrono diversi vantaggi: 

Inline Tutti gli altri layout
  • Un campo per didascalia
  • Gli stili del testo sono impostati in automaticamente (solitamente seguono il corpo del testo)
  • Visualizzazione al passaggio del mouse
  • La didascalia diventerà automaticamente alt text
  • Due campi di testo: uno per il titolo e uno per il sottotitolo
  • Definisci lo stile del testo nel riquadro Stili sito
  • Diverse opzioni di visualizzazione in base al layout
  • Alt Text aggiunto manualmente

Step 1 - Aggiungi un Blocco Immagine

Per aggiungere un Blocco Immagine:

  1. Apri l'editor di una Pagina o di un Post.
  2. Clicca su un Punto di Inserimento o sull'icona +.
  3. Sotto Image Layouts (Layout Immagine), seleziona Poster, Card (Cartolina), Overlap (Sovrapposto), Collage o Stack (a Colonna). Per il layout Inline (In linea), seleziona Image (Immagine) nella sezione Basic (Base).

Image_Blocks.jpg

Step 2 - Aggiungi un'immagine

Suggerimento: Ti consigliamo di limitare la dimensione dell'immagine a un massimo di 500 KB per ottenere risultati migliori. Per ulteriori informazioni, visita Formattare le immagini per la visualizzazione sul web.

Opzione 1 - Aggiungi la tua immagine

Nella finestra Modifica immagine , trascina la tua immagine nello strumento di caricamento. Puoi anche cliccare su Carica un'immagine per selezionare un file dal tuo computer. Clicca su Applica.

add_your_own_image.jpg

Opzione 2 - Usa un'immagine di archivio

Con le nostre integrazioni di immagini di archivio, puoi aggiungere immagini di archivio gratuite e premium direttamente dal tuo sito. Questa è un'ottima soluzione se non hai un'immagine adatta.

Clicca su Cerca immagine per cercare, visualizzare in anteprima e aggiungere un'immagine di archivio per la tua miniatura. Per maggiori informazioni, visita Cercare e aggiungere immagini di archivio

search_for_an_image.jpg

Step 3 - Aggiungi del testo e definisci lo stile (opzionale)

Clicca su Write here (Scrivi qui) per aggiungere una didascalia o un titolo e sottotitolo all'immagine.

I campi di testo e opzioni di stile variano in base al layout:

Per una migliore visualizzazione, ti consigliamo di inserire un testo breve e limitare i sottotitoli a una o due frasi. In questo modo, puoi mantenere un giusto equilibrio tra le parole e l'immagine. Inoltre, il testo sarà visibile anche su dispositivi mobili.

Suggerimento: Puoi anche aggiungere un Alt Text per aiutare i motori di ricerca a riconoscere la tua immagine.

Step 4 - Regola le impostazioni di design

Nella scheda Design:

  • Per il layout Inline (In linea), imposta la visualizzazione della didascalia, le impostazioni della lightbox e un collegamento URL.
  • Per i layout Poster, Card (Cartolina), Overlap (Sovrapposto), Collage o Stack (a Colonna), utilizza il menu a discesa Link Immagine per aggiungere un pulsante o un collegamento URL.
  • Imposta la Image Position (Posizione Immagine) per i layout Card (Cartolina), Overlap (Sovrapposto) o Collage.

Step 5 - Salva

Clicca su Apply (Applica) per salvare le modifiche apportate al blocco.

Step 6 - Personalizza il design

I Blocchi immagine Poster, Cartolina, Sovrapposto, Collage e A colonna hanno diverse opzioni disponibili nel riquadro Stili sito. L'anteprima del'immagine ti permette di visualizzare le modifiche in tempo reale sulla tua pagina. Ti consigliamo di provare diverse opzioni e impostazioni fino a quando non trovi il design che preferisci.

Per ulteriori informazioni, visita le nostre guide ai layout:

Aggiungi animazione

Stiamo sperimentando nuove opzioni di animazione su un numero limitato di siti selezionati casualmente. Se fai parte di questo gruppo, puoi aggiungere effetti visivi ai Blocchi immagine. I visitatori vedranno le animazioni quando caricano o aggiornano la pagina.

Per aggiungere un'animazione:

  1. In qualsiasi editor di Blocco immagine, clicca sulla scheda Animazioni. (Se non vedi la scheda Animazioni, il tuo sito non è nel gruppo sperimentale.)
  2. Seleziona un effetto dal menu a discesa Blocco immagine animata da applicare all'immagine e a un qualsiasi testo. Mentre selezioni un'opzione, vedrai un'anteprima di come apparirà dopo essersi caricata sulla pagina.

Scegli tra:

  • Dissolvenza : il blocco si dissolve
  • Messa a fuoco: il blocco sembra sfocato, poi viene messo a fuoco
  • Scorrimento verso l'alto: il blocco scorre verso l'alto
  • Scontro: immagine e testo scivolano verso l'interno dai lati
  • Rivelazione: immagine e testo scivolano verso l'esterno dal centro
  • Personalizza: scegli immagini e animazioni di testo separate
  1. Per animare separatamente l'immagine e il testo, seleziona Personalizza, quindi seleziona le opzioni Anima immagine e Anima testo immagine.

Scegli tra:

  • Dissolvenza : l'immagine o il testo si dissolve
  • Scorrimento verso l'alto: l'immagine o il testo scorre verso l'alto
  • Scorrimento verso il basso: l'immagine o il testo scorre verso il basso
  • Scorrimento da sinistra: l'immagine o il testo scorre da sinistra
  • Scorrimento da destra: l'immagine o il testo scorre da destra

Le animazioni sono disponibili solo in un numero limitato di siti, selezionati casualmente. Poiché questa funzione è in fase di sperimentazione, non possiamo aggiungerla ai siti che non la possiedono. Speriamo di aggiungerla a breve a tutti i siti.

Spostare il Blocco Immagine

Dopo aver salvato l'immagine, trascina la selezione del blocco in qualsiasi punto nella pagina. Puoi anche utilizzare questo metodo per posizionare testo attorno all'immagine. Per ulteriori informazioni, visita Spostare i blocchi.

moving_a_block.gif

Impostare l'immagine in modo che venga aperta in una lightbox

Solo il layout Inline (In linea) supporta le lightbox. Per impostare questa opzione:

  1. Clicca due volte sull'immagine per aprire l'editor del blocco.
  2. Clicca sulla scheda Design .
  3. Assicurati che il layout sia impostato suInline (In linea).
  4. Seleziona l'opzione Enable Lightbox (Attiva Lightbox).
  5. Scegli lo stile della lightbox utilizzando l'elenco a discesa Lightbox Theme (Tema Lightbox).
Nota: Le didascalie vengono sempre visualizzate nelle lightbox. Inoltre, se utilizzi questa opzione, i collegamenti URL saranno disattivati. 

Modifica l'immagine 

Clicca su Modifica per ruotare, ritagliare o aggiungere filtri all'immagine con l'Editor di immagini integrato.

edit.jpg

Cancellare o sostituire l'immagine

Per eliminare il blocco, clicca sull'icona del cestino nell'editor di pagina o post.

Per rimuovere l'immagine senza eliminare il blocco, apri l'Editor del Blocco Immagine e clicca su Remove (Rimuovi). A questo punto, puoi sostituirla con un'altra immagine.

remove.jpg

Cambiare layout

Puoi cambiare il design scegliendo un layout diverso nella scheda Design dell'Editor del Blocco. In questo modo cambierai il design e il funzionamento della tua immagine senza dover eliminare e aggiungere nuovamente il blocco.

  1. Clicca due volte sul blocco nell'Editor di Pagina.
  2. Clicca sulla scheda Design .
  3. Seleziona il nuovo layout.
  4. Quando selezioni un layout diverso, l'anteprima dell'immagine cambierà per mostrare le modifiche apportate in tempo reale.
Suggerimento: Quando passi dal layout Inline (In linea) ed un altro layout, sarà necessario inserire nuovamente il testo dell'immagine.

Aggiungere un link a un'immagine o un pulsante

Puoi creare link nel Blocco Immagine in due modi:

  • Trasformando l'immagine stessa in un link selezionabile.
  • Aggiungendo un pulsante sotto il titolo e sottotitolo (tutti i layout eccetto Inline).

Layout Inline (In linea)

Aggiungi un collegamento URL nella scheda Design dell'Editor del Blocco per collegare la tua immagine.

  • Se attivi la lightbox, i collegamenti URL verranno disattivati.
  • Il layout Inline (In linea) non supporta l'utilizzo di pulsanti.

Tutti gli altri layout

Nella scheda Design dell'Editor, clicca sul menu a discesa Image Link (Link Immagine) e scegli tra:

  • None (Nessuno) - Nessun link
  • On Image (Su Immagine) - L'intera immagine diventa un link cliccabile
  • Button (Pulsante) - Aggiungi un pulsante in linea con il testo, sotto il titolo e sottotitolo

Utilizza il campo Clickthrough URL (Collegamento URL) per impostare il link per un'immagine o pulsante. Puoi collegare la tua immagine a un'altra pagina del sito, un sito esterno o un file.

Utilizza il riquadro Stili sito per personalizzare il pulsante. Scorri verso il basso per individuare il layout e regolare le opzioni:

  • Button Font (Font Pulsante) - Imposta font e dimensione del pulsante
  • Button Font Color (Colore Font Pulsante)
  • Button Background Color (Colore Sfondo Pulsante)
  • Button Border Color (Colore Bordo Pulsante) - Regola il colore del bordo impostato con l'opzione Button Border Width (Larghezza Bordo Pulsante)
  • Button Border Width (Larghezza Bordo Pulsante)
  • Button Padding (Spaziatura Pulsante)
  • Button Rounding (Arrotondamento Pulsante)
  • Button Separation (Posizionamento Pulsante) - Regola la posizione del pulsante

button.png

Ridimensionare o ritagliare l'immagine

Per tutti i layout:

Ogni layout offre opzioni di ritaglio e ridimensionamento aggiuntive:

Aggiungere Alt Text

Tramite l'Alt Text i motori di ricerca possono riconoscere la tua immagine.

Le didascalie aggiunte al layout Inline (In linea) diventano Alt Text dell'immagine. Per aggiungere Alt Text senza una didascalia, aggiungi il testo della didascalia e seleziona Do Not Display Caption (Non visualizzare didascalia).

Per tutti gli altri layout, le didascalie non diventano Alt Text, ma puoi impostarlo manualmente utilizzando il layout Inline (In linea):

  1. Apri l'Editor del Blocco.
  2. Nella scheda Design, sceglie il layout Inline (in linea).
  3. Utilizza il campo della didascalia per aggiungere Alt Text.
  4. Passa a qualsiasi altro layout e aggiungi testo che desideri visualizzare come didascalia. Il testo aggiunto nel layout Inline (In linea) rimarrà Alt Text.
Suggerimento: Se non visualizzi Write here (Scrivi qui) con il layout Inline (In linea), cambia temporaneamente lo stile della didascalia in Caption Below (Didascalia sotto) nella scheda Design.

Utilizza un'immagine come banner

Per suggerimenti su come utilizzare un Blocco Immagine come banner, visita Aggiungere banner.

image-block-as-a-banner.png

Blocchi Immagine su dispositivi mobili

Ciascun layout di Blocco Immagine mantiene la formattazione su dispositivi mobili. Il testo si sposterà per adattarsi allo schermo del dispositivo, ma manterrà una posizione simile in relazione all'immagine.

  • Per avere un'idea di come verrà visualizzato il Blocco Immagine, utilizza l'Anteprima Dispositivi.
  • Ad eccezione dei layout In linea e A colonna, le didascalie mantengono la larghezza impostata in relazione all'immagine. Ciò significa che didascalie più lunghe potrebbero essere difficili da leggere.
  • Le didascalie per i layout Cartolina, Collage e Sovrapposizione si spostano da accanto all'immagine sotto l'immagine.
  • I layout Cartolina, Collage, Sovrapposto e A colonna dispongono di un'opzione Ridimensionamento dinamico del carattere nel riquadro Stili sito. Quando abilitata, il testo non verrà ridimensionato utilizzando una dimensione inferiore ai 14 pixel.
  • I Blocchi Immagine vengono impilati verticalmente su dispositivi mobili.

Domande Frequenti

L'immagine viene visualizzata lateralmente

Questo può verificarsi se l'immagine originale è stata scattata di lato e caricata direttamente senza prima ruotarla usando un programma di modifica delle immagini.

Per ruotare l'immagine, puoi utilizzare l' Editor di immagini o un programma esterno a tua scelta prima di ricaricarla.

Le immagini vengono visualizzate con colori diversi

Questo problema si verifica quando un'immagine viene salvata in modalità CMYK anziché in modalità RGB.

Ti consigliamo di salvare sempre le immagini in modalità RGB o sRGB. La modalità a colori RGB è un formato sicuro per il web, mentre la modalità CMYK è destinata alla stampa e potrebbe non essere visualizzata correttamente nella maggior parte dei browser. Per ulteriori informazioni sulla formattazione delle immagini, visita Formattare le immagini per la visualizzazione sul web.

Qual è la dimensione file consigliata?

Sebbene il Blocco Immagine preveda un limite di dimensione file di 20 MB, per risultati migliori ti consigliamo di non superare i 500 KB.  Per ulteriori informazioni, visita Formattare le immagini per la visualizzazione sul web.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 43 su 137
Panoramica dei Blocchi immagine