---
url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/tutorial/galleria-di-immagini'
title: 'Crea una galleria di immagini | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:57:03+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Qui crei una galleria fotografica: un’intestazione centrata, tre foto fianco a fianco con testo alt, e una presentazione su una banda grigia. Usala per mostrare un luogo o un evento in immagini. Per mostrare progetti ciascuno con una descrizione, segui invece Crea una galleria portfolio.
  Il video crea una galleria di dipinti di studenti per un’università.
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Crea una galleria di immagini'
      description: |-
        Qui crei una galleria fotografica: un’intestazione centrata, tre foto fianco a fianco con testo alt, e una presentazione su una banda grigia. Usala per mostrare un luogo o un evento in immagini. Per mostrare progetti ciascuno con una descrizione, segui invece Crea una galleria portfolio.
        Il video crea una galleria di dipinti di studenti per un’università.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T23:57:03+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/tutorial/galleria-di-immagini'
      articleSection: 'Segui un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/tutorial/galleria-di-immagini'
      description: |-
        Qui crei una galleria fotografica: un’intestazione centrata, tre foto fianco a fianco con testo alt, e una presentazione su una banda grigia. Usala per mostrare un luogo o un evento in immagini. Per mostrare progetti ciascuno con una descrizione, segui invece Crea una galleria portfolio.
        Il video crea una galleria di dipinti di studenti per un’università.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/it'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: it
---
[Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Segui un tutorial](/it/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crea una galleria di immagini.

 Impara DXPR BuilderCrea le pagineSegui un tutorial

   ## In questa guida

 Guide correlate

- [Aggiungere un’immagine](/it/hc/documentazione/impara-dxpr-builder/elementi/immagine)
- [Aggiungere un carosello di immagini](/it/hc/documentazione/impara-dxpr-builder/elementi/carosello-di-immagini)
- [Crea una galleria portfolio](/it/hc/documentazione/impara-dxpr-builder/tutorial/galleria-portfolio)

Qui crei una galleria fotografica: un’intestazione centrata, tre foto fianco a fianco con testo alt, e una presentazione su una banda grigia. Usala per mostrare un luogo o un evento in immagini. Per mostrare progetti ciascuno con una descrizione, segui invece [Crea una galleria portfolio](/it/hc/documentazione/impara-dxpr-builder/tutorial/galleria-portfolio).

Il video crea una galleria di dipinti di studenti per un’università.

  ## Prima di iniziare

- Il tuo ruolo ha il permesso **Edit with DXPR Builder**.
- La libreria multimediale contiene almeno sei foto, ritagliate alle stesse proporzioni.
- La pagina è aperta nel builder. Per una nuova, vai in **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) e fai clic su **Save**.

## Passaggio 1: aggiungi l’header

1. Fai clic su **Add Elements** sulla pagina vuota e scegli **Section** dalla scheda **Layout**.
2. Passa sopra alla sezione e apri **More** > **Settings**. In **HTML classes** scegli **Align text center**, poi fai clic su **Save**.
3. Fai clic su **+** sulla sezione e scegli **Text** dalla scheda **Content**.
4. Digita "Student art gallery" come **Heading 2**, aggiungi una riga di introduzione e fai clic su **Save**. Il tema stampa il titolo della pagina come Heading 1 della pagina. Per rendere invece questa intestazione l’Heading 1, vedi [Crea pagine SEO-friendly](/it/hc/documentazione/impara-dxpr-builder/tutorial/seo#step-1-start-the-content-at-heading-2).

## Passaggio 2: aggiungi la griglia di foto

1. Passa sopra alla sezione e fai clic su **Add Section Below**. Fai clic su **+** sulla nuova sezione e scegli **Row**; arriva con due colonne uguali.
2. Fai clic sull’icona griglia della riga (**Column layout**), scegli il preset **1/3 + 1/3 + 1/3** e fai clic su **Save**.
3. Fai clic su **+** nella prima colonna e scegli **Image**.
4. Fai clic su **Select Image**, cerca nella libreria multimediale con **Apply filters**, fai clic su una foto e fai clic su **Insert selected**.
5. Apri il pannello **SEO** e digita l’**Alt attribute**: ciò che chi non può vedere la foto dovrebbe sapere. Fai clic su **Save**.
6. Ripeti per la seconda e la terza colonna.

Foto ritagliate alle stesse proporzioni mantengono la riga pari.

## Passaggio 3: aggiungi la presentazione

1. Aggiungi una terza sezione con **Add Section Below** e apri il suo **More** > **Settings**. Scegli **Align text center** in **HTML classes** e un **Background** grigio chiaro nel pannello **Style**. Fai clic su **Save**.
2. Fai clic su **+** sulla sezione e scegli **Image carousel**.
3. Fai clic su **Select Image**, cerca nella libreria, fai clic su tre foto e fai clic su **Insert selected**, poi fai clic su **Save**.
4. Fai di nuovo clic su **+** sulla sezione e scegli **Text**; arriva sopra il carosello. Digita "Slideshow" come **Heading 2** e fai clic su **Save**.

## Passaggio 4: salva e vedi l’anteprima

1. Fai clic su **Save** nella barra degli strumenti del builder.
2. Apri il menu vista (l’**icona occhio**) e scegli **Preview**.

## Per approfondire

Non mostrato nel video:

- **Didascalie**: metti una **Card** nella colonna e aggiungi un elemento **Text** con la didascalia dentro. Poi aggiungi l’**Image** dentro la card; arriva sopra la didascalia.
- **Foto a dimensione intera**: imposta **Image link** sul file a dimensione intera e **Image link target** su **New window**.
- **Stile**: su ogni immagine, imposta **Border radius** su 4 e **Drop shadow** su 1 nel pannello **Style** per un leggero rilievo.
- **Tempi della presentazione**: imposta **Interval** sul carosello, in millisecondi. In **Hide** seleziona **Hide pagination control** o **Hide prev/next buttons** per rimuovere quei controlli.
- **Galleria che si riempie automaticamente**: in **Structure** > **Views** > **Add view**, crea una vista dei media immagine con una visualizzazione blocco in formato **Grid**. Inseriscila dalla scheda **Drupal Views** e i nuovi caricamenti compaiono automaticamente.

## Cosa vedi

L’intestazione centrata apre la pagina, seguita da tre foto fianco a fianco. Sulla banda grigia sotto, la presentazione mostra una foto alla volta e passa alla successiva ogni cinque secondi.

## Se non vedi le foto come mostrate

- **Insert selected non aggiunge foto.** La libreria si stava ancora ricaricando dopo **Apply filters**, quindi il tuo clic non ha selezionato la foto. Aspetta che la griglia si assesti, verifica che la foto mostri un segno di spunta, e fai di nuovo clic su **Insert selected**.
- **La libreria multimediale è vuota.** Non ci sono ancora immagini caricate, oppure il browser multimediale non è impostato. Vedi [Le immagini non si caricano o spariscono](/it/hc/documentazione/impara-dxpr-builder/risoluzione-problemi/immagini-e-media).
- **Le tre foto hanno altezze diverse.** Le loro proporzioni differiscono. Ritagliale alle stesse proporzioni, ricaricale e scegli le nuove copie.
- **Le tue modifiche non ci sono più dopo un ricaricamento.** Hai lasciato la pagina prima di fare clic su **Save** nella barra degli strumenti del builder. Se Save mostra un errore, vedi [Le modifiche non si salvano](/it/hc/documentazione/impara-dxpr-builder/risoluzione-problemi/salvataggio-non-riuscito).

## E adesso?

- [Elemento Image](/it/hc/documentazione/impara-dxpr-builder/elementi/immagine) per ogni impostazione delle immagini
- [Elemento carosello di immagini](/it/hc/documentazione/impara-dxpr-builder/elementi/carosello-di-immagini) per le opzioni della presentazione
- [Portfolio](/it/hc/documentazione/impara-dxpr-builder/tutorial/galleria-portfolio) per una griglia di progetti con filtro