La pagina il Ristorante

In questo tutorial continuiamo a realizzare il nostro sito creando la pagina di presentazione del ristorante. Dal pannello di controllo di WordPress vai su Pagine > Tutte le pagine e clicca su Modifica sulla pagina Il Ristorante.

Come abbiamo fatto per la pagina Home Page, anche in questo caso, andiamo nelle Impostazioni di Astra, disabilitiamo il titolo, selezioniamo Disabilita l’immagine in evidenza e in Layout di contenuto > Larghezza piena / esteso. Aggiorna la pagina e successivamente entriamo in modalità Modifica con Elementor.

Clicca questo pulsante se decidi di acquistare un pacchetto SiteGround.

Grazie mille

In questa pagina puoi ad esempio creare una testata con un’immagine di sfondo e all’interno il testo “Il Ristorante”. Dal simbolo “+” scegli una sezione a singola colonna. Portati successivamente nel menu Stile e alla voce Tipo di sfondo seleziona un’immagine dalla libreria media di WordPress o caricala dal tuo computer.

La pagina Il Ristorante

Aumenta l’altezza della sezione su Layout e alla voce Altezza scegli Altezza minima impostando un valore di 400px. Per dare un effetto particolare a questa sezione possiamo sfruttare la funzionalità Stile > Separatore sagomato.

Da questo menu puoi applicare questo effetto sia nella parte superiore che in quella inferiore della sezione. In questo caso è preferibile applicarlo solo a quella inferiore. Nell’esempio abbiamo utilizzato la sagomatura ad Onde con larghezza 190, altezza 55 e attivando la modalità Inverti.

Adesso inserisci un testo all’interno di questa sezione. Vai ai blocchi di Elementor, trascina Intestazione all’interno della sezione allineandolo al centro. Ti consigliamo di usare il Tag HTML H1 perché trattandosi di un Titolo è importante per il posizionamento sui motori di ricerca.

Ora cambiamo il colore del blocco Intestazione. Portati su Stile e scegli il colore bianco. Andiamo avanti aggiungendo una seconda sezione in cui inserirai la storia del ristorante. Clicca sul simbolo “+” e aggiungi una sezione a singola colonna.

In questa sezione devi inserire un blocco Intestazione. Impostalo come Tag HTML H3 allineandolo al centro. Noi come esempio abbiamo scritto “La Storia”.

La pagina Il Ristorante

Subito sotto inserisci un blocco Divisore che ti permetterà di distanziare il titolo dal blocco di testo. Puoi modificare le caratteristiche del divisore dal menu sulla sinistra. Noi, nell’esempio, abbiamo applicato uno stile Solido, una larghezza di 14, un colore rosso bordeaux con spessore di 5 e spaziatura 15.

Segue il blocco Editor di testo con allineamento al centro. Ultima modifica a questa sezione è l’impostazione del margine superiore per aumentarne la leggibilità. Selezionala e portati su Avanzato deselezionando Collega insieme i valori e impostando un margine superiore di 70px.

Adesso passiamo ad inserire una sezione con all’interno un testo e come sfondo un’immagine con effetto parallasse. Dal simbolo “+” inserisci la sezione ad una colonna e nel menu Layout imposta l’altezza minima a 400px.

La pagina Il Ristorante

Vai su Stile e carica/scegli un’immagine di sfondo. In seguito in Posizione seleziona Centrato, in Allegato > Fisso e infine in Ripetizione e Dimensione seleziona Non ripetere e Copertina. Anche in questa sezione, per aumentare il contrasto tra il testo e lo sfondo, vai su Sfondo overlay e scegli un colore scuro regolando l’opacità.

Ora inseriamo un blocco Intestazione scrivendo ad esempio “I dolci più buoni della Capitale”, applichiamo come Tag HTML un H2 allineando il testo al centro e impostando su Stile il colore bianco.

Subito sotto inseriamo un testo duplicando il primo blocco Intestazione. Posizionati sul primo blocco e con il tasto destro del mouse clicca la voce Duplica. In questo secondo blocco noi abbiamo scritto “con i migliori ingredienti naturali” assegnando il Tag HTML su H3.

La pagina Il Ristorante

Per concludere questa sezione aumenta il margine superiore come abbiamo fatto con le precedenti (Avanzato > Margine superiore 70px) e per renderla più accattivante aggiungi un blocco Icona e dalla libreria delle icone seleziona quella più adatta. Ricordati di impostare l’allineamento al centro e, in Stile, applicare il colore bianco.

Andiamo avanti con la quarta sezione che in questo caso facciamo a due colonne. Nella prima colonna inserisci un blocco Immagine e selezionala/caricala dalla libreria. Nella seconda colonna invece inserisci un blocco Intestazione dove noi abbiamo scritto “Il Locale”, come Tag HTML seleziona H3 con allineamento sulla sinistra. Infine un blocco Editor di testo in cui descrivere meglio l’attività.

La pagina Il Ristorante

Anche a questa sezione aumenta la spaziatura interna da Layout > Spaziatura colonne > Più largo. Anche in questo caso aumenta il margine superiore. Crea un’altra sezione duplicando la prima. Posizionati con il tasto destro del mouse e clicca su Duplica.

La pagina Il Ristorante

Ora inverti i blocchi all’interno delle due colonne spostandoli con il mouse e cambiando il contenuto. Nella seconda colonna invece cancella l’immagine perché inseriremo il blocco Carosello di immagini.

La pagina Il Ristorante

Nel menu sulla sinistra carica le immagini che scorreranno in sequenza e apporta le modifiche che preferisci. Per terminare inserisci il blocco Divisore tra queste due sezioni appena create. Posizionati sull’ultima sezione, clicca sul simbolo “+” e seleziona una struttura ad una colonna. Successivamente vai in Layout e come Larghezza contenuto scegli Larghezza piena.

La pagina Il Ristorante

Ora in questa sezione inserisci il blocco Divisore scegliendo Tratteggiato alla voce Stile mentre in Aggiungi Elemento > Icona. Per cambiare le caratteristiche visive portati nel sotto menu Stile apportando le modifiche che desideri. Non dimenticarti di aumentare il margine superiore per aumentarne la leggibilità.

Con questo abbiamo terminato. Nel prossimo paragrafo lavoreremo sulla pagina il Menu in cui presenteremo i piatti tipici del nostro ristorante. Come vedi il sito sta prendendo forma. Ti consigliamo di fare pratica e prendere confidenza con Elementor.

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.