Istruzioni passo passo per usare l’elemento Code Embed di Webflow e inserire un flipbook in qualsiasi pagina. Trovi il codice iframe, le regole di dimensione, le impostazioni adattive, gli errori più comuni e un confronto tra i metodi di incorporamento, così il tuo PDF resta nitido su ogni schermo.
Hai un PDF curato, un sito Webflow che ha esattamente l’aspetto che vuoi e un fastidioso vuoto tra i due. Un semplice link di download sembra piatto, e un mucchio di immagini statiche sembra goffo. Il modo più pulito per colmare questo vuoto è l’elemento Code Embed, che ti permette di inserire un flipbook con effetto sfoglio in qualsiasi pagina Webflow con poche righe di HTML. Crea il flipbook con Flipbooks AI, copia il codice di incorporamento, incollalo e pubblica. Questa è l’idea di fondo, e il resto dell’articolo spiega ogni dettaglio, così nulla ti coglierà di sorpresa il giorno del lancio.
Webflow è eccellente per il layout, le interazioni e i contenuti CMS. Quello che non fa di default è mostrare un documento su più pagine come se lo aspetta un lettore: con sfoglio di pagina, zoom, indice e pulsante di condivisione. Un flipbook svolge questo compito.
Un visitatore arriva sulla tua pagina, vede una pubblicazione che sembra un libro e la sfoglia con un clic, uno scorrimento o la freccia della tastiera. Non c’è nessun download, nessun plugin per leggere PDF e nessuna attesa che un file da 40 MB finisca di caricarsi. Per cataloghi, lookbook, bilanci annuali e menù, questo somiglia molto di più all’originale stampato.
Il documento resta dentro il tuo design. Intestazione, piè di pagina e script di analisi restano intorno a lui. E poiché il flipbook vive su un URL ospitato a parte, puoi aggiornare il PDF in seguito senza tornare nel Designer di Webflow.
💡 Consiglio pratico: tratta il flipbook come una qualsiasi altra sezione della pagina. Dagli un titolo, un breve paragrafo introduttivo e una call to action sotto. Un incorporamento nudo, senza contesto, viene ignorato più spesso di quanto immagini.
| Caso d’uso | Pagina tipica | Perché aiuta un flipbook |
|---|---|---|
| Catalogo prodotti | Pagina shop o risorse | I visitatori sfogliano senza lasciare il sito |
| Menù del ristorante | Pagina menù | Adatto al telefono, facile da aggiornare di stagione |
| Portfolio | Pagina lavori o casi studio | Mantiene il ritmo visivo dell’impaginazione originale |
| Report annuale | Pagina investitori o chi siamo | Leggibile su ogni dispositivo, nessun download necessario |
| Lookbook | Pagina di destinazione della collezione | Sembra di sfogliare pagine vere |
L’elemento Code Embed è un componente di Webflow che trovi nel pannello Aggiungi, sotto Componenti. Accetta HTML, CSS e JavaScript grezzi, poi mostra il risultato nella pagina pubblicata. Nel Designer di solito vedi un segnaposto, quindi per l’anteprima devi pubblicare oppure usare la modalità di anteprima.
Queste due cose si confondono spesso. L’elemento Code Embed si trova in un punto preciso del layout. Codice personalizzato nelle impostazioni della pagina o del sito inserisce script nell’head o prima del tag di chiusura del body, e non ha un punto visibile. Un flipbook è un contenuto visibile, quindi ti serve l’elemento.
Webflow limita ogni Code Embed a 50.000 caratteri. Un iframe ne occupa circa 300, quindi il limite qui non conta mai. Diventa rilevante solo se provi a incollare un intero documento in linea, cosa che non dovresti fare.
Code Embed è disponibile su tutti i piani dei siti Webflow, incluso il piano gratuito Starter per la prova. Pubblicare su un dominio personalizzato richiede un piano a pagamento, ma l’embed funziona allo stesso modo sul sottodominio di staging, quindi puoi fare i test prima di impegnarti.
Prima di aprire Webflow, crea il flipbook. Richiede pochi minuti e la qualità del file di partenza conta più di qualsiasi impostazione dell’embed.
Esporta il PDF alla dimensione finale della pagina, con immagini a una risoluzione sensata. Un’esportazione a 150 dpi basta per gli schermi e mantiene brevi i tempi di caricamento. Controlla che i font siano incorporati e che nessuna pagina abbia margini anomali.
✅ Buona pratica: abbina lo sfondo del flipbook a quello della sezione Webflow. Il visualizzatore si fonde così con la pagina invece di sembrare una scatola appoggiata sopra.
Molti convertitori stampano un logo su un angolo di ogni pagina. Flipbooks AI non aggiunge mai una filigrana, e questo conta molto quando il flipbook sta su un sito di un cliente o su una vetrina con il marchio. Consulta i piani per vedere come flipbook illimitati e protezione con password si adattano a ciascun piano.
Ecco il processo completo dentro Webflow. Tieni il Designer aperto in una scheda e il pannello di condivisione del flipbook in un’altra.
Incolla il tuo codice di incorporamento. Un iframe tipico ha questo aspetto:
<iframe
src="https://your-flipbook-url-here"
width="100%"
height="700"
frameborder="0"
allowfullscreen
loading="lazy"
title="Product catalog flipbook">
</iframe>
Sostituisci src con il link esatto copiato dal pannello di condivisione. Clicca su Salva e chiudi.
Pubblica prima sul dominio di staging. Apri la pagina su un computer portatile, poi su un telefono. Clicca su alcune pagine, prova il pulsante a schermo intero e verifica che l’audio parta, se lo hai aggiunto.
⚠️ Attenzione: se dopo la pubblicazione l’embed non mostra nulla, la causa è quasi sempre un errore di battitura in
srcoppure un iframe bloccato da un’impostazione di sicurezza dei contenuti. Controlla la console del browser prima di dare la colpa a Webflow.
Un iframe non sa quanto spazio resta nella pagina. Devi dirglielo, e devi dirglielo in modo diverso a ogni breakpoint.
Una doppia pagina del flipbook è più larga che alta, quindi un’altezza tra 600 e 750 pixel funziona bene su computer desktop. Se è più alta, crei molto spazio vuoto sopra e sotto le pagine.
Usa sempre width="100%" e lascia che sia il contenitore padre a decidere la larghezza reale. Imposta al contenitore una larghezza massima, per esempio 1100 pixel, per avere testi leggibili sui monitor grandi.
Per un flipbook che si ridimensiona bene, avvolgi l’iframe in un div che mantiene il rapporto:
<div style="position:relative;padding-top:56.25%;">
<iframe
src="https://your-flipbook-url-here"
style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
allowfullscreen
title="Flipbook">
</iframe>
</div>
Il padding-top del 56,25% crea un riquadro 16:9 che si restringe senza problemi su tablet e telefoni. Per documenti verticali come i menù, prova il 75% o persino il 100%.
| Breakpoint | Larghezza del contenitore | Altezza dell’iframe | Note |
|---|---|---|---|
| Desktop (1280+) | 1100 px massimo | 700 px | Mostra la doppia pagina |
| Tablet (768 a 991) | 90% | 600 px | La doppia pagina resta leggibile |
| Telefono in orizzontale | 100% | 450 px | Spesso scatta la vista a pagina singola |
| Telefono in verticale | 100% | 420 px | Aggiungi una breve didascalia sopra |
💡 Se usi il contenitore con proporzioni fisse, non ti serve un’altezza separata per ogni breakpoint. Il riquadro si ridimensiona da solo.
La via di Code Embed non è l’unico modo per inserire un documento in una pagina Webflow. Ecco come si confronta con le alternative più comuni.
| Metodo | Effetto sfoglio | Adatto al telefono | Modificabile senza ripubblicare | Analisi |
|---|---|---|---|---|
| Flipbook tramite Code Embed | Sì | Sì | Sì | Sì (piano Professional) |
| Link diretto al PDF | No | Dipende dal dispositivo | Sì | Limitate |
| iframe con visualizzatore PDF | No | Variabile | Sì | Limitate |
| Immagini in uno slider | Parziale | Sì | No | Limitate |
| Testo con immagini | No | Sì | No | Nessuna |
Se il documento è una fattura di una pagina o una scheda tecnica che le persone stampano, un link semplice va bene. Non esagerare.
Qualsiasi cosa con più di qualche pagina, qualsiasi cosa visiva e qualsiasi cosa che tu voglia monitorare. Un catalogo da 60 pagine in uno slider è faticoso da costruire e da mantenere. Un flipbook sostituisce il PDF con uno nuovo e la pagina è già aggiornata.
Vedere lo schema in un contesto rende più facile pianificare la configurazione.
Un piccolo negozio di moda pubblica un lookbook di stagione. Con il Creatore di flipbook di lookbook, chi gestisce il negozio carica il nuovo PDF ogni stagione. La pagina Webflow non cambia mai, perché l’embed punta sempre allo stesso link del flipbook. Aggiornare richiede minuti invece di una sessione di design.
Un bar tiene il suo menù in un flipbook creato con il Creatore di flipbook per menù di ristoranti. I prezzi cambiano ogni mese. Lo staff sostituisce il file e il menù sul sito è corretto prima dell’ora di punta del pranzo.
Un freelance costruisce siti per i clienti in Webflow e usa il Creatore di flipbook di report per i riepiloghi trimestrali. Ogni cliente ottiene una pagina privata con un flipbook protetto da password. Il freelance invia un link, non un allegato.
Con lo strumento Portfolio fotografico, un fotografo pubblica un libro curato dei suoi ultimi servizi fotografici. Le immagini grandi restano nitide, e l’incorporamento si trova sotto una breve biografia nella pagina Chi sono.
La maggior parte dei problemi è piccola e prevedibile. Scorri questo elenco prima di riscrivere qualsiasi cosa.
src si apra da solo in una nuova scheda del browser.Aumenta l’altezza oppure passa al contenitore con proporzioni fisse. Le pagine tagliate significano quasi sempre che l’iframe è più basso di quanto il visualizzatore richieda.
I browser bloccano la riproduzione automatica con l’audio. Il visitatore deve prima cliccare una volta. Aggiungi una breve riga di testo come "Premi play per ascoltare l’audio" vicino all’embed.
Aggiungi loading="lazy" all’iframe, così si carica solo quando il visitatore scorre fino a lui. Metti il flipbook sotto la piega, quando possibile, e mantieni leggera la prima schermata della pagina.
| Sintomo | Causa probabile | Soluzione |
|---|---|---|
| Non si vede nulla | Errore di battitura in src | Copia di nuovo il link dal pannello di condivisione |
| Riquadro grigio nel Designer | Comportamento normale | Pubblica e visualizza la versione pubblicata |
| La pagina scorre dentro il riquadro | Altezza troppo piccola | Aumenta il valore dell’altezza |
| Manca il pulsante a schermo intero | allowfullscreen rimosso | Riaggiungi l’attributo |
| Primo rendering lento | L’embed si carica subito | Aggiungi loading="lazy" |
Quando le basi funzionano, piccoli ritocchi fanno sembrare la sezione intenzionale.
Scrivi un titolo, una o due frasi su quello che c’è dentro e un pulsante per chi preferisce scaricare il file. I download offline sono disponibili come opzione, quindi puoi offrire entrambe le strade.
Se vuoi sapere quante persone aprono il flipbook e quali pagine leggono, il piano Professional include le statistiche di lettura e la generazione di contatti. Confronta le opzioni nella pagina dei prezzi. Per approfondire proprio questa configurazione, consulta lo strumento Incorporare un flipbook sul sito web.
Materiali sensibili, come i listini per i rivenditori, possono stare dietro una password. La pagina Webflow resta pubblica, e il flipbook stesso chiede la password prima di aprirsi.
✅ Checklist finale:
srccorretto,width="100%", un’altezza sensata,allowfullscreen,loading="lazy", untitledescrittivo e una prova su un telefono vero.
Ora hai tutto ciò che serve: un PDF pulito, un flipbook, un iframe e regole di dimensione che reggono su tutti i breakpoint. Il processo intero richiede circa quindici minuti la prima volta e un paio di minuti per ogni aggiornamento successivo.
Pronto a crearne uno? Inizia gratis su Flipbooks AI, poi sfoglia tutti gli strumenti e i modelli disponibili per trovare il layout giusto per i tuoi contenuti. Quando vuoi analisi, password e flipbook illimitati, confronta i piani tariffari e scegli quello che fa per il tuo sito.
Scegli la tua lingua
