---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/tutorials/contact-page'
title: 'Crea una pagina contatti | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:56:49+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Qui crei una pagina contatti: una mappa del tuo indirizzo, tre modi per raggiungerti ciascuno con un’icona, e un modulo di contatto. Usala per la pagina a cui il tuo menu collega come "Contact". Per mettere solo un modulo dentro un’altra pagina, segui invece Aggiungi moduli alle pagine.
  Il video crea la pagina contatti di un consiglio comunale.
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 pagina contatti'
      description: |-
        Qui crei una pagina contatti: una mappa del tuo indirizzo, tre modi per raggiungerti ciascuno con un’icona, e un modulo di contatto. Usala per la pagina a cui il tuo menu collega come "Contact". Per mettere solo un modulo dentro un’altra pagina, segui invece Aggiungi moduli alle pagine.
        Il video crea la pagina contatti di un consiglio comunale.
      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:49+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/contact-page'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/tutorials/contact-page'
      description: |-
        Qui crei una pagina contatti: una mappa del tuo indirizzo, tre modi per raggiungerti ciascuno con un’icona, e un modulo di contatto. Usala per la pagina a cui il tuo menu collega come "Contact". Per mettere solo un modulo dentro un’altra pagina, segui invece Aggiungi moduli alle pagine.
        Il video crea la pagina contatti di un consiglio comunale.
      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 pagina contatti.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Video (embedded)](/hc/documentation/learn-dxpr-builder/elements/video)
- [Crea una landing page marketing](/it/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [Drupal Blocks](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks)

Qui crei una pagina contatti: una mappa del tuo indirizzo, tre modi per raggiungerti ciascuno con un’icona, e un modulo di contatto. Usala per la pagina a cui il tuo menu collega come "Contact". Per mettere solo un modulo dentro un’altra pagina, segui invece [Aggiungi moduli alle pagine](/it/hc/documentation/learn-dxpr-builder/tutorials/add-forms).

Il video crea la pagina contatti di un consiglio comunale.

  ## Prima di iniziare

- Il tuo ruolo ha il permesso **Edit with DXPR Builder**.
- Il tuo modulo di contatto esiste come blocco, per esempio un webform aperto creato con il modulo Webform.
- 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 mappa

1. Fai clic su **Add Elements** sulla pagina vuota e scegli **Section** dalla scheda **Layout**.
2. Fai clic su **+** sulla sezione e scegli **Map** dalla scheda **Content**.
3. Digita il tuo **Address**, imposta **Map height** su 400 e fai clic su **Save**.

La mappa incorpora Google Maps centrato sull’indirizzo.

## Passaggio 2: aggiungi i recapiti

1. Passa sopra alla sezione e fai clic su **Add Section Below**. Apri il **More** > **Settings** della nuova sezione, scegli **Align text center** in **HTML classes**, poi un **Background** grigio chiaro nel pannello **Style**. 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 "Visit us" come **Heading 3**, aggiungi indirizzo e orari di apertura, 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 `location-dot` e fai clic sull’icona. Imposta **Size** su **Extra Large (2x)** e fai clic su **Save**.
5. Ripeti nella seconda colonna con "Call us" e l’icona `phone`, e nella terza con "Email us" e l’icona `envelope`.

Scegli lo stesso **Size** per tutte e tre le icone così la riga si allinea.

## Passaggio 3: aggiungi il modulo

1. Aggiungi una terza sezione con **Add Section Below** e dagli la classe **Align text center**.
2. Fai clic su **+** sulla sezione e apri la scheda **Drupal Blocks**.
3. Scegli il blocco del tuo modulo di contatto e fai clic su **Save** nella sua finestra delle impostazioni; il modulo compare nella sezione.
4. Fai di nuovo clic su **+** sulla sezione e scegli **Text**; arriva sopra il modulo. Digita "Send us a message" come **Heading 2**, aggiungi una riga e fai clic su **Save**.

I moduli creati in **Structure** > **Contact forms** (`/admin/structure/contact`) non hanno blocco nel core Drupal. Il modulo contribuito Contact Block aggiunge uno **Contact block** alla stessa scheda.

## 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:

- **Chiama con un tocco**: seleziona il numero di telefono nel testo, fai clic sul pulsante link nella barra degli strumenti e inserisci `tel:+31104001234`
- **Clic per email**: seleziona l’indirizzo e collegalo a `mailto:info@example.com`
- **Qualsiasi blocco**: la scheda **Drupal Blocks** incorpora i blocchi del tuo sito, come moduli di ricerca, iscrizioni newsletter e blocchi personalizzati

## Cosa vedi

Una mappa da 400 pixel del tuo indirizzo riempie il top della pagina. Sotto una banda grigia mostra tre colonne centrate, ciascuna con icona, intestazione e recapiti. Il modulo chiude la pagina sotto la sua intestazione centrata "Send us a message".

## Se non vedi la pagina come mostrata

- **La mappa mostra il posto sbagliato.** Google Maps cerca l’indirizzo come digitato. Aggiungi CAP, città e paese a **Address** e salva di nuovo.
- **Il tuo modulo non è nella scheda Drupal Blocks.** Il builder elenca solo i webform aperti, e i moduli di contatto del core richiedono il modulo Contact Block. Imposta lo stato del webform su **Open** in **Structure** > **Webforms** (`/admin/structure/webform`).
- **Le icone hanno dimensioni diverse.** Ogni icona conserva il suo **Size**. Apri le impostazioni di ogni icona e scegli lo stesso.
- **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 Video](/hc/documentation/learn-dxpr-builder/elements/video) per aggiungere un tour virtuale del tuo ufficio
- [Pagina landing](/it/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) per la tua pagina marketing principale
- [Integrazione blocchi Drupal](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) per altro sull’inserimento di blocchi