La Home Page del Ristorante

Nel precedente tutorial abbiamo realizzato l’Header e il Footer del sito, in questo invece realizzeremo la home page. Per ottimizzare il lavoro ti consigliamo di fare riferimento sempre alla tua bozza grafica così da risparmiare tempo e lavorare in maniera efficiente.

Detto questo adesso procedi dal pannello di controllo di WordPress portandoti su Pagine > Tutte le pagine e in seguito nella pagina Home clicca su Modifica. Nel box Impostazioni Astra, in basso a destra, seleziona Disabilita Titolo e Disabilita l’immagine in evidenza e successivamente in Layout contenuto scegli Larghezza piena/esteso.

Clicca questo pulsante se decidi di acquistare un pacchetto SiteGround.

Grazie mille

Clicca su Aggiorna e poi sul pulsante Modifica con Elementor. Adesso devi inserire una sezione a due colonne cliccando sul simboletto “+”. Portati poi su Layout e alla voce Altezza seleziona Altezza minima impostando un valore di 700px. In questa sezione inseriamo delle immagini a scorrimento quindi seleziona la sezione e in Stile > Tipo di sfondo classico scegli SlideShow e carica le immagini da visualizzare. Nelle impostazioni che trovi in basso puoi decidere il tempo di permanenza e cambiare la tipologia di transizione.

Home Page del Ristorante

Inseriamo adesso uno slogan seguito da un breve testo di presentazione. Portati nella lista e trascina il blocco Intestazione nella prima colonna. Nel box testo noi abbiamo inserito come esempio “Benvenuti alla Taverna di Luciano”.

Per cambiare il colore del testo, vai su Stile e seleziona il bianco alla voce Colore del testo. Nel caso volessi aumentare il contrasto tra il testo e lo sfondo vai su Stile, scegli Sfondo overlay impostando un colore scuro e regola l’opacità per aumentare o diminuire il contrasto.

Ora sotto lo slogan inseriamo un piccolo testo in cui presentare più nel dettaglio il sito. Ritorna ai blocchi trascinando l’Editor di testo sotto lo slogan. Andiamo avanti inserendo sotto la prima sezione una seconda a 4 colonne in cui presenteremo i principali servizi.

Sempre dal simbolo “+” seleziona la sezione con 4 colonne e dai blocchi di Elementor inserisci nella prima colonna il blocco Riquadro Icona. Dal pannello di controllo sulla sinistra puoi cambiare l’icona cliccando su Libreria Icone, dove sicuramente troverai quella più adatta alle tue esigenze. Personalizza il Titolo e la Descrizione.

Home Page del Ristorante

Per velocizzare l’inserimento delle altre colonne, basta posizionarti sul primo blocco appena inserito e cliccare con il tasto destro del mouse su Copia. Successivamente portarti nella seconda colonna, clicca il tasto destro del mouse quindi Incolla. Questa funzionalità è molto comoda perché dopo aver deciso lo stile da adottare ti consente di replicarlo velocemente.

Home Page del Ristorante

Ultima modifica utile per una corretta impaginazione è l’aumento del margine tra le sezioni. Quindi seleziona la sezione, vai su Avanzato e disattiva in primis la modalità Collega insieme i valori e in seguito aumenta il margine superiore a 100px.

Proseguiamo inserendo una terza sezione a due colonne dove nella prima inseriremo uno slogan, un testo e un pulsante mentre nella seconda un video. Dalla lista dei blocchi trascina Intestazione nella prima colonna personalizzandolo con il testo che preferisci. In basso invece inserisci il blocco Editor di testo. Infine, sotto questo blocco, inserisci una chiamata all’azione selezionando dalla lista il blocco Pulsante.

Home Page del Ristorante

Nel sottomenu Contenuto, alla voce Testo, scrivi ad esempio “Vai alla Storia” mentre in Link inserirai successivamente l’URL alla pagina di riferimento. Puoi selezionare anche una dimensione del Pulsante diversa tra piccolo, medio e grande oppure aggiungere un’icona di fianco al testo, ecc.

Per modificare il colore, il testo e altre caratteristiche visive del Pulsante basta andare nel sotto menu Stile. Completiamo la sezione inserendo un video nella seconda colonna. Ritorna ai blocchi e trascina Video. Scegli la sorgente del video e tra quelle disponibili ti consigliamo YouTube.

Anche in questo caso aumenta il margine superiore della sezione (Avanzato > Margine superiore 100px) e imposta uno sfondo diverso, magari di colore grigio chiaro, in modo da distaccarla visivamente dalla precedente.

Ultima modifica da effettuare sarà l’aumento della spaziatura interna della sezione. Portati su Layout > Spaziatura colonne > Più largo. Andiamo avanti inserendo un’ultima sezione dedicata allo staff del ristorante. Questa sarà una sezione a 4 colonne dove trascinerai il blocco Riquadro con immagine.

Home Page del Ristorante

Alla voce Scegli immagine selezionala dalla libreria media o caricala dal tuo computer. Anche per questo blocco è possibile modificare Titolo e Descrizione oppure cambiare le caratteristiche visive in Stile.

Dopo aver definito il layout del primo Riquadro Immagine basterà copiarlo ed incollarlo nelle altre colonne. Come nella precedente diamo un margine superiore per una corretta distanza tra le sezioni.

Tra l’ultima sezione e il Footer non vi è un margine adeguato. Per risolvere questo problema esci da Elementor e torna alla bacheca (icona in alto a sinistra), vai su Aspetto > Header Footer Builder e accedi al template Footer creato precedentemente. Seleziona la sezione del Footer, portati su Avanzato e imposta un margine superiore di 150px.

Abbiamo terminato la realizzazione della home page, nel prossimo tutorial proseguiamo con la creazione della pagina Il Ristorante.

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.