Creiamo un sito per un Ristorante: Header e Footer

In questo tutorial modificheremo l’Header e il Footer del sito facendo riferimento alla bozza creata. Nei prossimi tutorial invece faremo un po’ di pratica realizzando un intero sito dedicato ad un ristorante immaginario che abbiamo chiamato La Taverna di Luciano.

Home Ristorante La Taverna di Luciano

Nell’Header inseriremo il logo, il menu di navigazione e un pulsante. Il menu sarà composto dal link Home, Il Ristorante, Menu dove all’interno inseriremo i principali piatti che il ristorante propone, Blog, Contatti e infine il pulsante Prenota che rimanderà alla pagina con un modulo di contatto.

Passeremo poi al Footer dove inseriremo dei widget che richiameranno il logo, una breve descrizione del ristorante, un menu di navigazione secondario con i link alle pagine privacy e cookies, un widget contatti e i link alle pagine social. Il sito si conclude con delle note sul copyright sulla sinistra e sulla destra una dicitura di chi ha realizzato il sito.

Footer Ristorante

Il logo che utilizzeremo è stato salvato in formato png. Grazie a questo formato è possibile utilizzare uno sfondo trasparente. Prima di passare all’inserimento del logo, dal pannello di controllo vai su Pagine > Aggiungi pagina e creati le seguenti pagine completamente vuote: Home, Il Ristorante, Menu, Blog, Contatti e Prenota.

Successivamente puoi cancellare le vecchie pagine che il tema Astra ha creato in fase d’installazione. Alla fine ti ritroverai con tutte le pagine prive di contenuti che poi andremo a personalizzare nei moduli successivi. Adesso creati il menu di navigazione principale portandoti su Aspetto > Menu.

Clicca questo pulsante se decidi di acquistare un pacchetto SiteGround.

Grazie mille

In questa sezione puoi notare il vecchio menu di navigazione che devi eliminare cliccando in basso Elimina. Adesso clicca su crea un nuovo menu e nel campo Nome menu scrivi “menu principale”.

Dalla lista pagine sulla sinistra seleziona tutte le pagine aggiungendole al nuovo menu e disponi le voci con l’ordine che preferisci. Infine seleziona Menu primario alla voce Posizione di visualizzazione e clicca su Salva menu.

Menu Navigazione Ristorante

Dopo aver creato il menu devi assicurarti che la pagina Home sia impostata come pagina principale del sito. Per farlo vai su Impostazioni > Lettura e seleziona la pagina Home come pagina statica.

Create le pagine e il menu di navigazione passiamo a personalizzare il logo, il pulsante Prenota e il suo colore. Dal pannello di controllo vai su Aspetto > Personalizza, clicca su Header > Identità sito.

In questa sezione trovi due loghi. Il primo viene visualizzato nella versione desktop del sito mentre il secondo nella versione mobile. Per prima cosa cambia il logo della versione desktop cliccando su Cambia il Logo > Carica file. Stessa operazione per il logo che verrà visualizzato per i dispositivi mobili.

Per verificare che tutto proceda bene usa le tre icone in basso che ti permettono di vedere il sito su desktop, tablet e mobile. Un’ultima cosa che puoi fare è caricare un’icona che comparirà nella barra degli indirizzi del browser. In Icona del sito clicca su Cambia Immagine caricandola dal tuo computer. Ti consigliamo di creare un’icona in formato png con dimensioni approssimative di 150x150px.

Sito Ristorante mobile, tablet, desktop

Le voci che trovi in basso Titolo del sito e Motto puoi lasciarle invariate. Queste informazioni le puoi modificare direttamente nelle impostazioni generali di WordPress. Salva le modifiche cliccando in alto sul pulsante Pubblica.

Adesso dobbiamo modificare i colori del menu di navigazione e del pulsante Prenota. Ritorna al menu precedente ed entra in Menu primario.

Nel box Testo menu personalizzato / HTML puoi notare il codice HTML del pulsante. Prima di tutto cambia il testo “Download App” sostituendolo con “Prenota”. Modifica anche l’attributo href inserendo l’indirizzo della pagina Prenota (nomesito.it/prenota/) in modo che quando un utente cliccherà il pulsante verrà reindirizzato alla pagina Prenota.

Ora passiamo a cambiare i colori del menu di navigazione e del pulsante Prenota. Per prima cosa andiamo a cambiare i colori globali del tema. Dal menu Personalizza vai su Global > Colors > Base colori sostituendo il colore, attualmente arancione, con il colore che desideri.

Cambia anche il colore dei Link e dei Link Hover in modo da avere un feedback visivo sui link al passaggio del mouse. Stessa cosa anche per il colore del pulsante andando su Global > Bottoni.  Nella sezione colore del pulsante puoi modificare anche il colore del testo e dello sfondo.

Abbiamo terminato la personalizzare dell’Header e ora passiamo alla personalizzazione del Footer. Dalla bozza abbiamo previsto di inserire 4 widget che richiameranno il logo, una breve descrizione, un menu di navigazione secondario con i link alle pagine privacy e cookies, un widget con i riferimenti ai contatti e i link alle pagine social.

Per personalizzare il Footer useremo il plugin Header Footer Builder, installato direttamente da tema Astra, che permetterà di crearlo attraverso Elementor. Vai su Aspetto > Header Footer Builder. In questa sezione trovi un template creato da Astra ma lo puoi cancellare perché ne creeremo uno nuovo.

Clicca su Add New e assegnagli il nome Footer e in basso alla voce Type of Template seleziona Footer e successivamente in Display On scegli Entire Website. Clicca poi sul pulsante Modifica con Elementor.

Footer Sito Ristorante

Adesso in Elementor ti basta cliccare sul simboletto “+” per aggiungere una sezione a 4 colonne. Nella prima colonna trascina un blocco Immagine selezionandolo dalla lista. Clicca poi su Scegli immagine per inserire il logo. Alla voce Dimensione dell’immagine scegli l’opzione Personalizzato impostando una larghezza di 150px allineandolo sulla sinistra.

Ritorna alla lista e aggiungi un blocco Testo trascinandolo sotto il blocco Immagine. Nel blocco Testo, come dicevamo, puoi inserire una breve descrizione.

Passiamo ora alla seconda colonna dove inserirai un menu di navigazione secondario con i link alle pagine cookie e privacy. In questo tutorial non ti parleremo di questi aspetti ma specifichiamo che è obbligatorio inserirli. Questo argomento lo approfondiremo nel capitolo dedicato ai Plugin quando parleremo di come adeguare un sito WordPress al GDPR. Ora ci limitiamo solo a predisporre un menu di navigazione con questi collegamenti.

Dai blocchi di Elementor trascina nella seconda colonna Menu di navigazione. Il campo titolo lo puoi lasciare vuoto mentre nel menu a tendina Selezionare il menu puoi notare solo il menu principale ovvero l’unico che abbiamo creato. Per il momento selezionalo per poi crearne un secondo con i link che rimanderanno alle pagine privacy e cookies.

Adesso alla terza colonna inseriamo i contatti che è sempre bene visualizzarli in tutte le pagine del sito. Dalla lista dei blocchi trascina nella colonna Lista Icone. Per modificare le diverse voci cliccaci sopra e modifica il testo, l’icona ed eventualmente inserisci un link. Se vuoi aggiungere altre liste clicca su Aggiungi Elemento.

Nella quarta colonna trascina il blocco Icone Social. Seleziona i social che preferisci e nel campo link scrivi l’URL della pagina. Infine volendo puoi anche disporre la lista come meglio credi, ti basta tenere premuto il tasto sinistro del mouse e ordinarli come desideri.

Footer Sito Ristorante

Fatto questo ora dobbiamo inserire, nella parte bassa del Footer, sulla sinistra una dicitura sul copyright e sulla destra una nota su chi ha realizzato il sito. Clicca sul simboletto “+” e aggiungi una sezione a due colonne.

Nella prima colonna trascina il blocco Copyright e scrivi “Copyright © [hfe_current_year]” allineandolo sulla sinistra. Fai la stessa cosa anche nella seconda colonna trascinando nuovamente il blocco Copyright scrivendo in questo caso “Sito realizzato da Mario Rossi” allineandolo sulla destra.

Ora per concludere puoi cambiare il colore dello sfondo delle due sezioni. Per farlo è molto semplice, basta selezionare la prima, vai nel sottomenu Stile > Tipo di sfondo. Stessa cosa fai anche per la seconda sezione.

Ultima modifica che ti consigliamo è aumentare la spaziatura interna delle due sezioni. Seleziona la prima, portati su Layout e alla voce Spaziatura colonne scegli una spaziatura larga. Stessa cosa anche per seconda sezione a piè di pagine. Non ti resta che salvare le modifiche cliccando sul pulsante Aggiorna e vedere il risultato finale.

Adesso crea il menu secondario che, come abbiamo detto, deve contenere i riferimenti alle pagine privacy e cookie. Dal pannello di controllo di WordPress vai su Aspetto > Menu.

Menu Navigazione Ristorante

Clicca su crea un nuovo menu e scrivi nel campo nome “menu footer”. In questo menu di navigazione inserirai due Link personalizzati. Nel primo scrivi “Privacy” e nel campo URL inserisci il simbolo cancelletto (#). Stessa cosa fai anche nel secondo link personalizzato inserendo Cookies + cancelletto (#). Successivamente quando parleremo nel dettaglio della privacy e dei cookies andremo a personalizzare gli URL.

Ora ritorna su Aspetto > Header Footer Builder, entra nel template Footer, seleziona il blocco Menu di navigazione e scegli “menu footer”. Salva le modifiche, ritorna sul sito e controlla il risultato finale.

Commenti

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

Un commento su “Creiamo un sito per un Ristorante: Header e Footer”

  1. Ciao,
    ho fatto questa lezione. Ho dei problemi col resposive sul footer, non mi tiene gli allineamenti.
    Il sito non è pubblico, se potete darmi un suggerimento vi ringrazio.

    Andrea

    Rispondi

Lascia un commento

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