Crea una pagina contatti.

Impara DXPR BuilderCrea le pagineSegui un tutorial

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.

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.

E adesso?