Guida passo passo per inserire un flipbook sfogliabile in qualsiasi pagina Squarespace con un Blocco di codice. Copre i requisiti del piano, il codice di incorporamento, le dimensioni responsive, la protezione con password, il test su mobile e le soluzioni ai problemi di visualizzazione più comuni.
Hai un catalogo, un menù o un portfolio in un PDF, e il tuo sito Squarespace lo mostra come un semplice link di download che nessuno clicca. Un flipbook risolve il problema. I visitatori leggono direttamente nella pagina, sfogliano con un gesto e non lasciano mai il tuo sito. Lo strumento che lo rende possibile è il Blocco di codice di Squarespace, e con un flipbook creato con Flipbooks AI, l’intero lavoro richiede circa dieci minuti.
Questa guida ti accompagna in ogni passaggio: cosa ti serve, dove va il codice, come dimensionarlo e come risolvere i problemi che fanno inciampare la maggior parte delle persone.
Un Blocco di codice è un blocco di contenuto che accetta HTML grezzo. Invece di scrivere un testo o inserire un’immagine, incolli un frammento di codice, e Squarespace lo visualizza esattamente com’è. Un codice di incorporamento di una piattaforma per flipbook è uno di questi frammenti. Dice al browser di caricare il flipbook dentro un riquadro nella tua pagina.
Un PDF collegato si apre in una nuova scheda o si scarica sul dispositivo. Su un telefono, questo spesso significa ingrandire con due dita una pagina minuscola. Un flipbook incorporato resta nel tuo layout, si adatta allo schermo e tiene le persone più a lungo sul tuo sito.
| Metodo | Esperienza di lettura | Resta sul tuo sito | Adatto ai dispositivi mobili |
|---|---|---|---|
| Link di download del PDF | Apre un file separato | No | Scarso |
| Galleria di immagini delle pagine | Scorrimento manuale | Sì | Medio |
| Flipbook incorporato | Vista con effetto sfoglio | Sì | Ottimo |
I Blocchi di codice sono disponibili con il piano Business e superiori. I piani Personal non possono eseguire codice personalizzato. Controlla questo punto prima di costruire qualsiasi cosa, perché è il motivo numero uno per cui il blocco sembra mancare.
⚠️ Se vedi solo il blocco Markdown e nessuna opzione Code, il tuo piano probabilmente non include il codice personalizzato. Passa a un piano superiore da Impostazioni, poi Fatturazione.
Prima raccogli tre cose. Così eviti di tornare indietro più avanti.
Esporta con una risoluzione ragionevole. Per la maggior parte dei cataloghi, un file tra 5 e 25 MB si vede nitido e si carica in fretta. Mantieni le pagine di dimensioni coerenti, perché formati misti rendono l’animazione dello sfoglio irregolare.
Decidi se il flipbook occupa tutta la larghezza della pagina o sta accanto al testo. La larghezza piena è adatta a cataloghi e riviste. Una posizione a metà larghezza funziona bene per un’anteprima accanto a un modulo di iscrizione.
Il codice di incorporamento non esiste finché non esiste il flipbook. Il processo è breve.
💡 Abbina il colore di sfondo del flipbook al colore della sezione Squarespace. La cornice così sparisce e il flipbook sembra far parte della pagina.
Le modifiche fatte dopo l’incorporamento si aggiornano in automatico, quindi puoi correggere i refusi più tardi. Intanto imposta le basi: logo, colore e pagina di partenza. Se il tuo PDF contiene link o video, la piattaforma li mantiene attivi, e puoi anche aggiungere audio e video dentro le pagine.
Questo è il cuore del processo. Seguilo in ordine.
Lo strumento Incorpora flipbook sul sito spiega le opzioni, se vuoi vederle prima di scegliere.
✅ Buona pratica: lascia disattivato Mostra sorgente. Se resta attivo, i visitatori vedono il codice grezzo invece del tuo flipbook.
Ecco una rapida panoramica per la risoluzione dei problemi su cosa fa ogni impostazione.
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Mostra sorgente | Mostra il codice come testo | Disattivato |
| Larghezza del blocco | Imposta la larghezza del riquadro | 100% |
| Altezza del blocco | Imposta l’altezza del riquadro | Da 600 a 800 px su desktop |
| Sfondo della sezione | Colora l’area intorno al riquadro | Uguale al colore del flipbook |
Un riquadro troppo basso taglia le pagine. Uno troppo alto lascia uno spazio vuoto. Entrambi danno un’impressione di trascuratezza.
Squarespace non ridimensiona automaticamente gli iframe. Imposta un’altezza fissa nel codice di incorporamento, come height="700". Una regola utile è prendere la larghezza dell’area dei contenuti e moltiplicarla per 0,65 per la vista a doppia pagina.
Racchiudi l’iframe in un contenitore con una larghezza in percentuale, così si rimpicciolisce sui telefoni. Molti aggiungono anche un’altezza maggiore per il mobile, usando un breve blocco di stile in CSS personalizzato.
💡 Apri la tua pagina su un telefono vero, non solo nella modalità di anteprima del browser. I dispositivi reali mostrano le sovrapposizioni della barra degli strumenti che l’anteprima non rivela.
| Caso d’uso | Posizionamento | Altezza consigliata |
|---|---|---|
| Catalogo prodotti | Sezione a larghezza piena | 750 px |
| Menù del ristorante | Centrato, 80% di larghezza | 650 px |
| Portfolio fotografico | Sezione a larghezza piena, fino al bordo | 800 px |
Vedere casi d’uso reali rende più facile la scelta.
Un ristorante può incorporare un menù stagionale creato con il Creatore di flipbook per menù di ristoranti. Quando il menù cambia, lo modificano una volta sola e la pagina Squarespace si aggiorna da sola, senza nuovo codice.
Un agente immobiliare può collocare una brochure dell’immobile creata con il Creatore di brochure immobiliari su ogni pagina di immobile in vendita. Gli acquirenti sfogliano planimetrie e foto senza scaricare nulla.
Un fotografo può creare una galleria con lo strumento Portfolio fotografico, poi inserirla in una pagina portfolio. Una boutique può usare lo strumento Creatore di cataloghi prodotti per un lookbook all’ingrosso.
Non tutti i flipbook devono essere pubblici. Listini all’ingrosso, proposte per i clienti e manuali interni richiedono una protezione.
In Flipbooks AI, attiva la protezione con password nelle impostazioni di condivisione. I visitatori inseriscono la password prima che le pagine si carichino. Abbina questa opzione a un’area riservata di Squarespace o a una pagina nascosta per una privacy maggiore.
Con il piano Professional puoi raccogliere le email prima che i lettori aprano il flipbook e vedere quali pagine attirano più attenzione. Consulta i prezzi dei piani per confrontare cosa include ogni livello.
| Funzione | Standard | Professional |
|---|---|---|
| Flipbook illimitati | Sì | Sì |
| Nessuna filigrana | Sì | Sì |
| Protezione con password | Sì | Sì |
| Statistiche | Base | Dettagliate |
| Generazione di contatti | No | Sì |
| Download offline | Sì | Sì |
Anche un incorporamento semplice può comportarsi male. Ecco le cause più frequenti.
Mostra sorgente è attivo. Apri il blocco, disattivalo e salva.
Controlla di aver copiato l’intero frammento, incluso il tag di chiusura. Se incolli solo una parte del codice, il riquadro resta vuoto. Verifica anche che il flipbook sia pubblicato e non impostato come privato senza password.
Aumenta il valore dell’altezza, oppure riduci il numero di pulsanti della barra degli strumenti nelle impostazioni del flipbook. Meno pulsanti lasciano più spazio alla pagina.
Squarespace a volte nasconde gli incorporamenti durante la modifica. Visualizza in anteprima la pagina oppure apri l’URL pubblicato. Il flipbook si carica lì.
Un riquadro incorporato non viene letto come il testo di una pagina, quindi circondalo di parole vere. Aggiungi un titolo sopra il flipbook, due o tre frasi che descrivono il contenuto e un link di testo al PDF per chi preferisce quello.
💡 Un flipbook senza testo intorno offre ai motori di ricerca poco da indicizzare. Un breve paragrafo introduttivo risolve il problema in meno di un minuto.
La parte migliore di questa configurazione è la manutenzione. Poiché il Blocco di codice carica il flipbook da un link attivo, non devi più toccare Squarespace quando il contenuto cambia. Sostituisci il PDF in Flipbooks AI e la pagina lo mostra subito. Menù stagionali, cataloghi trimestrali e listini aggiornati restano sempre attuali con un solo caricamento.
Pronto a mettere il tuo primo flipbook sul sito? Crea un account gratuito su Flipbooks AI, carica il tuo PDF e incolla il codice di incorporamento in un Blocco di codice Squarespace. Sfoglia l’elenco completo degli strumenti per flipbook per trovare il modello giusto per il tuo contenuto, e confronta i piani e i prezzi quando ti servono statistiche e raccolta contatti.
Scegli la tua lingua
