---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
title: 'Progetta una hero section | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:56:31+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Qui crei una hero che riempie lo schermo: una foto di sfondo, un titolo, una riga di supporto e un pulsante, con la foto che si muove più lenta della pagina mentre i visitatori scorrono. Usala in cima a qualsiasi pagina. Per costruire tutta la pagina intorno, segui dopo Crea una landing page marketing.
  Il video crea la hero di un prodotto di reportistica.
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: 'Progetta una hero section'
      description: |-
        Qui crei una hero che riempie lo schermo: una foto di sfondo, un titolo, una riga di supporto e un pulsante, con la foto che si muove più lenta della pagina mentre i visitatori scorrono. Usala in cima a qualsiasi pagina. Per costruire tutta la pagina intorno, segui dopo Crea una landing page marketing.
        Il video crea la hero di un prodotto di reportistica.
      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:31+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/hero-section'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
      description: |-
        Qui crei una hero che riempie lo schermo: una foto di sfondo, un titolo, una riga di supporto e un pulsante, con la foto che si muove più lenta della pagina mentre i visitatori scorrono. Usala in cima a qualsiasi pagina. Per costruire tutta la pagina intorno, segui dopo Crea una landing page marketing.
        Il video crea la hero di un prodotto di reportistica.
      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) # Progetta una hero section.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Crea una landing page marketing](/it/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [Aggiunta di una sezione](/it/hc/documentation/learn-dxpr-builder/layout/sections)
- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

Qui crei una hero che riempie lo schermo: una foto di sfondo, un titolo, una riga di supporto e un pulsante, con la foto che si muove più lenta della pagina mentre i visitatori scorrono. Usala in cima a qualsiasi pagina. Per costruire tutta la pagina intorno, segui dopo [Crea una landing page marketing](/it/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing).

Il video crea la hero di un prodotto di reportistica.

  ## Prima di iniziare

- Il tuo ruolo ha il permesso **Edit with DXPR Builder**.
- La libreria multimediale contiene un’ampia foto, di almeno 1920 pixel di larghezza.
- 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 la sezione

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**, così titolo, testo e pulsante si centrano insieme.
3. Attiva **100% height** così la hero riempie lo schermo, e **Vertical centering** così il contenuto sta al centro.
4. Apri il pannello **Style**. In **Background image** fai clic su **Select Image**, seleziona un’ampia foto e fai clic su **Insert selected**.
5. Imposta **Background style** su **Cover** così la foto riempie la sezione.
6. Scegli un colore **Background** scuro, che si vede mentre la foto si carica. Imposta **Font color** su bianco, poi fai clic su **Save**.

**Suggerimento**

Comprimi la foto sotto 500 KB così la hero si carica in fretta.

## Passaggio 2: aggiungi il pulsante

1. Fai clic su **+** sulla sezione e scegli **Button** dalla scheda **Content**.
2. Imposta **Title** su "Start free trial", **Link** su `/trial`, **Type** su **Light** per contrasto sulla foto e **Size** su **Large**, poi fai clic su **Save**.

## Passaggio 3: aggiungi il titolo

1. Fai di nuovo clic su **+** sulla sezione e scegli **Text** dalla scheda **Content**. Arriva sopra il pulsante, poiché i nuovi elementi arrivano in cima.
2. Digita il tuo titolo, "Reporting that keeps up with your team", e scegli **Heading 2** dal menu delle intestazioni. 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).
3. Aggiungi una riga di supporto: "Dashboards, alerts and integrations in one workspace. Set up in minutes, no developers required."
4. Nel pannello **Style** imposta **Font color** su bianco, poi fai clic su **Save**.

## Passaggio 4: aggiungi la parallasse

1. Passa sopra alla sezione e apri di nuovo **More** > **Settings**.
2. Apri il pannello **Background effects** e imposta **Background effect** su **Parallax image**. **Parallax speed** parte da 20; trascinalo a 35 per un effetto più forte e fai clic su **Save**.

## Passaggio 5: aggiungi contenuti sotto la hero

1. Passa sopra alla hero e fai clic su **Add Section Below**, così la pagina ha contenuti verso cui scorrere.
2. Fai clic su **+** sulla nuova sezione e scegli **Text** dalla scheda **Content**. Digita un’intestazione e un breve paragrafo, imposta la prima riga su **Heading 2** e fai clic su **Save**.

## Passaggio 6: salva e vedi l’anteprima

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

## Per approfondire

Non mostrato nel video:

- **Overlay**: imposta **Background effect** su **Gradient** e scegli uno **Start color** e un **End color** scuri a circa il 50% di opacità. Il testo resta leggibile su qualsiasi foto. L’effetto contiene un valore solo, quindi un overlay sostituisce la parallasse.
- **Hero più corta**: disattiva **100% height** e dai alla sezione il suo padding superiore e inferiore nel pannello **Style**, per esempio 100 pixel.
- **Pulsante largo**: attiva **Block button** per un pulsante largo quanto la sua colonna.

## Varianti

Alternative alla costruzione nel video:

### Hero con sfondo video

1. Nel pannello **Background effects** imposta **Background effect** su **YouTube video**.
2. Incolla l’URL del video in **YouTube video URL**.
3. In **Video options** seleziona **Loop** e **Disable on mobile devices**; lascia l’audio spento.

### Hero solo sfumatura

Salta l’immagine di sfondo e usa l’effetto **Gradient** con due colori brand pieni per una hero che si carica in fretta.

### Hero divisa

1. Aggiungi una **Row** dentro la sezione; arriva con due colonne uguali.
2. Metti testo e pulsante nella colonna di sinistra e un’immagine in quella di destra.

## Cosa vedi

La foto riempie lo schermo con titolo, riga di supporto e pulsante **Start free trial** centrati in bianco sopra. Mentre scorri in basso verso la seconda sezione, la foto si muove più lenta della pagina.

## Se non vedi la hero come mostrata

- **La hero è alta solo quanto il suo testo.** **100% height** è spento. Attivalo nelle impostazioni della sezione e fai clic su **Save**.
- **La foto resta ferma mentre scorri.** **Background effect** è ancora su **Simple image**, **Parallax speed** è 0, oppure non c’è nulla sotto la hero verso cui scorrere. Imposta **Parallax image**, trascina **Parallax speed** sopra 0 e aggiungi la seconda sezione del passaggio 5.
- **Il titolo resta scuro sulla foto.** L’elemento Text non ha un **Font color** proprio. Apri il suo pannello **Style** e imposta **Font color** su bianco.

## E adesso?

- [Landing page](/it/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) per costruire una pagina completa intorno alla tua hero
- [Sezioni](/it/hc/documentation/learn-dxpr-builder/layout/sections) per le opzioni di layout della sezione
- [Riferimento scheda di stile](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) per tutte le opzioni di stile