---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
title: 'Crea una galleria portfolio | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:56:59+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Qui crei una pagina portfolio: un’intestazione centrata, tre progetti fianco a fianco ciascuno con foto di copertina e un risultato in una riga, e un invito all’azione. Usala per mostrare il tuo lavoro a colpo d’occhio e collegare ogni progetto alla sua storia. Per raccontare a fondo un progetto, segui Scrivi un caso di studio.
  Il video crea una pagina di agenzia chiamata "Our work".
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+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 portfolio'
      description: |-
        Qui crei una pagina portfolio: un’intestazione centrata, tre progetti fianco a fianco ciascuno con foto di copertina e un risultato in una riga, e un invito all’azione. Usala per mostrare il tuo lavoro a colpo d’occhio e collegare ogni progetto alla sua storia. Per raccontare a fondo un progetto, segui Scrivi un caso di studio.
        Il video crea una pagina di agenzia chiamata "Our work".
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T23:56:59+0000'
      dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
      description: |-
        Qui crei una pagina portfolio: un’intestazione centrata, tre progetti fianco a fianco ciascuno con foto di copertina e un risultato in una riga, e un invito all’azione. Usala per mostrare il tuo lavoro a colpo d’occhio e collegare ogni progetto alla sua storia. Per raccontare a fondo un progetto, segui Scrivi un caso di studio.
        Il video crea una pagina di agenzia chiamata "Our work".
      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
---
[Help Center](/it/hc)/[Documentation](/it/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crea una galleria portfolio.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Mostra una vista Drupal nella tua pagina](/it/hc/documentation/learn-dxpr-builder/integrations/drupal-views)
- [Scrivi un caso di studio](/it/hc/documentation/learn-dxpr-builder/tutorials/case-study)
- [Image](/hc/documentation/learn-dxpr-builder/elements/image)

Qui crei una pagina portfolio: un’intestazione centrata, tre progetti fianco a fianco ciascuno con foto di copertina e un risultato in una riga, e un invito all’azione. Usala per mostrare il tuo lavoro a colpo d’occhio e collegare ogni progetto alla sua storia. Per raccontare a fondo un progetto, segui [Scrivi un caso di studio](/it/hc/documentation/learn-dxpr-builder/tutorials/case-study).

Il video crea una pagina di agenzia chiamata "Our work".

  ## Prima di iniziare

- Il tuo ruolo ha il permesso **Edit with DXPR Builder**.
- La libreria multimediale contiene una foto di copertina per ogni progetto, 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**.
- I nuovi elementi arrivano in cima alla loro colonna, quindi ogni foto di copertina va inserita dopo il suo testo.

## 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 "Our work" 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/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Passaggio 2: aggiungi la griglia dei progetti

1. Passa sopra alla sezione e fai clic su **Add Section Below**. Apri il **More** > **Settings** della nuova sezione, scegli un **Background** grigio chiaro nel pannello **Style** e fai clic su **Save**.
2. Fai clic su **+** sulla sezione e scegli **Row**; arriva con due colonne uguali. Fai clic sulla sua icona griglia (**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 **Text**. Digita il nome del progetto come **Heading 3**, aggiungi il risultato in una riga e fai clic su **Save**.
4. Fai clic su **+** nella stessa colonna e scegli **Image**; arriva sopra il testo. Fai clic su **Select Image**, seleziona la foto di copertina e fai clic su **Insert selected**. Digita l’**Alt attribute** nel pannello **SEO** e fai clic su **Save**.
5. Ripeti per la seconda e la terza colonna.

## Passaggio 3: aggiungi l’invito all’azione

1. Aggiungi una terza sezione con **Add Section Below** e apri il suo **More** > **Settings**. Scegli **Align text center** in **HTML classes**, poi il **Background** viola e il **Font color** bianco nel pannello **Style**. Fai clic su **Save**.
2. Fai clic su **+** sulla sezione e scegli **Button**. Imposta **Title** su "Contact us", **Link** su `/contact`, **Type** su **Light** e **Size** su **Large**, poi fai clic su **Save**.
3. Fai di nuovo clic su **+** e scegli **Text**; arriva sopra il pulsante. Digita "Let's work together" come **Heading 2** e aggiungi una riga. Imposta **Font color** su bianco nel pannello **Style** 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:

- **Collega ogni progetto**: imposta **Image link** sulla foto di copertina alla pagina del caso di studio.
- **Sollevamento al passaggio del mouse**: nel pannello **Style** di ogni immagine imposta **Border radius** su 4 e **Drop shadow** su 1. In **Hover style** alza **Drop shadow** a 3.
- **Altri progetti**: aggiungi un’altra **Row** con lo stesso preset sotto la prima.

## Rendi la griglia filtrabile

La griglia statica va bene per una manciata di progetti. Per lasciare che i visitatori filtrino per tipo, salva ogni progetto come contenuto e mostrali con una vista che ha un filtro esposto. Views fa parte del core Drupal.

### 1. Crea il tipo di contenuto Portfolio

1. Vai in **Structure** > **Content types** > **Add content type** (`/admin/structure/types/add`).
2. Chiamalo "Portfolio" e salva.
3. Nella scheda **Manage fields**, aggiungi un campo **Image** denominato "Cover image".
4. Aggiungi un campo **List (text)** denominato "Project type" con valori come `web|Web`, `branding|Branding` e `campaign|Campaign`.
5. Crea alcuni elementi Portfolio in **Content** > **Add content** > **Portfolio**.

### 2. Crea la vista

1. Vai in **Structure** > **Views** > **Add view** (`/admin/structure/views/add`).
2. Chiamala "Portfolio grid"; in **View settings** mostra **Content** di tipo **Portfolio**.
3. Seleziona **Create a block**, imposta il formato di visualizzazione su **Grid** di **fields** e salva.
4. Nell’editor della vista, aggiungi i campi **Cover image** e **Title**, e imposta la griglia a 3 colonne nelle sue impostazioni di formato.
5. In **Filter criteria**, fai clic su **Add**, scegli **Project type** e seleziona **Expose this filter to visitors**. Denominalo "Filter by type".
6. In **Advanced**, imposta **Use AJAX** su Yes. I filtri esposti in una pagina builder funzionano solo via AJAX.
7. Salva la vista.

### 3. Inserisci la vista nella pagina

1. Torna in DXPR Builder, svuota le tre colonne statiche o aggiungi una nuova **Row**.
2. Fai clic su **+**, apri la scheda **Drupal Views** e scegli **View: Portfolio grid (Block)**.
3. Nella finestra delle impostazioni, seleziona **Show exposed filters** e fai clic su **Save**. La griglia si rende con il menu "Filter by type" sopra e i nuovi elementi Portfolio compaiono da soli.
4. Fai clic su **Save** nella barra degli strumenti del builder.

## Cosa vedi

L’intestazione centrata "Our work" apre la pagina. Sulla banda grigia sotto, tre progetti stanno fianco a fianco, ciascuno una foto di copertina sopra nome e risultato. Una banda viola chiude la pagina con **Contact us**.

## Se non vedi la pagina come mostrata

- **Una foto di copertina sta sotto il suo testo.** La foto è entrata prima del testo e i nuovi elementi arrivano in cima alla loro colonna. Trascina la foto sopra il testo dalla maniglia di trascinamento sulla sua barra dei controlli.
- **Le copertine hanno altezze diverse.** Le loro proporzioni differiscono. Ritagliale alle stesse proporzioni, ricaricale e scegli le nuove copie.
- **Portfolio grid non è nella scheda Drupal Views.** La vista è disattivata, oppure il tuo profilo utente builder la nasconde. Attivala in **Structure** > **Views**, oppure chiedi a un amministratore di selezionarla in **Views** nel tuo profilo utente.
- **L’editor mostra "Turn on Ajax on this view to use exposed filters."** La vista non usa AJAX. Imposta **Use AJAX** su Yes in **Advanced** nell’editor della vista; vedi [Un elemento sembra o si comporta male](/it/hc/documentation/learn-dxpr-builder/troubleshooting/elements-look-wrong).
- **Manca il menu "Filter by type".** **Show exposed filters** è spento sull’elemento. Apri le impostazioni dell’elemento vista, selezionalo e fai clic su **Save**.

## E adesso?

- [Integrazione viste Drupal](/it/hc/documentation/learn-dxpr-builder/integrations/drupal-views) per come le visualizzazioni arrivano nel selettore di elementi
- [Caso di studio](/it/hc/documentation/learn-dxpr-builder/tutorials/case-study) per la pagina a cui collega ogni progetto
- [Elemento Image](/hc/documentation/learn-dxpr-builder/elements/image) per ogni impostazione delle immagini