1. Struttura della pagina: 7 sezioni in ordine fisso
La pagina Home del sito è composta da 7 sezioni collassabili presentate nell'ordine in cui appaiono sul sito pubblico. L'ordine è fisso e segue una struttura ottimizzata per la conversione: ogni sezione può essere attivata o disattivata singolarmente con il toggle "Attiva".
- Hero — Sezione principale — sempre visibile, non può essere disattivata. Il punto d'ingresso visivo della home.
- Benvenuti — testo di benvenuto con immagine laterale. Toggle attiva/disattiva.
- Introduzione — blocco testo senza immagine, ideale per un claim o filosofia. Toggle attiva/disattiva.
- 3 Card — Valori del ristorante — tre card con icona, titolo, testo e immagine opzionale. Toggle attiva/disattiva.
- Qualità — sezione con titolo, testo e immagine laterale. Toggle attiva/disattiva.
- Eleganza & Atmosfera — sezione con titolo, testo e immagine parallax a tutta larghezza. Toggle attiva/disattiva.
- Chiusura — sezione finale con immagine di sfondo, testo di invito e fino a 2 pulsanti CTA. Toggle attiva/disattiva.
In cima alla pagina trovi anche il pannello AI completo per la generazione multi-sezione e il link "Anteprima sito" per verificare il risultato in tempo reale.
2. Hero — Sezione principale: il primo impatto visivo
Il Hero è la sezione a tutta schermata che i visitatori vedono appena aprono il tuo sito. È sempre visibile e non può essere disattivata. Contiene 6 campi:
- Titolo hero — il titolo principale della home page. Può essere il nome del locale o un claim principale (es. "La miglior pizza napoletana di Milano"). Massimo 60-70 caratteri per non troncarsi su mobile.
- Sottotitolo hero — una frase di supporto che aggiunge contesto: tipo di cucina, specialità, zona o orari. Breve e diretto.
- Immagine di sfondo — l'immagine principale della home. Formato consigliato 16:9 orizzontale, almeno 1920×1080px. Scegli un'immagine panoramica con buona luce e soggetto centrato: un piatto in primo piano, la sala del ristorante o l'esterno del locale.
- Colore di sfondo — colore fallback usato quando l'immagine non è disponibile o durante il caricamento. Inserisci un esadecimale (#rrggbb) o usa il selettore colore integrato.
- Testo pulsante CTA — il testo del pulsante di chiamata all'azione (es. "Scopri il menu", "Prenota un tavolo", "Ordina ora").
- Link CTA — la pagina di destinazione del pulsante. Usa il selettore integrato per scegliere tra le pagine del tuo sito: menu, prenotazioni, contatti o qualsiasi altra pagina pubblica.
3. Benvenuti: testo di accoglienza con immagine laterale
La sezione Benvenuti è il primo blocco contenuto dopo il hero. Mostra un testo di presentazione del locale affiancato da un'immagine verticale. Contiene 6 campi:
- Attiva sezione — toggle per mostrare o nascondere la sezione sulla home pubblica.
- Titolo — es. "Chi siamo", "Il nostro locale", "Benvenuti".
- Testo — il testo principale di presentazione del locale. L'AI può generare o rielaborare questo testo in base al profilo del ristorante.
- Immagine — immagine laterale in formato verticale 3:4, circa 900×1200px. Su desktop appare affiancata al testo; su mobile occupa tutta la larghezza. Ottima per foto del locale, dello chef o di un piatto in verticale.
- Colore sfondo colonna testo — il colore di sfondo della colonna contenente il testo. Lascialo vuoto per usare il colore del tema.
- Colore testo — il colore del testo nella colonna. Lascialo vuoto per ereditare il tema.
4. Introduzione: il claim di qualità in evidenza
La sezione Introduzione è un blocco testo senza immagine, ideale per un claim breve ma d'impatto: la filosofia del locale, la specialità principale o una frase che rappresenta l'identità del ristorante. Contiene 4 campi:
- Attiva sezione — toggle per mostrare o nascondere la sezione.
- Testo introduttivo — il testo principale, solitamente 2-4 righe. L'AI lo genera in stile narrativo, coerente con la personalità del locale.
- Sottotitolo — una frase sintetica sotto il testo principale (es. "Ingredienti freschi ogni giorno dal mercato locale").
- Colore testo — colore del testo principale (il sottotitolo può avere un colore separato opzionale).
5. 3 Card — Valori del ristorante: i punti di forza in evidenza
La sezione 3 Card mostra tre schede affiancate, ognuna con un punto di forza del tuo ristorante. La struttura è fissa a 3 card; ogni card ha 4 campi:
- Icona emoji — un'emoji che rappresenta visivamente il valore (es. 🍕 per le pizze, 👨🍳 per lo chef, 🌿 per gli ingredienti freschi). L'AI preserva le emoji esistenti quando rigenera il testo.
- Titolo card — il nome del valore. Breve, 3-5 parole.
- Testo card — la descrizione del valore, 2-4 frasi. L'AI genera testi coerenti con il profilo del locale.
- Immagine card (opzionale) — in formato 4:3 orizzontale, circa 1200×900px. Se non inserita, la card mostra solo testo ed emoji.
Il toggle Attiva sezione mostra o nasconde tutte e 3 le card insieme. Il pulsante AI rigenera tutte e 3 le card in una volta, mantenendo le emoji originali.
6. Qualità: la garanzia del tuo ristorante
La sezione Qualità è strutturata come la sezione Benvenuti: testo con immagine laterale. È pensata per comunicare la garanzia di qualità del locale: ingredienti a km zero, fornitori selezionati, tecniche di preparazione, certificazioni. Contiene 4 campi principali:
- Attiva sezione — toggle visibilità.
- Titolo — es. "La nostra qualità", "Solo il meglio", "Ingredienti selezionati".
- Testo — descrizione della filosofia di qualità del locale, 3-5 righe. L'AI rielabora il testo mantenendo un tono professionale e credibile.
- Immagine — formato 3:4 verticale, circa 900×1200px. Adatta per foto di ingredienti freschi, prodotti tipici, cucina a vista.
7. Eleganza & Atmosfera: l'immagine parallax a tutta larghezza
La sezione Eleganza & Atmosfera mostra un'immagine a tutta larghezza con effetto parallax, con titolo e testo sovrapposti. Contiene 4 campi:
- Attiva sezione — toggle visibilità.
- Titolo — es. "Un'atmosfera unica", "Eleganza e calore".
- Testo — descrizione dell'atmosfera. L'AI genera testi evocativi ma credibili.
- Immagine parallax — formato 21:9 panoramico ultra-largo, almeno 2400×1029px. È il campo che richiede l'immagine di qualità più alta di tutta la home. Il soggetto deve essere centrato orizzontalmente poiché i bordi vengono tagliati su mobile.
8. Chiusura: l'invito finale con uno o due pulsanti
La sezione Chiusura è l'ultima sezione della home e serve a convertire il visitatore in cliente. Contiene 8 campi:
- Attiva sezione — toggle visibilità.
- Immagine di sfondo — formato 16:9, circa 1600×900px. Scegli un'immagine con zone scure per la leggibilità del testo sovrapposto.
- Colore overlay — es.
rgba(0,0,0,0.5). Aumenta il quarto valore per un overlay più scuro se il testo fatica a leggersi. - Titolo — es. "Prenota il tuo tavolo stasera", "Vieni a trovarci".
- Testo — breve testo di invito, 1-3 righe. L'AI rigenera solo titolo e testo.
- CTA 1 testo + link — pulsante principale in stile pieno (es. "Prenota ora" → prenotazioni).
- CTA 2 testo + link (opzionale) — pulsante secondario in stile outline (es. "Scopri il menu" → menu).
9. L'AI della home page: generazione completa o per singola sezione
MenuDigitalePro offre due modalità di utilizzo dell'AI per la home page:
Pulsanti AI inline per singola sezione
Ogni sezione ha un pulsante "✨ Rielabora con AI" che aggiorna solo quella sezione. Il sistema legge il profilo del tuo locale e genera contenuti coerenti. Ideale per aggiornare puntualmente una sezione mantenendo invariate le altre.
Pannello AI completo con dialogo multi-turno
Il pannello AI in cima alla pagina apre una chat dove puoi selezionare le sezioni da aggiornare, scrivere istruzioni specifiche ("Stile elegante e formale", "Enfatizza la tradizione napoletana") e continuare la conversazione per affinare i contenuti iterativamente. I testi generati si applicano automaticamente al form: puoi rivedere ogni campo prima di salvare.
10. Specifiche immagini: formato e dimensioni consigliate per ogni sezione
Usare il formato sbagliato può causare ritagli indesiderati o immagini sgranate. Ecco il riepilogo completo per la home page:
- Hero — immagine di sfondo: 16:9, min 1920×1080px. Panoramica, soggetto centrato.
- Benvenuti — immagine laterale: 3:4 verticale, circa 900×1200px.
- 3 Card — immagine per card (opzionale): 4:3 orizzontale, circa 1200×900px.
- Qualità — immagine laterale: 3:4 verticale, circa 900×1200px.
- Eleganza — immagine parallax: 21:9 ultra-panoramico, min 2400×1029px. Alta risoluzione.
- Chiusura — immagine di sfondo: 16:9, circa 1600×900px. Zone scure per leggibilità.
Il sistema di upload include un editor di ritaglio guidato che ti aiuta a rispettare il formato corretto prima di salvare. Puoi anche selezionare immagini già caricate dalla libreria del locale.
Domande frequenti sulla Home Page del sito
Posso cambiare l'ordine delle sezioni della home page?
No. L'ordine delle sezioni è fisso e segue una sequenza studiata per la conversione: Hero → Benvenuti → Introduzione → 3 Card → Qualità → Eleganza → Chiusura. Puoi però nascondere singole sezioni con il toggle "Attiva", così da costruire una home più corta o personalizzata senza perdere i contenuti già inseriti.
Posso avere più di 3 card nella sezione valori?
No. La sezione 3 Card contiene esattamente 3 card con struttura fissa (icona emoji, titolo, testo e immagine opzionale). Se hai più di 3 valori da comunicare, usa la sezione Introduzione o la sezione Benvenuti per aggiungere testo descrittivo aggiuntivo.
L'AI può scegliere le immagini della home?
No. L'AI genera solo testi: titoli, sottotitoli, descrizioni e CTA. Le immagini devono essere caricate manualmente usando il selettore immagini integrato. Ogni campo immagine mostra il formato consigliato (rapporto 16:9, 3:4, 21:9 ecc.) per ottenere il risultato migliore sul sito.
Cosa succede se lascio un colore di sfondo vuoto?
Se il campo colore di sfondo è vuoto, la sezione usa il colore del tema scelto in "Tema sito". Il tuo sito sarà visivamente coerente anche senza personalizzare ogni singolo colore. Puoi impostare colori specifici solo per le sezioni che vuoi differenziare dal tema base.
Posso usare l'AI solo su una sezione senza rigenerare tutto?
Sì. Ogni sezione ha un pulsante "✨ Rielabora con AI" che aggiorna solo quella sezione. Il dialogo AI completo in cima alla pagina permette invece di selezionare più sezioni da aggiornare insieme in un'unica sessione di chat con contesto condiviso.
Il campo "Colore overlay chiusura" a cosa serve?
La sezione Chiusura ha un'immagine di sfondo con testo sovrapposto. L'overlay è un livello semi-trasparente tra l'immagine e il testo che migliora la leggibilità. Il formato è rgba(0,0,0,0.5) dove l'ultimo numero è l'opacità: 0 = trasparente, 1 = completamente opaco. Valori tra 0.3 e 0.6 funzionano bene per la maggior parte delle immagini.
Posso avere due CTA nella sezione Chiusura?
Sì. La sezione Chiusura supporta due pulsanti: CTA 1 (stile pieno, azione principale) e CTA 2 (stile outline, azione secondaria). Puoi lasciare il secondo CTA vuoto per mostrare un solo pulsante. I link fanno riferimento agli slug delle pagine del tuo sito: "menu", "prenotazioni", "contatti", ecc.
Le modifiche alla home page si vedono subito sul sito pubblico?
Sì. Dopo aver cliccato "Salva home" le modifiche sono visibili immediatamente sul tuo sito pubblico. Non c'è un sistema di bozze: ogni salvataggio è live. Usa il link "Anteprima sito" in cima alla pagina per verificare il risultato prima di condividere il link con i clienti.
Vuoi cambiare l'aspetto del sito scrivendo a parole cosa desideri? Leggi come cambiare il sito con la Modalità AI.