---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/tutorials/case-study'
title: 'Scrivi un caso di studio | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:57:17+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Qui racconti un progetto cliente in tre parti: la sfida, la soluzione e i risultati. Finisci con sette bande: una hero con foto, una panoramica con il numero principale, la sfida, la soluzione accanto a una foto, tre contatori, una citazione e un invito all’azione. Per mostrare molti progetti in un’unica pagina, segui invece Crea una galleria portfolio.
  Il video racconta il lavoro di un’agenzia per Northwind Retail.
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: 'Scrivi un caso di studio'
      description: |-
        Qui racconti un progetto cliente in tre parti: la sfida, la soluzione e i risultati. Finisci con sette bande: una hero con foto, una panoramica con il numero principale, la sfida, la soluzione accanto a una foto, tre contatori, una citazione e un invito all’azione. Per mostrare molti progetti in un’unica pagina, segui invece Crea una galleria portfolio.
        Il video racconta il lavoro di un’agenzia per Northwind Retail.
      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:17+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/case-study'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/tutorials/case-study'
      description: |-
        Qui racconti un progetto cliente in tre parti: la sfida, la soluzione e i risultati. Finisci con sette bande: una hero con foto, una panoramica con il numero principale, la sfida, la soluzione accanto a una foto, tre contatori, una citazione e un invito all’azione. Per mostrare molti progetti in un’unica pagina, segui invece Crea una galleria portfolio.
        Il video racconta il lavoro di un’agenzia per Northwind Retail.
      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) # Scrivi un caso di studio.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Blockquote](/hc/documentation/learn-dxpr-builder/elements/blockquote)
- [Number Counter](/hc/documentation/learn-dxpr-builder/elements/number-counter)
- [Crea una galleria portfolio](/it/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)

Qui racconti un progetto cliente in tre parti: la sfida, la soluzione e i risultati. Finisci con sette bande: una hero con foto, una panoramica con il numero principale, la sfida, la soluzione accanto a una foto, tre contatori, una citazione e un invito all’azione. Per mostrare molti progetti in un’unica pagina, segui invece [Crea una galleria portfolio](/it/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery).

Il video racconta il lavoro di un’agenzia per Northwind Retail.

  ## Prima di iniziare

- Il tuo ruolo ha il permesso **Edit with DXPR Builder**.
- La libreria multimediale contiene un’ampia foto per la hero e una foto di ciò che hai realizzato.
- 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 sezione o colonna. Aggiungi gli elementi di una colonna in ordine inverso, oppure trascinali al loro posto dopo.

## Passaggio 1: aggiungi la hero

1. Fai clic su **Add Elements** sulla pagina vuota e scegli **Section** dalla scheda **Layout**. Passaci sopra e apri **More** > **Settings**.
2. In **HTML classes** scegli **Align text center**.
3. Apri il pannello **Style**. In **Background image** fai clic su **Select Image**, seleziona una foto e fai clic su **Insert selected**. Imposta **Background style** su **Cover**.
4. Scegli un **Background** blu scuro e un **Font color** bianco, poi fai clic su **Save**. Il colore si vede mentre la foto si carica.
5. Fai clic su **+** sulla sezione e scegli **Button**. Imposta **Title** su "Visit the site", **Link** sull’URL del cliente, **Type** su **Light** e **Size** su **Large**, poi fai clic su **Save**.
6. Fai di nuovo clic su **+** e scegli **Text**; arriva sopra il pulsante. Digita il nome del cliente come **Heading 2** e un riepilogo di una riga sotto. Imposta **Font color** su bianco nel pannello **Style** 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 panoramica

1. Passa sopra alla hero e fai clic su **Add Section Below**. Aggiungi una **Row** alla nuova sezione, fai clic sulla sua icona griglia (**Column layout**), scegli il preset **2/3 + 1/3** e fai clic su **Save**.
2. Fai clic su **+** nella colonna larga e scegli **Text**. Digita "Overview" come **Heading 2**, aggiungi il riepilogo e fai clic su **Save**.
3. Fai clic su **+** nella colonna stretta e scegli **Text**. Digita l’etichetta della metrica, "More online orders", e fai clic su **Save**.
4. Fai di nuovo clic su **+** nella colonna stretta e scegli **Number counter**; arriva sopra l’etichetta. Imposta **End** su 32, **Suffix** su %, **Thousands separator** su **Comma**, imposta **Speed** su 2500, poi fai clic su **Save**.

Il contatore non ha un proprio campo etichetta; l’elemento Text sotto fa quel lavoro.

## Passaggio 3: aggiungi la sfida

1. Aggiungi una terza sezione con **Add Section Below**. Apri il suo **More** > **Settings**, scegli un **Background** grigio chiaro nel pannello **Style** e fai clic su **Save**.
2. Fai clic su **+** sulla sezione e scegli **Text**. Digita "The challenge" come **Heading 2**, descrivi il problema e fai clic su **Save**.

## Passaggio 4: aggiungi la soluzione

1. Aggiungi una quarta sezione, poi una **Row**; arriva con due colonne uguali.
2. Fai clic su **+** nella colonna di sinistra e scegli **Text**. Digita "The solution" come **Heading 2**, descrivi cosa hai creato e fai clic su **Save**.
3. Fai clic su **+** nella colonna di destra e scegli **Image**. Fai clic su **Select Image**, seleziona una foto del realizzato e fai clic su **Insert selected**. Digita l’**Alt attribute** nel pannello **SEO** e fai clic su **Save**.

## Passaggio 5: aggiungi i risultati

1. Aggiungi una quinta sezione e apri il suo **More** > **Settings**. Scegli **Align text center** in **HTML classes**, poi il **Background** blu scuro e il **Font color** bianco nel pannello **Style**. Fai clic su **Save**.
2. Fai clic su **+** sulla sezione e scegli **Row**. Fai clic sulla sua icona griglia (**Column layout**), scegli il preset **1/3 + 1/3 + 1/3** e fai clic su **Save**.
3. In ogni colonna, aggiungi prima un’etichetta **Text**, poi un **Number counter** sopra, come nel passaggio 2: **End** 32 con **Suffix** %, **End** 2 con **Suffix** s, e **End** 15000.

## Passaggio 6: aggiungi la citazione

1. Aggiungi una sesta sezione.
2. Fai clic su **+** sulla sezione e scegli **Block quote**. Digita le parole del cliente, compila **Cite** con nome e ruolo, e fai clic su **Save**.

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

1. Aggiungi una settima sezione 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 "Ready to get started?" come **Heading 2** e aggiungi una riga. Imposta **Font color** su bianco e fai clic su **Save**.

## Passaggio 8: 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**.

## Cosa vedi

Il nome del cliente e il pulsante **Visit the site** stanno centrati sulla foto. La panoramica mostra 32% accanto al suo riepilogo; i visitatori lo vedono contare quando entra in vista scorrendo. La sfida sta su una banda grigia e la soluzione sta accanto alla sua foto.

Sulla banda blu scuro i tre risultati contano quando entrano in vista scorrendo: 32%, 2s e 15.000. La citazione del cliente e una banda **Contact us** viola chiudono la pagina.

## Se non vedi la pagina come mostrata

- **La foto hero non riempie la sezione.** **Background style** è ancora su **Theme defaults**. Apri il pannello **Style** della sezione e impostalo su **Cover**.
- **L’ultimo contatore legge 15000 senza virgola.** **Thousands separator** è ancora su **None**. Apri le impostazioni del contatore e scegli **Comma**.
- **Un’etichetta sta sopra il suo contatore.** Il contatore è entrato prima della sua etichetta e i nuovi elementi arrivano in cima alla loro colonna. Trascina l’etichetta sotto il contatore dalla maniglia di trascinamento sulla sua barra dei controlli.
- **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/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## E adesso?

- [Elemento Blockquote](/hc/documentation/learn-dxpr-builder/elements/blockquote) per opzioni di stile delle testimonianze
- [Elemento Number counter](/hc/documentation/learn-dxpr-builder/elements/number-counter) per ogni impostazione dei contatori
- [Portfolio](/it/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) per elencare tutti i tuoi casi di studio in un’unica pagina