Supporto prioritario
Help Center / Themes / Tema Hello Biz / Widget di contatto

Widget di contatto

Ultimo aggiornamento: Settembre 3, 2025

Aggiungi il widget

Per accedere e usare un widget:

  1. Nell’Editor di Elementor, clicca su +.
    Vengono visualizzati tutti i widget disponibili.

  2. Clicca o trascina il widget sull’area di lavoro. Per maggiori informazioni, vedi Aggiungere elementi a una pagina.

Cos'è il widget di contatto?

In generale, i siti web dovrebbero fornire un modo semplice per i potenziali clienti di contattarti. Il widget di contatto è un modo rapido per aggiungere i tuoi dettagli di contatto a una pagina web.

Vedi tutte le opzioni disponibili con il widget di contatto.

Caso d'uso comune

Blake sta creando un sito web per un bar sportivo. Usano il widget di contatto per creare una pagina Contattaci, in modo che i clienti possano scrivere o telefonare al bar per effettuare prenotazioni.

Esempio

Casi d'uso aggiuntivi

  • Aggiungi le informazioni di contatto all’intestazione e/o al piè di pagina di un sito.

Aggiungere un widget di contatto: passo dopo passo

Nell’esempio seguente, creeremo una pagina Contattaci.

Aggiungi un widget di contatto

Per aggiungere un widget di contatto:

  1. Trascina il widget di contatto sull’area di lavoro.
  2. Nella sezione Layout del pannello, scegli uno dei tre preset per le informazioni di contatto.
  3. Apri la sezione Testo.
  4. Nel campo Intestazione, inserisci: Contattaci.
  5. Nel campo Descrizione, inserisci: Scrivi o chiama per prenotazioni o altre richieste.
  6. Apri la sezione Dettagli di contatto.
    Per impostazione predefinita, il widget di contatto ha quattro sezioni. Ci sono tre tipi di sezioni:
    1. Link di contatto: Progettato per visualizzare indirizzi email, numeri di telefono e altri dettagli di contatto.
    2. Testo: Progettato per visualizzare testo libero.
    3. Icone social: Progettato per visualizzare link a vari siti di social media.
  7. Gruppo 1 contiene i link di contatto, qui aggiungeremo i modi in cui i clienti possono inviare email o chiamare il bar.
  8. Nella casella di testo Sottotitolo, inserisci: Chiamaci.
  9. Nella sezione Link, clicca sul campo Chiama.
  10. Nel campo Numero, inserisci il tuo numero di telefono.
  11. Clicca sul campo Email e inserisci la tua Email e una riga Oggetto. Lasceremo il campo Messaggio vuoto.
    Dettagli di contatto ti permette di aggiungere diversi modi per contattarti. Aggiungiamo un numero WhatsApp
  12. Clicca su Aggiungi elemento.
  13. Clicca sul campo Icona e seleziona Libreria icone.
    Questo apre la Libreria icone.
  14. Seleziona l’icona WhatsApp dalla libreria e clicca su Inserisci.
  15. Seleziona WhatsApp dalla libreria a discesa Piattaforma.
  16. Inserisci un numero WhatsApp nel campo Numero.
  17. Nel nostro caso, non vogliamo mostrare gli orari di apertura. Imposta Gruppo 2 su Nascondi.
  18. Aggiungiamo un modo per i visitatori di trovare il bar. Nella Sezione 3, seleziona Waze dal menu a discesa Piattaforma.
  19. Nel campo Link, aggiungi un link Waze. Consulta la documentazione di Waze per i dettagli sulla creazione di un link Waze.
  20. La Sezione 4 contiene link ai social media. Il bar ha solo un account Instagram, quindi prima clicca sulle icone di eliminazione accanto alle icone X e TikTok.
  21. Clicca sul campo Instagram e, nel campo Link, inserisci un link a un account Instagram.
  22. Nella sezione Mappa, puoi aggiungere un link a Google Maps. Per i dettagli, vedi Integrazione Google Maps.

Impostazioni per il widget di contatto

Puoi personalizzare i tuoi widget utilizzando contenuti, stile e altri parametri avanzati, offrendoti grande flessibilità nell’adattarli alle tue esigenze. Clicca sulle schede qui sotto per vedere tutte le impostazioni disponibili per questo widget.

Scheda Contenuto

Aggiungi, elimina e modifica elementi e controlli.

Scegli uno dei tre layout di base per il tuo widget di contatto.

Un breve titolo per il tuo widget di contatto.

Usa il menu a discesa per scegliere un tag HTML per la tua intestazione. Le scelte includono da H1 a H6, Div, Span o Paragrafo. Si consiglia di utilizzare l’impostazione predefinita.

Una o due frasi che descrivono il contenuto del widget di contatto. Ad esempio, se vuoi che i visitatori ti contattino per prenotazioni, questo sarebbe il posto in cui menzionarlo.

Usa il menu a discesa per scegliere un tag HTML per la tua intestazione. Le scelte includono da H1 a H6, Div, Span o Paragrafo. Si consiglia di utilizzare l’impostazione predefinita.

Per impostazione predefinita, il widget di contatto ha 4 sezioni – Gruppi 1-4. Il Gruppo 1 deve essere visibile, ma gli altri gruppi hanno un interruttore che ti permette di nasconderli.

Usa il menu a discesa per scegliere uno dei tre tipi per ogni gruppo:

  • Link di contatto: Progettato per visualizzare informazioni come:
    • Email
    • Numeri di telefono
    • Numeri WhatsApp
    • Link Facebook Messenger
    • Link Viber
    • Link Google Maps
    • Posizione Waze
    • URL
  • Testo: Aggiungi testo libero al gruppo.
  • Icone social: Aggiunge icone e link ai tuoi siti di social media. Ad esempio, se hai un account Instagram, puoi aggiungere un’icona Instagram con un link al tuo account.

Aggiungi un titolo a un gruppo.

I link appaiono nei gruppi Dettagli di contatto e Icone social.

  • Clicca su un link per modificare le informazioni nel link. Ad esempio, clicca sul link Chiama per aggiungere un numero di telefono. Puoi anche cambiare l’etichetta del link e il tipo di link.
  • Clicca sull’icona di eliminazione per eliminare un link.
  • Clicca sull’icona di copia per duplicare un link.

Usa la casella di testo per aggiungere alcune frasi alla sezione. Ad esempio, puoi usarla per aggiungere gli orari di apertura al gruppo.

Usato per segnare la tua posizione su Google Maps. Per i dettagli, vedi Integrazione Google Maps.

Scheda Stile

Determina l’aspetto degli elementi del menu e dei controlli.

Il contenuto di questa sezione dipende dal Preset che hai selezionato.

Controlla se i Gruppi nel tuo widget di contatto sono impostati ai bordi del widget – Inizio o Fine – o al Centro del widget.

Per alcuni preset, puoi anche impostare la Posizione del contenuto, che controlla il blocco di testo, al bordo iniziale o al centro del widget.

Le informazioni nel widget di contatto possono essere divise in un massimo di 4 colonne e un numero fisso di righe a seconda del preset scelto.

Usa il menu a discesa Colonne per determinare il numero di colonne.

Usa i contatori Spazi per impostare una distanza tra le colonne e le righe del widget.

Nei preset che includono una mappa, determina se la mappa si trova all’inizio o alla fine del widget.

Determina la dimensione, il colore e il font dell’intestazione.

Determina la dimensione, il colore e il font del testo della Descrizione.

Usa il cursore per aumentare e diminuire la quantità di spazio tra le righe di testo.

Imposta il colore e il font del testo del Sottotitolo.

  • Colore testo: Per i dettagli, vedi Scegli un colore o Usa font e colori globali.
  • Tipografia: Imposta il tipo e la dimensione del font del sottotitolo. Per i dettagli, vedi Tipografia
  • Spaziatura: Usa il cursore per impostare una distanza tra il sottotitolo di un Gruppo e il contenuto.

Questo si applica ai Gruppi che usano l’impostazione Link di contatto.

  • Spaziatura: Usa il cursore per impostare una distanza tra i diversi campi di contatto.
  • Tipografia: Imposta il tipo e la dimensione del font del campo di contatto. Per i dettagli, vedi Tipografia
  • Normale: Clicca per impostare il colore predefinito dell’icona e del testo.
  • Hover: Imposta il colore dell’icona e del testo quando i visitatori passano il mouse sul campo di contatto.
  • Dimensione icona: Usa il cursore per impostare la dimensione dell’icona che simboleggia il tipo di contatto.
  • Colore testo: Per i dettagli, vedi Scegli un colore o Usa font e colori globali.
  • Dimensione icona: Usa il cursore per impostare una dimensione per le icone che simboleggiano il tipo di contatto.
  • Spazio icona: Usa il cursore per impostare la distanza tra le icone che simboleggiano il tipo di contatto e il testo del tipo di contatto.

Questo si applica ai Gruppi che usano l’impostazione Testo.

Imposta il colore e il font del testo.

Questo si applica ai Gruppi che usano l’impostazione Icone social.

  • Normale: Clicca per impostare il colore, la dimensione e lo spazio predefiniti dell’icona.
  • Hover: Clicca per impostare il colore, la dimensione e lo spazio dell’icona quando i visitatori passano il mouse sulle icone.
  • Colore icona: Imposta il colore delle icone che rappresentano i social media. Per i dettagli, vedi Scegli un colore o Usa font e colori globali.
  • Dimensione icona: Usa il cursore per impostare la dimensione delle icone che rappresentano i social media.
  • Spazio icona: Usa il cursore per impostare la quantità di spazio tra le icone dei social media.

Determina l’area rappresentata nella mappa.

Imposta su Sì per fare in modo che la mappa copra l’intera larghezza della sua sezione.

Usa i cursori per impostare la dimensione della mappa.

Aggiungi un bordo intorno alla mappa. Se aggiungi un bordo dovrai selezionare un tipo di bordo. Scopri di più sui tipi di bordo.

Dovrai anche selezionare una forma del bordo:

  • Arrotondato: I pulsanti appaiono con angoli smussati.
  • Arrotondato: I pulsanti appaiono con bordi uniformemente curvi.
  • Ovale: Angoli molto arrotondati.
  • Netto: Pulsanti rettangolari.
  • Personalizzato: Regola il raggio, usando i quattro contatori per regolare ogni singolo angolo. Scopri di più su questi metodi di misurazione.

Clicca sull’icona della matita per aggiungere un’ombra alla mappa. Scopri di più sulle ombre.

Aggiungi uno sfondo al widget di contatto. Per i dettagli, vedi Crea uno sfondo.

Aggiungi uno sfondo parzialmente trasparente. Per i dettagli, vedi Crea uno sfondo.

Usa il cursore per determinare la quantità di spazio tra l’area dell’intestazione e i gruppi.

Usa il cursore per impostare la quantità di spazio tra la mappa e il resto degli elementi.

Imposta su Sì per aggiungere un bordo intorno al widget di contatto. Scopri i tipi di bordo.

Se aggiungi un bordo, dovrai scegliere una larghezza e un colore del bordo.

Scegli come appaiono gli angoli del widget di contatto:

  • Arrotondato: I pulsanti appaiono con bordi uniformemente curvi.
  • Netto: Pulsanti rettangolari.
  • Personalizzato: Regola il raggio, usando i quattro contatori per regolare ogni singolo angolo. Scopri di più su questi metodi di misurazione.

Clicca sull’icona della matita per aggiungere un’ombra alla casella del widget di contatto. Scopri di più sulle ombre.

Aggiungi o sottrai spaziatura interna (padding) nel widget di contatto. Scopri come creare spazio con padding e margini

Imposta su Sì se vuoi che il widget di contatto occupi l’intera altezza dello schermo.

Scheda Avanzate

Controlla il posizionamento del tuo widget, inserisci link, aggiungi codice personalizzato e altro ancora.

Scopri di più sulle impostazioni della scheda Avanzate.

In questa pagina

Condividi questo articolo

Hosted with