JPiro Page Builder - Riferimento dei blocchi
Una scheda per ogni blocco · versione 0.74.1
Per i concetti generali (pagine, editor, moduli, colori) leggi il manuale d'uso. Le schede elencano le opzioni di ogni blocco: il nome è quello che vedi nell'editor, in italiano.
Struttura
Sezione
Gruppo: StrutturaVa dentro: PaginaContiene: blocchi
Contenitore di primo livello della pagina. Contiene una o più righe. Ha uno sfondo (colore, sfumatura, immagine o video) che può cambiare per desktop, laptop e mobile. La larghezza del contenuto può essere Boxed (contenitore Bootstrap a gradini), Fluida (tutta la larghezza) o Personalizzata (larghezza massima per dispositivo). Con «Sezione a tutto schermo» lo sfondo va da un bordo all'altro della finestra anche in un template boxed.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Sfondo | Sfondo | - |
| Allineamento verticale | Elenco | -Valori: Predefinito · Inizio · Centro · Fine |
| Larghezza contenuto | Elenco | -Valori: Boxed · Fluida · Personalizzata |
| Desktop – Larghezza max (vuoto = valore delle Opzioni)Solo se «Larghezza contenuto» = «Personalizzata» | Misura (px, %, rem...) | - |
| Laptop – Larghezza max (vuoto = valore delle Opzioni)Solo se «Larghezza contenuto» = «Personalizzata» | Misura (px, %, rem...) | - |
| Mobile – Larghezza max (vuoto = valore delle Opzioni)Solo se «Larghezza contenuto» = «Personalizzata» | Misura (px, %, rem...) | - |
| Sezione a tutto schermo (sfondo da bordo a bordo della finestra, anche con template boxed) | Sì / No | No |
Riga
Gruppo: StrutturaVa dentro: Sezione, Colonna, Modale, OffcanvasContiene: Colonna
Divide lo spazio in colonne sulla griglia a 12 parti di Bootstrap. Imposta la distanza tra le colonne e l'allineamento verticale. Quando aggiungi una riga, JPiro Page Builder crea subito una colonna al suo interno.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Spaziatura colonne | Elenco | AmpiaValori: Nessuna · Media · Ampia · Personalizzato |
| Spaziatura colonne (px)Solo se «Spaziatura colonne» = «Personalizzato» | Misura (px, %, rem...) | 24px |
| Spaziatura righe (px)Solo se «Spaziatura colonne» = «Personalizzato» | Misura (px, %, rem...) | 24px |
| Sfondo | Sfondo | - |
| Allineamento verticale | Elenco | -Valori: Predefinito · Inizio · Centro · Fine · Estendi |
Opzioni degli elementi: Colonna
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Larghezza | Elenco | 12/12Valori: Auto · 1/12 · 2/12 · 3/12 · 4/12 · 5/12 ... |
| Larghezza (%) | Numero | 50 |
| Laptop % | Numero | - |
| Mobile % | Numero | - |
| Disposizione contenuto | Elenco | Impilati (verticale)Valori: Impilati (verticale) · Affiancati (orizzontale) |
| Sfondo | Sfondo | - |
| Allineamento verticale | Elenco | -Valori: Predefinito · Inizio · Centro · Fine · Estendi |
Colonna
Gruppo: StrutturaVa dentro: RigaContiene: blocchi
Una colonna della riga. La larghezza si imposta in dodicesimi, in automatico o in percentuale, con valori separati per tablet e mobile. Si ridimensiona anche trascinando il bordo nell'editor. Contiene i blocchi di contenuto.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Larghezza | Elenco | 12/12Valori: Auto · 1/12 · 2/12 · 3/12 · 4/12 · 5/12 ... |
| Larghezza (%) | Numero | 50 |
| Laptop % | Numero | - |
| Mobile % | Numero | - |
| Disposizione contenuto | Elenco | Impilati (verticale)Valori: Impilati (verticale) · Affiancati (orizzontale) |
| Sfondo | Sfondo | - |
| Allineamento verticale | Elenco | -Valori: Predefinito · Inizio · Centro · Fine · Estendi |
Contenuti
Titolo
Gruppo: ContenutiVa dentro: Colonna, Sezione, Modale, Offcanvas
Titolo da H1 a H6, con allineamento, link opzionale, ombra del testo e icona. La tipografia (colore, dimensione, spessore) è regolabile.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Testo | Testo | Titolo |
| Livello | Elenco | H2Valori: H1 · H2 · H3 · H4 · H5 · H6 |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Link | Link (URL o voce di menu) | - |
| Apri in una nuova scheda | Sì / No | No |
| Aggiungi nofollow | Sì / No | No |
| Aggiungi noreferrer | Sì / No | No |
| Aggiungi noopener | Sì / No | No |
| Ombra del testo | Sì / No | No |
| Colore ombraSolo se «Ombra del testo» = «Sì» | Colore | #000000ff |
| Ombra orizzontaleSolo se «Ombra del testo» = «Sì» | Numero | 2 |
| Ombra verticaleSolo se «Ombra del testo» = «Sì» | Numero | 2 |
| Sfocatura ombraSolo se «Ombra del testo» = «Sì» | Numero | 4 |
| Mostra icona | Sì / No | No |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star)Solo se «Mostra icona» = «Sì» | Icona Font Awesome | fa-solid fa-star |
| Posizione iconaSolo se «Mostra icona» = «Sì» | Elenco | SinistraValori: Sinistra · Destra · Alto · Basso |
| Dimensione iconaSolo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Margine icona (alto)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Margine icona (destra)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | 8px |
| Margine icona (basso)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Margine icona (sinistra)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Apri il link in una finestra modale | Sì / No | No |
| Dimensione finestra modaleSolo se «Apri il link in una finestra modale» = «Sì» | Dimensione della finestra | - |
| Colore testo | Colore | - |
| Colore al passaggio del mouse | Colore | - |
| Dimensione testo | Misura (px, %, rem...) | - |
| Corsivo | Elenco | -Valori: Predefinito · Corsivo |
| Sottolineato | Elenco | -Valori: Predefinito · Sottolineato |
| Trasformazione testo | Elenco | -Valori: Predefinito · Nessuna · MAIUSCOLO · minuscolo · Iniziali Maiuscole |
| Spessore testo | Elenco | -Valori: Predefinito · Normale · Grassetto · 300 · 400 · 500 · 600 · 700 · 800 |
Paragrafo
Gruppo: ContenutiVa dentro: Colonna, Sezione, Modale, Offcanvas
Testo formattato con l'editor di Joomla. Si può dividere su più colonne, limitare a un numero di parole con un link «Mostra altro» e iniziare con un capolettera.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Testo | Testo formattato | Testo del paragrafo. |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Colonne di testo | Colonne | - |
| Limite parole (0 = disattivato) | Numero | 0 |
| Testo "Mostra altro" | Testo | Mostra altro |
| Colore "Mostra altro" | Colore | - |
| Dimensione "Mostra altro" | Misura (px, %, rem...) | - |
| Capolettera | Sì / No | No |
| Colore capoletteraSolo se «Capolettera» = «Sì» | Colore | - |
| Dimensione capoletteraSolo se «Capolettera» = «Sì» | Misura (px, %, rem...) | - |
| Sfondo | Sfondo | - |
| Colore testo | Colore | - |
| Colore al passaggio del mouse | Colore | - |
| Dimensione testo | Misura (px, %, rem...) | - |
| Corsivo | Elenco | -Valori: Predefinito · Corsivo |
| Sottolineato | Elenco | -Valori: Predefinito · Sottolineato |
| Trasformazione testo | Elenco | -Valori: Predefinito · Nessuna · MAIUSCOLO · minuscolo · Iniziali Maiuscole |
| Spessore testo | Elenco | -Valori: Predefinito · Normale · Grassetto · 300 · 400 · 500 · 600 · 700 · 800 |
Pulsante
Gruppo: ContenutiVa dentro: Colonna, Sezione, Modale, Offcanvas
Pulsante o link con stile Bootstrap. Si regolano dimensione, icona e colori al passaggio del mouse; può aprire un modale.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Etichetta | Testo | Scopri di più |
| Link | Link (URL o voce di menu) | # |
| Apri in | Elenco | -Valori: Stessa finestra · Nuova finestra |
| Dimensione pulsante | Elenco | -Valori: Predefinito · Piccolo · Grande · Personalizzato |
| Padding personalizzato (alto)Solo se «Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Padding personalizzato (destra)Solo se «Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Padding personalizzato (basso)Solo se «Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Padding personalizzato (sinistra)Solo se «Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Dimensione testo personalizzataSolo se «Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Stile | Elenco | PrimarioValori: Primario · Secondario · Successo · Pericolo · Attenzione · Info ... |
| Sfondo personalizzatoSolo se «Stile» = «Personalizzato» | Colore | #0d6efd |
| Colore testo personalizzatoSolo se «Stile» = «Personalizzato» | Colore | #ffffff |
| Colore bordoSolo se «Stile» = «Personalizzato» | Colore | #0d6efd |
| Spessore bordo (es. 1px)Solo se «Stile» = «Personalizzato» | CSS libero | 1px |
| Angoli arrotondatiSolo se «Stile» = «Personalizzato» | Misura (px, %, rem...) | 6px |
| Sfondo al passaggio del mouseSolo se «Stile» = «Personalizzato» | Colore | - |
| Colore testo al passaggio del mouseSolo se «Stile» = «Personalizzato» | Colore | - |
| Colore bordo al passaggio del mouseSolo se «Stile» = «Personalizzato» | Colore | - |
| Mostra icona | Sì / No | No |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star)Solo se «Mostra icona» = «Sì» | Icona Font Awesome | fa-solid fa-star |
| Posizione iconaSolo se «Mostra icona» = «Sì» | Elenco | SinistraValori: Sinistra · Destra · Alto · Basso |
| Dimensione iconaSolo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Margine icona (alto)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Margine icona (destra)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | 8px |
| Margine icona (basso)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Margine icona (sinistra)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Apri il link in una finestra modale | Sì / No | No |
| Dimensione finestra modaleSolo se «Apri il link in una finestra modale» = «Sì» | Dimensione della finestra | - |
| Colore testo | Colore | - |
| Colore al passaggio del mouse | Colore | - |
| Dimensione testo | Misura (px, %, rem...) | - |
| Corsivo | Elenco | -Valori: Predefinito · Corsivo |
| Sottolineato | Elenco | -Valori: Predefinito · Sottolineato |
| Trasformazione testo | Elenco | -Valori: Predefinito · Nessuna · MAIUSCOLO · minuscolo · Iniziali Maiuscole |
| Spessore testo | Elenco | -Valori: Predefinito · Normale · Grassetto · 300 · 400 · 500 · 600 · 700 · 800 |
Immagine
Gruppo: ContenutiVa dentro: Colonna, Sezione, Modale, Offcanvas
Immagine dalla cartella images o da un URL. Ha allineamento, regolazioni di opacità, luminosità, contrasto e saturazione, effetto al passaggio del mouse e link.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| URL immagine | Immagine (cartella images o URL) | https://placehold.co/800x400 |
| Testo alternativo | Testo | - |
| Attributo title | Testo | - |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Link | Link (URL o voce di menu) | - |
| Apri in | Elenco | -Valori: Stessa finestra · Nuova finestra |
| Immagine al passaggio del mouse (rollover) | Immagine (cartella images o URL) | - |
| Larghezza | Misura (px, %, rem...) | - |
| Altezza | Misura (px, %, rem...) | - |
| Angoli arrotondati | Misura (px, %, rem...) | - |
| Priorità di caricamento | Elenco | -Valori: Predefinito · Alta · Bassa |
| Opacità | Numero | 100 |
| Sfocatura | Numero | 0 |
| Luminosità | Numero | 100 |
| Contrasto | Numero | 100 |
| Saturazione | Numero | 100 |
| Inverti colore | Numero | 0 |
| Scala di grigi | Numero | 0 |
| Seppia | Numero | 0 |
| Rotazione tonalità | Numero | 0 |
| Effetto al passaggio del mouse | Elenco | -Valori: Nessuno · Zoom · Dissolvenza (opacità) · Scala di grigi · Sfocatura |
| ValoreSolo se «Effetto al passaggio del mouse» ≠ «Nessuno» | Numero | 110 |
| Apri il link in una finestra modale | Sì / No | No |
| Dimensione finestra modaleSolo se «Apri il link in una finestra modale» = «Sì» | Dimensione della finestra | - |
Video
Gruppo: ContenutiVa dentro: Colonna, Sezione, Modale, Offcanvas
Video incorporato da un URL, con rapporto d'aspetto e opzioni per controlli, avvio automatico, audio disattivato e ripetizione.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| URL video (YouTube, Vimeo o file .mp4 diretto) | Testo | - |
| Proporzioni | Elenco | 16:9Valori: 16:9 · 4:3 · 1:1 · 21:9 |
| Mostra controlli | Sì / No | Sì |
| Riproduzione automatica | Sì / No | No |
| Muto | Sì / No | No |
| Ripeti | Sì / No | No |
Divisore / Spaziatore
Gruppo: ContenutiVa dentro: Colonna, Sezione, Modale, Offcanvas
Linea di separazione oppure semplice spazio verticale, con stile, spessore, colore e larghezza della linea.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Tipo | Elenco | LineaValori: Linea · Spazio vuoto |
| AllineamentoSolo se «Tipo» = «Linea» | Elenco | CentroValori: Sinistra · Centro · Destra |
| Stile lineaSolo se «Tipo» = «Linea» | Elenco | ContinuaValori: Continua · Tratteggiata · Punteggiata |
| Colore lineaSolo se «Tipo» = «Linea» | Colore | #dee2e6ff |
| SpessoreSolo se «Tipo» = «Linea» | Misura (px, %, rem...) | 1px |
| LarghezzaSolo se «Tipo» = «Linea» | Misura (px, %, rem...) | 100% |
| AltezzaSolo se «Tipo» = «Spazio vuoto» | Misura (px, %, rem...) | 40px |
Icona
Gruppo: ContenutiVa dentro: Colonna, Sezione, Modale, Offcanvas
Icona Font Awesome con dimensione, colore, sfondo e riquadro.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | fa-solid fa-star |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Dimensione icona | Misura (px, %, rem...) | 32px |
| Colore testo | Colore | - |
| Colore al passaggio del mouse | Colore | - |
| Forma sfondo | Elenco | -Valori: Nessuna · Cerchio · Quadrato |
| Colore sfondoSolo se «Forma sfondo» ≠ «Nessuna» | Colore | #0d6efdff |
| Dimensione boxSolo se «Forma sfondo» ≠ «Nessuna» | Misura (px, %, rem...) | 64px |
| Link | Link (URL o voce di menu) | - |
| Apri in | Elenco | -Valori: Stessa finestra · Nuova finestra |
| Apri il link in una finestra modale | Sì / No | No |
| Dimensione finestra modaleSolo se «Apri il link in una finestra modale» = «Sì» | Dimensione della finestra | - |
Badge
Gruppo: ContenutiVa dentro: Colonna, Sezione, Modale, Offcanvas
Etichetta Bootstrap (badge) con variante di colore, forma a pillola, icona e link opzionale.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Testo | Testo | Novità |
| Stile | Elenco | PrimarioValori: Primario · Secondario · Successo · Pericolo · Attenzione · Info · Chiaro · Scuro · Personalizzato |
| Sfondo personalizzatoSolo se «Stile» = «Personalizzato» | Colore | #6f42c1ff |
| Colore testo personalizzatoSolo se «Stile» = «Personalizzato» | Colore | #ffffffff |
| Arrotondato (pill) | Sì / No | No |
| Link | Link (URL o voce di menu) | - |
| Apri in | Elenco | -Valori: Stessa finestra · Nuova finestra |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Mostra icona | Sì / No | No |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star)Solo se «Mostra icona» = «Sì» | Icona Font Awesome | fa-solid fa-star |
| Posizione iconaSolo se «Mostra icona» = «Sì» | Elenco | SinistraValori: Sinistra · Destra · Alto · Basso |
| Dimensione iconaSolo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Margine icona (alto)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Margine icona (destra)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | 8px |
| Margine icona (basso)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Margine icona (sinistra)Solo se «Mostra icona» = «Sì» | Misura (px, %, rem...) | - |
| Testo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Spaziatore
Gruppo: ContenutiVa dentro: Colonna, Sezione, Modale, Offcanvas
Spazio vuoto di altezza fissa, per distanziare i blocchi.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Desktop – Altezza | Misura (px, %, rem...) | 40px |
| Laptop – Altezza | Misura (px, %, rem...) | - |
| Mobile – Altezza | Misura (px, %, rem...) | - |
Citazione
Gruppo: ContenutiVa dentro: Colonna, Sezione, Modale, Offcanvas
Citazione con autore e ruolo. Tre stili: semplice, riquadro e grande. L'icona è a scelta e il bordo sinistro «accento» si può attivare o no.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Testo | Testo su più righe | Qui va una citazione breve e memorabile. |
| Autore | Testo | Nome autore |
| Ruolo dell'autore | Testo | - |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | fa-solid fa-quote-left |
| Dimensione icona | Misura (px, %, rem...) | - |
| Colore icona | Colore | - |
| Stile | Elenco | SempliceValori: Semplice · Riquadro · Grande |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Mostra bordo di accentoSolo se «Stile» ≠ «Grande» | Sì / No | Sì |
| Colore di accento | Colore | #0d6efdff |
| Colore sfondoSolo se «Stile» = «Riquadro» | Colore | #f8f9faff |
| Testo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Autore – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Tabella
Gruppo: ContenutiVa dentro: Colonna, Sezione, Modale, Offcanvas
Tabella Bootstrap. Righe e celle si scrivono in un campo di testo: una riga per riga di testo, celle separate da «|». Ha intestazione, righe a strisce e modalità responsive.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Righe (una per riga, celle separate da |) | Testo su più righe | Nome|Ruolo|Città Anna|Designer|Roma M... |
| La prima riga è l'intestazione | Sì / No | Sì |
| Righe alternate | Sì / No | Sì |
| Bordi | Sì / No | No |
| Evidenzia riga al passaggio | Sì / No | No |
| Compatta | Sì / No | No |
| Scorrimento laterale su schermi piccoli | Sì / No | Sì |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Sfondo intestazione | Colore | - |
| Colore testo intestazione | Colore | - |
Componenti
Avviso
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, Offcanvas
Avviso Bootstrap con titolo, testo, variante di colore e pulsante per chiuderlo. Può avere un'icona a sinistra, con dimensione e colore propri. Con un link, tutto il riquadro diventa cliccabile; il pulsante di chiusura continua a funzionare.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Titolo | Testo | - |
| Testo | Testo | Questo è un messaggio di avviso. |
| Stile | Elenco | InfoValori: Primario · Secondario · Successo · Pericolo · Attenzione · Info · Chiaro · Scuro |
| Colore sfondo | Colore | - |
| Colore bordo | Colore | - |
| Spessore bordo | Misura (px, %, rem...) | - |
| Raggio bordo | Misura (px, %, rem...) | - |
| Chiudibile | Sì / No | No |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | - |
| Dimensione iconaSolo se «Icona (classe Font Awesome 6 Free, es. fa-solid fa-star)» ≠ «» | Misura (px, %, rem...) | 24px |
| Colore iconaSolo se «Icona (classe Font Awesome 6 Free, es. fa-solid fa-star)» ≠ «» | Colore | - |
| Link | Link (URL o voce di menu) | - |
| Apri inSolo se «Link» ≠ «» | Elenco | -Valori: Stessa finestra · Nuova finestra |
| Titolo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Testo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Barra di avanzamento
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, Offcanvas
Barra di avanzamento con valore, colore e altezza. Può mostrare il valore in percentuale.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Etichetta | Testo | - |
| Valore (%) | Numero | 60 |
| Mostra valore | Sì / No | Sì |
| A strisce | Sì / No | No |
| Colore barra | Colore | #0d6efdff |
| Colore sfondo barra | Colore | - |
| Altezza barra | Misura (px, %, rem...) | 20px |
Card
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, Offcanvas
Card Bootstrap con immagine, titolo, testo e pulsante.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| URL immagine | Immagine (cartella images o URL) | https://placehold.co/600x300 |
| Testo alternativo | Testo | - |
| Titolo | Testo | Titolo |
| Titolo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Testo | Testo formattato | Testo del paragrafo. |
| Testo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Pulsante – Etichetta | Testo | Scopri di più |
| Pulsante – Link | Link (URL o voce di menu) | - |
| Apri in | Elenco | -Valori: Stessa finestra · Nuova finestra |
| Pulsante – Dimensione pulsante | Elenco | -Valori: Predefinito · Piccolo · Grande · Personalizzato |
| Pulsante – Padding personalizzato (alto)Solo se «Pulsante – Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (destra)Solo se «Pulsante – Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (basso)Solo se «Pulsante – Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (sinistra)Solo se «Pulsante – Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Pulsante – Stile | Elenco | PrimarioValori: Primario · Secondario · Successo · Pericolo · Attenzione · Info ... |
| Pulsante – Sfondo personalizzatoSolo se «Pulsante – Stile» = «Personalizzato» | Colore | #0d6efd |
| Pulsante – Colore testo personalizzatoSolo se «Pulsante – Stile» = «Personalizzato» | Colore | #ffffff |
| Pulsante – Colore bordoSolo se «Pulsante – Stile» = «Personalizzato» | Colore | #0d6efd |
| Pulsante – Sfondo al passaggio del mouseSolo se «Pulsante – Stile» = «Personalizzato» | Colore | - |
| Pulsante – Colore testo al passaggio del mouseSolo se «Pulsante – Stile» = «Personalizzato» | Colore | - |
| Pulsante – Colore bordo al passaggio del mouseSolo se «Pulsante – Stile» = «Personalizzato» | Colore | - |
| Pulsante – Spessore bordo (es. 1px)Solo se «Pulsante – Stile» = «Personalizzato» | Misura (px, %, rem...) | 1px |
| Pulsante – Angoli arrotondatiSolo se «Pulsante – Stile» = «Personalizzato» | Misura (px, %, rem...) | 6px |
| Pulsante – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Ombra | Sì / No | No |
Testimonianza
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, Offcanvas
Recensione con testo, nome, ruolo, avatar e stelle di valutazione.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Icona | Icona Font Awesome | fa-solid fa-quote-left |
| Icona – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Citazione | Testo formattato | Servizio eccellente, consigliatissimo! |
| Citazione – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Nome | Testo | Mario Rossi |
| Nome – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Ruolo | Testo | CEO, Azienda |
| Ruolo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Foto | Immagine (cartella images o URL) | - |
| Dimensione foto | Misura (px, %, rem...) | 64px |
| Forma foto | Elenco | CerchioValori: Cerchio · Arrotondata · Quadrato |
| Stelle (0-5) | Numero | 5 |
| Colore stelle | Colore | #ffc107ff |
| Allineamento | Elenco | CentroValori: Sinistra · Centro · Destra |
| Riquadro – Colore sfondo | Colore | #ffffffff |
| Riquadro – Padding | Spaziatura (4 lati) | - |
| Riquadro – Stile bordo | Elenco | ContinuaValori: Nessuna · Continua · Tratteggiata · Punteggiata · Doppio |
| Riquadro – Colore bordo | Colore | #dee2e6ff |
| Riquadro – Spessore bordo | Spaziatura (4 lati) | - |
| Riquadro – Raggio bordo | Misura (px, %, rem...) | - |
Elenco con icone
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, OffcanvasContiene: Voce elenco
Elenco in cui ogni voce ha la sua icona. Le voci sono blocchi figli.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Disposizione | Elenco | VerticaleValori: Verticale · Orizzontale |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Spazio tra le voci | Misura (px, %, rem...) | 8px |
| Spazio tra icona e testo | Misura (px, %, rem...) | 10px |
| Posizione icona | Elenco | SinistraValori: Sinistra · Destra |
| Dimensione icona | Misura (px, %, rem...) | - |
| Colore icona | Colore | #0d6efdff |
| Colore al passaggio del mouse | Colore | - |
| Testo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Opzioni degli elementi: Voce elenco
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Testo | Testo | Voce elenco |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | fa-solid fa-check |
| Link | Link (URL o voce di menu) | - |
| Apri in | Elenco | -Valori: Stessa finestra · Nuova finestra |
Gruppo icone
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, OffcanvasContiene: Icona
Riga di icone con link, per esempio ai social. Le icone sono blocchi figli.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Forma icona | Elenco | CerchioValori: Nessuna · Cerchio · Arrotondata · Quadrato |
| Dimensione riquadro | Misura (px, %, rem...) | 40px |
| Dimensione icona | Misura (px, %, rem...) | 18px |
| Spazio tra le voci | Misura (px, %, rem...) | 10px |
| Colore sfondo | Colore | #0d6efdff |
| Sfondo al passaggio del mouse | Colore | - |
| Colore icona | Colore | #ffffffff |
| Colore al passaggio del mouse | Colore | - |
Opzioni degli elementi: Icona
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Etichetta | Testo | |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | fa-brands fa-facebook-f |
| Link | Link (URL o voce di menu) | # |
| Apri in | Elenco | Nuova finestraValori: Stessa finestra · Nuova finestra |
| Colore sfondo | Colore | - |
| Colore icona | Colore | - |
Tabella prezzi
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, Offcanvas
Piano di prezzo con nome, prezzo, periodo, elenco di funzionalità (una per riga) e pulsante. Si può evidenziare con un badge.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Piano evidenziato | Sì / No | No |
| Testo etichettaSolo se «Piano evidenziato» = «Sì» | Testo | - |
| Colore di risaltoSolo se «Piano evidenziato» = «Sì» | Colore | #0d6efdff |
| Nome piano | Testo | Base |
| Nome piano – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Prezzo | Testo | 29 |
| Valuta | Testo | € |
| Periodo | Testo | /mese |
| Prezzo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Descrizione | Testo formattato | - |
| Funzionalità (una per riga) | Testo | Funzionalità uno Funzionalità due Fun... |
| Icona funzionalità | Icona Font Awesome | fa-solid fa-check |
| Icona funzionalità – Colore testo | Colore | #198754ff |
| Funzionalità (una per riga) – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Pulsante – Etichetta | Testo | Scopri di più |
| Pulsante – Link | Link (URL o voce di menu) | - |
| Apri in | Elenco | -Valori: Stessa finestra · Nuova finestra |
| Pulsante – Dimensione pulsante | Elenco | -Valori: Predefinito · Piccolo · Grande · Personalizzato |
| Pulsante – Padding personalizzato (alto)Solo se «Pulsante – Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (destra)Solo se «Pulsante – Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (basso)Solo se «Pulsante – Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (sinistra)Solo se «Pulsante – Dimensione pulsante» = «Personalizzato» | Misura (px, %, rem...) | - |
| Pulsante – Stile | Elenco | PrimarioValori: Primario · Secondario · Successo · Pericolo · Attenzione · Info ... |
| Pulsante – Sfondo personalizzatoSolo se «Pulsante – Stile» = «Personalizzato» | Colore | #0d6efd |
| Pulsante – Colore testo personalizzatoSolo se «Pulsante – Stile» = «Personalizzato» | Colore | #ffffff |
| Pulsante – Colore bordoSolo se «Pulsante – Stile» = «Personalizzato» | Colore | #0d6efd |
| Pulsante – Sfondo al passaggio del mouseSolo se «Pulsante – Stile» = «Personalizzato» | Colore | - |
| Pulsante – Colore testo al passaggio del mouseSolo se «Pulsante – Stile» = «Personalizzato» | Colore | - |
| Pulsante – Colore bordo al passaggio del mouseSolo se «Pulsante – Stile» = «Personalizzato» | Colore | - |
| Pulsante – Spessore bordo (es. 1px)Solo se «Pulsante – Stile» = «Personalizzato» | Misura (px, %, rem...) | 1px |
| Pulsante – Angoli arrotondatiSolo se «Pulsante – Stile» = «Personalizzato» | Misura (px, %, rem...) | 6px |
| Pulsante – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Allineamento | Elenco | CentroValori: Sinistra · Centro · Destra |
| Riquadro – Colore sfondo | Colore | #ffffffff |
| Riquadro – Padding | Spaziatura (4 lati) | - |
| Riquadro – Stile bordo | Elenco | ContinuaValori: Nessuna · Continua · Tratteggiata · Punteggiata · Doppio |
| Riquadro – Colore bordo | Colore | #dee2e6ff |
| Riquadro – Spessore bordo | Spaziatura (4 lati) | - |
| Riquadro – Raggio bordo | Misura (px, %, rem...) | - |
Feature box
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, Offcanvas
Titolo e testo con un'icona oppure un'immagine. Il simbolo si mette in alto, in basso, a sinistra o a destra. Ha forma, dimensioni e colori regolabili.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Icona o immagine | Elenco | IconaValori: Icona · Immagine |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star)Solo se «Icona o immagine» = «Icona» | Icona Font Awesome | fa-solid fa-bolt |
| URL immagineSolo se «Icona o immagine» = «Immagine» | Immagine (cartella images o URL) | - |
| Testo alternativoSolo se «Icona o immagine» = «Immagine» | Testo | - |
| Larghezza immagineSolo se «Icona o immagine» = «Immagine» | Misura (px, %, rem...) | 80px |
| Titolo | Testo | Titolo funzionalità |
| Testo | Testo su più righe | Descrivi questa funzionalità in una o... |
| Link | Link (URL o voce di menu) | - |
| Apri in | Elenco | -Valori: Stessa finestra · Nuova finestra |
| Livello | Elenco | H3Valori: H2 · H3 · H4 · H5 · H6 |
| Posizione icona | Elenco | AltoValori: Alto · Basso · Sinistra · Destra |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Forma sfondo | Elenco | CerchioValori: Nessuna · Cerchio · Arrotondata · Quadrato |
| Dimensione iconaSolo se «Icona o immagine» = «Icona» | Misura (px, %, rem...) | 28px |
| Dimensione riquadro | Misura (px, %, rem...) | 64px |
| Colore iconaSolo se «Icona o immagine» = «Icona» | Colore | #0d6efdff |
| Colore sfondo | Colore | #0d6efd1a |
| Spazio tra le voci | Misura (px, %, rem...) | 16px |
| Titolo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Testo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Membro del team
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, Offcanvas
Scheda di un membro del team: foto, nome, ruolo, breve biografia e link social. La foto si sceglie dalla cartella images o con un URL e segue l'allineamento del testo.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| URL immagine | Immagine (cartella images o URL) | https://placehold.co/400x400 |
| Nome | Testo | Nome e cognome |
| Ruolo | Testo | Ruolo |
| Breve bio | Testo su più righe | - |
| Allineamento | Elenco | CentroValori: Sinistra · Centro · Destra |
| Forma foto | Elenco | CerchioValori: Cerchio · Arrotondata · Quadrato |
| Dimensione foto | Misura (px, %, rem...) | 160px |
| Testo | - | |
| X (Twitter) | Testo | - |
| Testo | - | |
| Testo | - | |
| Testo | - | |
| Colore icona | Colore | #6c757dff |
| Colore al passaggio del mouse | Colore | - |
| Nome – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Ruolo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Breve bio – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Timeline
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, OffcanvasContiene: Passo timeline
Sequenza di passi lungo una linea. Ogni passo ha data, titolo e testo, e un punto colorato oppure un'icona. I passi sono blocchi figli.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Layout | Elenco | Linea a sinistraValori: Linea a sinistra · Alternata |
| Colore linea | Colore | #dee2e6ff |
| Marcatore | Elenco | PuntoValori: Punto · Icona |
| Icona del marcatore (ogni passo può cambiarla)Solo se «Marcatore» = «Icona» | Icona Font Awesome | fa-solid fa-circle-check |
| Colore marcatore | Colore | #0d6efdff |
| Sfondo del marcatore | Colore | #ffffffff |
| Dimensione marcatore | Misura (px, %, rem...) | 16px |
| Spazio tra i passi | Misura (px, %, rem...) | 32px |
| Data / etichetta – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Titolo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Testo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Opzioni degli elementi: Passo timeline
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Data / etichetta | Testo | 2026 |
| Titolo | Testo | Traguardo |
| Testo | Testo su più righe | Cosa è successo in questo passo. |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | - |
| Colore marcatore | Colore | - |
Torna su
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, Offcanvas
Pulsante fissato a un angolo della finestra che compare dopo aver fatto scorrere la pagina e riporta in cima. Si scelgono la soglia di comparsa in pixel, lo scorrimento morbido, la posizione, lo spostamento dal bordo, la forma, le dimensioni, i colori, l'ombra e un'etichetta per tooltip e lettori di schermo. Nell'editor compare al suo posto, con un bordo tratteggiato.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Etichetta (tooltip e lettori di schermo) | Testo | Torna su |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | fa-solid fa-chevron-up |
| Mostra dopo aver scorso (px) | Numero | 300 |
| Scorrimento morbido | Sì / No | Sì |
| Posizione nella pagina | Elenco | In basso a destraValori: In basso a destra · In basso al centro · In basso a sinistra · Al centro a destra · Al centro a sinistra |
| Distanza orizzontale | Misura (px, %, rem...) | 20px |
| Distanza verticale | Misura (px, %, rem...) | 20px |
| Forma icona | Elenco | CerchioValori: Cerchio · Arrotondata · Quadrato |
| Dimensione box | Misura (px, %, rem...) | 46px |
| Dimensione icona | Misura (px, %, rem...) | 18px |
| Colore sfondo | Colore | #0d6efdff |
| Colore icona | Colore | #ffffffff |
| Sfondo al passaggio del mouse | Colore | - |
| Ombra | Sì / No | Sì |
| Livello di sovrapposizione (z-index) | Numero | 1030 |
Barra di avviso
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, Offcanvas
Striscia di avviso (promozioni, informazioni, manutenzione) con testo, icona e link opzionale: con un link tutta la barra è cliccabile. Può stare fissa in alto nella finestra, seguire lo scorrimento nel suo contenitore (sticky) o restare nel flusso della pagina. Se si può chiudere, resta nascosta per il numero di giorni scelto. Nell'editor compare sempre nel flusso della pagina.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Testo | Testo | Spedizione gratuita su tutti gli ordi... |
| Link | Link (URL o voce di menu) | - |
| Apri inSolo se «Link» ≠ «» | Elenco | -Valori: Stessa finestra · Nuova finestra |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | - |
| Posizione | Elenco | Fissa in alto nella finestraValori: Fissa in alto nella finestra · Sticky (segue lo scorrimento nel suo contenitore) · Nel flusso della pagina |
| Chiudibile | Sì / No | Sì |
| Resta nascosta dopo la chiusura (giorni, 0 = fino al ricaricamento)Solo se «Chiudibile» = «Sì» | Numero | 7 |
| Allineamento | Elenco | CentroValori: Sinistra · Centro · Destra |
| Colore sfondo | Colore | #0d6efdff |
| Colore testo | Colore | #ffffffff |
| Dimensione testo | Misura (px, %, rem...) | 14px |
| Spaziatura etichetta – verticale | Misura (px, %, rem...) | 10px |
| Spaziatura etichetta – orizzontale | Misura (px, %, rem...) | 16px |
| Livello di sovrapposizione (z-index) | Numero | 1050 |
Modulo chat
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, OffcanvasContiene: Campo del modulo
Modulo di contatto che non invia nulla al server: all'invio le risposte formano un unico messaggio e si apre WhatsApp o Telegram, con il messaggio pronto da inviare. Con Telegram il messaggio viene copiato e va incollato nella chat. I campi sono blocchi figli (testo, email, telefono, testo lungo, elenco a discesa), a riga intera o a mezza riga, anche obbligatori. La casella della privacy, se attiva, va spuntata prima dell'invio.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Servizio | Elenco | WhatsAppValori: WhatsApp · Telegram |
| Numero WhatsApp (internazionale, es. +39 333 1234567)Solo se «Servizio» = «WhatsApp» | Testo | - |
| Username o numero Telegram (es. @miocanale)Solo se «Servizio» = «Telegram» | Testo | - |
| Prima riga del messaggio (facoltativa) | Testo | - |
| Checkbox privacy (obbligatoria) | Sì / No | Sì |
| Testo privacySolo se «Checkbox privacy (obbligatoria)» = «Sì» | Testo | Ho letto e accetto l’informativa sull... |
| Pagina informativa privacySolo se «Checkbox privacy (obbligatoria)» = «Sì» | Link (URL o voce di menu) | - |
| Testo del link privacySolo se «Checkbox privacy (obbligatoria)» = «Sì» | Testo | informativa sulla privacy |
| Testo del pulsante | Testo | Invia messaggio |
| Icona del pulsante (vuoto = logo del servizio) | Icona Font Awesome | - |
| Posizione icona | Elenco | SinistraValori: Sinistra · Destra |
| Pulsante a tutta larghezza | Sì / No | No |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Apri in una nuova scheda | Sì / No | Sì |
| Avviso dopo l’invio (facoltativo)Solo se «Servizio» = «WhatsApp» | Testo | - |
| Avviso dopo l’invioSolo se «Servizio» = «Telegram» | Testo | Messaggio copiato: incollalo nella ch... |
| Spazio tra i campi | Misura (px, %, rem...) | 16px |
| Colore delle etichette | Colore | - |
| Sfondo dei campi | Colore | #ffffffff |
| Colore testo | Colore | - |
| Colore bordo | Colore | #ced4daff |
| Raggio bordo | Misura (px, %, rem...) | 6px |
| Sfondo pulsante (vuoto = colore del servizio) | Colore | - |
| Colore testo | Colore | #ffffffff |
| Raggio bordo | Misura (px, %, rem...) | 6px |
Opzioni degli elementi: Campo del modulo
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Etichetta | Testo | Nome |
| Tipo di campo | Elenco | TestoValori: Testo · Email · Telefono · Testo lungo · Elenco a tendina |
| Scelte (una per riga)Solo se «Tipo di campo» = «Elenco a tendina» | Testo su più righe | - |
| Testo suggerito | Testo | - |
| Obbligatorio | Sì / No | No |
| Larghezza | Elenco | Riga interaValori: Riga intera · Mezza riga |
Chat flottante
Gruppo: ComponentiVa dentro: Colonna, Sezione, Modale, Offcanvas
Pulsante di chat WhatsApp o Telegram fissato alla finestra: resta visibile mentre la pagina scorre. Si sceglie una delle nove posizioni (angoli, centro dei lati), lo spostamento dal bordo, il colore, l'icona, un'etichetta accanto (nascosta su mobile) e un'animazione a impulso. Per WhatsApp si può precompilare il messaggio. Nell'editor il pulsante compare al suo posto nella pagina, con un bordo tratteggiato, per poterlo selezionare.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Servizio | Elenco | WhatsAppValori: WhatsApp · Telegram |
| Numero WhatsApp (internazionale, es. +39 333 1234567)Solo se «Servizio» = «WhatsApp» | Testo | - |
| Messaggio precompilatoSolo se «Servizio» = «WhatsApp» | Testo | - |
| Username o numero Telegram (es. @miocanale)Solo se «Servizio» = «Telegram» | Testo | - |
| Etichetta accanto all'icona (nascosta su mobile) | Testo | - |
| Posizione nella pagina | Elenco | In basso a destraValori: In basso a destra · In basso al centro · In basso a sinistra · Al centro a destra · Al centro a sinistra · In alto a destra · In alto al centro · In alto a sinistra |
| Distanza orizzontale | Misura (px, %, rem...) | 20px |
| Distanza verticale | Misura (px, %, rem...) | 20px |
| Dimensione box | Misura (px, %, rem...) | 60px |
| Dimensione icona | Misura (px, %, rem...) | 30px |
| Icona (vuota = logo del servizio) | Icona Font Awesome | - |
| Colore pulsante (vuoto = colore del servizio) | Colore | - |
| Colore testo | Colore | #ffffffff |
| Sfondo etichetta | Colore | #ffffffff |
| Colore testo etichetta | Colore | #212529ff |
| Animazione pulsante | Sì / No | Sì |
| Apri in una nuova scheda | Sì / No | Sì |
| Livello di sovrapposizione (z-index) | Numero | 1040 |
Interattivi
Accordion
Gruppo: InterattiviVa dentro: Colonna, Sezione, Modale, OffcanvasContiene: Voce accordion
Elenco di voci che si aprono e si chiudono. Le voci sono blocchi figli, ognuna con titolo e testo. Con l'opzione dei dati strutturati FAQ, domande e risposte diventano dati FAQPage per Google (JSON-LD): usala su un solo accordion per pagina.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Una sola aperta alla volta | Sì / No | No |
| Dati strutturati FAQ per Google (JSON-LD) – su un solo accordion per pagina | Sì / No | No |
| Spazio tra le voci | Spaziatura (4 lati) | - |
| Icona (chiuso) | Icona Font Awesome | fa-solid fa-plus |
| Icona (aperto) | Icona Font Awesome | fa-solid fa-minus |
| Rotazione da chiuso (gradi) | Numero | 0 |
| Rotazione da aperto (gradi) | Numero | 0 |
| Posizione icona | Elenco | DestraValori: Sinistra · Destra |
| Dimensione icona | Misura (px, %, rem...) | - |
| Colore icona | Colore | - |
| Titolo – Colore sfondo | Colore | - |
| Titolo – Padding | Spaziatura (4 lati) | - |
| Titolo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Titolo – Stile bordo | Elenco | ContinuaValori: Nessuna · Continua · Tratteggiata · Punteggiata · Doppio |
| Titolo – Colore bordo | Colore | #dee2e6ff |
| Titolo – Spessore bordo | Spaziatura (4 lati) | - |
| Titolo – Raggio bordo | Misura (px, %, rem...) | - |
| Risposta – Colore sfondo | Colore | #ffffffff |
| Risposta – Margine (distanza dalla domanda) | Spaziatura (4 lati) | - |
| Risposta – Padding | Spaziatura (4 lati) | - |
| Risposta – Stile bordo | Elenco | ContinuaValori: Nessuna · Continua · Tratteggiata · Punteggiata · Doppio |
| Risposta – Colore bordo | Colore | #dee2e6ff |
| Risposta – Spessore bordo | Spaziatura (4 lati) | - |
| Risposta – Raggio bordo | Misura (px, %, rem...) | - |
Opzioni degli elementi: Voce accordion
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Titolo | Testo | Domanda |
| Risposta | Testo formattato | Testo della risposta. |
| Aperta di default | Sì / No | No |
Schede
Gruppo: InterattiviVa dentro: Colonna, Sezione, Modale, OffcanvasContiene: Scheda
Contenuti organizzati in schede. Le schede sono blocchi figli, ognuna con titolo e testo.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Spazio tra le schede | Misura (px, %, rem...) | 4px |
| Scheda – Colore sfondo | Colore | - |
| Scheda – Padding | Spaziatura (4 lati) | - |
| Scheda – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Scheda – Stile bordo | Elenco | ContinuaValori: Nessuna · Continua · Tratteggiata · Punteggiata · Doppio |
| Scheda – Colore bordo | Colore | #dee2e6ff |
| Scheda – Spessore bordo | Spaziatura (4 lati) | - |
| Scheda – Raggio bordo | Misura (px, %, rem...) | - |
| Scheda attiva – Colore testo | Colore | - |
| Scheda attiva – Colore sfondo | Colore | #ffffffff |
| Scheda attiva – Colore bordo | Colore | - |
| Icona – Dimensione icona | Misura (px, %, rem...) | - |
| Icona – Colore testo | Colore | - |
| Icona – Scheda attiva | Colore | - |
| Contenuto scheda attiva – Colore sfondo | Colore | #ffffffff |
| Contenuto – Padding | Spaziatura (4 lati) | - |
| Contenuto – Stile bordo | Elenco | ContinuaValori: Nessuna · Continua · Tratteggiata · Punteggiata · Doppio |
| Contenuto – Colore bordo | Colore | #dee2e6ff |
| Contenuto – Spessore bordo | Spaziatura (4 lati) | - |
| Contenuto – Raggio bordo | Misura (px, %, rem...) | - |
Opzioni degli elementi: Scheda
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Titolo | Testo | Scheda |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | - |
| Contenuto | Testo formattato | Testo del paragrafo. |
Modale
Gruppo: InterattiviVa dentro: Colonna, SezioneContiene: blocchi
Finestra modale. Nella pagina si vede solo il comando che la apre (pulsante, icona o immagine); il contenuto è formato da altri blocchi.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Si apre con | Elenco | PulsanteValori: Pulsante · Icona · Immagine |
| Etichetta (testo del pulsante / nome accessibile) | Testo | Apri modale |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | fa-solid fa-circle-info |
| Dimensione icona | Misura (px, %, rem...) | 32px |
| Colore icona | Colore | - |
| Colore al passaggio del mouse | Colore | - |
| URL immagine | Immagine (cartella images o URL) | - |
| Larghezza immagine | Misura (px, %, rem...) | 64px |
| Angoli arrotondati | Misura (px, %, rem...) | - |
| Pulsante – Dimensione pulsante | Elenco | -Valori: Predefinito · Piccolo · Grande · Personalizzato |
| Pulsante – Padding personalizzato (alto) | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (destra) | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (basso) | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (sinistra) | Misura (px, %, rem...) | - |
| Pulsante – Stile | Elenco | PrimarioValori: Primario · Secondario · Successo · Pericolo · Attenzione · Info ... |
| Pulsante – Sfondo personalizzato | Colore | #0d6efd |
| Pulsante – Colore testo personalizzato | Colore | #ffffff |
| Pulsante – Colore bordo | Colore | #0d6efd |
| Pulsante – Sfondo al passaggio del mouse | Colore | - |
| Pulsante – Colore testo al passaggio del mouse | Colore | - |
| Pulsante – Colore bordo al passaggio del mouse | Colore | - |
| Pulsante – Spessore bordo (es. 1px) | Misura (px, %, rem...) | 1px |
| Pulsante – Angoli arrotondati | Misura (px, %, rem...) | 6px |
| Pulsante – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Titolo | Testo | Titolo della modale |
| Dimensione della modale | Elenco | MediaValori: Piccolo · Media · Grande · Extra grande · Larghezza piena |
| Centrata verticalmente | Sì / No | No |
| Mostra il pulsante × | Sì / No | Sì |
| Icona di chiusura (vuoto = ×) | Icona Font Awesome | - |
| Dimensione icona di chiusura | Misura (px, %, rem...) | - |
| Colore icona di chiusura | Colore | - |
| Pulsante Chiudi nel piè di pagina | Sì / No | Sì |
| Etichetta del pulsante nel piè di paginaSolo se «Pulsante Chiudi nel piè di pagina» = «Sì» | Testo | Chiudi |
| Chiudi cliccando all'esterno | Sì / No | Sì |
| Apri automaticamente | Sì / No | No |
| Attesa prima dell'apertura (secondi)Solo se «Apri automaticamente» = «Sì» | Numero | 3 |
| Colore dello sfondo oscurato | Colore | #00000080 |
| Sfondo intestazione | Colore | - |
| Sfondo del contenuto | Colore | #ffffffff |
| Padding del contenuto | Spaziatura (4 lati) | - |
| Raggio bordo | Misura (px, %, rem...) | 8px |
| Titolo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Offcanvas
Gruppo: InterattiviVa dentro: Colonna, SezioneContiene: blocchi
Pannello che scorre da un lato dello schermo. Nella pagina si vede solo il comando che lo apre; il contenuto è formato da altri blocchi.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Si apre con | Elenco | PulsanteValori: Pulsante · Icona · Immagine |
| Etichetta (testo del pulsante / nome accessibile) | Testo | Apri pannello |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | fa-solid fa-circle-info |
| Dimensione icona | Misura (px, %, rem...) | 32px |
| Colore icona | Colore | - |
| Colore al passaggio del mouse | Colore | - |
| URL immagine | Immagine (cartella images o URL) | - |
| Larghezza immagine | Misura (px, %, rem...) | 64px |
| Angoli arrotondati | Misura (px, %, rem...) | - |
| Pulsante – Dimensione pulsante | Elenco | -Valori: Predefinito · Piccolo · Grande · Personalizzato |
| Pulsante – Padding personalizzato (alto) | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (destra) | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (basso) | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (sinistra) | Misura (px, %, rem...) | - |
| Pulsante – Stile | Elenco | PrimarioValori: Primario · Secondario · Successo · Pericolo · Attenzione · Info ... |
| Pulsante – Sfondo personalizzato | Colore | #0d6efd |
| Pulsante – Colore testo personalizzato | Colore | #ffffff |
| Pulsante – Colore bordo | Colore | #0d6efd |
| Pulsante – Sfondo al passaggio del mouse | Colore | - |
| Pulsante – Colore testo al passaggio del mouse | Colore | - |
| Pulsante – Colore bordo al passaggio del mouse | Colore | - |
| Pulsante – Spessore bordo (es. 1px) | Misura (px, %, rem...) | 1px |
| Pulsante – Angoli arrotondati | Misura (px, %, rem...) | 6px |
| Pulsante – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Titolo | Testo | Titolo del pannello |
| Si apre da | Elenco | DestraValori: Sinistra · Destra · Alto · Basso |
| Desktop – LarghezzaSolo se «Si apre da» è uno di: Sinistra, Destra | Misura (px, %, rem...) | 360px |
| Laptop – LarghezzaSolo se «Si apre da» è uno di: Sinistra, Destra | Misura (px, %, rem...) | - |
| Mobile – LarghezzaSolo se «Si apre da» è uno di: Sinistra, Destra | Misura (px, %, rem...) | - |
| AltezzaSolo se «Si apre da» è uno di: Alto, Basso | Misura (px, %, rem...) | 40% |
| Mostra il pulsante × | Sì / No | Sì |
| Icona di chiusura (vuoto = ×) | Icona Font Awesome | - |
| Dimensione icona di chiusura | Misura (px, %, rem...) | - |
| Colore icona di chiusura | Colore | - |
| Chiudi cliccando all'esterno | Sì / No | Sì |
| Colore dello sfondo oscurato | Colore | #00000080 |
| Sfondo intestazione | Colore | - |
| Sfondo del contenuto | Colore | #ffffffff |
| Padding del contenuto | Spaziatura (4 lati) | - |
| Titolo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Popover
Gruppo: InterattiviVa dentro: Colonna, Sezione, Modale, Offcanvas
Piccolo riquadro con titolo e testo che si apre al clic sul comando.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Si apre con | Elenco | PulsanteValori: Pulsante · Icona · Immagine |
| Etichetta (testo del pulsante / nome accessibile) | Testo | Cliccami |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Icona (classe Font Awesome 6 Free, es. fa-solid fa-star) | Icona Font Awesome | fa-solid fa-circle-info |
| Dimensione icona | Misura (px, %, rem...) | 32px |
| Colore icona | Colore | - |
| Colore al passaggio del mouse | Colore | - |
| URL immagine | Immagine (cartella images o URL) | - |
| Larghezza immagine | Misura (px, %, rem...) | 64px |
| Angoli arrotondati | Misura (px, %, rem...) | - |
| Pulsante – Dimensione pulsante | Elenco | -Valori: Predefinito · Piccolo · Grande · Personalizzato |
| Pulsante – Padding personalizzato (alto) | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (destra) | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (basso) | Misura (px, %, rem...) | - |
| Pulsante – Padding personalizzato (sinistra) | Misura (px, %, rem...) | - |
| Pulsante – Stile | Elenco | PrimarioValori: Primario · Secondario · Successo · Pericolo · Attenzione · Info ... |
| Pulsante – Sfondo personalizzato | Colore | #0d6efd |
| Pulsante – Colore testo personalizzato | Colore | #ffffff |
| Pulsante – Colore bordo | Colore | #0d6efd |
| Pulsante – Sfondo al passaggio del mouse | Colore | - |
| Pulsante – Colore testo al passaggio del mouse | Colore | - |
| Pulsante – Colore bordo al passaggio del mouse | Colore | - |
| Pulsante – Spessore bordo (es. 1px) | Misura (px, %, rem...) | 1px |
| Pulsante – Angoli arrotondati | Misura (px, %, rem...) | 6px |
| Pulsante – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Titolo | Testo | Titolo del popover |
| Contenuto | Testo formattato | Contenuto del popover. |
| Posizione | Elenco | BassoValori: Alto · Destra · Basso · Sinistra |
| Si apre al | Elenco | ClicValori: Clic · Passaggio del mouse |
| Larghezza | Misura (px, %, rem...) | 276px |
| Raggio bordo | Misura (px, %, rem...) | 8px |
| Colore sfondo | Colore | #ffffffff |
| Colore bordo | Colore | #dee2e6ff |
| Titolo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Contenuto – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Carosello
Gruppo: InterattiviVa dentro: Colonna, Sezione, Modale, OffcanvasContiene: Slide
Carosello a scorrimento. Le slide sono blocchi figli, con immagine, titolo, testo e link.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Desktop – Altezza | Misura (px, %, rem...) | 360px |
| Laptop – Altezza | Misura (px, %, rem...) | - |
| Mobile – Altezza | Misura (px, %, rem...) | - |
| Adattamento immagine | Elenco | Riempi (cover)Valori: Riempi (cover) · Contieni (contain) |
| Raggio bordo | Misura (px, %, rem...) | - |
| Transizione | Elenco | ScorrimentoValori: Scorrimento · Dissolvenza |
| Intervallo autoplay (ms, 0 = disattivato) | Numero | 5000 |
| Ciclo continuo | Sì / No | Sì |
| Pausa al passaggio del mouse | Sì / No | Sì |
| Mostra frecce | Sì / No | Sì |
| Mostra pallini | Sì / No | Sì |
| Frecce – Colore sfondoSolo se «Mostra frecce» = «Sì» | Colore | #00000066 |
| Frecce – Colore testoSolo se «Mostra frecce» = «Sì» | Colore | #ffffffff |
| Frecce – Dimensione iconaSolo se «Mostra frecce» = «Sì» | Misura (px, %, rem...) | 40px |
| Pallini – Colore sfondoSolo se «Mostra pallini» = «Sì» | Colore | #ffffff80 |
| Pallini – Scheda attivaSolo se «Mostra pallini» = «Sì» | Colore | #ffffffff |
Opzioni degli elementi: Slide
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| URL immagine | Immagine (cartella images o URL) | https://placehold.co/1200x600 |
| Testo alternativo | Testo | - |
| Titolo | Testo | - |
| Testo | Testo su più righe | - |
| Link | Link (URL o voce di menu) | - |
| Apri in | Elenco | -Valori: Stessa finestra · Nuova finestra |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Didascalia – Colore sfondo | Colore | #00000066 |
| Didascalia – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Galleria
Gruppo: InterattiviVa dentro: Colonna, Sezione, Modale, OffcanvasContiene: Immagine galleria
Griglia di immagini con lightbox. Le immagini si scelgono una per una (da URL o dai media) oppure si prendono in automatico da una cartella.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Immagini da | Elenco | Singole immaginiValori: Singole immagini · Una cartella |
| Cartella (dentro images)Solo se «Immagini da» = «Una cartella» | Elenco | -Valori: - Seleziona una cartella - · images/ · aipagebuilder · banners · headers · jpagebuilder-site · sampledata · sampledata / cassiopeia |
| OrdineSolo se «Immagini da» = «Una cartella» | Elenco | Nome A-ZValori: Nome A-Z · Nome Z-A · Più recenti · Più vecchi · Casuale |
| Max immaginiSolo se «Immagini da» = «Una cartella» | Numero | 24 |
| Desktop – Colonne | Numero | 4 |
| Laptop – Colonne | Numero | 3 |
| Mobile – Colonne | Numero | 2 |
| Spazio tra le voci | Misura (px, %, rem...) | 12px |
| Proporzioni immagine | Elenco | 1:1Valori: Originali · 1:1 · 4:3 · 3:2 · 16:9 |
| Raggio bordo | Misura (px, %, rem...) | - |
| Effetto al passaggio del mouse | Elenco | ZoomValori: Nessuno · Zoom · Dissolvenza (opacità) |
| Didascalie | Elenco | -Valori: Nessuna · Sotto l'immagine · Sopra l'immagine |
| Apri le immagini in lightbox | Sì / No | Sì |
Opzioni degli elementi: Immagine galleria
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| URL immagine | Immagine (cartella images o URL) | https://placehold.co/800x800 |
| Testo alternativo | Testo | - |
| Didascalia | Testo | - |
| Link (sostituisce la lightbox) | Link (URL o voce di menu) | - |
| Apri in | Elenco | -Valori: Stessa finestra · Nuova finestra |
Carosello loghi
Gruppo: InterattiviVa dentro: Colonna, Sezione, Modale, OffcanvasContiene: Logo
Fila di loghi su una sola riga: ferma oppure in scorrimento continuo con velocità regolabile. I loghi sono blocchi figli.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Visualizzazione | Elenco | ScorrevoleValori: Scorrevole · Statica |
| Altezza logo | Misura (px, %, rem...) | 48px |
| Spazio tra le voci | Misura (px, %, rem...) | 48px |
| Scala di grigi finché non si passa sopra | Sì / No | Sì |
| Velocità (px/s)Solo se «Visualizzazione» = «Scorrevole» | Numero | 60 |
| Direzione inversaSolo se «Visualizzazione» = «Scorrevole» | Sì / No | No |
| Pausa al passaggio del mouseSolo se «Visualizzazione» = «Scorrevole» | Sì / No | Sì |
Opzioni degli elementi: Logo
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| URL immagine | Immagine (cartella images o URL) | https://placehold.co/200x80 |
| Testo alternativo | Testo | - |
| Link | Link (URL o voce di menu) | - |
| Apri in | Elenco | -Valori: Stessa finestra · Nuova finestra |
Avanzati
Mappa
Gruppo: AvanzatiVa dentro: Colonna, Sezione, Modale, Offcanvas
Mappa incorporata (Google Maps o OpenStreetMap), da indirizzo o da coordinate, con zoom e dimensioni per dispositivo.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Provider | Elenco | Google Maps (senza chiave)Valori: Google Maps (senza chiave) · Google Maps (chiave API) · OpenStreetMap |
| Chiave API Google Maps (Maps Embed API)Solo se «Provider» = «Google Maps (chiave API)» | Testo | - |
| Localizza per | Elenco | IndirizzoValori: Indirizzo · Coordinate |
| Indirizzo o luogoSolo se «Localizza per» = «Indirizzo» | Testo | Roma, Italia |
| LatitudineSolo se «Localizza per» = «Coordinate» | Testo | 41.9028 |
| LongitudineSolo se «Localizza per» = «Coordinate» | Testo | 12.4964 |
| Zoom (1-20) | Numero | 14 |
| Tipo di mappaSolo se «Provider» ≠ «OpenStreetMap» | Elenco | MappaValori: Mappa · Satellite |
| Tipo di mappaSolo se «Provider» = «OpenStreetMap» | Elenco | StandardValori: Standard · Ciclabile · Trasporti · Umanitaria |
| Desktop – Larghezza | Misura (px, %, rem...) | 100% |
| Desktop – Altezza | Misura (px, %, rem...) | 400px |
| Laptop – Larghezza | Misura (px, %, rem...) | - |
| Laptop – Altezza | Misura (px, %, rem...) | - |
| Mobile – Larghezza | Misura (px, %, rem...) | - |
| Mobile – Altezza | Misura (px, %, rem...) | - |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
| Raggio bordo | Misura (px, %, rem...) | - |
| Scala di grigi | Numero | 0 |
Contatore
Gruppo: AvanzatiVa dentro: Colonna, Sezione, Modale, Offcanvas
Numero che si anima da un valore iniziale a uno finale, con prefisso, suffisso ed etichetta.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Valore finale | Numero | 100 |
| Parti da | Numero | 0 |
| Decimali | Numero | 0 |
| Durata (ms) | Numero | 2000 |
| Separatore migliaia | Elenco | NessunaValori: Nessuna · 1,000 · 1.000 · 1 000 |
| Prefisso | Testo | - |
| Suffisso | Testo | + |
| Etichetta | Testo | Clienti soddisfatti |
| Allineamento | Elenco | CentroValori: Sinistra · Centro · Destra |
| Numero – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Prefisso – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Suffisso – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Etichetta – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Conto alla rovescia
Gruppo: AvanzatiVa dentro: Colonna, Sezione, Modale, Offcanvas
Conto alla rovescia verso una data e ora. Si scelgono le unità da mostrare (giorni, ore, minuti, secondi) e le loro etichette.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Data e ora finale | Data e ora | 2030-01-01T00:00 |
| Mostra giorni | Sì / No | Sì |
| Etichetta giorniSolo se «Mostra giorni» = «Sì» | Testo | Giorni |
| Mostra ore | Sì / No | Sì |
| Etichetta oreSolo se «Mostra ore» = «Sì» | Testo | Ore |
| Mostra minuti | Sì / No | Sì |
| Etichetta minutiSolo se «Mostra minuti» = «Sì» | Testo | Minuti |
| Mostra secondi | Sì / No | Sì |
| Etichetta secondiSolo se «Mostra secondi» = «Sì» | Testo | Secondi |
| Testo a fine conteggio | Testo | - |
| Allineamento | Elenco | CentroValori: Sinistra · Centro · Destra |
| Spazio tra le voci | Misura (px, %, rem...) | 16px |
| Riquadro unità – Colore sfondo | Colore | - |
| Riquadro unità – Padding | Spaziatura (4 lati) | - |
| Riquadro unità – Stile bordo | Elenco | ContinuaValori: Nessuna · Continua · Tratteggiata · Punteggiata · Doppio |
| Riquadro unità – Colore bordo | Colore | #dee2e6ff |
| Riquadro unità – Spessore bordo | Spaziatura (4 lati) | - |
| Riquadro unità – Raggio bordo | Misura (px, %, rem...) | - |
| Numero – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
| Etichetta – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Modulo Joomla
Gruppo: AvanzatiVa dentro: Colonna, Sezione, Modale, Offcanvas
Inserisce un modulo Joomla esistente nella pagina.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Modulo | Elenco | -Valori: — Seleziona un modulo — · Breadcrumbs [mod_breadcrumbs] – breadcrumbs · Cerca [mod_finder] – search · Elementi simili [mod_tags_similar] – bottom-b · Immagine [mod_custom] – banner · JPage Builder modulo da Joomla [mod_jpagebuilder] · Menu in basso [mod_menu] – footer · Menu principale Blog [mod_menu] – menu · Ultimi Post [mod_articles] – top-a |
| Stile del modulo | Elenco | Nessuno (solo il contenuto)Valori: Nessuno (solo il contenuto) · HTML5 (con titolo) · Card |
Modulo JPiro Page Builder
Gruppo: AvanzatiVa dentro: Colonna, Sezione, Modale, Offcanvas
Inserisce un modulo riutilizzabile di JPiro Page Builder (vedi il capitolo Moduli nel manuale). Se modifichi il modulo, cambia in ogni pagina che lo usa.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Modulo | Elenco | -Valori: — Seleziona un modulo — |
HTML personalizzato
Gruppo: AvanzatiVa dentro: Colonna, Sezione, Modale, Offcanvas
HTML libero. Va usato con cura: il codice viene inserito nella pagina.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| HTML | HTML libero | - |
| Allineamento | Elenco | SinistraValori: Sinistra · Centro · Destra |
Articoli
Gruppo: AvanzatiVa dentro: Colonna, Sezione, Modale, Offcanvas
Elenco degli articoli Joomla pubblicati di una categoria, in griglia o in elenco, con immagine, data, introduzione e link «Leggi tutto».
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Categoria | Elenco | -Valori: Tutte le categorie · Uncategorised · Blog · Aiuto · Joomla · Tipografia |
| Numero di articoli | Numero | 3 |
| Ordine | Elenco | Più recentiValori: Più recenti · Più vecchi · Titolo A-Z · Più letti · Casuale |
| Layout | Elenco | GrigliaValori: Griglia · Elenco |
| Desktop – ColonneSolo se «Layout» = «Griglia» | Numero | 3 |
| Laptop – ColonneSolo se «Layout» = «Griglia» | Numero | 2 |
| Mobile – ColonneSolo se «Layout» = «Griglia» | Numero | 1 |
| Spazio tra le voci | Misura (px, %, rem...) | 24px |
| Stile card | Sì / No | Sì |
| Mostra immagine | Sì / No | Sì |
| Proporzioni immagineSolo se «Mostra immagine» = «Sì» | Elenco | 16:9Valori: 16:9 · 4:3 · 3:2 · 1:1 |
| Mostra categoria e data | Sì / No | Sì |
| Mostra testo introduttivo | Sì / No | Sì |
| Lunghezza introduzione (caratteri)Solo se «Mostra testo introduttivo» = «Sì» | Numero | 120 |
| Mostra link Leggi tutto | Sì / No | Sì |
| Testo Leggi tuttoSolo se «Mostra link Leggi tutto» = «Sì» | Testo | Leggi tutto |
| Livello | Elenco | H3Valori: H2 · H3 · H4 · H5 · H6 |
| Titolo – Tipografia | Tipografia | colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore |
Elenco etichette
Gruppo: AvanzatiVa dentro: Colonna, Sezione, Modale, Offcanvas
Elenco di voci mostrate come etichette arrotondate («chip»): ingredienti, tag, caratteristiche. Le voci si scrivono in un campo di testo, una per riga. Un'icona opzionale compare prima di ogni voce. Si regolano allineamento, distanza tra le etichette, colori, bordo, arrotondamento, dimensione del testo e padding.
Opzioni
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Elenco (una voce per riga) | Testo su più righe | Farina Uova Zucchero Latte |
| Icona prima di ogni voce | Icona Font Awesome | - |
| Allineamento | Elenco | CentroValori: Sinistra · Centro · Destra |
| Spazio tra le etichette | Misura (px, %, rem...) | 10px |
| Sfondo etichetta | Colore | #ffffffff |
| Colore testo | Colore | #334155ff |
| Colore bordo | Colore | #dee2e6ff |
| Raggio bordo | Misura (px, %, rem...) | 999px |
| Dimensione testo | Misura (px, %, rem...) | 14px |
| Spaziatura etichetta – verticale | Misura (px, %, rem...) | 8px |
| Spaziatura etichetta – orizzontale | Misura (px, %, rem...) | 16px |
Opzioni comuni
Queste opzioni compaiono in quasi tutti i blocchi. Nelle schede dei blocchi non sono ripetute.
Spaziatura
Padding e Margine: quattro lati, con valori separati per desktop, laptop, tablet e mobile dove l'editor li offre. Il padding predefinito di Sezione, Riga e Colonna si imposta nelle Opzioni del componente.
Visibilità
Nascondi su desktop, Nascondi su laptop, Nascondi su mobile: il blocco resta nella pagina ma non si vede sul dispositivo scelto.
Costanti di lingua
Nei campi di testo, link e immagine puoi scrivere una costante di lingua di Joomla, da sola (MIOSITO_PRIVACY_URL) o dentro un testo più lungo ({{MIOSITO_PRIVACY_URL}}): nella pagina diventa il testo della costante nella lingua del visitatore.
Avanzate
- ID HTML: un identificatore per i link interni alla pagina (esempio
#contatti). - Classe CSS: classi da aggiungere al blocco.
- CSS personalizzato: regole CSS per questo blocco.
Tipografia
I blocchi con testo hanno uno o più gruppi «Tipografia». Ogni gruppo contiene: colore, colore al passaggio del mouse, dimensione, corsivo, sottolineato, trasformazione del testo, spessore.
Animazione
L'animazione parte quando il blocco entra nella schermata. Opzioni:
| Opzione | Tipo | Predefinito e valori |
|---|---|---|
| Attiva animazione | Sì / No | No |
| Animazione | Elenco | Dissolvenza (Fade)Valori: Dissolvenza (Fade) · Rotazione (Rotate) · Ribaltamento (Flip) · Rimbalzo (Bounce) · Zoom · Scorrimento (Slide) |
| Direzione | Elenco | Dal bassoValori: Dal basso · Dall'alto · Da sinistra · Da destra · Sul posto |
| Direzione | Elenco | OrarioValori: Orario · Antiorario |
| Direzione | Elenco | OrizzontaleValori: Orizzontale · Verticale |
| Direzione | Elenco | Ingrandisci (cresce)Valori: Ingrandisci (cresce) · Riduci (si rimpicciolisce) |
| Durata (ms) | Numero | 800 |
| Ritardo (ms) | Numero | 0 |
| Avvio | Elenco | Quando entra nella vistaValori: Quando entra nella vista · Al caricamento della pagina |
JPiro Page Builder - Block reference
One sheet per block · version 0.74.1
For the general concepts (pages, editors, modules, colours) read the user manual. The sheets list the options of each block, using the English names of the editor.
Layout
Section
Group: LayoutGoes inside: PageHolds: blocks
Top-level container of the page. It holds one or more rows. It has a background (colour, gradient, image or video) that can change for desktop, laptop and mobile. The content width can be Boxed (stepped Bootstrap container), Fluid (full width) or Custom (maximum width per device). With "Full-width section" the background runs from edge to edge of the window, even in a boxed template.
Options
| Option | Type | Default and values |
|---|---|---|
| Background | Background | - |
| Vertical alignment | List | -Values: Default · Start · Centre · End |
| Content width | List | -Values: Boxed · Fluid · Custom |
| Desktop – Max width (empty = Options value)Only if "Content width" = "Custom" | Size (px, %, rem...) | - |
| Laptop – Max width (empty = Options value)Only if "Content width" = "Custom" | Size (px, %, rem...) | - |
| Mobile – Max width (empty = Options value)Only if "Content width" = "Custom" | Size (px, %, rem...) | - |
| Full-width section (background from edge to edge of the window, even in a boxed template) | Yes / No | No |
Row
Group: LayoutGoes inside: Section, Column, Modal, OffcanvasHolds: Column
Splits the space into columns on the Bootstrap 12-part grid. It sets the gap between columns and the vertical alignment. When you add a row, JPiro Page Builder creates a first column inside it.
Options
| Option | Type | Default and values |
|---|---|---|
| Column spacing | List | LargeValues: None · Medium · Large · Custom |
| Column gap (px)Only if "Column spacing" = "Custom" | Size (px, %, rem...) | 24px |
| Row gap (px)Only if "Column spacing" = "Custom" | Size (px, %, rem...) | 24px |
| Background | Background | - |
| Vertical alignment | List | -Values: Default · Start · Centre · End · Stretch |
Item options: Column
| Option | Type | Default and values |
|---|---|---|
| Width | List | 12/12Values: Auto · 1/12 · 2/12 · 3/12 · 4/12 · 5/12 ... |
| Width (%) | Number | 50 |
| Laptop % | Number | - |
| Mobile % | Number | - |
| Content layout | List | Stacked (vertical)Values: Stacked (vertical) · Side by side (horizontal) |
| Background | Background | - |
| Vertical alignment | List | -Values: Default · Start · Centre · End · Stretch |
Column
Group: LayoutGoes inside: RowHolds: blocks
One column of a row. Set the width in twelfths, automatic or as a percentage, with separate values for tablet and mobile. You can also resize it by dragging its edge in the editor. It holds the content blocks.
Options
| Option | Type | Default and values |
|---|---|---|
| Width | List | 12/12Values: Auto · 1/12 · 2/12 · 3/12 · 4/12 · 5/12 ... |
| Width (%) | Number | 50 |
| Laptop % | Number | - |
| Mobile % | Number | - |
| Content layout | List | Stacked (vertical)Values: Stacked (vertical) · Side by side (horizontal) |
| Background | Background | - |
| Vertical alignment | List | -Values: Default · Start · Centre · End · Stretch |
Content
Heading
Group: ContentGoes inside: Column, Section, Modal, Offcanvas
Heading from H1 to H6, with alignment, optional link, text shadow and icon. Typography (colour, size, weight) is adjustable.
Options
| Option | Type | Default and values |
|---|---|---|
| Text | Text | Heading |
| Level | List | H2Values: H1 · H2 · H3 · H4 · H5 · H6 |
| Alignment | List | LeftValues: Left · Centre · Right |
| Link | Link (URL or menu item) | - |
| Open in new tab | Yes / No | No |
| Add nofollow | Yes / No | No |
| Add noreferrer | Yes / No | No |
| Add noopener | Yes / No | No |
| Text shadow | Yes / No | No |
| Shadow colourOnly if "Text shadow" = "Yes" | Colour | #000000ff |
| Shadow XOnly if "Text shadow" = "Yes" | Number | 2 |
| Shadow YOnly if "Text shadow" = "Yes" | Number | 2 |
| Shadow blurOnly if "Text shadow" = "Yes" | Number | 4 |
| Show icon | Yes / No | No |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star)Only if "Show icon" = "Yes" | Font Awesome icon | fa-solid fa-star |
| Icon positionOnly if "Show icon" = "Yes" | List | LeftValues: Left · Right · Top · Bottom |
| Icon sizeOnly if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Icon margin (top)Only if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Icon margin (right)Only if "Show icon" = "Yes" | Size (px, %, rem...) | 8px |
| Icon margin (bottom)Only if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Icon margin (left)Only if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Open link in a modal window | Yes / No | No |
| Modal sizeOnly if "Open link in a modal window" = "Yes" | Window size | - |
| Text colour | Colour | - |
| Hover colour | Colour | - |
| Font size | Size (px, %, rem...) | - |
| Italic | List | -Values: Default · Italic |
| Underline | List | -Values: Default · Underline |
| Text transform | List | -Values: Default · None · UPPERCASE · lowercase · Capitalize Each Word |
| Font weight | List | -Values: Default · Normal · Bold · 300 · 400 · 500 · 600 · 700 · 800 |
Paragraph
Group: ContentGoes inside: Column, Section, Modal, Offcanvas
Formatted text with the Joomla editor. It can flow over several columns, be cut to a number of words with a "Show more" link, and start with a drop cap.
Options
| Option | Type | Default and values |
|---|---|---|
| Text | Rich text | Paragraph text. |
| Alignment | List | LeftValues: Left · Centre · Right |
| Text columns | Columns | - |
| Word limit (0 = off) | Number | 0 |
| "Show more" text | Text | Show more |
| "Show more" colour | Colour | - |
| "Show more" size | Size (px, %, rem...) | - |
| Drop cap | Yes / No | No |
| Drop cap colourOnly if "Drop cap" = "Yes" | Colour | - |
| Drop cap sizeOnly if "Drop cap" = "Yes" | Size (px, %, rem...) | - |
| Background | Background | - |
| Text colour | Colour | - |
| Hover colour | Colour | - |
| Font size | Size (px, %, rem...) | - |
| Italic | List | -Values: Default · Italic |
| Underline | List | -Values: Default · Underline |
| Text transform | List | -Values: Default · None · UPPERCASE · lowercase · Capitalize Each Word |
| Font weight | List | -Values: Default · Normal · Bold · 300 · 400 · 500 · 600 · 700 · 800 |
Button
Group: ContentGoes inside: Column, Section, Modal, Offcanvas
Button or link with a Bootstrap style. Size, icon and hover colours are adjustable; it can open a modal.
Options
| Option | Type | Default and values |
|---|---|---|
| Label | Text | Learn more |
| Link | Link (URL or menu item) | # |
| Open in | List | -Values: Same window · New window |
| Button size | List | -Values: Default · Small · Large · Custom |
| Custom padding (top)Only if "Button size" = "Custom" | Size (px, %, rem...) | - |
| Custom padding (right)Only if "Button size" = "Custom" | Size (px, %, rem...) | - |
| Custom padding (bottom)Only if "Button size" = "Custom" | Size (px, %, rem...) | - |
| Custom padding (left)Only if "Button size" = "Custom" | Size (px, %, rem...) | - |
| Custom font sizeOnly if "Button size" = "Custom" | Size (px, %, rem...) | - |
| Style | List | PrimaryValues: Primary · Secondary · Success · Danger · Warning · Info ... |
| Custom backgroundOnly if "Style" = "Custom" | Colour | #0d6efd |
| Custom text colourOnly if "Style" = "Custom" | Colour | #ffffff |
| Border colourOnly if "Style" = "Custom" | Colour | #0d6efd |
| Border width (e.g. 1px)Only if "Style" = "Custom" | Free CSS | 1px |
| Corner radiusOnly if "Style" = "Custom" | Size (px, %, rem...) | 6px |
| Hover backgroundOnly if "Style" = "Custom" | Colour | - |
| Hover text colourOnly if "Style" = "Custom" | Colour | - |
| Hover border colourOnly if "Style" = "Custom" | Colour | - |
| Show icon | Yes / No | No |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star)Only if "Show icon" = "Yes" | Font Awesome icon | fa-solid fa-star |
| Icon positionOnly if "Show icon" = "Yes" | List | LeftValues: Left · Right · Top · Bottom |
| Icon sizeOnly if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Icon margin (top)Only if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Icon margin (right)Only if "Show icon" = "Yes" | Size (px, %, rem...) | 8px |
| Icon margin (bottom)Only if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Icon margin (left)Only if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Open link in a modal window | Yes / No | No |
| Modal sizeOnly if "Open link in a modal window" = "Yes" | Window size | - |
| Text colour | Colour | - |
| Hover colour | Colour | - |
| Font size | Size (px, %, rem...) | - |
| Italic | List | -Values: Default · Italic |
| Underline | List | -Values: Default · Underline |
| Text transform | List | -Values: Default · None · UPPERCASE · lowercase · Capitalize Each Word |
| Font weight | List | -Values: Default · Normal · Bold · 300 · 400 · 500 · 600 · 700 · 800 |
Image
Group: ContentGoes inside: Column, Section, Modal, Offcanvas
Image from the images folder or a URL. It has alignment, opacity, brightness, contrast and saturation settings, a hover effect and a link.
Options
| Option | Type | Default and values |
|---|---|---|
| Image URL | Image (images folder or URL) | https://placehold.co/800x400 |
| Alt text | Text | - |
| Title attribute | Text | - |
| Alignment | List | LeftValues: Left · Centre · Right |
| Link | Link (URL or menu item) | - |
| Open in | List | -Values: Same window · New window |
| Rollover image (shown on hover) | Image (images folder or URL) | - |
| Width | Size (px, %, rem...) | - |
| Height | Size (px, %, rem...) | - |
| Corner radius | Size (px, %, rem...) | - |
| Fetch priority | List | -Values: Default · High · Low |
| Opacity | Number | 100 |
| Blur | Number | 0 |
| Brightness | Number | 100 |
| Contrast | Number | 100 |
| Saturation | Number | 100 |
| Invert colour | Number | 0 |
| Grayscale | Number | 0 |
| Sepia | Number | 0 |
| Hue rotate | Number | 0 |
| Hover effect | List | -Values: None · Zoom · Fade (opacity) · Grayscale · Blur |
| ValueOnly if "Hover effect" ≠ "None" | Number | 110 |
| Open link in a modal window | Yes / No | No |
| Modal sizeOnly if "Open link in a modal window" = "Yes" | Window size | - |
Video
Group: ContentGoes inside: Column, Section, Modal, Offcanvas
Video embedded from a URL, with aspect ratio and options for controls, autoplay, muted audio and loop.
Options
| Option | Type | Default and values |
|---|---|---|
| Video URL (YouTube, Vimeo or direct .mp4) | Text | - |
| Aspect ratio | List | 16:9Values: 16:9 · 4:3 · 1:1 · 21:9 |
| Show controls | Yes / No | Yes |
| Autoplay | Yes / No | No |
| Muted | Yes / No | No |
| Loop | Yes / No | No |
Divider / Spacer
Group: ContentGoes inside: Column, Section, Modal, Offcanvas
A separator line or plain vertical space, with line style, thickness, colour and width.
Options
| Option | Type | Default and values |
|---|---|---|
| Type | List | LineValues: Line · Empty space |
| AlignmentOnly if "Type" = "Line" | List | CentreValues: Left · Centre · Right |
| Line styleOnly if "Type" = "Line" | List | SolidValues: Solid · Dashed · Dotted |
| Line colourOnly if "Type" = "Line" | Colour | #dee2e6ff |
| ThicknessOnly if "Type" = "Line" | Size (px, %, rem...) | 1px |
| WidthOnly if "Type" = "Line" | Size (px, %, rem...) | 100% |
| HeightOnly if "Type" = "Empty space" | Size (px, %, rem...) | 40px |
Icon
Group: ContentGoes inside: Column, Section, Modal, Offcanvas
Font Awesome icon with size, colour, background and box.
Options
| Option | Type | Default and values |
|---|---|---|
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | fa-solid fa-star |
| Alignment | List | LeftValues: Left · Centre · Right |
| Icon size | Size (px, %, rem...) | 32px |
| Text colour | Colour | - |
| Hover colour | Colour | - |
| Background shape | List | -Values: None · Circle · Square |
| Background colourOnly if "Background shape" ≠ "None" | Colour | #0d6efdff |
| Box sizeOnly if "Background shape" ≠ "None" | Size (px, %, rem...) | 64px |
| Link | Link (URL or menu item) | - |
| Open in | List | -Values: Same window · New window |
| Open link in a modal window | Yes / No | No |
| Modal sizeOnly if "Open link in a modal window" = "Yes" | Window size | - |
Badge
Group: ContentGoes inside: Column, Section, Modal, Offcanvas
Bootstrap label (badge) with colour variant, pill shape, icon and optional link.
Options
| Option | Type | Default and values |
|---|---|---|
| Text | Text | New |
| Style | List | PrimaryValues: Primary · Secondary · Success · Danger · Warning · Info · Light · Dark · Custom |
| Custom backgroundOnly if "Style" = "Custom" | Colour | #6f42c1ff |
| Custom text colourOnly if "Style" = "Custom" | Colour | #ffffffff |
| Rounded (pill) | Yes / No | No |
| Link | Link (URL or menu item) | - |
| Open in | List | -Values: Same window · New window |
| Alignment | List | LeftValues: Left · Centre · Right |
| Show icon | Yes / No | No |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star)Only if "Show icon" = "Yes" | Font Awesome icon | fa-solid fa-star |
| Icon positionOnly if "Show icon" = "Yes" | List | LeftValues: Left · Right · Top · Bottom |
| Icon sizeOnly if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Icon margin (top)Only if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Icon margin (right)Only if "Show icon" = "Yes" | Size (px, %, rem...) | 8px |
| Icon margin (bottom)Only if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Icon margin (left)Only if "Show icon" = "Yes" | Size (px, %, rem...) | - |
| Text – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Spacer
Group: ContentGoes inside: Column, Section, Modal, Offcanvas
Empty space of a fixed height, to put distance between blocks.
Options
| Option | Type | Default and values |
|---|---|---|
| Desktop – Height | Size (px, %, rem...) | 40px |
| Laptop – Height | Size (px, %, rem...) | - |
| Mobile – Height | Size (px, %, rem...) | - |
Quote
Group: ContentGoes inside: Column, Section, Modal, Offcanvas
Quote with author and role. Three styles: simple, boxed and large. The icon is your choice and the left "accent" border can be switched on or off.
Options
| Option | Type | Default and values |
|---|---|---|
| Text | Multi-line text | A short, memorable quote goes here. |
| Author | Text | Author name |
| Author role | Text | - |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | fa-solid fa-quote-left |
| Icon size | Size (px, %, rem...) | - |
| Icon colour | Colour | - |
| Style | List | SimpleValues: Simple · Boxed · Large |
| Alignment | List | LeftValues: Left · Centre · Right |
| Show accent borderOnly if "Style" ≠ "Large" | Yes / No | Yes |
| Accent colour | Colour | #0d6efdff |
| Background colourOnly if "Style" = "Boxed" | Colour | #f8f9faff |
| Text – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Author – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Table
Group: ContentGoes inside: Column, Section, Modal, Offcanvas
Bootstrap table. Rows and cells are typed in a text field: one row per line of text, cells separated by "|". It has a header row, striped rows and a responsive mode.
Options
| Option | Type | Default and values |
|---|---|---|
| Rows (one per line, cells separated by |) | Multi-line text | Name|Role|City Anna|Designer|Rome Mar... |
| First row is the header | Yes / No | Yes |
| Striped rows | Yes / No | Yes |
| Borders | Yes / No | No |
| Highlight row on hover | Yes / No | No |
| Compact | Yes / No | No |
| Scroll sideways on small screens | Yes / No | Yes |
| Alignment | List | LeftValues: Left · Centre · Right |
| Header background | Colour | - |
| Header text colour | Colour | - |
Components
Alert
Group: ComponentsGoes inside: Column, Section, Modal, Offcanvas
Bootstrap alert with title, text, colour variant and a close button. It can have an icon on the left, with its own size and colour. With a link, the whole box becomes clickable; the close button still works.
Options
| Option | Type | Default and values |
|---|---|---|
| Title | Text | - |
| Text | Text | This is an alert message. |
| Style | List | InfoValues: Primary · Secondary · Success · Danger · Warning · Info · Light · Dark |
| Background colour | Colour | - |
| Border colour | Colour | - |
| Border width | Size (px, %, rem...) | - |
| Border radius | Size (px, %, rem...) | - |
| Dismissible | Yes / No | No |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | - |
| Icon sizeOnly if "Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star)" ≠ "" | Size (px, %, rem...) | 24px |
| Icon colourOnly if "Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star)" ≠ "" | Colour | - |
| Link | Link (URL or menu item) | - |
| Open inOnly if "Link" ≠ "" | List | -Values: Same window · New window |
| Title – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Text – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Progress bar
Group: ComponentsGoes inside: Column, Section, Modal, Offcanvas
Progress bar with value, colour and height. It can show the value as a percentage.
Options
| Option | Type | Default and values |
|---|---|---|
| Label | Text | - |
| Value (%) | Number | 60 |
| Show value | Yes / No | Yes |
| Striped | Yes / No | No |
| Bar colour | Colour | #0d6efdff |
| Track colour | Colour | - |
| Bar height | Size (px, %, rem...) | 20px |
Card
Group: ComponentsGoes inside: Column, Section, Modal, Offcanvas
Bootstrap card with image, title, text and button.
Options
| Option | Type | Default and values |
|---|---|---|
| Image URL | Image (images folder or URL) | https://placehold.co/600x300 |
| Alt text | Text | - |
| Title | Text | Heading |
| Title – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Text | Rich text | Paragraph text. |
| Text – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Button – Label | Text | Learn more |
| Button – Link | Link (URL or menu item) | - |
| Open in | List | -Values: Same window · New window |
| Button – Button size | List | -Values: Default · Small · Large · Custom |
| Button – Custom padding (top)Only if "Button – Button size" = "Custom" | Size (px, %, rem...) | - |
| Button – Custom padding (right)Only if "Button – Button size" = "Custom" | Size (px, %, rem...) | - |
| Button – Custom padding (bottom)Only if "Button – Button size" = "Custom" | Size (px, %, rem...) | - |
| Button – Custom padding (left)Only if "Button – Button size" = "Custom" | Size (px, %, rem...) | - |
| Button – Style | List | PrimaryValues: Primary · Secondary · Success · Danger · Warning · Info ... |
| Button – Custom backgroundOnly if "Button – Style" = "Custom" | Colour | #0d6efd |
| Button – Custom text colourOnly if "Button – Style" = "Custom" | Colour | #ffffff |
| Button – Border colourOnly if "Button – Style" = "Custom" | Colour | #0d6efd |
| Button – Hover backgroundOnly if "Button – Style" = "Custom" | Colour | - |
| Button – Hover text colourOnly if "Button – Style" = "Custom" | Colour | - |
| Button – Hover border colourOnly if "Button – Style" = "Custom" | Colour | - |
| Button – Border width (e.g. 1px)Only if "Button – Style" = "Custom" | Size (px, %, rem...) | 1px |
| Button – Corner radiusOnly if "Button – Style" = "Custom" | Size (px, %, rem...) | 6px |
| Button – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Alignment | List | LeftValues: Left · Centre · Right |
| Shadow | Yes / No | No |
Testimonial
Group: ComponentsGoes inside: Column, Section, Modal, Offcanvas
Review with text, name, role, avatar and rating stars.
Options
| Option | Type | Default and values |
|---|---|---|
| Icon | Font Awesome icon | fa-solid fa-quote-left |
| Icon – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Quote | Rich text | Great service, highly recommended! |
| Quote – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Name | Text | Jane Doe |
| Name – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Role | Text | CEO, Company |
| Role – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Photo | Image (images folder or URL) | - |
| Photo size | Size (px, %, rem...) | 64px |
| Photo shape | List | CircleValues: Circle · Rounded · Square |
| Stars (0-5) | Number | 5 |
| Star colour | Colour | #ffc107ff |
| Alignment | List | CentreValues: Left · Centre · Right |
| Box – Background colour | Colour | #ffffffff |
| Box – Padding | Spacing (4 sides) | - |
| Box – Border style | List | SolidValues: None · Solid · Dashed · Dotted · Double |
| Box – Border colour | Colour | #dee2e6ff |
| Box – Border width | Spacing (4 sides) | - |
| Box – Border radius | Size (px, %, rem...) | - |
Icon list
Group: ComponentsGoes inside: Column, Section, Modal, OffcanvasHolds: List item
List where each item has its own icon. Items are child blocks.
Options
| Option | Type | Default and values |
|---|---|---|
| Layout | List | VerticalValues: Vertical · Horizontal |
| Alignment | List | LeftValues: Left · Centre · Right |
| Space between items | Size (px, %, rem...) | 8px |
| Space between icon and text | Size (px, %, rem...) | 10px |
| Icon position | List | LeftValues: Left · Right |
| Icon size | Size (px, %, rem...) | - |
| Icon colour | Colour | #0d6efdff |
| Hover colour | Colour | - |
| Text – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Item options: List item
| Option | Type | Default and values |
|---|---|---|
| Text | Text | List item |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | fa-solid fa-check |
| Link | Link (URL or menu item) | - |
| Open in | List | -Values: Same window · New window |
Icon group
Group: ComponentsGoes inside: Column, Section, Modal, OffcanvasHolds: Icon
Row of linked icons, for example for social networks. Icons are child blocks.
Options
| Option | Type | Default and values |
|---|---|---|
| Alignment | List | LeftValues: Left · Centre · Right |
| Icon shape | List | CircleValues: None · Circle · Rounded · Square |
| Box size | Size (px, %, rem...) | 40px |
| Icon size | Size (px, %, rem...) | 18px |
| Space between items | Size (px, %, rem...) | 10px |
| Background colour | Colour | #0d6efdff |
| Hover background | Colour | - |
| Icon colour | Colour | #ffffffff |
| Hover colour | Colour | - |
Item options: Icon
| Option | Type | Default and values |
|---|---|---|
| Label | Text | |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | fa-brands fa-facebook-f |
| Link | Link (URL or menu item) | # |
| Open in | List | New windowValues: Same window · New window |
| Background colour | Colour | - |
| Icon colour | Colour | - |
Pricing table
Group: ComponentsGoes inside: Column, Section, Modal, Offcanvas
Pricing plan with name, price, period, list of features (one per line) and button. It can be highlighted with a badge.
Options
| Option | Type | Default and values |
|---|---|---|
| Highlighted plan | Yes / No | No |
| Badge textOnly if "Highlighted plan" = "Yes" | Text | - |
| Accent colourOnly if "Highlighted plan" = "Yes" | Colour | #0d6efdff |
| Plan name | Text | Basic |
| Plan name – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Price | Text | 29 |
| Currency | Text | € |
| Period | Text | /month |
| Price – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Description | Rich text | - |
| Features (one per line) | Text | Feature one Feature two Feature three |
| Feature icon | Font Awesome icon | fa-solid fa-check |
| Feature icon – Text colour | Colour | #198754ff |
| Features (one per line) – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Button – Label | Text | Learn more |
| Button – Link | Link (URL or menu item) | - |
| Open in | List | -Values: Same window · New window |
| Button – Button size | List | -Values: Default · Small · Large · Custom |
| Button – Custom padding (top)Only if "Button – Button size" = "Custom" | Size (px, %, rem...) | - |
| Button – Custom padding (right)Only if "Button – Button size" = "Custom" | Size (px, %, rem...) | - |
| Button – Custom padding (bottom)Only if "Button – Button size" = "Custom" | Size (px, %, rem...) | - |
| Button – Custom padding (left)Only if "Button – Button size" = "Custom" | Size (px, %, rem...) | - |
| Button – Style | List | PrimaryValues: Primary · Secondary · Success · Danger · Warning · Info ... |
| Button – Custom backgroundOnly if "Button – Style" = "Custom" | Colour | #0d6efd |
| Button – Custom text colourOnly if "Button – Style" = "Custom" | Colour | #ffffff |
| Button – Border colourOnly if "Button – Style" = "Custom" | Colour | #0d6efd |
| Button – Hover backgroundOnly if "Button – Style" = "Custom" | Colour | - |
| Button – Hover text colourOnly if "Button – Style" = "Custom" | Colour | - |
| Button – Hover border colourOnly if "Button – Style" = "Custom" | Colour | - |
| Button – Border width (e.g. 1px)Only if "Button – Style" = "Custom" | Size (px, %, rem...) | 1px |
| Button – Corner radiusOnly if "Button – Style" = "Custom" | Size (px, %, rem...) | 6px |
| Button – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Alignment | List | CentreValues: Left · Centre · Right |
| Box – Background colour | Colour | #ffffffff |
| Box – Padding | Spacing (4 sides) | - |
| Box – Border style | List | SolidValues: None · Solid · Dashed · Dotted · Double |
| Box – Border colour | Colour | #dee2e6ff |
| Box – Border width | Spacing (4 sides) | - |
| Box – Border radius | Size (px, %, rem...) | - |
Feature box
Group: ComponentsGoes inside: Column, Section, Modal, Offcanvas
Title and text with an icon or an image. The symbol goes on top, at the bottom, left or right. Its shape, size and colours are adjustable.
Options
| Option | Type | Default and values |
|---|---|---|
| Icon or image | List | IconValues: Icon · Image |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star)Only if "Icon or image" = "Icon" | Font Awesome icon | fa-solid fa-bolt |
| Image URLOnly if "Icon or image" = "Image" | Image (images folder or URL) | - |
| Alt textOnly if "Icon or image" = "Image" | Text | - |
| Image widthOnly if "Icon or image" = "Image" | Size (px, %, rem...) | 80px |
| Title | Text | Feature title |
| Text | Multi-line text | Describe this feature in a sentence o... |
| Link | Link (URL or menu item) | - |
| Open in | List | -Values: Same window · New window |
| Level | List | H3Values: H2 · H3 · H4 · H5 · H6 |
| Icon position | List | TopValues: Top · Bottom · Left · Right |
| Alignment | List | LeftValues: Left · Centre · Right |
| Background shape | List | CircleValues: None · Circle · Rounded · Square |
| Icon sizeOnly if "Icon or image" = "Icon" | Size (px, %, rem...) | 28px |
| Box size | Size (px, %, rem...) | 64px |
| Icon colourOnly if "Icon or image" = "Icon" | Colour | #0d6efdff |
| Background colour | Colour | #0d6efd1a |
| Space between items | Size (px, %, rem...) | 16px |
| Title – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Text – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Team member
Group: ComponentsGoes inside: Column, Section, Modal, Offcanvas
Card of a team member: photo, name, role, short bio and social links. Pick the photo from the images folder or with a URL; it follows the text alignment.
Options
| Option | Type | Default and values |
|---|---|---|
| Image URL | Image (images folder or URL) | https://placehold.co/400x400 |
| Name | Text | Full name |
| Role | Text | Job title |
| Short bio | Multi-line text | - |
| Alignment | List | CentreValues: Left · Centre · Right |
| Photo shape | List | CircleValues: Circle · Rounded · Square |
| Photo size | Size (px, %, rem...) | 160px |
| Text | - | |
| X (Twitter) | Text | - |
| Text | - | |
| Text | - | |
| Text | - | |
| Icon colour | Colour | #6c757dff |
| Hover colour | Colour | - |
| Name – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Role – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Short bio – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Timeline
Group: ComponentsGoes inside: Column, Section, Modal, OffcanvasHolds: Timeline step
Sequence of steps along a line. Each step has a date, title and text, and a coloured dot or an icon. Steps are child blocks.
Options
| Option | Type | Default and values |
|---|---|---|
| Layout | List | Line on the leftValues: Line on the left · Alternating |
| Line colour | Colour | #dee2e6ff |
| Marker | List | DotValues: Dot · Icon |
| Marker icon (steps can override it)Only if "Marker" = "Icon" | Font Awesome icon | fa-solid fa-circle-check |
| Marker colour | Colour | #0d6efdff |
| Marker background | Colour | #ffffffff |
| Marker size | Size (px, %, rem...) | 16px |
| Space between steps | Size (px, %, rem...) | 32px |
| Date / label – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Title – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Text – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Item options: Timeline step
| Option | Type | Default and values |
|---|---|---|
| Date / label | Text | 2026 |
| Title | Text | Milestone |
| Text | Multi-line text | What happened at this step. |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | - |
| Marker colour | Colour | - |
Back to top
Group: ComponentsGoes inside: Column, Section, Modal, Offcanvas
Button pinned to a corner of the window that appears after the page is scrolled and takes the visitor back to the top. Choose the scroll threshold in pixels, smooth scrolling, position, offset from the edge, shape, size, colours, shadow and a label for the tooltip and screen readers. In the editor it shows in place, with a dashed border.
Options
| Option | Type | Default and values |
|---|---|---|
| Label (tooltip and screen readers) | Text | Back to top |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | fa-solid fa-chevron-up |
| Show after scrolling (px) | Number | 300 |
| Smooth scrolling | Yes / No | Yes |
| Position on the page | List | Bottom rightValues: Bottom right · Bottom centre · Bottom left · Middle right · Middle left |
| Horizontal offset | Size (px, %, rem...) | 20px |
| Vertical offset | Size (px, %, rem...) | 20px |
| Icon shape | List | CircleValues: Circle · Rounded · Square |
| Box size | Size (px, %, rem...) | 46px |
| Icon size | Size (px, %, rem...) | 18px |
| Background colour | Colour | #0d6efdff |
| Icon colour | Colour | #ffffffff |
| Hover background | Colour | - |
| Shadow | Yes / No | Yes |
| Stacking order (z-index) | Number | 1030 |
Announcement bar
Group: ComponentsGoes inside: Column, Section, Modal, Offcanvas
Notice strip (promotions, information, maintenance) with text, icon and an optional link: with a link the whole bar is clickable. It can be fixed at the top of the window, follow the scroll inside its container (sticky) or stay in the page flow. When it can be closed, it stays hidden for the number of days you choose. In the editor it always shows in the page flow.
Options
| Option | Type | Default and values |
|---|---|---|
| Text | Text | Free shipping on all orders this week |
| Link | Link (URL or menu item) | - |
| Open inOnly if "Link" ≠ "" | List | -Values: Same window · New window |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | - |
| Position | List | Fixed at the top of the windowValues: Fixed at the top of the window · Sticky (follows the scroll inside its container) · In the page flow |
| Dismissible | Yes / No | Yes |
| Stay hidden after closing (days, 0 = until reload)Only if "Dismissible" = "Yes" | Number | 7 |
| Alignment | List | CentreValues: Left · Centre · Right |
| Background colour | Colour | #0d6efdff |
| Text colour | Colour | #ffffffff |
| Font size | Size (px, %, rem...) | 14px |
| Chip padding – vertical | Size (px, %, rem...) | 10px |
| Chip padding – horizontal | Size (px, %, rem...) | 16px |
| Stacking order (z-index) | Number | 1050 |
Chat form
Group: ComponentsGoes inside: Column, Section, Modal, OffcanvasHolds: Form field
Contact form that sends nothing to the server: on submit the answers become one message and WhatsApp or Telegram opens with it, ready to send. With Telegram the message is copied and you paste it into the chat. The fields are child blocks (text, email, phone, long text, drop-down list), full or half row, and can be required. The privacy checkbox, when on, must be ticked before sending.
Options
| Option | Type | Default and values |
|---|---|---|
| Service | List | WhatsAppValues: WhatsApp · Telegram |
| WhatsApp number (international, e.g. +39 333 1234567)Only if "Service" = "WhatsApp" | Text | - |
| Telegram username or number (e.g. @mychannel)Only if "Service" = "Telegram" | Text | - |
| First line of the message (optional) | Text | - |
| Privacy checkbox (required) | Yes / No | Yes |
| Privacy textOnly if "Privacy checkbox (required)" = "Yes" | Text | I have read and accept the privacy po... |
| Privacy policy pageOnly if "Privacy checkbox (required)" = "Yes" | Link (URL or menu item) | - |
| Privacy link textOnly if "Privacy checkbox (required)" = "Yes" | Text | privacy policy |
| Button text | Text | Send message |
| Button icon (empty = the service logo) | Font Awesome icon | - |
| Icon position | List | LeftValues: Left · Right |
| Full-width button | Yes / No | No |
| Alignment | List | LeftValues: Left · Centre · Right |
| Open in a new tab | Yes / No | Yes |
| Notice after sending (optional)Only if "Service" = "WhatsApp" | Text | - |
| Notice after sendingOnly if "Service" = "Telegram" | Text | Message copied: paste it into the Tel... |
| Space between fields | Size (px, %, rem...) | 16px |
| Label colour | Colour | - |
| Field background | Colour | #ffffffff |
| Text colour | Colour | - |
| Border colour | Colour | #ced4daff |
| Border radius | Size (px, %, rem...) | 6px |
| Button background (empty = service colour) | Colour | - |
| Text colour | Colour | #ffffffff |
| Border radius | Size (px, %, rem...) | 6px |
Item options: Form field
| Option | Type | Default and values |
|---|---|---|
| Label | Text | Name |
| Field type | List | TextValues: Text · Email · Phone · Long text · Drop-down list |
| Choices (one per line)Only if "Field type" = "Drop-down list" | Multi-line text | - |
| Placeholder | Text | - |
| Required | Yes / No | No |
| Width | List | Full rowValues: Full row · Half row |
Floating chat
Group: ComponentsGoes inside: Column, Section, Modal, Offcanvas
WhatsApp or Telegram chat button pinned to the window: it stays visible while the page scrolls. Choose one of nine positions (corners, middle of the sides), the offset from the edge, the colour, the icon, a label next to it (hidden on mobile) and a pulse animation. For WhatsApp the message can be pre-filled. In the editor the button shows in place on the page, with a dashed border, so you can select it.
Options
| Option | Type | Default and values |
|---|---|---|
| Service | List | WhatsAppValues: WhatsApp · Telegram |
| WhatsApp number (international, e.g. +39 333 1234567)Only if "Service" = "WhatsApp" | Text | - |
| Pre-filled messageOnly if "Service" = "WhatsApp" | Text | - |
| Telegram username or number (e.g. @mychannel)Only if "Service" = "Telegram" | Text | - |
| Label next to the icon (hidden on mobile) | Text | - |
| Position on the page | List | Bottom rightValues: Bottom right · Bottom centre · Bottom left · Middle right · Middle left · Top right · Top centre · Top left |
| Horizontal offset | Size (px, %, rem...) | 20px |
| Vertical offset | Size (px, %, rem...) | 20px |
| Box size | Size (px, %, rem...) | 60px |
| Icon size | Size (px, %, rem...) | 30px |
| Icon (empty = service logo) | Font Awesome icon | - |
| Button colour (empty = service colour) | Colour | - |
| Text colour | Colour | #ffffffff |
| Label background | Colour | #ffffffff |
| Label text colour | Colour | #212529ff |
| Pulse animation | Yes / No | Yes |
| Open in a new tab | Yes / No | Yes |
| Stacking order (z-index) | Number | 1040 |
Interactive
Accordion
Group: InteractiveGoes inside: Column, Section, Modal, OffcanvasHolds: Accordion item
List of items that open and close. Items are child blocks, each with a title and text. With the FAQ structured data option, questions and answers become FAQPage data for Google (JSON-LD): use it on one accordion per page.
Options
| Option | Type | Default and values |
|---|---|---|
| Only one open at a time | Yes / No | No |
| FAQ structured data for Google (JSON-LD) – use on one accordion per page | Yes / No | No |
| Space between items | Spacing (4 sides) | - |
| Icon (closed) | Font Awesome icon | fa-solid fa-plus |
| Icon (open) | Font Awesome icon | fa-solid fa-minus |
| Rotation closed (deg) | Number | 0 |
| Rotation open (deg) | Number | 0 |
| Icon position | List | RightValues: Left · Right |
| Icon size | Size (px, %, rem...) | - |
| Icon colour | Colour | - |
| Title – Background colour | Colour | - |
| Title – Padding | Spacing (4 sides) | - |
| Title – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Title – Border style | List | SolidValues: None · Solid · Dashed · Dotted · Double |
| Title – Border colour | Colour | #dee2e6ff |
| Title – Border width | Spacing (4 sides) | - |
| Title – Border radius | Size (px, %, rem...) | - |
| Answer – Background colour | Colour | #ffffffff |
| Answer – Margin (space from question) | Spacing (4 sides) | - |
| Answer – Padding | Spacing (4 sides) | - |
| Answer – Border style | List | SolidValues: None · Solid · Dashed · Dotted · Double |
| Answer – Border colour | Colour | #dee2e6ff |
| Answer – Border width | Spacing (4 sides) | - |
| Answer – Border radius | Size (px, %, rem...) | - |
Item options: Accordion item
| Option | Type | Default and values |
|---|---|---|
| Title | Text | Question |
| Answer | Rich text | Answer text. |
| Open by default | Yes / No | No |
Tabs
Group: InteractiveGoes inside: Column, Section, Modal, OffcanvasHolds: Tab
Content organised in tabs. Tabs are child blocks, each with a title and text.
Options
| Option | Type | Default and values |
|---|---|---|
| Alignment | List | LeftValues: Left · Centre · Right |
| Space between tabs | Size (px, %, rem...) | 4px |
| Tab – Background colour | Colour | - |
| Tab – Padding | Spacing (4 sides) | - |
| Tab – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Tab – Border style | List | SolidValues: None · Solid · Dashed · Dotted · Double |
| Tab – Border colour | Colour | #dee2e6ff |
| Tab – Border width | Spacing (4 sides) | - |
| Tab – Border radius | Size (px, %, rem...) | - |
| Active tab – Text colour | Colour | - |
| Active tab – Background colour | Colour | #ffffffff |
| Active tab – Border colour | Colour | - |
| Icon – Icon size | Size (px, %, rem...) | - |
| Icon – Text colour | Colour | - |
| Icon – Active tab | Colour | - |
| Active tab content – Background colour | Colour | #ffffffff |
| Content – Padding | Spacing (4 sides) | - |
| Content – Border style | List | SolidValues: None · Solid · Dashed · Dotted · Double |
| Content – Border colour | Colour | #dee2e6ff |
| Content – Border width | Spacing (4 sides) | - |
| Content – Border radius | Size (px, %, rem...) | - |
Item options: Tab
| Option | Type | Default and values |
|---|---|---|
| Title | Text | Tab |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | - |
| Content | Rich text | Paragraph text. |
Modal
Group: InteractiveGoes inside: Column, SectionHolds: blocks
Modal window. The page shows only the trigger that opens it (button, icon or image); the content is made of other blocks.
Options
| Option | Type | Default and values |
|---|---|---|
| Opens with | List | ButtonValues: Button · Icon · Image |
| Label (button text / accessible name) | Text | Open modal |
| Alignment | List | LeftValues: Left · Centre · Right |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | fa-solid fa-circle-info |
| Icon size | Size (px, %, rem...) | 32px |
| Icon colour | Colour | - |
| Hover colour | Colour | - |
| Image URL | Image (images folder or URL) | - |
| Image width | Size (px, %, rem...) | 64px |
| Corner radius | Size (px, %, rem...) | - |
| Button – Button size | List | -Values: Default · Small · Large · Custom |
| Button – Custom padding (top) | Size (px, %, rem...) | - |
| Button – Custom padding (right) | Size (px, %, rem...) | - |
| Button – Custom padding (bottom) | Size (px, %, rem...) | - |
| Button – Custom padding (left) | Size (px, %, rem...) | - |
| Button – Style | List | PrimaryValues: Primary · Secondary · Success · Danger · Warning · Info ... |
| Button – Custom background | Colour | #0d6efd |
| Button – Custom text colour | Colour | #ffffff |
| Button – Border colour | Colour | #0d6efd |
| Button – Hover background | Colour | - |
| Button – Hover text colour | Colour | - |
| Button – Hover border colour | Colour | - |
| Button – Border width (e.g. 1px) | Size (px, %, rem...) | 1px |
| Button – Corner radius | Size (px, %, rem...) | 6px |
| Button – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Title | Text | Modal title |
| Modal size | List | MediumValues: Small · Medium · Large · Extra large · Full width |
| Vertically centred | Yes / No | No |
| Show the × button | Yes / No | Yes |
| Close icon (empty = ×) | Font Awesome icon | - |
| Close icon size | Size (px, %, rem...) | - |
| Close icon colour | Colour | - |
| Close button in the footer | Yes / No | Yes |
| Footer button labelOnly if "Close button in the footer" = "Yes" | Text | Close |
| Close when clicking outside | Yes / No | Yes |
| Open automatically | Yes / No | No |
| Delay before opening (seconds)Only if "Open automatically" = "Yes" | Number | 3 |
| Overlay colour | Colour | #00000080 |
| Header background | Colour | - |
| Body background | Colour | #ffffffff |
| Body padding | Spacing (4 sides) | - |
| Border radius | Size (px, %, rem...) | 8px |
| Title – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Offcanvas
Group: InteractiveGoes inside: Column, SectionHolds: blocks
Panel that slides in from one side of the screen. The page shows only the trigger that opens it; the content is made of other blocks.
Options
| Option | Type | Default and values |
|---|---|---|
| Opens with | List | ButtonValues: Button · Icon · Image |
| Label (button text / accessible name) | Text | Open panel |
| Alignment | List | LeftValues: Left · Centre · Right |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | fa-solid fa-circle-info |
| Icon size | Size (px, %, rem...) | 32px |
| Icon colour | Colour | - |
| Hover colour | Colour | - |
| Image URL | Image (images folder or URL) | - |
| Image width | Size (px, %, rem...) | 64px |
| Corner radius | Size (px, %, rem...) | - |
| Button – Button size | List | -Values: Default · Small · Large · Custom |
| Button – Custom padding (top) | Size (px, %, rem...) | - |
| Button – Custom padding (right) | Size (px, %, rem...) | - |
| Button – Custom padding (bottom) | Size (px, %, rem...) | - |
| Button – Custom padding (left) | Size (px, %, rem...) | - |
| Button – Style | List | PrimaryValues: Primary · Secondary · Success · Danger · Warning · Info ... |
| Button – Custom background | Colour | #0d6efd |
| Button – Custom text colour | Colour | #ffffff |
| Button – Border colour | Colour | #0d6efd |
| Button – Hover background | Colour | - |
| Button – Hover text colour | Colour | - |
| Button – Hover border colour | Colour | - |
| Button – Border width (e.g. 1px) | Size (px, %, rem...) | 1px |
| Button – Corner radius | Size (px, %, rem...) | 6px |
| Button – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Title | Text | Panel title |
| Opens from | List | RightValues: Left · Right · Top · Bottom |
| Desktop – WidthOnly if "Opens from" is one of: Left, Right | Size (px, %, rem...) | 360px |
| Laptop – WidthOnly if "Opens from" is one of: Left, Right | Size (px, %, rem...) | - |
| Mobile – WidthOnly if "Opens from" is one of: Left, Right | Size (px, %, rem...) | - |
| HeightOnly if "Opens from" is one of: Top, Bottom | Size (px, %, rem...) | 40% |
| Show the × button | Yes / No | Yes |
| Close icon (empty = ×) | Font Awesome icon | - |
| Close icon size | Size (px, %, rem...) | - |
| Close icon colour | Colour | - |
| Close when clicking outside | Yes / No | Yes |
| Overlay colour | Colour | #00000080 |
| Header background | Colour | - |
| Body background | Colour | #ffffffff |
| Body padding | Spacing (4 sides) | - |
| Title – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Popover
Group: InteractiveGoes inside: Column, Section, Modal, Offcanvas
Small box with a title and text that opens when you click the trigger.
Options
| Option | Type | Default and values |
|---|---|---|
| Opens with | List | ButtonValues: Button · Icon · Image |
| Label (button text / accessible name) | Text | Click me |
| Alignment | List | LeftValues: Left · Centre · Right |
| Icon (Font Awesome 6 Free class, e.g. fa-solid fa-star) | Font Awesome icon | fa-solid fa-circle-info |
| Icon size | Size (px, %, rem...) | 32px |
| Icon colour | Colour | - |
| Hover colour | Colour | - |
| Image URL | Image (images folder or URL) | - |
| Image width | Size (px, %, rem...) | 64px |
| Corner radius | Size (px, %, rem...) | - |
| Button – Button size | List | -Values: Default · Small · Large · Custom |
| Button – Custom padding (top) | Size (px, %, rem...) | - |
| Button – Custom padding (right) | Size (px, %, rem...) | - |
| Button – Custom padding (bottom) | Size (px, %, rem...) | - |
| Button – Custom padding (left) | Size (px, %, rem...) | - |
| Button – Style | List | PrimaryValues: Primary · Secondary · Success · Danger · Warning · Info ... |
| Button – Custom background | Colour | #0d6efd |
| Button – Custom text colour | Colour | #ffffff |
| Button – Border colour | Colour | #0d6efd |
| Button – Hover background | Colour | - |
| Button – Hover text colour | Colour | - |
| Button – Hover border colour | Colour | - |
| Button – Border width (e.g. 1px) | Size (px, %, rem...) | 1px |
| Button – Corner radius | Size (px, %, rem...) | 6px |
| Button – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Title | Text | Popover title |
| Content | Rich text | Popover content. |
| Position | List | BottomValues: Top · Right · Bottom · Left |
| Opens on | List | ClickValues: Click · Hover |
| Width | Size (px, %, rem...) | 276px |
| Border radius | Size (px, %, rem...) | 8px |
| Background colour | Colour | #ffffffff |
| Border colour | Colour | #dee2e6ff |
| Title – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Content – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Carousel
Group: InteractiveGoes inside: Column, Section, Modal, OffcanvasHolds: Slide
Sliding carousel. Slides are child blocks, with image, title, text and link.
Options
| Option | Type | Default and values |
|---|---|---|
| Desktop – Height | Size (px, %, rem...) | 360px |
| Laptop – Height | Size (px, %, rem...) | - |
| Mobile – Height | Size (px, %, rem...) | - |
| Image fit | List | CoverValues: Cover · Contain |
| Border radius | Size (px, %, rem...) | - |
| Transition | List | SlideValues: Slide · Fade |
| Autoplay interval (ms, 0 = off) | Number | 5000 |
| Loop | Yes / No | Yes |
| Pause on hover | Yes / No | Yes |
| Show arrows | Yes / No | Yes |
| Show dots | Yes / No | Yes |
| Arrows – Background colourOnly if "Show arrows" = "Yes" | Colour | #00000066 |
| Arrows – Text colourOnly if "Show arrows" = "Yes" | Colour | #ffffffff |
| Arrows – Icon sizeOnly if "Show arrows" = "Yes" | Size (px, %, rem...) | 40px |
| Dots – Background colourOnly if "Show dots" = "Yes" | Colour | #ffffff80 |
| Dots – Active tabOnly if "Show dots" = "Yes" | Colour | #ffffffff |
Item options: Slide
| Option | Type | Default and values |
|---|---|---|
| Image URL | Image (images folder or URL) | https://placehold.co/1200x600 |
| Alt text | Text | - |
| Title | Text | - |
| Text | Multi-line text | - |
| Link | Link (URL or menu item) | - |
| Open in | List | -Values: Same window · New window |
| Alignment | List | LeftValues: Left · Centre · Right |
| Caption – Background colour | Colour | #00000066 |
| Caption – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Gallery
Group: InteractiveGoes inside: Column, Section, Modal, OffcanvasHolds: Gallery image
Grid of images with a lightbox. Pick images one by one (from a URL or the media manager) or take them automatically from a folder.
Options
| Option | Type | Default and values |
|---|---|---|
| Pictures from | List | Single imagesValues: Single images · A folder |
| Folder (inside images)Only if "Pictures from" = "A folder" | List | -Values: - Select a folder - · images/ · aipagebuilder · banners · headers · jpagebuilder-site · sampledata · sampledata / cassiopeia |
| OrderOnly if "Pictures from" = "A folder" | List | Name A-ZValues: Name A-Z · Name Z-A · Newest first · Oldest first · Random |
| Max imagesOnly if "Pictures from" = "A folder" | Number | 24 |
| Desktop – Columns | Number | 4 |
| Laptop – Columns | Number | 3 |
| Mobile – Columns | Number | 2 |
| Space between items | Size (px, %, rem...) | 12px |
| Image ratio | List | 1:1Values: Original · 1:1 · 4:3 · 3:2 · 16:9 |
| Border radius | Size (px, %, rem...) | - |
| Hover effect | List | ZoomValues: None · Zoom · Fade (opacity) |
| Captions | List | -Values: None · Below the image · Over the image |
| Open images in a lightbox | Yes / No | Yes |
Item options: Gallery image
| Option | Type | Default and values |
|---|---|---|
| Image URL | Image (images folder or URL) | https://placehold.co/800x800 |
| Alt text | Text | - |
| Caption | Text | - |
| Link (replaces the lightbox) | Link (URL or menu item) | - |
| Open in | List | -Values: Same window · New window |
Logo carousel
Group: InteractiveGoes inside: Column, Section, Modal, OffcanvasHolds: Logo
Row of logos on a single line: still, or in a continuous scroll with adjustable speed. Logos are child blocks.
Options
| Option | Type | Default and values |
|---|---|---|
| Display | List | ScrollingValues: Scrolling · Static |
| Logo height | Size (px, %, rem...) | 48px |
| Space between items | Size (px, %, rem...) | 48px |
| Grayscale until hovered | Yes / No | Yes |
| Speed (px/s)Only if "Display" = "Scrolling" | Number | 60 |
| Reverse directionOnly if "Display" = "Scrolling" | Yes / No | No |
| Pause on hoverOnly if "Display" = "Scrolling" | Yes / No | Yes |
Item options: Logo
| Option | Type | Default and values |
|---|---|---|
| Image URL | Image (images folder or URL) | https://placehold.co/200x80 |
| Alt text | Text | - |
| Link | Link (URL or menu item) | - |
| Open in | List | -Values: Same window · New window |
Advanced
Map
Group: AdvancedGoes inside: Column, Section, Modal, Offcanvas
Embedded map (Google Maps or OpenStreetMap), from an address or coordinates, with zoom and sizes per device.
Options
| Option | Type | Default and values |
|---|---|---|
| Provider | List | Google Maps (no key)Values: Google Maps (no key) · Google Maps (API key) · OpenStreetMap |
| Google Maps API key (Maps Embed API)Only if "Provider" = "Google Maps (API key)" | Text | - |
| Locate by | List | AddressValues: Address · Coordinates |
| Address or placeOnly if "Locate by" = "Address" | Text | Roma, Italia |
| LatitudeOnly if "Locate by" = "Coordinates" | Text | 41.9028 |
| LongitudeOnly if "Locate by" = "Coordinates" | Text | 12.4964 |
| Zoom (1-20) | Number | 14 |
| Map typeOnly if "Provider" ≠ "OpenStreetMap" | List | MapValues: Map · Satellite |
| Map typeOnly if "Provider" = "OpenStreetMap" | List | StandardValues: Standard · Cycle · Transport · Humanitarian |
| Desktop – Width | Size (px, %, rem...) | 100% |
| Desktop – Height | Size (px, %, rem...) | 400px |
| Laptop – Width | Size (px, %, rem...) | - |
| Laptop – Height | Size (px, %, rem...) | - |
| Mobile – Width | Size (px, %, rem...) | - |
| Mobile – Height | Size (px, %, rem...) | - |
| Alignment | List | LeftValues: Left · Centre · Right |
| Border radius | Size (px, %, rem...) | - |
| Grayscale | Number | 0 |
Counter
Group: AdvancedGoes inside: Column, Section, Modal, Offcanvas
Number that animates from a start value to an end value, with prefix, suffix and label.
Options
| Option | Type | Default and values |
|---|---|---|
| Final value | Number | 100 |
| Start from | Number | 0 |
| Decimals | Number | 0 |
| Duration (ms) | Number | 2000 |
| Thousands separator | List | NoneValues: None · 1,000 · 1.000 · 1 000 |
| Prefix | Text | - |
| Suffix | Text | + |
| Label | Text | Happy clients |
| Alignment | List | CentreValues: Left · Centre · Right |
| Number – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Prefix – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Suffix – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Label – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Countdown
Group: AdvancedGoes inside: Column, Section, Modal, Offcanvas
Countdown to a date and time. Choose the units to show (days, hours, minutes, seconds) and their labels.
Options
| Option | Type | Default and values |
|---|---|---|
| Target date and time | Date and time | 2030-01-01T00:00 |
| Show days | Yes / No | Yes |
| Days labelOnly if "Show days" = "Yes" | Text | Days |
| Show hours | Yes / No | Yes |
| Hours labelOnly if "Show hours" = "Yes" | Text | Hours |
| Show minutes | Yes / No | Yes |
| Minutes labelOnly if "Show minutes" = "Yes" | Text | Minutes |
| Show seconds | Yes / No | Yes |
| Seconds labelOnly if "Show seconds" = "Yes" | Text | Seconds |
| Text when finished | Text | - |
| Alignment | List | CentreValues: Left · Centre · Right |
| Space between items | Size (px, %, rem...) | 16px |
| Unit box – Background colour | Colour | - |
| Unit box – Padding | Spacing (4 sides) | - |
| Unit box – Border style | List | SolidValues: None · Solid · Dashed · Dotted · Double |
| Unit box – Border colour | Colour | #dee2e6ff |
| Unit box – Border width | Spacing (4 sides) | - |
| Unit box – Border radius | Size (px, %, rem...) | - |
| Number – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
| Label – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Joomla module
Group: AdvancedGoes inside: Column, Section, Modal, Offcanvas
Inserts an existing Joomla module in the page.
Options
| Option | Type | Default and values |
|---|---|---|
| Module | List | -Values: — Select a module — · Breadcrumbs [mod_breadcrumbs] – breadcrumbs · Cerca [mod_finder] – search · Elementi simili [mod_tags_similar] – bottom-b · Immagine [mod_custom] – banner · JPage Builder modulo da Joomla [mod_jpagebuilder] · Menu in basso [mod_menu] – footer · Menu principale Blog [mod_menu] – menu · Ultimi Post [mod_articles] – top-a |
| Module style | List | None (module content only)Values: None (module content only) · HTML5 (with title) · Card |
JPiro Page Builder module
Group: AdvancedGoes inside: Column, Section, Modal, Offcanvas
Inserts a reusable JPiro Page Builder module (see the Modules chapter of the manual). If you edit the module, it changes in every page that uses it.
Options
| Option | Type | Default and values |
|---|---|---|
| Module | List | -Values: — Select a module — |
Custom HTML
Group: AdvancedGoes inside: Column, Section, Modal, Offcanvas
Free HTML. Use it with care: the code is placed in the page.
Options
| Option | Type | Default and values |
|---|---|---|
| HTML | Raw HTML | - |
| Alignment | List | LeftValues: Left · Centre · Right |
Articles
Group: AdvancedGoes inside: Column, Section, Modal, Offcanvas
List of the published Joomla articles of a category, as a grid or a list, with image, date, intro and a "Read more" link.
Options
| Option | Type | Default and values |
|---|---|---|
| Category | List | -Values: All categories · Uncategorised · Blog · Aiuto · Joomla · Tipografia |
| Number of articles | Number | 3 |
| Order | List | Newest firstValues: Newest first · Oldest first · Title A-Z · Most read · Random |
| Layout | List | GridValues: Grid · List |
| Desktop – ColumnsOnly if "Layout" = "Grid" | Number | 3 |
| Laptop – ColumnsOnly if "Layout" = "Grid" | Number | 2 |
| Mobile – ColumnsOnly if "Layout" = "Grid" | Number | 1 |
| Space between items | Size (px, %, rem...) | 24px |
| Card style | Yes / No | Yes |
| Show image | Yes / No | Yes |
| Image ratioOnly if "Show image" = "Yes" | List | 16:9Values: 16:9 · 4:3 · 3:2 · 1:1 |
| Show category and date | Yes / No | Yes |
| Show intro text | Yes / No | Yes |
| Intro length (characters)Only if "Show intro text" = "Yes" | Number | 120 |
| Show Read more link | Yes / No | Yes |
| Read more textOnly if "Show Read more link" = "Yes" | Text | Read more |
| Level | List | H3Values: H2 · H3 · H4 · H5 · H6 |
| Title – Typography | Typography | colour, hover colour, size, italic, underline, text transform, weight |
Chip list
Group: AdvancedGoes inside: Column, Section, Modal, Offcanvas
List of items shown as rounded labels ("chips"): ingredients, tags, features. Type the items in a text field, one per line. An optional icon shows before each item. Alignment, spacing between labels, colours, border, rounding, text size and padding are adjustable.
Options
| Option | Type | Default and values |
|---|---|---|
| List (one item per line) | Multi-line text | Farina Uova Zucchero Latte |
| Icon before each item | Font Awesome icon | - |
| Alignment | List | CentreValues: Left · Centre · Right |
| Chip spacing | Size (px, %, rem...) | 10px |
| Chip background | Colour | #ffffffff |
| Text colour | Colour | #334155ff |
| Border colour | Colour | #dee2e6ff |
| Border radius | Size (px, %, rem...) | 999px |
| Font size | Size (px, %, rem...) | 14px |
| Chip padding – vertical | Size (px, %, rem...) | 8px |
| Chip padding – horizontal | Size (px, %, rem...) | 16px |
Common options
These options appear in almost every block. They are not repeated in the block sheets.
Spacing
Padding and Margin: four sides, with separate values for desktop, laptop, tablet and mobile where the editor offers them. The default padding of Section, Row and Column is set in the component Options.
Visibility
Hide on desktop, Hide on laptop, Hide on mobile: the block stays in the page but is not visible on the chosen device.
Language constants
In text, link and image fields you can type a Joomla language constant, on its own (MYSITE_PRIVACY_URL) or inside a longer text ({{MYSITE_PRIVACY_URL}}): on the page it becomes the constant's text in the visitor's language.
Advanced
- HTML ID: an identifier for in-page links (example
#contact). - CSS class: classes to add to the block.
- Custom CSS: CSS rules for this block.
Typography
Blocks with text have one or more "Typography" groups. Each group holds: colour, hover colour, size, italic, underline, text transform, weight.
Animation
The animation starts when the block enters the screen. Options:
| Option | Type | Default and values |
|---|---|---|
| Enable animation | Yes / No | No |
| Animation | List | FadeValues: Fade · Rotate · Flip · Bounce · Zoom · Slide |
| Direction | List | From the bottomValues: From the bottom · From the top · From the left · From the right · In place |
| Direction | List | ClockwiseValues: Clockwise · Counter-clockwise |
| Direction | List | HorizontalValues: Horizontal · Vertical |
| Direction | List | Zoom in (grows)Values: Zoom in (grows) · Zoom out (shrinks) |
| Duration (ms) | Number | 800 |
| Delay (ms) | Number | 0 |
| Starts | List | When it scrolls into viewValues: When it scrolls into view · When the page loads |