---
url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/tutorial/pagina-servizi'
title: 'Crea una pagina servizi | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:56:45+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Qui crei una pagina che elenca ciò che offri. Ha un header, tre servizi con icone, un servizio in dettaglio accanto a una foto, loghi clienti e un invito all’azione. Usala quando vendi più servizi. Per una pagina su un’unica offerta, segui invece Crea una landing page marketing.
  Il video crea la pagina servizi di un’agenzia digitale.
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 pagina servizi'
      description: |-
        Qui crei una pagina che elenca ciò che offri. Ha un header, tre servizi con icone, un servizio in dettaglio accanto a una foto, loghi clienti e un invito all’azione. Usala quando vendi più servizi. Per una pagina su un’unica offerta, segui invece Crea una landing page marketing.
        Il video crea la pagina servizi di un’agenzia digitale.
      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:45+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/pagina-servizi'
      articleSection: 'Segui un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/tutorial/pagina-servizi'
      description: |-
        Qui crei una pagina che elenca ciò che offri. Ha un header, tre servizi con icone, un servizio in dettaglio accanto a una foto, loghi clienti e un invito all’azione. Usala quando vendi più servizi. Per una pagina su un’unica offerta, segui invece Crea una landing page marketing.
        Il video crea la pagina servizi di un’agenzia digitale.
      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 pagina servizi.

 Impara DXPR BuilderCrea le pagineSegui un tutorial

   ## In questa guida

 Guide correlate

- [Crea una landing page marketing](/it/hc/documentazione/impara-dxpr-builder/tutorial/landing-page-marketing)
- [Aggiungere un’icona](/it/hc/documentazione/impara-dxpr-builder/elementi/icona)
- [Aggiungere un Marquee](/it/hc/documentation/learn-dxpr-builder/elements/marquee)

Qui crei una pagina che elenca ciò che offri. Ha un header, tre servizi con icone, un servizio in dettaglio accanto a una foto, loghi clienti e un invito all’azione. Usala quando vendi più servizi. Per una pagina su un’unica offerta, segui invece [Crea una landing page marketing](/it/hc/documentazione/impara-dxpr-builder/tutorial/landing-page-marketing).

Il video crea la pagina servizi di un’agenzia digitale.

  ## Prima di iniziare

- Il tuo ruolo ha il permesso **Edit with DXPR Builder**.
- La libreria multimediale contiene una foto per il servizio in dettaglio e quattro loghi clienti.
- La pagina è aperta nel builder. Per una nuova, vai in **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) e fai clic su **Save**.
- Su DXPR CMS, nascondi il titolo pagina del tema in questa pagina: nel suo form di modifica, apri **DXPR Theme Settings** e seleziona **Page Title** in **DXPR Hide Regions**. Il **Title** del Jumbotron è allora l’unico Heading 1 della pagina, come spiega [Crea pagine SEO-friendly](/it/hc/documentazione/impara-dxpr-builder/tutorial/seo#step-1-start-the-content-at-heading-2).
- 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 l’header

1. Fai clic su **Add Elements** sulla pagina vuota e scegli **Section** dalla scheda **Layout**. Passaci sopra, apri **More** > **Settings**, scegli il **Background** blu scuro nel pannello **Style** e fai clic su **Save**.
2. Fai clic su **+** sulla sezione e scegli **Jumbotron** dalla scheda **Content**.
3. Imposta il **Title** su "Our services", la **Lead** su una riga su ciò che offri e il **Type** su **Primary**, poi fai clic su **Save**.

## Passaggio 2: aggiungi la panoramica dei servizi

1. Passa sopra alla sezione e fai clic su **Add Section Below**. Dai alla nuova sezione la classe **Align text center**.
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. Fai clic su **+** nella prima colonna e scegli **Text**. Digita "Design" come **Heading 3**, aggiungi una riga e fai clic su **Save**.
4. Fai clic su **+** nella stessa colonna e scegli **Icon**; arriva sopra il testo. Scegli il set **Font Awesome Free Solid**, cerca `palette` e fai clic sull’icona. Imposta **Size** su **Very Large (3x)**, apri **Icon utilities**, imposta **Style** su **Circle** e fai clic su **Save**.
5. Ripeti per "Development" con `code` e "Marketing" con `bullhorn`.

## Passaggio 3: aggiungi un servizio in dettaglio

1. Aggiungi una terza sezione con **Add Section Below**, poi una **Row**; arriva con due colonne uguali.
2. Fai clic su **+** nella colonna di sinistra e scegli **Image**. Fai clic su **Select Image**, seleziona una foto e fai clic su **Insert selected**. Digita l’**Alt attribute** nel pannello **SEO** e fai clic su **Save**.
3. Fai clic su **+** nella colonna di destra e scegli **Button**. Imposta **Title** su "Get a quote", **Link** su `/contact` e **Type** su **Primary**, poi fai clic su **Save**.
4. Fai di nuovo clic su **+** nella colonna di destra e scegli **Text**; arriva sopra il pulsante. Digita "Design" come **Heading 2**, aggiungi la descrizione e cosa è incluso, e fai clic su **Save**.

## Passaggio 4: aggiungi i loghi clienti

1. Aggiungi una quarta sezione 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 **Marquee**. Rimuovi le tre immagini di esempio con la **×** su ciascuna. Fai clic su **Select Image**, cerca i tuoi loghi, selezionane quattro e fai clic su **Insert selected**. Attiva **Gray scale** e fai clic su **Save**.
3. Fai di nuovo clic su **+** sulla sezione e scegli **Text**; arriva sopra il marquee. Digita "Trusted by leading brands" come **Heading 2** e fai clic su **Save**.

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

1. Aggiungi una quinta 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 "Schedule a consultation", **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 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**) e scegli **Preview**.

## Per approfondire

Non mostrato nel video:

- **Una sezione dettaglio per servizio**: ripeti il passaggio 3 per Development e Marketing. Attiva **Mirror row** nelle impostazioni di ogni seconda riga, così le foto alternano i lati su tablet e desktop.
- **Link di salto**: imposta l’**HTML ID** di ogni sezione dettaglio (`design`, `development`, `marketing`). Aggiungi un **Button** sotto ogni testo di panoramica con **Link** `#design` e così via.
- **Testimonianze**: aggiungi un **Block quote** per cliente sopra i loghi.

## Cosa vedi

Una banda blu scuro apre la pagina, con "Our services" in grande bianco sopra un riepilogo di una riga. Seguono tre servizi centrati, ciascuno un’icona cerchiata sopra nome e riga. Design ha una sua banda con foto, descrizione e **Get a quote**. Loghi clienti grigi scorrono su una banda chiara, e una banda viola chiude la pagina.

## Se non vedi la pagina come mostrata

- **Il marquee mostra ancora i loghi di esempio.** Le tre immagini di esempio restano finché non le rimuovi. Apri le impostazioni del marquee, fai clic sulla **×** su ogni immagine di esempio e salva.
- **I loghi sono a colori.** **Gray scale** è spento. Apri le impostazioni del marquee, attivalo e fai clic su **Save**.
- **Le icone non hanno il cerchio.** **Style** sta nel pannello **Icon utilities**, non in **General**. Apri le impostazioni dell’icona, apri **Icon utilities** e imposta **Style** su **Circle**.
- **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?

- [Landing page](/it/hc/documentazione/impara-dxpr-builder/tutorial/landing-page-marketing) per una pagina dedicata per servizio
- [Elemento Icon](/it/hc/documentazione/impara-dxpr-builder/elementi/icona) per dimensioni e stili
- [Elemento Marquee](/it/hc/documentation/learn-dxpr-builder/elements/marquee) per le impostazioni della banda loghi