Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

WordPress: pagina Contatti personalizzata con Elementor

WordPress ed Elementor: guida passo passo alla realizzazione di un form di contatto per il proprio sito Web
WordPress ed Elementor: guida passo passo alla realizzazione di un form di contatto per il proprio sito Web
Link copiato negli appunti

La pagina "Contatti" è uno dei pilastri fondamentali di un sito web professionale, anche se realizzato con WordPress. Essa svolge un ruolo cruciale nel facilitare la comunicazione tra un'azienda e i suoi clienti. Fornendo loro un canale diretto per porre domande, richiedere informazioni o fornire feedback. Questa pagina crea un punto di contatto e trasmette anche un senso di affidabilità e trasparenza. La sua presenza indica che un'azienda è aperta al dialogo e pronta ad ascoltare le esigenze della clientela.

Una pagina Contatti ben progettata può contribuire alla reputazione aziendale e a migliorare l'esperienza dell'utente sul sito web. In questo articolo vi guideremo passo passo attraverso il processo di creazione di una pagina Contatti utilizzando Elementor. Plugin attraverso il quale è possibile personalizzare la pagina in modo che rispecchi l'identità dell'azienda e offra un'esperienza di contatto intuitiva.

Esploreremo le varie funzionalità di Elementor che rendono la progettazione e la personalizzazione di pagine così semplici ed efficaci. Come form di contatto, mappatura degli indirizzi e molte altre feature con cui rendere unica la pagina Contatti e favorire la comunicazione con i clienti.

Elementor e i plugin WordPress da utilizzare

Per la creazione di questa guida si è scelto di utilizzare la piattaforma WordPress per sviluppare una pagina Contatti da inserire all'interno di un sito web vetrina o portfolio. Innanzitutto si procede con l’installazione del plugin principale per la creazione della pagina: Elementor. Il site-builder più utilizzato con WordPress. Dalla sezione "Plugin" della bacheca si deve cliccare su "Aggiungi nuovo plugin" per poi scrivere "Elementor" nella barra di ricerca.

Il secondo plugin che servirà per sviluppare una pagina di contatto è "WP Forms". Uno dei principali strumenti per la creazione dei moduli di contatto necessari per la raccolta dei dati e delle richieste da parte degli utenti. Analogamente a quanto fatto per Elementor si deve procedere con la fase di installazione.

Una volta installati ed attivati entrambi i plugin si potrà iniziare il lavoro creativo. Dopo una breve guida fornita da Elementor verrà visualizzata la schermata per la creazione di una nuova pagina con il site-builder appena installato. Questa sarà la pagina Contatti che verrà sviluppata.

Creazione della pagina e personalizzazione

Prima di procedere con la personalizzazione è consigliabile sviluppare una struttura da seguire per lo sviluppo della pagina. Senza dubbio essa dovrà contenere una sezione principale da visualizzare nella parte superiore che possa accogliere il visitatore nella nuova pagina. Si deve poi inserire un form di contatto utile per raccogliere informazioni e richieste. Infine, a seconda del contesto in cui si opera, si può inserire una Google Maps con le indicazioni stradali e/o le informazioni circa l'attività o il negozio.

Lo scopo della pagina contatti, infatti, è proprio quello di fornire le informazioni che possono servire per mettersi in contatto con un'attività e/o un professionista.

In fase iniziale si procede con l'aggiunta di un nuovo contenitore, dall'apposita sezione laterale. Per comodità questo contenitore verrà chiamato "Hero" e rappresenta l'elemento principale della pagina nonché il primo ad essere visualizzato al caricamento. È opportuno quindi inserire al suo interno gli elementi rappresentativi della pagina che possano suggerire l'argomento trattato. In questa guida si è scelto di inserire un semplice tag di intestazione che invita il cliente a contattarci.

Il tag di intestazione può essere personalizzato tramite la voce "Stile" del menu laterale di sinistra. È possibile ad esempio centrare il testo nel contenitore o modificare il font e la grandezza del carattere
.
Analogamente a quanto fatto in precedenza, si procede con la creazione di un nuovo contenitore che servirà per inserire un form di contatto. Per fare ciò è sufficiente cliccare il simbolo "+" presente nella parte centrale della pagina. Questo nuovo contenitore verrà posizionato al di sotto della sezione "Hero" contenente il riferimento "Contattaci".

Dopo aver selezionato "WP forms" dal menu laterale di sinistra questo verrà inserito nel contenitore precedentemente creato.

Il form di contatto

Ora bisogna configurare il form affinché possa raccogliere le informazioni degli utenti. Dalla schermata che verrà mostrata si deve fare clic su "Nuovo modulo" e verrà mostrata la schermata principale di WP Forms.

Da qui sarà possibile creare un nuovo template per il modulo di contatto. Per comodità è consigliato scegliere il "Modulo di contatto semplice" selezionando "Usa template".

Personalizzazione dei campi form

Ora bisogna procedere con la personalizzazione dei campi del template scelto e successivamente con la configurazione dell'indirizzo e-mail. Questo passaggio è fondamentale affinché ogni informazione inserita nel form possa arrivare correttamente all'inbox di destinazione. Per poter settare correttamente i parametri è possibile recarsi nella sezione "Impostazioni" del menu laterale di sinistra e muoversi all'interno delle sezioni presenti.

Una volta completata la configurazione e la personalizzazione del form di contatti si deve fare clic su "Salva" per ultimare e confermare le modifiche e quindi inserire il form nella pagina.

Una volta ritornati nell’editor Elementor sarà possibile personalizzare la struttura della sezione contenente il form tramite la voce "Avanzato" o "Stile".

Inserimento della mappa

Infine, si procede con la creazione di una sezione dedicata a Google Maps. Per fare ciò è possibile aggiungere un nuovo contenitore e inserire al suo interno l'elemento "Maps" che si può trovare digitando nella barra di ricerca degli elementi posta sulla sinistra.

Una volta cliccato, l'editor inserirà una mappa predefinita che potrà essere personalizzata. Bisognerà quindi scegliere quale luogo mostrare nella mappa. È possibile digitare il nome dell'attività nel campo di sinistra, la mappa mostrerà quindi la posizione che è stata scelta.

Anche in questo caso, una volta completato l'inserimento, è possibile proseguire con la personalizzazione della mappa. Le voci "zoom" e "altezza" permetteranno di modificare il layout della mappa come si desidera.

Pubblicazione della pagina con WordPress

Per concludere la fase di modifica della pagina appena creata si deve fare clic su "Aggiorna" (in basso a sinistra) in modo da memorizzare i cambiamenti effettuati. È possibile visualizzare il risultato finale cliccando su "Anteprima modifiche" o aprendo la pagina tramite URL.

Il gioco è fatto! Grazie a WordPress e a questa guida siete ora in grado di creare da zero una pagina "Contatti" per un'attività, un negozio o un portfolio personale. Sarà possibile inserire ulteriori elementi, personalizzarli e renderla più o meno complessa.

Questa guida fornisce gli elementi principali per lo sviluppo di una pagina Contatti semplice, intuitiva e personalizzata con form di contatto e mappatura degli indirizzi. Ricordate che essa non è solo un punto di contatto cruciale tra l'azienda e i clienti ma anche un elemento chiave per la trasparenza e la fiducia.

Ti consigliamo anche