La pagina Contatti del Ristorante

Nel paragrafo precedente abbiamo lavorato sulla pagina Blog in questo andiamo avanti costruendo la pagina Contatti. Dal pannello di controllo di WordPress portati su Pagine > Tutte le pagine e clicca Modifica sulla pagina Contatti.

Come per le pagine precedenti anche in questo caso imposta in Layout contenuto > Larghezza piena / esteso e disabilita il Titolo e l’Immagine in evidenza. Aggiorna le modifiche e poi entra in modalità Modifica con Elementor.

Pagina Contatti del Ristorante

Anche in questa pagina devi includere una testata con un’immagine di sfondo in cui inserire il blocco Titolo dove scrivere “Contatti”. Quindi aggiungi (+) una sezione a singola colonna e dal menu Stile scegli Tipo di sfondo classico e successivamente seleziona/carica dalla libreria di WordPress l’immagine più appropriata.

Alla voce Posizione > Centrato, in Ripetizione > Non ripetere, in Dimensione > Copertina e ancora in Layout imposta un valore di 400px in Altezza minima. Anche in questo caso per aumentare il contrasto tra il titolo e lo sfondo ti conviene attivare uno Sfondo overlay regolando il valore dell’opacità.

Clicca questo pulsante se decidi di acquistare un pacchetto SiteGround.

Grazie mille

Infine puoi applicare, anche a questa testata, un Separatore sagomato ad effetto Onde con un valore di 180 in larghezza, 55 in altezza e attiva l’effetto Flip. Prosegui trascinando il blocco Intestazione in cui scriverai “Contatti” allineando il testo al centro, assegna il Tag HTML H1 ed in seguito, in Stile, seleziona il bianco come Colore al testo.

Dopo aver completato la testata della pagina puoi pensare di inserire una sezione a due colonne dove includere una mappa Google sulla sinistra e sulla destra i giorni di apertura nonché le informazioni di contatto dell’attività. Solitamente si preferisce inserire anche un modulo di contatto ma questo lo vedremo nel paragrafo successivo.

Pagina Contatti del Ristorante

Dal solito simbolo “+” inserisci una sezione a due colonne e applica un margine superiore per distanziarla dalla prima. Portati su Avanzato, disabilita l’opzione Collega insieme i valori e assegna un valore di 75px al margine superiore.

Dalla lista dei blocchi trascina Google Maps nella prima colonna. In seguito devi personalizzare il blocco e dalla voce Posizione ti basterà scrivere l’indirizzo esatto. Nell’esempio abbiamo scritto “Via Garibaldi 19, Roma”. Se volessi aumentare lo zoom della mappa potresti farlo alla voce Zoom impostando il valore che desideri che nell’esempio è pari a 15. Infine, per regolare l’altezza della mappa lo puoi fare alla voce Altezza.

Passiamo alla seconda colonna dove inserire, prima di tutto, il blocco Intestazione e scrivere, ad esempio, “Apertura” allineando il testo a sinistra e assegnando il Tag HTML H3. In seguito su Stile scegli il nero come Colore al testo.

Sotto al titolo puoi fornire informazioni relative ai giorni e agli orari di apertura dell’attività attraverso un blocco Editor di testo. Come ultima modifica puoi inserire un altro titolo e le informazioni di contatto. Dalla lista dei blocchi scegli Lista Icone trascinandolo sotto il titolo appena inserito e personalizza tutte le informazioni.

Come ti abbiamo accennato, in questa pagina di solito viene inserito anche un modulo di contatto per dare la possibilità agli utenti di scrivere direttamente dal sito. Questo aspetto lo vedremo meglio nel modulo successivo quando realizzeremo la pagina Prenota.

Commenti

Per qualsiasi dubbio o domanda, scrivi un commento qui sotto.

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.