Torna a Aspetto del menu e CSS personalizzato

Aspetto del menu: scegli e personalizza la pagina del menu

Cosa fa "Aspetto del menu"

Aspetto del menu decide come appare la pagina che i clienti aprono quando scansionano il tuo codice QR o aprono il link del menu. Scegli un modello, imposti colori, caratteri e layout, aggiungi immagini, racconti ai clienti il tuo locale (link, WiFi, orari di apertura) e organizzi schede come Cibo e Bevande.

Il menu in sé (categorie, piatti, prezzi) non cambia. Cambia solo l'aspetto della pagina.

Tutto quello che fai viene salvato come bozza. I clienti non vedono nulla di nuovo finché non premi Pubblica.

Piano: Aspetto del menu è la funzione a pagamento Menu Templates. Scrivere il proprio CSS è un'altra funzione a pagamento, Menu Custom CSS (richiede anche Menu Templates), e ha un articolo dedicato: CSS personalizzato per la pagina del menu. La pagina può essere aperta solo dall'amministratore dell'attività.

Dove si trova

Apri Menu e tavoli → Aspetto del menu nel menu di amministrazione. Se non lo vedi, il tuo piano non include Menu Templates oppure non sei amministratore dell'attività.

La pagina ha sei schede a sinistra: Modello, Impostazioni, Immagini, Profilo del locale, Schede del menu e CSS personalizzato. A destra c'è l'anteprima della tua pagina del menu in una cornice da telefono. In alto ci sono i pulsanti Esporta il tema, Importa il tema, Ripristina predefinito, Scarta le modifiche e Pubblica.

Bozza e pubblicazione: cosa vedono i clienti e quando

Salvataggio automatico. Poco dopo che smetti di scrivere o di cliccare, la bozza si salva da sola. La riga sopra le schede ti dice cosa succede: Modifiche non salvate…, Salvataggio…, Bozza salvata oppure Tutto salvato. Senza connessione dice Nessuna connessione: le modifiche verranno salvate al ritorno della connessione.
Campi da correggere. Se qualcosa non si può salvare, lo stato dice Non salvato: alcuni campi vanno corretti e la scheda mostra un pallino rosso. Correggi i campi evidenziati: finché non lo fai non puoi pubblicare.
Pubblica. Premi Pubblica e conferma. I clienti vedranno il nuovo aspetto la prossima volta che aprono la pagina del menu. L'etichetta Modifiche non pubblicate resta accanto ai pulsanti finché la bozza è diversa da ciò che vedono i clienti.
Scarta le modifiche. La bozza torna a ciò che è pubblicato (o all'aspetto predefinito se non hai mai pubblicato nulla). Le modifiche non pubblicate vanno perse.
Ripristina predefinito. Elimina sia la bozza sia ciò che è pubblicato. La pagina del menu torna all'aspetto Classico predefinito, senza profilo, link o schede. L'operazione non si può annullare.
Due persone che modificano. Se un altro amministratore ha cambiato le impostazioni mentre lavoravi, vedi Non salvato: le impostazioni sono state cambiate altrove. Premi Ricarica l'ultima versione e rifai la tua modifica.

Consiglio: Lavora sulla bozza quanto vuoi, guarda l'anteprima e pubblica solo quando sei soddisfatto. Niente di ciò che fai prima di Pubblica raggiunge i clienti.

Passo 1: scegli un modello

Nella scheda Modello scegli il layout della pagina. Quello in uso è contrassegnato come Attuale.

Classico: il menu di sempre. Un'intestazione nel tuo colore, una riga di categorie e un semplice elenco di piatti.
Hero: una foto di copertina con logo, link e informazioni, un campo di ricerca, categorie a pulsanti che seguono lo scorrimento e una barra mobile in basso con schede come Cibo e Bevande. Hero usa sempre una tavolozza chiara, qualunque sia il tema del dispositivo del cliente.

Quando cambi modello, colori e testi restano. Alcune cose appartengono a un solo modello: il Profilo del locale e le Schede del menu vengono mostrati da Hero. Se torni a Classico vengono conservati, non eliminati, e ricompaiono quando scegli di nuovo Hero.

Passo 2: impostazioni

La scheda Impostazioni è costruita a partire dal modello scelto, quindi Classico offre meno opzioni di Hero. Ciò che non tocchi segue il modello. Il pulsante Usa il valore del modello annulla una modifica.

Colori: Colore principale, Colore di accento, Sfondo della pagina, Schede e pannelli e Colore del testo. Scrivi un codice come #1d4ed8 oppure scegli un colore. Accanto a ogni colore una nota indica quanto si legge il testo sopra (Si legge bene, Leggibile per testo grande oppure Difficile da leggere). In Classico l'unico colore è quello principale: colora l'intestazione e segue il colore del marchio nelle impostazioni dell'attività finché non ne scegli un altro.
Caratteri: Carattere dei titoli e Carattere del testo, tra otto caratteri inclusi in BletaGo: Inter, Poppins, Montserrat, Playfair Display, Lora, DM Sans, Oswald e Roboto. Non puoi caricare un carattere tuo.
Forma: Arrotondamento degli angoli, da Squadrato a Completamente arrotondato.
Layout: Layout dei piatti (Elenco, Griglia o Compatto), Navigazione delle categorie (Pillole o Schede), Intestazione (Semplice o Foto di copertina) e Sezioni sotto l'intestazione. In quest'ultima trascina per cambiare l'ordine e togli la spunta per nascondere una sezione.
Sezioni e funzioni: interruttori per Campo di ricerca, Link del profilo, Info rapide, Barra delle schede in basso, Foto dei piatti e Informazioni sugli allergeni.
Immagini: Foto di copertina e Immagine di sfondo della pagina, scelte tra le immagini della scheda Immagini.

Passo 3: immagini

La scheda Immagini è la tua libreria di immagini per questa pagina. I clienti non vedono mai la libreria in sé, solo i punti in cui usi un'immagine.

Fino a 20 immagini, ciascuna fino a 5 MB, in formato JPG, PNG, GIF o WebP.
Trascina i file sulla casella oppure premi Scegli immagini. Ogni immagine riceve un nome dal nome del file; puoi cambiarlo prima del caricamento. Il nome usa lettere minuscole, numeri e trattini (fino a 41 caratteri), per esempio terrace.
Un'immagine si usa come foto di copertina o sfondo della pagina (scelti in Impostazioni → Immagini), oppure nel tuo CSS personalizzato. Il riquadro di ogni immagine indica dove viene usata.
Un'immagine che la pagina o il suo CSS usano ancora non può essere eliminata. Toglila prima dall'impostazione.
Copia la variabile CSS copia var(--asset-nome) da usare nel CSS personalizzato.

Passo 4: profilo del locale

La scheda Profilo del locale racconta ai clienti il tuo locale. Il modello Hero lo mostra nell'intestazione; Classico no (il contenuto viene conservato per dopo).

Slogan: una breve riga sotto il nome, fino a 200 caratteri. Scrivilo una volta per ogni lingua del menu.
Link (fino a 12): Facebook, Instagram, TikTok, X, YouTube, WhatsApp, Telegram, LinkedIn, recensioni Google, sito web, mappa, telefono ed email. Scegli il tipo, poi inserisci l'indirizzo (un indirizzo web completo che inizia con https://, un numero di telefono come +355 69 123 4567 o un indirizzo email). Il Testo facoltativo sostituisce il nome del link.
Info rapide (fino a 6): piccoli fatti che ai clienti piace vedere, come la password del WiFi o dove parcheggiare. Ognuna ha un'icona, un'etichetta e un valore. Spunta I clienti possono toccare per copiare il valore per cose come la password del WiFi.
Orari di apertura: spunta Mostra gli orari di apertura, poi imposta quando apri e chiudi, a partire dal lunedì, oppure segna un giorno come Chiuso. Copia il lunedì su tutti i giorni fa risparmiare tempo.

I testi come lo slogan e le etichette delle info si scrivono per ogni lingua del menu. Compilali per ogni lingua che offri; una lingua disattivata non viene salvata e l'editor ti avvisa se hai scritto testo in una di queste.

Passo 5: schede del menu (Cibo, Bevande e altre)

Con il modello Hero la pagina ha una barra in basso. Tutti c'è sempre, poi le tue schede, poi Ordine (quando gli ordini sono attivi) con il numero di piatti nell'ordine. Nella scheda Schede del menu crei le schede intermedie.

Premi Aggiungi una scheda (fino a 8 schede).
Dai un Nome in ogni lingua del menu e scegli un'Icona.
Spunta le categorie in questa scheda. Una categoria può stare in più schede.
Trascina le schede per stabilirne l'ordine.

Da sapere:

Una scheda sceglie soltanto quali categorie mostrare. L'ordine dei piatti resta quello del tuo menu.
Una scheda senza categorie viene nascosta ai clienti.
La Chiave è una parola breve (lettere, numeri e trattini) che uno sviluppatore può usare per dare uno stile alla scheda. Segue il nome finché non ne imposti una tua, quindi puoi lasciarla com'è.
Le nuove categorie che aggiungi al menu in seguito compaiono solo in Tutti finché non le metti in una scheda. La scheda mostra Categorie senza scheda: N per ricordartelo. Se spunti Mostra anche le categorie che non sono in nessuna scheda su una scheda, le nuove categorie compaiono lì da sole.
Se elimini una categoria dal menu, la scheda ti avvisa (Categorie eliminate ancora presenti). Premi Rimuovile; finché non lo fai la pagina non si può salvare.

Per aggiungere o rinominare le categorie, vedi Creare e organizzare le categorie e i piatti del menu.

Anteprima: guardala prima dei clienti

A destra c'è la tua vera pagina del menu in una cornice da telefono. Mostra la bozza, non ciò che è pubblicato, e si ricarica dopo ogni salvataggio. Una fascia in alto ti ricorda che è un'anteprima e che gli ordini sono disattivati.

Ricarica e Apri in una nuova scheda sono sopra la cornice. Se hai più sedi, Sede mostrata sceglie il menu di quale sede vedere.
Copia il link di anteprima ti dà un indirizzo da aprire su un telefono vero o da mandare a qualcuno. Il link mostra la tua bozza non pubblicata a chiunque lo abbia, quindi condividilo solo con persone di cui ti fidi.
Il link smette di funzionare dopo 7 giorni.
Nuovo link di anteprima fa smettere di funzionare tutti i link che hai condiviso e te ne dà uno nuovo. Usalo se un link è finito alla persona sbagliata.

Consiglio: Apri il link di anteprima sul tuo telefono e scorri tutto il menu, in ogni lingua che offri. I nomi lunghi dei piatti e una connessione lenta mostrano problemi che l'editor non mostra.

Esporta e importa un tema

Esporta il tema scarica un piccolo file con il tuo aspetto: modello, impostazioni (senza le impostazioni delle immagini), profilo del locale, schede (senza le loro categorie) e CSS personalizzato. Conservalo come copia di sicurezza o usalo per copiare un aspetto in un'altra sede o attività.

Importa il tema legge un file di questo tipo. Ti viene chiesta conferma, perché sostituisce l'aspetto nella tua bozza. Le tue immagini e la scelta delle categorie in ogni scheda restano. Ciò che non è compatibile (per esempio il CSS personalizzato quando il tuo piano non lo include, o le voci oltre i limiti) viene lasciato fuori e un messaggio te lo segnala. Dopo un'importazione, guarda l'anteprima e premi Pubblica.

Se il piano scade

Se Menu Templates non fa più parte del tuo piano, i clienti vedono l'aspetto predefinito: la pagina Classico con il colore del marchio e il logo delle impostazioni dell'attività. Niente di ciò che hai creato viene eliminato, ma l'editor resta bloccato finché la funzione non torna.

Se scade solo Menu Custom CSS, modello e impostazioni restano e smette di essere applicato soltanto il CSS personalizzato.

Consigli per un menu che si presenta bene

Prima il contrasto. Testo chiaro su un colore chiaro si legge male su un telefono al sole. Punta a Si legge bene accanto a ogni colore.
Foto di copertina. Usa un'immagine orizzontale, larga almeno circa 1200 pixel e ben sotto i 5 MB. La foto viene ritagliata al centro dell'intestazione: tieni la parte importante al centro e non mettere testo nell'immagine; logo e nome vengono scritti sopra.
Tienila leggera. I file grandi rallentano la pagina con la rete mobile. Se un'immagine è molto più grande del necessario, riducila prima di caricarla.
Compila tutte le lingue. Slogan, etichette delle info e nomi delle schede si scrivono per lingua, quindi compilali per ogni lingua che offri.
Poche schede. Da due a quattro schede stanno comode su un telefono. I nomi brevi funzionano meglio.
Guarda la pagina vera una volta. L'anteprima ha gli ordini disattivati. Dopo aver pubblicato, apri il menu vero su un telefono e controlla che appaia come ti aspetti; cambia solo l'aspetto, gli ordini funzionano come prima.