Nota: Sebbene le nostre guide più popolari siano state tradotte in spagnolo, alcune guide sono disponibili solo in inglese.
Image Blocks overview

I Blocchi Immagini aggiungono immagini individuali a pagine e post. Puoi caricare le tue immagini o acquistare una licenza per immagini 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

  • The Inline layout supports one basic caption. This is best for displaying an artist name, crediting a media outlet, or displaying the image title. Learn about caption style options, which are set automatically.
Note: Captions won't display if the Image Block is empty. 
  • 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
  • Style the text in the Site Styles panel
  • 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

In the Edit Image window, drag your image into the image uploader. You can also click Upload an Image to select a file from your computer. Click Apply.

add_your_own_image.jpg

Option 2 - Use a stock image

With our stock image integrations, you can add free and premium stock images directly from your site. This is a great option if you don't already have an image to use.

Click Search For Image to search, preview, and add a stock image for your thumbnail. To learn more, visit Searching and adding stock images

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

The Poster, Card, Overlap, Collage, and Stack Image Blocks have their own style settings in the Site Styles panel. The preview of the image on your page will change so you can view the changes in real time. We recommend playing around with the settings until you find a design you like.

Per ulteriori informazioni, visita le nostre guide ai layout:

Add animation

We're testing new animation options on a small number of randomly selected sites. If you’re in this group, you can add visual effects to Image Blocks. Visitors will see the animations when they load or refresh the page.

To add animation:

  1. In any Image Block editor, click the Animations tab. (If you don't see the Animations tab, your site isn't in the test group.)
  2. Select an effect from the Animate Image Block drop-down menu to apply to the image and any text. As you select an option, you’ll see a preview of how it loads on the page.

Choose from:

  • Fade In - Block fades in
  • Focus In - Block looks blurry, then comes into focus
  • Slide Up - Block slides upward
  • Collide - Image and text slide inward from the sides
  • Reveal - Image and text slide outward from the center
  • Custom - Choose separate image and text animations
  1. To animate the image and text separately, select Custom, then select options for Animate Image and Animate Image Text.

Choose from:

  • Fade In - Image or text fades in
  • Slide Up - Image or text slides upward
  • Slide Down - Image or text slides downward
  • Slide from Left - Image or text slides in from the left
  • Slide from Right - Image or text slides in from the right

Animations are only available in a small number of sites, selected randomly. Since we’re currently testing this feature, we can’t add it to sites that don’t have it. We hope to add this feature to all sites in the near future.

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

Modificare l'immagine con Adobe Creative Cloud

Clicca su Edit (Modifica) per ruotare, ritagliare o aggiungere filtri all'immagine con l'editor Adobe Creative Cloud.

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.

Use the Site Styles panel to customize the button. Scroll down to the section for that layout to adjust these tweaks:

  • 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.
  • With the exception of Inline and Stack layouts, captions maintain their set width relative to the image. This means that longer captions may be harder to read.
  • Captions for the Card, Collage, and Overlap layouts move from alongside the image to below the image.
  • The Card, Collage, Overlap, and Stack layouts have a Dynamic Font Sizing option in the Site Styles panel. When this is enabled, text won't resize smaller than 14 pixels.
  • 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 Adobe Creative Cloud o modificarla utilizzando 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: 42 su 136
Image Blocks overview