Blocco Grid Accordion card

(Work in Progress)

Un unico blocco per mille soluzioni: Opzione accordion / Struttua a griglia / grande versatilità

a) Opzione accordion:

Possibilità di applicare ai box lo stile ad accordion, con una prima porzione sempre visibile e una seconda porzione visibile solo se aperta (cliccando su freccetta o bottone).
È anche possibile creareun blocco di testo con accordion con al suo interno delle card estendibili.

​ b) Versatilità del blocco:

Questo è il blocco più complesso  e versatile perché dispone di moltissime opzioni e può assumere strutture e stili molto diversi aseconda dei setting che gli si applicano.
(testo diviso in colonne / inserimento di incone con rollover ecc.)

c) Struttura a griglia:

Nel blocco Grid Accordion Card, si creano delle card all'interno di una struttura a griglia di cui è possibile definire il numero di colonne (da 1a 4).È anche possibile estendere una card su più colonne.

 

a) Box Fissi / Box ad Accodion

Il blocco può essere usato con dei semplici box fissi o con dei box che si aprono con effetto Accordion spuntando il check Box ad accordion.
​Di default compare l' icona freccia per aprire e chiudere il box. In alternativa si può sostituire la freccia con dei bottini impostando anche lo stile Bottone accordion 

Box Fissi

a.1) Box fisso senza accordion

Le sezioni "intestazione" e "contenuto" sono sempre visibili e non c'è nessun effetto accordion

Il check Box ad accordion NON è fleggato >  i box non hanno parti nascoste da aprire
Posso inserire il testo liberamente sia inella sezione Intestazione che in quella Contenuto

 

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

In fase di acquisto inserisci il tuo codice:
 e potrai acquistare il tuo biglietto a soli 13.00 €

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Box ad accordion

a.2)Soluzione con freccia di default

La sezione "contenuto" è visibile solo aprendo l'accordione tramite l'apposita freccia

Il check Box ad accordion è fleggato >  si attiva lo stile ad accordion che mostra la seconda parte del testo
Si deve inserire il testo iniziale sempre visibile nella sezione Intestazione  e il testo con effetto accordion nella sezione Contenuto
(si avrà lo stile di default con freccia in basso che estende e richiude il box)

 

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

In fase di acquisto inserisci il tuo codice:
 e potrai acquistare il tuo biglietto a soli 13.00 €

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

 

a.3) Soluzione con bottoni

La freccia di default non è più visibile ed è possibile inserire 2 bottoni per aprire e chiudere la sezione "contenuto"

Il check Box ad accordion è fleggato >  si attiva lo stile ad accordion che mostra la seconda parte del testo
L'accordion si attiva tramite la scelta dello stile Bottone accordion e l'inserimento dei bottoni da codice sorgente

 

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Continua a leggere

In fase di acquisto inserisci il tuo codice:
 e potrai acquistare il tuo biglietto a soli 13.00 €

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Chiudi

Esistono diverse soluzioni grafiche e strutturali: con i bottoni nelle card, nel blocco padre o in entrambi:
SCOPRI DI PIÙ  

b) Versatilità del blocco

Visibilità delle sezioni editate

Ogni box si compone di 4 sezioni che sono visibili solo se vengono editate:
Titolo su fascia / Immagine / Intestazione / Contenuto (necessario per il secondo step dell'accordion)

b.1)

Promozione Tuffati

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Speciale Promozione Tuffati

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

 

(Box1: fascia titolo, immagine e contenuto editati / Box2: immagine e contenuto editati / Box3:  solo immagine editata / Box4: solo contenuto editato)

Stile delle Card

Èpossibile applicare alle Card le seguenti proprietà impostandole tramite l'apposito campo "Stile"

  • Bottone accordion (funzionale solo e il chek box ad accordion è attivo): nasconde la freccia di default e dà la possibilita di inserire due bottoni per gestire l'accorsion delle card
  • Senza bordi: nasconde il bordo grigio che compare di default sulle card
  • Card con ombra: applica alle card l'effetto ombra
  • Linee di separazione: inserisce delle linee verticali di separazione tra le card (utili per creare colonne di testo con divisori)
  • Bordi stondati: applica alle card l'effetto con andoli stondati in base alle impostazioni site editor
  • Layout con freccia: applica sul lato superiore delle card un taglio a forma di freccia (per enfatizzare l'effetto è utile creare contrasto tra lo sfondo delle card e quello del blocco, colorando o le une o l'altro)
  • Mobile carousel (con effetto visibile su dispositivi mobile): su dispositivi mobil fa in modo che le card si visualizzino non più una sotto l'altra ma in una slide a scorrimento orizzontale
  • Mobile carousel loop: come il Mobile carousel ,ma applica un loop allo scorrimento che quindi non avrà più un inizio e una fine
  • Altezza dinamica: 

Di seguito alcuni esempi (creati su card senza accordio e con semplice contenuto testuale)

b.2) Esempio: card senza bordi

I bordi delle card non sono visibili

Impostazione generale: Blocco fisso / Struttura a 3 colonne con 3 elementi
Sezioni editate: Intestazione
Stile del blocco:  Senza Bordi
Stile delle card: Nessuno stile specifico applicato

 

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

 

b.3) Esempio: card con separatori

Tra le card compaiono dei separatori verticali

Impostazione generale: Blocco fisso / Struttura a 3 colonne con 3 elementi
Sezioni editate: Intestazione
Stile del blocco:  Senza Bordi / Linee di separazione
Stile delle card: Nessuno stile specifico applicato

 

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

 

b.4) Esempio: card con ombra

le card hanno effetto ombra

Impostazione generale: Blocco fisso / Struttura a 3 colonne con 3 elementi
Sezioni editate: Intestazione
Stile del blocco: Senza bordi / Card con ombra
Stile delle card: Nessuno stile specifico applicato

 

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

 

b.5) ​Esempio: card con freccia e blocco padre con sfondo colorato

Impostazione generale: Blocco fisso / Struttura a 3 colonne con 3 elementi
Sezioni editate: Intestazione
Stile del blocco: Con freccia
Stile delle card: Nessuno stile specifico applicato

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

b.6) ​Esempio: card con sfondo trasparente e blocco padre con linee di separazione e sfondo colorato

Impostazione generale: Blocco fisso / Struttura a 3 colonne con 3 elementi
Sezioni editate: Intestazione e contenuto
Stile del blocco:  sfondo immagine sfondo
Stile delle card: sfondo  Transparent

I biglietti sono validi per la stagione 2026

I biglietti sono validi per la stagione 2026

I biglietti sono validi per la stagione 2026

 

b.7) ​Esempio: card con ombra / Sfondo colorato/ Immagine di sfondo

Impostazione generale: Blocco fisso / Struttura a 3 colonne con 3 elementi
Sezioni editate: Intestazione
Stile del blocco: Senza bordi / Card con ombra
Stile delle card: Sfondo / Sfondo (immagine)

 

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sei titolare di un Coupon Tuffati?
Acquista online il tuo biglietto a 13€ 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

b.8) ​Esempio: card sfondo colorato e blocco padre con sfondo colorato

Impostazione generale: Blocco fisso / Struttura a 2 colonne con 2 elementi
Sezioni editate: Intestazione e contenuto
Stile del blocco: Allinea al centro
Stile delle card: Sfondo

info@matematici.com

+39.334.68.45.216

b.9) ​Esempio: card con rollover icona

Impostazione generale: Blocco fisso / Struttura a 3 colonne con 3 elementi
Sezioni editate: lmmagine/ Intestazione
Stile delle card:  HomeGrid
Stile dei componenti: Nessuno

 

INDIRIZZO

Vua Spoleto, 7
00071 Pomezia (Roma)  
 

EMAIL

 Amministrazione: info@matematici.com
 Commerciale: commerciale@matematici.com
 Assistenza vendite: biglietteria@madeticket.it 

TELEFONO

Amministrazione: +39.334.68.45.216
Commerciale: +39.335.77.53.817
 

b.10) ​Esempio: bolocco con fondo colorato, card con rollover icona e freccia

Impostazione generale: Blocco fisso / Struttura a 3 colonne con 3 elementi
Sezioni editate: lmmagine/ Intestazione
Stile del blocco(hamburgerIcon):  HomeGrid
Stile delle card: Freccia
 

 

Calendario
scopri le date di apertura!
 

Servizi
scopri tutti i servizi al parco!
 

Food
scopri le nostre prelibatezze!
 

Mappa
scopri il parco, naviga la mappa!
 

c) Struttura a griglia

Scelta del numero di colonne

 È possibile comporre una scacchiera di box scegliendo il numero di colonnedella griglia (1/2/3/4). Gli elementi si ridimensionano di conseguenza

c.1) ​Esempio di griglia: 4 colonne

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

c.2) Esempio di griglia: 3 colonne

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

c.3) Esempio di griglia: 2 colonne

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

c.4) Esempio di griglia: 1 colonna

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

.

 

c.5) Esempio di blocco con stile: Carousel

Solo sulla versione mobile attiva lo scorrimento delle card

(il blocco ha l'impostazione di default con box fissi / struttura a 3 colonne)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo conseqrem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo conseqrem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo conseqrem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborex ea commodo consequat.