Continuiamo a lavorare con Elementor. Nella lezione precedente, abbiamo esplorato dettagliatamente l'importanza di avere un sito portfolio e come sia possibile utilizzarlo non solo nel contesto delle arti e del design, ma anche in altri settori professionali come l'architettura, l'ingegneria, lo sviluppo software e molti altri.
Dove eravamo rimasti?
Nel corso della creazione della pagina portfolio abbiamo approfondito vari aspetti cruciali. Inizialmente ci siamo concentrati sull'importanza dell'integrazione di un template personalizzato per garantire coerenza stilistica con il resto del sito. Assicurando così un'esperienza utente fluida e coerente. Successivamente, abbiamo esplorato le diverse opzioni di personalizzazione offerte da Elementor, uno strumento versatile e potente per la progettazione di pagine web. Attraverso Elementor, siamo stati in grado di inserire elementi visivi accattivanti come uno slideshow interattivo, arricchendo così il portfolio con una presentazione dinamica e coinvolgente delle proprie realizzazioni professionali.
Inoltre, abbiamo introdotto il plugin "Happy Addons for Elementor" per espandere ulteriormente le funzionalità di Elementor e offrire una gamma ancora più ampia di opzioni di progettazione e personalizzazione. Con lo strumento "Justified Grid" siamo stati in grado di creare un layout strutturato e organizzato per visualizzare il portfolio in modo ancora più interattivo, consentendo ai visitatori del sito di esplorare facilmente i vari progetti e lavori presentati.
Pagina contatti con Elementor e WordPress
Ora, passiamo alla prossima fase del nostro progetto: la creazione di una pagina contatti. Essa svolge un ruolo cruciale nel fornire ai visitatori del sito un modo diretto per comunicare con te o con la tua azienda. Inizieremo con la creazione della pagina lato grafico, ereditando la struttura delle altre pagine così da mantenere lo stesso aspetto e il coordinamento con il resto del sito web.
Passeremo poi all'integrazione di un form di contatto personalizzato che consentirà ai visitatori del sito di inviare messaggi direttamente alla tua casella di posta elettronica.
Esploreremo poi l'inserimento di una mappa interattiva di Google per mostrare la posizione fisica dell'azienda o della nostra attività. Offrendo ai visitatori una visione chiara e precisa della nostra posizione. Parleremo inoltre dell'inserimento delle principali informazioni di contatto, come l'indirizzo email, il numero di telefono e l'indirizzo fisico. Fornendo agli utenti tutti i mezzi necessari per comunicare con noi in modo efficace.
Apriamo dunque la dashboard di WordPress. Andiamo poi nella sezione "Pagine" e modifichiamo la pagina "Contatti".
Procediamo con l'inserimento del template di pagina creato nelle scorse lezioni. Clicchiamo sull'icona della cartella per aprire l'elenco dei template.
Infine selezioniamo il nostro template personalizzato così da poter partire dall'impostazione generale che abbiamo creato per tutte le altre pagine.
Ovviamente cambiamo il titolo della pagina e rimuoviamo le parti che non ci servono.
Ora predisponiamo la struttura a griglia all'interno della quale inseriremo gli elementi della nostra pagina (form di contatto, informazioni di contatto e mappa di Google).
Aggiungiamo all'interno della prima sezione tutte quelle che sono le principali informazioni di contatto come ad esempio l'indirizzo, il numero di telefono e l'indirizzo e-mail.
Mentre all'interno della sezione di destra inseriremo il form di contatto. Possiamo sfruttare ancora una volta "Happy Addons for Elementor" ed integrare il form di contatto "Contact Form 7", ovvero uno dei plugin più utilizzati per la creazione di moduli.
Prima di fare ciò però sarà necessario installare l'estensione. Quindi salviamo tutto e torniamo all'interno della Dashboard, nello specifico nella sezione "Plugin". Fatto questo, cerchiamo ed installiamo il plugin "Contact Form 7".
Ora andiamo all'interno delle impostazioni e creiamo un nuovo modulo di contatto che integreremo in seguito all'interno della nostra pagina "Contatti".
All'interno della prima schermata troviamo le informazioni principali tra le quali possiamo scegliere quali dati richiedere ai nostri visitatori.
Una volta selezionate le informazioni che vogliamo siano visibili all'interno del form di contatto, passiamo alla seconda schermata dove è possibile preimpostare l'email. Anche in questo caso è possibile selezionare le voci che vogliamo includere nella mail ed inoltre possiamo personalizzare il contenuto impaginando le informazioni a piacimento.
Una volta configurato il form di contatto salviamo l'articolo e torniamo ancora una volta all'interno della pagina "Contatti". Ora che abbiamo creato il modulo grazie a "Contact Form 7", possiamo cercare il suo nome all'interno dei componenti di Elementor.
Lo inseriamo quindi all'interno della nostra colonna di destra e a questo punto selezioniamo il nome del modulo appena creato.
Naturalmente vedremo apparire il form all'interno dell'area scelta. Come previsto.
Inserire la Google Map con Elementor
Ora non rimane che inserire la Google Map per terminare la nostra pagina. Procediamo anche in questo caso a selezionare l'elemento dedicato chiamato, appunto, Google Maps ed al suo inserimento nella pagina.
Una volta inserita anche quest'ultima impostiamo la località che vogliamo venga mostrata agli utenti ed il gioco è fatto.
