La pagina Menu con i piatti del Ristorante

In questo paragrafo ti spieghiamo come realizzare la pagina Menu che ospiterà i piatti tipici del ristorante. Dal pannello di controllo di WordPress portati su Pagine > Tutte le pagine e clicca Modifica sulla pagina Menu. 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.

La pagina Menu del Ristorante

Per uniformare tutte le pagine, creando uno stile comune, anche in questa dovrai inserire una testata con un blocco Immagine e all’interno un blocco Intestazione in cui scrivere il titolo della pagina. Nell’esempio abbiamo scritto “Menu”. Dal simbolo “+” aggiungi una struttura a singola colonna e successivamente su Stile > Tipo di sfondo seleziona/carica un’immagine dalla libreria applicando un’altezza minima di 400px. da Layout > Altezza minima.

Clicca questo pulsante se decidi di acquistare un pacchetto SiteGround.

Grazie mille

Anche in questo caso per aumentare il contrasto con il titolo devi attivare un Filtro overlay di colore scuro. Infine in Separatore sagomato scegli una tipologia ad onde inserendo un valore di 190 in larghezza e 55 in altezza e attivando gli effetti Flip e Inverti.

In seguito tra i blocchi trascina Intestazione. Scrivi “Menu”, assegna il Tag HTML H1 e allinealo al centro. Su Stile imposta il bianco come Colore al testo. Subito sotto possiamo pensare di elencare i piatti tipici che il ristorante propone.

La pagina Menu del Ristorante

Inserisci prima di tutto una sezione ad 1 colonna dove scriverai un titolo come ad esempio “Le nostre specialità” e sotto un blocco Divisore. Ricordati di impostare sempre un margine superiore per distanziare le varie sezioni.

Per presentare i piatti del ristorante inserisci una sezione a 4 colonne. Dai blocchi di Elementor, in questo caso, usa il Riquadro immagine inserendolo nella prima colonna quindi scegli/carica un’immagine dalla libreria, come dimensione seleziona Pieno e per creare un effetto al passaggio del mouse, portati su Stile e poi su Hover impostando un valore di 0,25 nel campo Opacità.

Per avere una maggiore spaziatura tra le colonne vai su Layout e scegli Esteso alla voce Spaziatura colonne. Ultima modifica da effettuare è al margine superiore che in questo caso puoi impostare 25px.

Dopo aver deciso lo stile del primo Riquadro immagine lo replichi copiandolo nelle colonne restanti sostituendo il contenuto. Andiamo avanti con la presentazione dei dolci. Per staccare questa sezione dalle precedenti devi inserirne una ad 1 colonna con sfondo parallasse.

La pagina Menu del Ristorante

Vai su Stile e associa un’immagine selezionandola/caricandola dalla libreria. Poi in Posizione > Centrato, in Allegato > Fisso, in Ripetizione > Non ripetere e infine in Dimensione > Copertina. Successivamente su Sfondo overlay imposta un colore scuro.

Anche per questa sezione dal menu Layout > Altezza minima con valore di 250px e trascina un blocco Intestazione scrivendo, ad esempio, “I nostri dolci”. Assegna un Tag HTML H2 con allineamento al centro e Colore del testo bianco. Ricordati di distanziare la sezione dalla precedente portandoti su Avanzato e impostando 75px al margine superiore.

Aggiungi una sezione a singola colonna dove all’interno devi inserire il blocco Galleria di base e caricare/selezionare le immagini dalla libreria di WordPress. In Dimensioni scegli Thumbnail 150 x 150px, colonne 6 e su LightBox seleziona Si.

L’effetto LightBox ingrandirà le immagini quando l’utente cliccherà sulle anteprime.

La pagina Menu del Ristorante

Per concludere questa pagina abbiamo pensato di inserire una chiamata all’azione (call to action) con il pulsante Prenota ora. Inserisci una sezione a singola colonna e trascina il blocco Intestazione dove scrivere uno slogan.

La pagina Menu del Ristorante

Infine inseriamo una chiamata all’azione. Portati nei blocchi e scegli Pulsante. Scrivi un testo e nel campo Link inserisci l’URL della pagina Prenota. Imposta l’allineamento al centro e infine scegli un’icona che preferisci dalla Libreria icona.

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.