Come modificare il flipbook 3D

In questa pagina è disponibile un manuale completo per la modifica del Flipbook 3D di Veg Navigator

1. Login

Se sei già sul tuo sito, vai nel menu principale in alto e clicca su “Entra”.

Se invece non sei sul tuo sito o non ricordi l’URL, segui le istruzioni qui di seguito:
Come accedere al sito passando dal network

2. Modifica del flipbook

2.1 Area amministrativa

Dopo aver effettuato il login, entra nell’area amministrativa e fai clic sull’icona con la “W”, situata a sinistra nella barra nera in alto.

Nella barra laterale nera, fai clic su “Real3D Flipbook” e poi su “Flipbooks”.

Nella nuova pagina vedrai il flipbook associato al tuo sito one page. Fai clic sul link indicato nell’immagine seguente:

Nella pagina successiva vedrai tutte le pagine che compongono il flipbook. Nell’immagine qui sotto, ad esempio, il flipbook mostrato ha 14 pagine; quello che selezionerai tu potrebbe averne di più o di meno, a seconda del sito one page scelto in precedenza e del flipbook associato.

Inizia modificando una delle pagine: posiziona il puntatore del mouse sulla pagina che desideri modificare e fai clic sul pulsante “Edit”. Successivamente, potrai modificare anche le altre.

2.2 Modifica delle immagini di sfondo

(Se non vuoi cambiare le immagini di sfondo, salta questo passaggio e vai direttamente al punto 2.3)

La nuova pagina è quella in cui potrai modificare il tuo flipbook. Se desideri cambiare l’immagine di sfondo (ma puoi anche mantenerla, modificando solo gli elementi sovrapposti), ti consigliamo di rispettare le stesse proporzioni dell’immagine originale, per evitare distorsioni – ad esempio, inserire un’immagine orizzontale in una pagina verticale potrebbe deformarla. Le misure consigliate per l’immagine di sfondo sono 2000px di altezza e 1400px di larghezza.

Quindi, prima di caricare l’immagine, è buona pratica controllarne le dimensioni e il “peso”. Se necessario, puoi modificarla con il tuo programma di editing immagini o utilizzare strumenti online gratuiti come iLoveIMG o FreeConvert. Abbiamo preparato una guida su come utilizzarli:
Guida su come modificare le immagini online

Non appena le immagini di sfondo saranno pronte, procedi come segue:

1. Fai clic sul pulsante “Replace image”.
2. Nella finestra modale che si apre, seleziona la scheda “Carica file” in alto a sinistra.
3. Scegli l’immagine dal tuo dispositivo cliccando su “Seleziona i file” al centro della finestra, oppure trascina direttamente il file dalla cartella del tuo computer nella finestra modale.

2.3 Gli strumenti dell’editor

L’editor contiene tutti gli strumenti necessari per creare un flipbook con un menù ricco di elementi. Vediamo insieme quali sono e come utilizzarli:

Link:
serve a collegare il flipbook a un sito, a un’altra pagina del flipbook o a qualsiasi risorsa online, permettendo all’utente di accedervi direttamente cliccando. Se una delle pagine del flipbook contiene uno o più link, quando l’utente la raggiunge durante la lettura, il campo del link si illumina per circa un secondo, segnalando così la sua presenza.
Come si inserisce:
Il link va sempre inserito sopra un altro elemento, così da renderlo cliccabile. Per inserirlo:

1. Fai clic sul pulsante con il simbolo in alto a sinistra.
2. Posizionati nel punto in cui vuoi inserire il link.
3. Fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area.
4. Rilascia il tasto del mouse quando hai terminato.

A questo punto, nella colonna di destra saranno visibili le impostazioni del link:

1. Go to URL – Inserisci qui un indirizzo web (es. https://www.esserevegan.it/). In alternativa, puoi selezionare una risorsa dalla libreria cliccando sul pulsante “Select”.
2. Go to internal page – Usalo come alternativa a Go to URL: inserisci il numero della pagina del flipbook che vuoi aprire.
3. Tooltip text – Inserisci un breve suggerimento testuale che apparirà quando l’utente passerà sopra il link. Subito sotto puoi scegliere se mostrarlo sopra o sotto il link.
4. Assi X (orizzontale) e Y (verticale) – Servono per spostare l’elemento link. Con “Width” e “Height” puoi aumentare o ridurre l’area del link.
5. Copy element – Duplica l’elemento. Una volta cliccato, si attiva “Paste element”, che ti permette di incollare un clone del link.
6. Delete element – Elimina l’elemento link selezionato.

💡Tutti gli elementi possono essere spostati trascinandoli con il mouse.
Se però uno degli 8 strumenti presenti a sinistra è selezionato, per deselezionarlo è necessario utilizzare lo stesso strumento (fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area. Solamente dopo potrai passare a un altro strumento). Nel caso non serva più, puoi eliminarlo cliccando sul piccolo simbolo nero a forma di cestino.

---

Video:
serve per inserire un video presente nella tua libreria, ma anche esterno.

Come si inserisce:

1. Fai clic sul pulsante con il simbolo (⏵) in alto a sinistra.
2. Posizionati nel punto in cui vuoi inserire il video.
3. Fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area.
4. Rilascia il tasto del mouse quando hai terminato.

A questo punto, nella colonna di destra saranno visibili le impostazioni del lettore video:

1. Video .mp4 URL – Inserisci qui l’URL del video. Se vuoi utilizzare una risorsa esterna, puoi provare questo URL: http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
   Se invece vuoi inserire un video presente nella tua libreria, fai clic sul pulsante “Select“ per aprire la libreria dei media, seleziona il file desiderato, poi spostati nella colonna di destra e clicca sul pulsante “Copia l’URL negli appunti“. Torna quindi alla pagina dell’editor e incolla l’URL nel campo “Video .mp4 URL“.
   *Nota: è importante non abusare nell’inserimento dei video nel flipbook, perché il loro “peso” potrebbe rallentare notevolmente l’avvio e il caricamento.
2. Autoplay – Seleziona questa casella se vuoi che il video venga riprodotto automaticamente all’apertura della pagina.
3. Loop – Se selezioni questa casella, il video si ripete automaticamente dall’inizio ogni volta che finisce.
4. Controls – Applica tutti i controlli al lettore video: volume audio, download, play, stop, tutto schermo, velocità di riproduzione e altro.
5. Muted – Il video viene riprodotto senza audio.
6. Assi X (orizzontale) e Y (verticale) – Servono per spostare l’elemento video. Con “Width” e “Height” puoi aumentare o ridurre l’area del video.
7. Copy element – Duplica l’elemento. Una volta cliccato, si attiva “Paste element”, che ti permette di incollare un clone del video.
8. Delete element – Elimina l’elemento video selezionato.

💡Tutti gli elementi possono essere spostati trascinandoli con il mouse.
Se però uno degli 8 strumenti presenti a sinistra è selezionato, per deselezionarlo è necessario utilizzare lo stesso strumento (fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area. Solamente dopo potrai passare a un altro strumento). Nel caso non serva più, puoi eliminarlo cliccando sul piccolo simbolo nero a forma di cestino.

---

YouTube:
serve per inserire un video di YouTube.

Come si inserisce:

1. Fai clic sul pulsante con il simbolo situato sulla sinistra.
2. Posizionati nel punto in cui vuoi inserire il video.
3. Fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area.
4. Rilascia il tasto del mouse quando hai terminato.

A questo punto, nella colonna di destra saranno visibili le impostazioni del link:

1. Video URL or Embed code – Inserisci qui l’URL del video YouTube, ad esempio questo: https://www.youtube.com/watch?v=4yW3nJ77QBg&t=3s
2. Autoplay – Seleziona questa casella se vuoi che il video venga riprodotto automaticamente all’apertura della pagina.
3. Assi X (orizzontale) e Y (verticale) – Servono per spostare l’elemento video. Con “Width” e “Height” puoi aumentare o ridurre l’area del video.
4. Copy element – Duplica l’elemento. Una volta cliccato, si attiva “Paste element”, che ti permette di incollare un clone del video.
5. Delete element – Elimina l’elemento video selezionato.

---

Audio:
serve per inserire un file audio.

Come si inserisce:

1. Fai clic sul pulsante con il simbolo situato sulla sinistra.
2. Posizionati nel punto in cui vuoi inserire l’audio.
3. Fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area.
4. Rilascia il tasto del mouse quando hai terminato.

A questo punto, nella colonna di destra saranno visibili le impostazioni dell’audio:

1. Audio .mp3 URL – Inserisci qui l’URL del file audio. Puoi fare un test con il seguente URL: https://modello-ristorante.vegnavigator.it/wp-content/uploads/sites/14/2025/05/audio-globale-gray-.mp3 (Per confermare, premi il tasto Invio sulla tastiera)
   Se invece vuoi inserire un file audio presente nella tua libreria, fai clic sul pulsante “Select“ per aprire la libreria dei media e seleziona il file desiderato. L’URL verrà automaticamente aggiunto nel campo “Audio .mp3 URL“.
2. Autoplay – Seleziona questa casella se vuoi che l’audio venga riprodotto automaticamente all’apertura della pagina.
3. Loop – Se selezioni questa casella, l’audio si ripete automaticamente dall’inizio ogni volta che finisce.
4. Controls – Applica tutti i controlli al lettore audio: play, stop, volume e barra scorrimento.
5. Assi X (orizzontale) e Y (verticale) – Servono per spostare l’elemento audio. Con “Width” e “Height” puoi aumentare o ridurre l’area dell’audio.
6. Copy element – Duplica l’elemento. Una volta cliccato, si attiva “Paste element”, che ti permette di incollare un clone dell’audio.
7. Delete element – Elimina l’elemento audio selezionato.

💡Tutti gli elementi possono essere spostati trascinandoli con il mouse.
Se però uno degli 8 strumenti presenti a sinistra è selezionato, per deselezionarlo è necessario utilizzare lo stesso strumento (fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area. Solamente dopo potrai passare a un altro strumento). Nel caso non serva più, puoi eliminarlo cliccando sul piccolo simbolo nero a forma di cestino.

---

iFrame:
Un iFrame (inline frame): è una “finestra” che permette di mostrare dentro al flipbook contenuti provenienti da un’altra pagina web. Con questa funzione puoi incorporare un sito, un documento, una mappa o un video senza doverli caricare direttamente nel flipbook.
Esempio pratico: puoi inserire una mappa di Google, un form di contatto o una pagina web e visualizzarli dentro una pagina del flipbook.
Vantaggio: il contenuto resta esterno e si aggiorna automaticamente se cambia sul sito di origine.

Embed code: è il codice HTML che piattaforme come YouTube, Vimeo o Spotify ti forniscono per incorporare i loro contenuti. Quest’ultimo può essere inserito all’interno di un iFrame.

Come si inserisce:

1. Fai clic sul pulsante con il simbolo 〈 〉 situato sulla sinistra.
2. Posizionati nel punto in cui vuoi inserire l’URL o Embed code.
3. Fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area.
4. Rilascia il tasto del mouse quando hai terminato.

A questo punto, nella colonna di destra saranno visibili le impostazioni dell’iFrame:

1. URL or Embed code – Inserisci un URL valido oppure un codice embed. Ad esempio, per incorporare una mappa di Google, fai clic su questo link: https://maps.app.goo.gl/pZtbETMpxPhr9PCg6
2. Quindi fai clic sul pulsante “Condividi“, che trovi a sinistra.
3. Si aprirà una finestra, dove dovrai cliccare su “Incorpora una mappa“.

Nella nuova finestra fai clic su “COPIA HTML“

Torna alla pagina dell’editor e incolla il codice nel campo “URL o codice embed“.

1. Assi X (orizzontale) e Y (verticale) – Servono per spostare l’elemento iFrame. Con “Width” e “Height” puoi aumentare o ridurre l’area iFrame.
2. Copy element – Duplica l’elemento. Una volta cliccato, si attiva “Paste element”, che ti permette di incollare un clone dell’iFrame.
3. Delete element – Elimina l’elemento audio selezionato.

---

Image:
Questo strumento serve per inserire una o più immagini.

Come si inserisce:

1. Fai clic sul pulsante con il simbolo situato sulla sinistra.
2. Posizionati nel punto in cui vuoi inserire l’immagine.
3. Fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area.
4. Rilascia il tasto del mouse quando hai terminato.

A questo punto, nella colonna di destra saranno visibili le impostazioni dello strumento:

1. Image URL – Inserisci qui l’URL del file immagine. Puoi fare un test con il seguente URL: https://menu.vegnavigator.it/wp-content/uploads/sites/2/2025/06/Brown-5.png (Per confermare, premi il tasto Invio sulla tastiera)
   Se invece vuoi inserire un file immagine presente nella tua libreria, fai clic sul pulsante “Select“ per aprire la libreria dei media e seleziona il file desiderato. L’URL verrà automaticamente aggiunto nel campo “Image URL“.
   Questo strumento crea un’immagine sopra quella di sfondo (vedi punto 2.2); trovandosi su un livello superiore, copre automaticamente una parte dell’immagine di sfondo. L’editor supporta i formati: JPG o JPEG, GIF, WEBP e PNG – Per l’inserimento di file PNG, è utile consultare questa guida.
2. Assi X (orizzontale) e Y (verticale) – Servono per spostare l’elemento Image. Con “Width” e “Height” puoi aumentare o ridurre l’area dell’immagine.
3. Copy element – Duplica l’elemento. Una volta cliccato, si attiva “Paste element”, che ti permette di incollare un clone dell’immagine.
4. Delete element – Elimina l’elemento video selezionato.

💡Tutti gli elementi possono essere spostati trascinandoli con il mouse.
Se però uno degli 8 strumenti presenti a sinistra è selezionato, per deselezionarlo è necessario utilizzare lo stesso strumento (fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area. Solamente dopo potrai passare a un altro strumento). Nel caso non serva più, puoi eliminarlo cliccando sul piccolo simbolo nero a forma di cestino.

---

Spotlight:
Lo Spotlight link apre un contenuto interattivo sopra il flipbook, invece di navigare solo verso un URL tradizionale. Questo permette di mantenere l’utente all’interno dell’esperienza del flipbook, rendendo la visualizzazione più immersiva e dinamica. Se una delle pagine del flipbook contiene uno o più Spotlight link, quando l’utente la raggiunge durante la lettura, il campo si illumina per circa un secondo, segnalando così la sua presenza.
Un esempio di Spotlight link può essere visto a pagina 12 di questo flipbook.

Come si inserisce:

1. Fai clic sul pulsante con il simbolo sulla sinistra.
2. Posizionati nel punto in cui vuoi inserire lo Spotlight link.
3. Fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area.
4. Rilascia il tasto del mouse quando hai terminato.

A questo punto, nella colonna di destra saranno visibili le impostazioni dello strumento Spotlight.

1. URL to open in spotlight (image, video, youtube) – Inserisci l’URL della risorsa che si aprirà sopra il flipbook quando il visitatore cliccherà nell’area Spotlight (es. https://menu.vegnavigator.it/wp-content/uploads/sites/2/2025/06/Brown-img-1.jpg). In alternativa, puoi selezionare una risorsa dalla libreria cliccando sul pulsante “Select”.
2. Tooltip text – Inserisci un breve suggerimento testuale che apparirà quando l’utente passerà sopra l’area Spotlight . Subito sotto puoi scegliere se mostrarlo sopra o sotto lo Spotlight.
3. Assi X (orizzontale) e Y (verticale) – Servono per spostare l’elemento Spotlight. Con “Width” e “Height” puoi aumentare o ridurre l’area.
4. Copy element – Duplica l’elemento. Una volta cliccato, si attiva “Paste element”, che ti permette di incollare un clone dello Spotlight.
5. Delete element – Elimina l’elemento Spotlight selezionato.

---

Text:
Con questo strumento puoi inserire testo all’interno del flipbook, scegliendo la dimensione, il colore e la famiglia di caratteri desiderati. Inoltre, puoi definire se visualizzarlo in grassetto, corsivo o sottolineato e regolare lo spazio tra le righe di testo.

Come si inserisce:

1. Fai clic sul pulsante con il simbolo sulla sinistra.
2. Posizionati nel punto in cui vuoi inserire il testo.
3. Fai clic con il tasto sinistro del mouse e, tenendolo premuto, trascina per definire l’area.
4. Rilascia il tasto del mouse quando hai terminato.

A questo punto, nella colonna di destra saranno visibili le impostazioni dello strumento Text.

1. Text – In questo campo puoi inserire un paragrafo o un titolo.

Il testo va automaticamente a capo in base alla larghezza dell’area impostata. Se vuoi forzare il ritorno a capo in un punto preciso, usa un tag <br>

Esempio 1: listino prezzi semplice – Copia e incolla nel campo Text dell’editor Flipbook)

Il risultato sarà:
€7.00
€7.00
€5.00
€6.00
€5.50

Se vuoi inserire più spazio tra le righe, puoi utilizzare due tag <br> consecutivi

1. Font Family – (famiglia di caratteri) è una proprietà che definisce lo stile del carattere utilizzato per il testo. Determina come appariranno le lettere, i numeri e i simboli sulle pagine del flipbook.
2. Font Size (px) – indica la dimensione del testo, cioè quanto grandi appaiono lettere, numeri e simboli. Maggiore è il valore, più grande sarà il testo; più piccolo è il valore, più piccolo apparirà.
3. Color – Serve per colorare il testo. Dopo aver cliccato su “Seleziona un colore“, apparirà una tavolozza da cui potrai scegliere il colore desiderato.
4. Line Height – È una proprietà che definisce lo spazio verticale tra le righe di testo all’interno di un paragrafo. Si differenzia dal tag <br> visto sopra perché quest’ultimo forza un ritorno a capo immediato, mentre il line height definisce lo spazio verticale continuo tra tutte le righe di un paragrafo.
5. Caselle di scelta: Bold, Italic e Underline. Servono rispettivamente per applicare il grassetto, il corsivo e il testo sottolineato.
6. Assi X (orizzontale) e Y (verticale) – Servono per spostare l’elemento Text. Con “Width” e “Height” puoi aumentare o ridurre l’area.
7. Copy element – Duplica l’elemento. Una volta cliccato, si attiva “Paste element”, che ti permette di incollare un clone del testo.
8. Delete element – Elimina l’elemento Text selezionato.

In caso di necessità, puoi contattare lo staff all’indirizzo email: vegnavigator@esserevegan.it